making my own article-link partial

assets/css/compiled/main.css

@@ -1495,6 +1495,10 @@ select {
   margin-top: 2.5rem;
 }
 
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .-mr-2 {
   margin-right: -0.5rem;
 }
@@ -1543,10 +1547,6 @@ select {
   margin-bottom: 1.5rem;
 }
 
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1623,6 +1623,10 @@ select {
   display: none;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -1635,10 +1639,6 @@ select {
   height: 50%;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-36 {
   height: 9rem;
 }
@@ -1695,6 +1695,10 @@ select {
   width: 1.5rem;
 }
 
+.w-auto {
+  width: auto;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1756,14 +1760,14 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .cursor-default {
   cursor: default;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .list-none {
   list-style-type: none;
 }
@@ -1845,14 +1849,18 @@ select {
   scroll-behavior: smooth;
 }
 
-.rounded-full {
-  border-radius: 9999px;
-}
-
 .rounded-xl {
   border-radius: 0.75rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-2xl {
   border-radius: 1rem;
 }
@@ -1865,10 +1873,6 @@ select {
   border-radius: 0.25rem;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .\!rounded-md {
   border-radius: 0.375rem !important;
 }
@@ -1894,6 +1898,11 @@ select {
   border-style: dotted;
 }
 
+.border-neutral-200 {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
+}
+
 .border-neutral-400 {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity));
@@ -1904,11 +1913,6 @@ select {
   border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity));
 }
 
-.border-neutral-200 {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
-}
-
 .border-primary-400 {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-primary-400), var(--tw-border-opacity));
@@ -2018,6 +2022,10 @@ select {
      object-position: left;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -2026,10 +2034,6 @@ select {
   padding: 0px;
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
 .p-1 {
   padding: 0.25rem;
 }
@@ -2044,6 +2048,11 @@ select {
   padding-bottom: 2rem;
 }
 
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2059,6 +2068,11 @@ select {
   padding-right: 1.5rem;
 }
 
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
 .py-16 {
   padding-top: 4rem;
   padding-bottom: 4rem;
@@ -2074,11 +2088,6 @@ select {
   padding-right: 0.75rem;
 }
 
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2104,16 +2113,6 @@ select {
   padding-bottom: 0.75rem;
 }
 
-.px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
-
-.px-28 {
-  padding-left: 7rem;
-  padding-right: 7rem;
-}
-
 .pt-8 {
   padding-top: 2rem;
 }
@@ -2146,10 +2145,6 @@ select {
   padding-top: 1rem;
 }
 
-.pt-5 {
-  padding-top: 1.25rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -2171,9 +2166,14 @@ select {
   line-height: 2.5rem;
 }
 
-.text-base {
+.text-xl {
-  font-size: 1rem;
+  font-size: 1.25rem;
-  line-height: 1.5rem;
+  line-height: 1.75rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 
 .text-sm {
@@ -2181,9 +2181,14 @@ select {
   line-height: 1.25rem;
 }
 
-.text-xl {
+.text-base {
-  font-size: 1.25rem;
+  font-size: 1rem;
-  line-height: 1.75rem;
+  line-height: 1.5rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 
 .text-2xl {
@@ -2196,24 +2201,18 @@ select {
   line-height: 1.75rem;
 }
 
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
 .text-\[0\.6rem\] {
   font-size: 0.6rem;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .font-extrabold {
   font-weight: 800;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -2222,10 +2221,6 @@ select {
   font-weight: 700;
 }
 
-.font-semibold {
-  font-weight: 600;
-}
-
 .font-normal {
   font-weight: 400;
 }
@@ -2238,6 +2233,10 @@ select {
   font-style: italic;
 }
 
+.leading-loose {
+  line-height: 2;
+}
+
 .leading-7 {
   line-height: 1.75rem;
 }
@@ -2250,25 +2249,31 @@ select {
   line-height: .75rem;
 }
 
-.leading-loose {
-  line-height: 2;
-}
-
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-900), var(--tw-text-opacity));
 }
 
-.text-neutral-700 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
-}
-
 .text-neutral-800 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-800), var(--tw-text-opacity));
 }
 
+.text-neutral-400 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
+}
+
+.text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
+}
+
+.text-neutral-700 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
+}
+
 .text-primary-300 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-300), var(--tw-text-opacity));
@@ -2284,16 +2289,6 @@ select {
   color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
 }
 
-.text-neutral-500 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
-}
-
-.text-neutral-400 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
-}
-
 .text-primary-600 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-600), var(--tw-text-opacity));
