implemented card gallery for lists

2026-01-30 16:31:52 +01:00 · 2022-11-05 15:11:20 +00:00
parent d2dcbf8830
commit f2d3ff1572
16 changed files with 430 additions and 107 deletions
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,49 +1,111 @@
 {{ define "main" }}
-  {{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in .TableOfContents "<ul") }}
-  <header>
-    {{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
-      {{ partial "breadcrumbs.html" . }}
-    {{ end }}
-    <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
+{{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in
+.TableOfContents "<ul") }} <header>
+  {{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
+  {{ partial "breadcrumbs.html" . }}
+  {{ end }}
+  <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
  </header>
-  <section
-    class="{{ if $toc -}}
+  <section class="{{ if $toc -}}
      mt-12
    {{- else -}}
      mt-0
-    {{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row"
-  >
+    {{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row">
    {{ if $toc }}
-      <div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
-        <div class="toc ltr:pl-5 rtl:pr-5 lg:sticky lg:top-10">
-          {{ partial "toc.html" . }}
-        </div>
+    <div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
+      <div class="toc ltr:pl-5 rtl:pr-5 lg:sticky lg:top-10">
+        {{ partial "toc.html" . }}
      </div>
+    </div>
    {{ end }}
    <div class="min-w-0 min-h-0 max-w-prose">
      {{ .Content | emojify }}
    </div>
  </section>
  {{ if gt .Pages 0 }}
-    <section class="space-y-10 w-full">
-      {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
-        {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
-          <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
+
+  {{ if .Site.Params.list.cardView | default false }}
+
+  {{ $cardViewScreenWidth := .Site.Params.list.cardViewScreenWidth}}
+
+  {{ if not $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+
+  {{ if $cardViewScreenWidth }}
+  <section class="relative w-screen" style="left: calc(-50vw + 50%);">
+    <div class="flex flex-wrap pl-8 pr-8">
+      {{ else }}
+      <section class="w-full">
+        <div class="flex flex-wrap">
+          {{ end }}
+
+          {{ end }}
+
+
+
+          {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+          {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+          <h2 class="mt-12 mb-5 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
            {{ .Key }}
          </h2>
-          <hr class="border-dotted w-36 border-neutral-400" />
-        {{ end }}
-        {{ range .Pages }}
-          {{ partial "article-link.html" . }}
-        {{ end }}
-      {{ end }}
-    </section>
-    {{ partial "pagination.html" . }}
-  {{ else }}
-    <section class="mt-10 prose dark:prose-invert">
-      <p class="py-8 border-t">
-        <em>{{ i18n "list.no_articles" | emojify }}</em>
-      </p>
-    </section>
-  {{ end }}
-{{ end }}
+          {{ else }}
+          {{ end }}
+
+          {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+
+          {{ if $cardViewScreenWidth}}
+          <section class="relative w-screen" style="left: calc(-50vw + 50%);">
+            <div class="flex flex-wrap pl-8 pr-8">
+              {{ else }}
+              <section class="w-full">
+                <div class="flex flex-wrap">
+                  {{ end }}
+                  {{ end }}
+
+                  {{ range .Pages }}
+
+                  {{ if $cardViewScreenWidth }}
+                  <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
+                    {{ else }}
+                    <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
+                      {{ end }}
+
+                      {{ partial "article-link-card.html" . }}
+                    </div>
+                    {{ end }}
+                    {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+                  </div>
+              </section>
+              {{ end }}
+
+
+              {{ end }}
+
+              {{ if not $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+            </div>
+          </section>
+          {{ end }}
+
+          {{ else }}
+          <section class="space-y-10 w-full">
+            {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
+            {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
+            <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
+              {{ .Key }}
+            </h2>
+            {{ end }}
+            {{ range .Pages }}
+            {{ partial "article-link.html" . }}
+            {{ end }}
+            {{ end }}
+          </section>
+          {{ partial "pagination.html" . }}
+          {{ end }}
+
+          {{ else }}
+          <section class="mt-10 prose dark:prose-invert">
+            <p class="py-8 border-t">
+              <em>{{ i18n "list.no_articles" | emojify }}</em>
+            </p>
+          </section>
+          {{ end }}
+          {{ end }}
--- a/layouts/partials/article-link-card.html
+++ b/layouts/partials/article-link-card.html
@@ -0,0 +1,64 @@
+{{ with .Params.externalUrl }}
+<a href="{{ . }}" target="_blank" rel="external" class="min-w-full">
+  {{ else }}
+  <a href="{{ .RelPermalink }}" class="min-w-full">
+    {{ end }}
+    <div class="border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
+
+      {{- 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="w-full thumbnail_card 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 and .Draft .Site.Params.article.showDraftLabel }}
+      <span class="absolute top-0 right-0 m-2">
+        {{ partial "badge.html" (i18n "article.draft" | emojify) }}
+      </span>
+      {{ end }}
+
+      <div class="px-6 py-4">
+
+        {{ with .Params.externalUrl }}
+        <div>
+          <div
+            class="font-bold text-xl 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="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
+          href="{{ .RelPermalink }}">{{ .Title | emojify }}</div>
+        {{ end }}
+
+        <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>
+      <div class="px-6 pt-4 pb-2">
+
+      </div>
+    </div>
+  </a>
--- a/layouts/partials/article-link.html
+++ b/layouts/partials/article-link.html
@@ -45,7 +45,7 @@
        {{ with .Params.externalUrl }}
        <div>
          <div
-            class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
+            class="font-bold text-xl 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>
@@ -54,7 +54,7 @@
          </div>
        </div>
        {{ else }}
-        <div class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
+        <div class="font-bold text-xl 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 }}
--- a/layouts/partials/recent-articles.html
+++ b/layouts/partials/recent-articles.html
@@ -5,21 +5,48 @@
 {{ $recentArticles = .Site.Params.homepage.showRecentItems }}
 {{ end }}
 <h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
-<section class="space-y-10 w-full">
-  {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages }}
-  {{ partial "article-link.html" . }}
-  {{ end }}
-</section>
-{{ if .Site.Params.homepage.showMoreLink | default false }}
-{{ if index .Site.Params.homepage "showRecentItems" }}
-{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
-{{ end }}
-<div class="mt-10 flex justify-center">
-  <a href="{{ $showMoreLinkDest }}">
-    <button
-      class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">Show
-      More</button>
-  </a>
-</div>
-{{ end }}
-{{ end }}
+
+{{ if .Site.Params.homepage.cardView | default false }}
+{{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
+<section class="relative w-screen" style="left: calc(-50vw + 50%);">
+  <div class="flex flex-wrap pl-8 pr-8">
+    {{ else }}
+    <section class="w-full">
+      <div class="flex flex-wrap">
+        {{ end }}
+
+        {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
+        .Site.Params.mainSections)).Pages }}
+
+        {{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
+        <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
+          {{ else }}
+          <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
+            {{ end }}
+
+            {{ partial "article-link-card.html" . }}
+          </div>
+          {{ end }}
+        </div>
+    </section>
+    {{ else }}
+    <section class="space-y-10 w-full">
+      {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages
+      }}
+      {{ partial "article-link.html" . }}
+      {{ end }}
+    </section>
+    {{ end }}
+    {{ if .Site.Params.homepage.showMoreLink | default false }}
+    {{ if index .Site.Params.homepage "showRecentItems" }}
+    {{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
+    {{ end }}
+    <div class="mt-10 flex justify-center">
+      <a href="{{ $showMoreLinkDest }}">
+        <button
+          class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">Show
+          More</button>
+      </a>
+    </div>
+    {{ end }}
+    {{ end }}