♻️ refactor article links, cards, and recent articles partials

assets/css/compiled/main.css

@@ -1224,6 +1224,10 @@ select {
   top: calc(100vh - 5.5rem);
 }
 
+.top-20 {
+  top: 5rem;
+}
+
 .top-0 {
   top: 0px;
 }
@@ -1232,10 +1236,6 @@ select {
   right: 0px;
 }
 
-.top-20 {
-  top: 5rem;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -1252,14 +1252,14 @@ select {
   margin: auto;
 }
 
-.m-2 {
-  margin: 0.5rem;
-}
-
 .m-1 {
   margin: 0.25rem;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -1346,14 +1346,6 @@ select {
   margin-bottom: 1.25rem;
 }
 
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .mr-3 {
   margin-right: 0.75rem;
 }
@@ -1382,10 +1374,6 @@ select {
   margin-bottom: 0.25rem;
 }
 
-.mb-10 {
-  margin-bottom: 2.5rem;
-}
-
 .-mb-1 {
   margin-bottom: -0.25rem;
 }
@@ -1394,10 +1382,18 @@ select {
   margin-left: 0.5rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
 
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
 .\!mb-9 {
   margin-bottom: 2.25rem !important;
 }
@@ -1406,6 +1402,10 @@ select {
   margin-top: 5rem;
 }
 
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .-mr-2 {
   margin-right: -0.5rem;
 }
@@ -1462,10 +1462,6 @@ select {
   height: 3rem;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-24 {
   height: 6rem;
 }
@@ -1474,6 +1470,10 @@ select {
   height: 2rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-\[120px\] {
   height: 120px;
 }
@@ -1550,10 +1550,6 @@ select {
   min-width: 0px;
 }
 
-.min-w-full {
-  min-width: 100%;
-}
-
 .min-w-\[1\.8rem\] {
   min-width: 1.8rem;
 }
@@ -1562,6 +1558,10 @@ select {
   min-width: 220px;
 }
 
+.min-w-full {
+  min-width: 100%;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -1707,14 +1707,14 @@ select {
   border-radius: 9999px;
 }
 
-.rounded {
-  border-radius: 0.25rem;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -1757,16 +1757,16 @@ 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));
 }
 
+.border-neutral-200 {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
+}
+
 .border-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-primary-500), var(--tw-border-opacity));
@@ -1786,14 +1786,14 @@ select {
   background-color: rgba(var(--color-neutral), 0.5);
 }
 
-.bg-transparent {
-  background-color: transparent;
-}
-
 .bg-neutral-500\/50 {
   background-color: rgba(var(--color-neutral-500), 0.5);
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-neutral-100 {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-100), var(--tw-bg-opacity));
@@ -1915,16 +1915,6 @@ select {
   padding-bottom: 2rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1940,6 +1930,11 @@ select {
   padding-bottom: 2.5rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1960,6 +1955,11 @@ select {
   padding-bottom: 1.5rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .py-16 {
   padding-top: 4rem;
   padding-bottom: 4rem;
@@ -1973,6 +1973,10 @@ select {
   padding-top: 0.75rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1985,10 +1989,6 @@ select {
   padding-left: 0.5rem;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
 .pl-\[24px\] {
   padding-left: 24px;
 }
@@ -2134,16 +2134,16 @@ select {
   color: rgba(var(--color-neutral-800), var(--tw-text-opacity));
 }
 
-.text-primary-500 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-500), var(--tw-text-opacity));
-}
-
 .text-primary-700 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-700), var(--tw-text-opacity));
 }
 
+.text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-500), var(--tw-text-opacity));
+}
+
 .text-primary-400 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-400), var(--tw-text-opacity));
@@ -2178,14 +2178,14 @@ select {
   text-decoration-line: none !important;
 }
 
-.decoration-primary-500 {
-  text-decoration-color: rgba(var(--color-primary-500), 1);
-}
-
 .decoration-neutral-300 {
   text-decoration-color: rgba(var(--color-neutral-300), 1);
 }
 
