✨Taxonomy add card view

layouts/_default/taxonomy.html

@@ -36,23 +36,25 @@
   {{ $jsPage := resources.Get "js/page.js" }}
   {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint "sha512" }}
   <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
-  <section class="flex flex-wrap max-w-prose -mx-2 overflow-hidden">
+  
+
+  {{ if .Site.Params.taxonomy.cardView }}
+
+  <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
     {{ range .Data.Terms }}
-      <article class="w-full px-2 my-3 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/4">
-        <h2 class="flex items-center">
-          <a
-            class="text-xl font-medium decoration-primary-500 hover:underline hover:underline-offset-2"
-            href="{{ .Page.RelPermalink }}"
-            >{{ .Page.Title }}</a
-          >
-          {{ if $.Site.Params.taxonomy.showTermCount | default true }}
-            <span class="px-2 text-base text-primary-500">&middot;</span>
-            <span class="text-base text-neutral-400">
-              {{ .Count }}
-            </span>
-          {{ end }}
-        </h2>
-      </article>
+    {{ partial "term-link/card.html" . }}
     {{ end }}
   </section>
+
+  {{ else }}
+
+  <section class="flex flex-wrap max-w-prose -mx-2 overflow-hidden">
+    {{ range .Data.Terms }}
+      {{ partial "term-link/text.html" . }}
+    {{ end }}
+  </section>
+
+  {{ end }}
+
+
 {{ end }}

layouts/partials/term-link/card.html

@@ -0,0 +1,46 @@
+<a href="{{ .Page.RelPermalink }}" class="min-w-full">
+  <div
+    class="border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
+
+    {{- with site.Params.images -}}
+    {{- range first 6 . }}
+    <meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
+    {{- else -}}
+    {{- $images := .Page.Resources.ByType "image" -}}
+    {{- $featured := $images.GetMatch "*feature*" -}}
+    {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+    {{- with $featured -}}
+    {{ with .Fill "600x600" }}
+    <div class="w-full thumbnail_card_term nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+    {{ end }}
+    {{- else -}}
+    {{- with site.Params.images }}
+    <meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
+    {{- end -}}
+    {{- end -}}
+
+
+    {{ if site.Params.taxonomy.showTermCount | default true }}
+    <span class="absolute bottom-0 right-0 m-2">
+      <span class="flex">
+        <span
+          class="rounded-md border backdrop-blur border-primary-400 px-1 py-[1px] text-xl font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
+        >
+        {{ .Count }}
+        </span>
+      </span>
+    </span>
+    {{ end }}
+
+    <div class="px-6 py-4">
+
+      <div
+        class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
+      >{{ .Page.Title | emojify }}</div>
+
+    </div>
+    <div class="px-6 pt-4 pb-2">
+
+    </div>
+  </div>
+</a>

layouts/partials/term-link/text.html

@@ -0,0 +1,15 @@
+<article class="w-full px-2 my-3 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/4">
+    <h2 class="flex items-center">
+      <a
+        class="text-xl font-medium decoration-primary-500 hover:underline hover:underline-offset-2"
+        href="{{ .Page.RelPermalink }}"
+        >{{ .Page.Title }}</a
+      >
+      {{ if site.Params.taxonomy.showTermCount | default true }}
+        <span class="px-2 text-base text-primary-500">&middot;</span>
+        <span class="text-base text-neutral-400">
+          {{ .Count }}
+        </span>
+      {{ end }}
+    </h2>
+  </article>