@@ -2327,14 +2322,14 @@ select {
   text-decoration-color: rgba(var(--color-primary-500), 1);
 }
 
-.decoration-neutral-300 {
-  text-decoration-color: rgba(var(--color-neutral-300), 1);
-}
-
 .decoration-secondary-500 {
   text-decoration-color: rgba(var(--color-secondary-500), 1);
 }
 
+.decoration-neutral-300 {
+  text-decoration-color: rgba(var(--color-neutral-300), 1);
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -3225,14 +3220,14 @@ body:has(#menu-controller:checked) {
   left: -1.5rem;
 }
 
-[dir="ltr"] .ltr\:mr-14 {
-  margin-right: 3.5rem;
-}
-
 [dir="ltr"] .ltr\:ml-2 {
   margin-left: 0.5rem;
 }
 
+[dir="ltr"] .ltr\:mr-14 {
+  margin-right: 3.5rem;
+}
+
 [dir="ltr"] .ltr\:mr-4 {
   margin-right: 1rem;
 }
@@ -3281,14 +3276,14 @@ body:has(#menu-controller:checked) {
   right: -1.5rem;
 }
 
-[dir="rtl"] .rtl\:ml-14 {
-  margin-left: 3.5rem;
-}
-
 [dir="rtl"] .rtl\:mr-2 {
   margin-right: 0.5rem;
 }
 
+[dir="rtl"] .rtl\:ml-14 {
+  margin-left: 3.5rem;
+}
+
 [dir="rtl"] .rtl\:ml-4 {
   margin-left: 1rem;
 }
@@ -3337,16 +3332,16 @@ body:has(#menu-controller:checked) {
   display: none;
 }
 
-.dark .dark\:border-neutral-600 {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--color-neutral-600), var(--tw-border-opacity));
-}
-
 .dark .dark\:border-neutral-700 {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-neutral-700), var(--tw-border-opacity));
 }
 
+.dark .dark\:border-neutral-600 {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--color-neutral-600), var(--tw-border-opacity));
+}
+
 .dark .dark\:border-primary-600 {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-primary-600), var(--tw-border-opacity));
@@ -3447,6 +3442,16 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral), var(--tw-text-opacity));
 }
 
+.dark .dark\:text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
+}
+
+.dark .dark\:text-neutral-400 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
+}
+
 .dark .dark\:text-neutral-200 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
@@ -3457,16 +3462,6 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
 }
 
-.dark .dark\:text-neutral-400 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
-}
-
-.dark .dark\:text-neutral-500 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
-}
-
 .dark .dark\:text-primary-400 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-400), var(--tw-text-opacity));
@@ -3586,11 +3581,6 @@ body:has(#menu-controller:checked) {
     padding-bottom: 6rem;
   }
 
-  .sm\:px-24 {
-    padding-left: 6rem;
-    padding-right: 6rem;
-  }
-
   .sm\:pt-10 {
     padding-top: 2.5rem;
   }