+.decoration-primary-500 {
+  text-decoration-color: rgba(var(--color-primary-500), 1);
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -2206,18 +2206,18 @@ select {
   mix-blend-mode: multiply;
 }
 
-.shadow-2xl {
-  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -3122,10 +3122,6 @@ body:has(#menu-controller:checked) {
   left: -1.5rem;
 }
 
-[dir="ltr"] .ltr\:ml-2 {
-  margin-left: 0.5rem;
-}
-
 [dir="ltr"] .ltr\:mr-4 {
   margin-right: 1rem;
 }
@@ -3134,6 +3130,10 @@ body:has(#menu-controller:checked) {
   margin-left: -1.25rem;
 }
 
+[dir="ltr"] .ltr\:ml-2 {
+  margin-left: 0.5rem;
+}
+
 [dir="ltr"] .ltr\:mr-14 {
   margin-right: 3.5rem;
 }
@@ -3178,10 +3178,6 @@ body:has(#menu-controller:checked) {
   right: -1.5rem;
 }
 
-[dir="rtl"] .rtl\:mr-2 {
-  margin-right: 0.5rem;
-}
-
 [dir="rtl"] .rtl\:ml-4 {
   margin-left: 1rem;
 }
@@ -3190,6 +3186,10 @@ body:has(#menu-controller:checked) {
   margin-right: -1.25rem;
 }
 
+[dir="rtl"] .rtl\:mr-2 {
+  margin-right: 0.5rem;
+}
+
 [dir="rtl"] .rtl\:ml-14 {
   margin-left: 3.5rem;
 }
@@ -3239,16 +3239,16 @@ body:has(#menu-controller:checked) {
   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-primary-600 {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-primary-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\:bg-neutral-800 {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-800), var(--tw-bg-opacity));

exampleSite/content/docs/advanced-customisation/index.md

@@ -35,7 +35,7 @@ As long as you follow this simple practice, you will always be able to update th
 
 Hugo has various builtin methods to resize, crop and optimize images.
 
-As an example - in `layouts/partials/article-link-card.html`, you have the following code:
+As an example - in `layouts/partials/article-link/card.html`, you have the following code:
 
 ```go
 {{ with .Fill "600x600" }}
@@ -170,7 +170,7 @@ In order to take advantage of the default configuration, your project should loo
 │       └── _index.md
 ├── layouts  # custom layouts for your site
 │   ├── partials
-│   │   └── extend-article-link.html
+│   │   └── extend-article-link/simple.html
 │   ├── projects
 │   │   └── list.html
 │   └── shortcodes

exampleSite/content/docs/homepage-layout/index.md

@@ -66,7 +66,7 @@ To enable the Custom layout, set `homepage.layout = "custom"` in the `params.tom
 
 With the configuration value set, create a new `custom.html` file and place it in `layouts/partials/home/custom.html`. Now whatever is in the `custom.html` file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.
 
-To include [recent articles](#recent-articles) on the custom layout, use the `recent-articles.html` partial.
+To include [recent articles](#recent-articles) on the custom layout, use the `recent-articles/main.html` partial.
 
 As an example, the [homepage]({{< ref "/" >}}) on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the [GitHub repo](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) to see how it works.
 

exampleSite/layouts/partials/recent-articles-demo.html

@@ -18,15 +18,15 @@
 </div>
 
 <div id="CardViewScreenWidth" class="">
-    {{ partial "recent-articles-cardview-fullwidth.html" . }}
+    {{ partial "recent-articles/cardview-fullwidth.html" . }}
 </div>
 
 <div id="CardViewProse" class="hidden h-full">
-    {{ partial "recent-articles-cardview.html" . }}
+    {{ partial "recent-articles/cardview.html" . }}
 </div>
 
 <div id="NormalView" class="hidden h-full">
-    {{ partial "recent-articles-list.html" . }}
+    {{ partial "recent-articles/list.html" . }}
 </div>
 
 {{ if .Site.Params.homepage.showMoreLink | default false }}

layouts/_default/list.html

@@ -17,7 +17,7 @@
   {{ end }}
   <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
   <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
-    {{ partial "article-meta-list.html" (dict "context" . "scope" "single") }}
+    {{ partial "article-meta/list.html" (dict "context" . "scope" "single") }}
   </div>
   </header>
   <section class="{{ if $toc -}}
@@ -59,7 +59,7 @@
       </h2>
       {{ end }}
       {{ range .Pages }}
-      {{ partial "article-link.html" . }}
+      {{ partial "article-link/simple.html" . }}
       {{ end }}
       {{ end }}
     </section>
@@ -74,7 +74,7 @@
         </h2>
         <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
           {{ range .Pages }}
-          {{ partial "article-link-card.html" . }}
+          {{ partial "article-link/card.html" . }}
           {{ end }}
         </section>
       {{ end }}
@@ -84,7 +84,7 @@
         <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
           {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
           {{ range .Pages }}
-          {{ partial "article-link-card.html" . }}
+          {{ partial "article-link/card.html" . }}
           {{ end }}
           {{ end }}
         </section>
@@ -102,7 +102,7 @@
           </h2>
           <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
             {{ range .Pages }}
-            {{ partial "article-link-card.html" . }}
+            {{ partial "article-link/card.html" . }}
             {{ end }}
           </section>
         </div>
@@ -114,7 +114,7 @@
           <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
             {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
             {{ range .Pages }}
-            {{ partial "article-link-card.html" . }}
+            {{ partial "article-link/card.html" . }}
             {{ end }}
             {{ end }}
           </section>

layouts/_default/single.html

@@ -19,7 +19,7 @@
       {{ .Title | emojify }}
     </h1>
     <div class="mt-1 mb-6 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
-      {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
+      {{ partial "article-meta/basic.html" (dict "context" . "scope" "single") }}
     </div>
   </header>
   <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">

layouts/_default/taxonomy.html

@@ -19,7 +19,7 @@
     {{ end }}
     <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
     <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
-      {{ partial "article-meta-taxonomy.html" (dict "context" . "scope" "single") }}
+      {{ partial "article-meta/taxonomy.html" (dict "context" . "scope" "single") }}
     </div>
   </header>
   {{ if .Content }}

layouts/_default/term.html

@@ -17,7 +17,7 @@
   {{ end }}
   <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
   <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
-    {{ partial "article-meta-term.html" (dict "context" . "scope" "single") }}
+    {{ partial "article-meta/term.html" (dict "context" . "scope" "single") }}
   </div>
   </header>
 
@@ -53,7 +53,7 @@
     </h2>
     {{ end }}
     {{ range .Pages }}
-    {{ partial "article-link.html" . }}
+    {{ partial "article-link/simple.html" . }}
     {{ end }}
     {{ end }}
   </section>
@@ -68,7 +68,7 @@
   </h2>
   <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
     {{ range .Pages }}
-    {{ partial "article-link-card.html" . }}
+    {{ partial "article-link/card.html" . }}
     {{ end }}
   </section>
   {{ end }}
@@ -78,7 +78,7 @@
   <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
     {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
     {{ range .Pages }}
-    {{ partial "article-link-card.html" . }}
+    {{ partial "article-link/card.html" . }}
     {{ end }}
     {{ end }}
   </section>
@@ -96,7 +96,7 @@
     </h2>
     <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
       {{ range .Pages }}
-      {{ partial "article-link-card.html" . }}
+      {{ partial "article-link/card.html" . }}
       {{ end }}
     </section>
   </div>
@@ -108,7 +108,7 @@
     <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
       {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
       {{ range .Pages }}
-      {{ partial "article-link-card.html" . }}
+      {{ partial "article-link/card.html" . }}
       {{ end }}
       {{ end }}
     </section>

layouts/partials/article-link/card.html

@@ -48,7 +48,7 @@
         {{ end }}
 
         <div class="text-sm text-neutral-500 dark:text-neutral-400">
-          {{ partial "article-meta.html" . }}
+          {{ partial "article-meta/basic.html" . }}
         </div>
 
         {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}

layouts/partials/article-link/simple.html

@@ -69,7 +69,7 @@
         {{ end }}
       </div>
       <div class="text-sm text-neutral-500 dark:text-neutral-400">
-        {{ partial "article-meta.html" . }}
+        {{ partial "article-meta/basic.html" . }}
       </div>
       {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
       <div class="py-1 prose dark:prose-invert">

layouts/partials/home/background.html

@@ -54,7 +54,7 @@
     </div>
 </article>
 <section>
-    {{ partial "recent-articles.html" . }}
+    {{ partial "recent-articles/main.html" . }}
 </section>
 {{ if .Site.Params.homepage.layoutBackgroundBlur | default false }}
 <div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>

layouts/partials/home/card.html

@@ -27,5 +27,5 @@
     </div>
 </div>
 <section>
-    {{ partial "recent-articles.html" . }}
+    {{ partial "recent-articles/main.html" . }}
 </section>

layouts/partials/home/hero.html

@@ -51,5 +51,5 @@
     </div>
 </article>
 <section>
-    {{ partial "recent-articles.html" . }}
+    {{ partial "recent-articles/main.html" . }}
 </section>

layouts/partials/home/page.html

@@ -7,5 +7,5 @@
   <section>{{ .Content | emojify }}</section>
 </article>
 <section>
-  {{ partial "recent-articles.html" . }}
+  {{ partial "recent-articles/main.html" . }}
 </section>

layouts/partials/home/profile.html

@@ -32,5 +32,5 @@
   <section class="prose dark:prose-invert">{{ .Content | emojify }}</section>
 </article>
 <section>
-  {{ partial "recent-articles.html" . }}
+  {{ partial "recent-articles/main.html" . }}
 </section>

layouts/partials/recent-articles/cardview-fullwidth.html

@@ -6,7 +6,7 @@
     class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
     {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
     .Site.Params.mainSections)).Pages }}
-    {{ partial "article-link-card.html" . }}
+    {{ partial "article-link/card.html" . }}
     {{ end }}
   </section>
 </div>

layouts/partials/recent-articles/cardview.html

@@ -4,6 +4,6 @@
 <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
   {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
   .Site.Params.mainSections)).Pages }}
-  {{ partial "article-link-card.html" . }}
+  {{ partial "article-link/card.html" . }}
   {{ end }}
 </section>

layouts/partials/recent-articles/list.html

@@ -4,6 +4,6 @@
 <section class="space-y-10 w-full">
   {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages
   }}
-  {{ partial "article-link.html" . }}
+  {{ partial "article-link/simple.html" . }}
   {{ end }}
 </section>

layouts/partials/recent-articles/main.html

@@ -7,11 +7,11 @@
 <h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
 
 {{ if and .Site.Params.homepage.cardView (not .Site.Params.homepage.cardViewScreenWidth) | default false }}
-  {{ partial "recent-articles-cardview.html" . }}
+  {{ partial "recent-articles/cardview.html" . }}
 {{ else if and .Site.Params.homepage.cardView .Site.Params.homepage.cardViewScreenWidth | default false }}
-  {{ partial "recent-articles-cardview-fullwidth.html" . }}
+  {{ partial "recent-articles/cardview-fullwidth.html" . }}
 {{ else }}
-  {{ partial "recent-articles-list.html" . }}
+  {{ partial "recent-articles/list.html" . }}
 {{ end }}
 
 {{ if .Site.Params.homepage.showMoreLink | default false }}

layouts/shortcodes/article.html

@@ -3,7 +3,7 @@
     {{ $RelPermalink := .Get "link" }}
     {{ range ( where .Site.RegularPages "RelPermalink" $RelPermalink | first 1 ) }}
         {{ if not (eq .RelPermalink $parent) }}
-            {{ partial "article-link.html" . }}
+            {{ partial "article-link/simple.html" . }}
         {{ end }}
     {{end}}
 </section>

layouts/shortcodes/list.html

@@ -8,13 +8,13 @@
     {{ if $where }}
         {{ range ( where .Site.RegularPages $where $value | first 1 ) }}
             {{ if not (eq .RelPermalink $parent) }}
-                {{ partial "article-link.html" . }}
+                {{ partial "article-link/simple.html" . }}
             {{ end }}
         {{end}}
     {{ else }}
         {{ range .Site.RegularPages | first $limit }}
             {{ if not (eq .RelPermalink $parent) }}
-                {{ partial "article-link.html" . }}
+                {{ partial "article-link/simple.html" . }}
             {{ end }}
         {{end}}
     {{ end }}