@@ -3622,14 +3612,6 @@ body:has(#menu-controller:checked) {
 }
 
 @media (min-width: 853px) {
-  .md\:ml-12 {
-    margin-left: 3rem;
-  }
-
-  .md\:-mr-16 {
-    margin-right: -4rem;
-  }
-
   .md\:mr-7 {
     margin-right: 1.75rem;
   }
@@ -3638,6 +3620,14 @@ body:has(#menu-controller:checked) {
     margin-top: 0px;
   }
 
+  .md\:ml-12 {
+    margin-left: 3rem;
+  }
+
+  .md\:-mr-16 {
+    margin-right: -4rem;
+  }
+
   .md\:flex {
     display: flex;
   }
@@ -3658,6 +3648,10 @@ body:has(#menu-controller:checked) {
     width: auto;
   }
 
+  .md\:w-full {
+    width: 100%;
+  }
+
   .md\:columns-2 {
     -moz-columns: 2;
          columns: 2;

layouts/partials/article-link.html

@@ -0,0 +1,81 @@
+
+{{ $articleClasses := "flex flex-wrap article" }}
+{{ if .Site.Params.list.showCards }}
+{{ $articleClasses = delimit (slice $articleClasses "border" "border-neutral-200 dark:border-neutral-700 border-2 rounded-xl") " thumbnailshadow " }}
+{{ end }}
+
+{{ $articleImageClasses := "w-10px md:w-1/3 h-full object-cover thumbnail nozoom" }}
+{{ if .Site.Params.list.showCards }}
+{{ $articleImageClasses = delimit (slice $articleImageClasses "rounded-lg") " " }}
+{{ else }}
+{{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }}
+{{ end }}
+
+{{ $articleInnerClasses := "" }}
+{{ if .Site.Params.list.showCards }}
+{{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-4") " " }}
+{{ else }}
+{{ $articleInnerClasses = delimit (slice $articleInnerClasses "mt-3 md:mt-0") " " }}
+{{ end }}
+
+{{ with .Params.externalUrl }}
+<a class="{{ $articleClasses }}" href="{{ . }}" target="_blank" rel="external">
+  {{ else }}
+  <a class="{{ $articleClasses }}" href="{{ .RelPermalink }}">
+    {{ end }}
+    {{- with $.Params.images -}}
+    {{- range first 6 . }}
+    <meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
+    {{- else -}}
+    {{- $images := $.Resources.ByType "image" -}}
+    {{- $featured := $images.GetMatch "*feature*" -}}
+    {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+    {{- with $featured -}}
+    {{ with .Resize "600x" }}
+    <div class="{{ $articleImageClasses }}">
+      <image class="{{ $articleImageClasses }} object-scale-down" src="{{ .RelPermalink }}"></image>
+    </div>
+    {{ end }}
+    {{- else -}}
+    {{- with $.Site.Params.images }}
+    <meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
+    {{- end -}}
+    {{- end -}}
+
+
+    <div class="{{ $articleInnerClasses }}">
+      <div class="items-center text-xl font-semibold">
+        {{ with .Params.externalUrl }}
+        <div>
+          <div
+            class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
+            {{ $.Title | emojify }}
+            <span class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500">
+              <span class="rtl:hidden">&#8599;</span>
+              <span class="ltr:hidden">&#8598;</span>
+            </span>
+          </div>
+        </div>
+        {{ else }}
+        <div class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
+          href="{{ .RelPermalink }}">{{ .Title | emojify }}</div>
+        {{ end }}
+        {{ if and .Draft .Site.Params.article.showDraftLabel }}
+        <div class=" ltr:ml-2 rtl:mr-2">
+          {{ partial "badge.html" (i18n "article.draft" | emojify) }}
+        </div>
+        {{ end }}
+        {{ if templates.Exists "partials/extend-article-link.html" }}
+        {{ partial "extend-article-link.html" . }}
+        {{ end }}
+      </div>
+      <div class="text-sm text-neutral-500 dark:text-neutral-400">
+        {{ partial "article-meta.html" . }}
+      </div>
+      {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
+      <div class="py-1 prose dark:prose-invert">
+        {{ .Summary | emojify }}
+      </div>
+      {{ end }}
+    </div>
+  </a>

package.json

@@ -5,6 +5,6 @@
   "scripts": {
     "server": "hugo server --noHTTPCache ",
     "dev": "NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
-    "build": "NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit"
+    "build": "rm -rf public && NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit && hugo --gc --minify"
   }
 }