feat: add date-title-summary view

modules/blox-tailwind/i18n/en.yaml

@@ -122,6 +122,9 @@
 
 # Pages widget
 
+- id: read_more
+  translation: Read more
+
 - id: more_pages
   translation: See all
 

modules/blox-tailwind/i18n/zh.yaml

@@ -122,6 +122,9 @@
 
 # Pages widget
 
+- id: read_more
+  translation: 阅读文章
+
 - id: more_pages
   translation: 查看全部
 

modules/blox-tailwind/layouts/_default/list.html

@@ -1,38 +1,25 @@
 {{ define "main" }}
 
-<div class="max-w-prose mx-auto flex justify-left">
+<div class="max-w-prose mx-auto flex justify-center">
   <article class="prose prose-slate lg:prose-xl dark:prose-invert">
     <h1 class="lg:text-6xl">{{ .Title }}</h1>
     {{ .Content }}
   </article>
 </div>
 
-<div class="max-w-prose mx-auto bg-white dark:bg-slate-900 rounded-xl shadow-md overflow-hidden  my-5"><!--max-w-md md:max-w-2xl-->
-  {{ range .Pages.ByDate.Reverse }}
-  {{ $resource := partial "functions/get_featured_image.html" . }}
-  {{ $anchor := .Params.image.focal_point | default "Center" }}
-
-  <a href="{{ .RelPermalink }}">
-    <div class="md:flex">
-      <div class="md:flex-shrink-0">
-        {{ with $resource }}
-        {{ $image := .Fill (printf "655x655 %s" $anchor) }}
-        {{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
-        <img class="h-48 w-full object-cover md:w-48" loading="lazy" src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}" alt="{{ .Title | plainify }}">
-        {{end}}
-      </div>
-      <div class="p-8">
-        <div class="uppercase tracking-wide text-md text-indigo-700 dark:text-indigo-200 font-semibold">{{ .Title }}</div>
-        <p class="block mt-1 text-sm leading-tight font-medium text-black dark:text-white">
-          {{ (.Params.summary | default .Summary) | plainify | htmlUnescape | chomp -}}
-        </p>
-        <p class="mt-2 text-gray-500 dark:text-gray-400">
-          {{- .Date | time.Format (site.Params.locale.date_format | default ":date_long") -}}
-        </p>
-      </div>
-    </div>
-  </a>
-  {{ end }}
+{{ $view := .Params.view | default "card" }}
+{{ $block := . }}
+
+<div class="flex justify-center">
+
+  {{ partial "functions/render_view" (dict "fragment" "start" "page" $block "item" . "view" $view) }}
+
+  {{ range $index, $item := .Pages.ByDate.Reverse }}
+  {{ partial "functions/render_view" (dict "page" . "item" . "view" $view "index" $index) }}
+  {{end}}
+
+  {{ partial "functions/render_view" (dict "fragment" "end" "page" $block "item" . "view" $view) }}
+
 </div>
 
 {{ end }}

modules/blox-tailwind/layouts/partials/blox/collection.html

@@ -5,6 +5,7 @@
 {{/* Initialise */}}
 {{ $page := .wcPage }}
 {{ $block := .wcBlock }}
+{{ $view := $block.design.view | default "card" }}
 
 {{ $items_offset := $block.content.offset | default 0 }}
 {{ $items_count := $block.content.count }}
@@ -88,12 +89,14 @@
 </div>
 {{ end }}
 
-<div class="container max-w-[65ch] mx-auto bg-white dark:bg-slate-900 rounded-xl shadow-md overflow-hidden  my-5"><!--max-w-md md:max-w-2xl-->
+  {{ partial "functions/render_view" (dict "fragment" "start" "page" $block "item" . "view" $view) }}
 
   {{ range $index, $item := $query }}
-    {{ partial "functions/render_view" (dict "page" $block "item" . "view" ($block.design.view | default "card") "index" $index) }}
+    {{ partial "functions/render_view" (dict "page" $block "item" . "view" $view "index" $index) }}
   {{end}}
 
+  {{ partial "functions/render_view" (dict "fragment" "end" "page" $block "item" . "view" $view) }}
+
   {{/* Archive link */}}
   {{ $show_archive_link := $block.content.archive.enable | default (gt $count $items_count) }}
   {{ if $show_archive_link | and $archive_page }}

modules/blox-tailwind/layouts/partials/functions/get_icon.html

@@ -9,7 +9,7 @@
 {{- $icon := index (index $icon_pack "icons") $name -}}
 
 {{ if $icon }}
-  {{ if eq $pack "hb" }}
+  {{ if in (slice "hb" "brands") $pack }}
     {{/* Pass */}}
   {{ else }}
     {{ $icon_body := index $icon "body" }}
@@ -20,11 +20,11 @@
   {{ with index (index site.Data.icons.hb "icons") $name -}}
     {{ $icon = . }}
   {{ else }}
-    {{ with resources.GetMatch (printf "media/icons/%s%s.svg" $pack .name) }}
+    {{ with resources.GetMatch (printf "media/icons/%s.svg" (path.Join $pack .name)) }}
       {{ $icon = .Content }}
     {{else}}
-      {{ warnf "The icon `%s.svg` was not found in your `assets/media/icons/` folder" .name }}
-      {{ $icon = index (index site.Data.icons.hb "icons") "hugo" }}
+      {{ warnf "The icon `%s.svg` was not found in your `assets/media/icons/%s` folder" .name $pack }}
+      {{ $icon = index (index site.Data.icons.brands "icons") "hugo" }}
     {{ end }}
   {{ end }}
 {{ end }}

modules/blox-tailwind/layouts/partials/functions/render_view.html

@@ -2,19 +2,22 @@
 
 {{ $page := .page }}
 {{ $item := .item }}
-{{ $view := .view }}
-{{ $view_file := "" }}
+{{ $view := lower .view | default "card" }}
+{{ $fragment := .fragment | default "body" }}
 {{ $view_dtype :=  printf "%T" $view }}
 {{ $index := .index }}
+{{ $html := "" }}
 
+{{ if not (templates.Exists (printf "partials/views/%s.html" $view)) }}
+  {{/* Fallback to card view */}}
+  {{ warnf "Failed to locate view at `partials/views/%s.html`. Check you specified a supported `view` in `%s`" $view $page.File.Path }}
+  {{ $view = "card" }}
+{{ end }}
 
-  {{ if templates.Exists (printf "partials/views/%s.html" (lower $view)) }}
-    {{ $view_file = lower $view }}
-  {{else}}
-    {{/* Fallback to card view */}}
-    {{ warnf "Failed to locate view at `partials/views/%s.html`. Check you specified a supported `view` in `%s`" $view $page.File.Path }}
-    {{ $view_file = "card" }}
-  {{end}}
+{{ if eq $fragment "body" }}
+  {{ $html = (partial (printf "views/%s" $view) (dict "page" $page "item" $item "index" $index)) }}
+{{ else }}
+  {{ $html = (partial (printf "views/%s.%s" $view $fragment) (dict "page" $page "item" $item "index" $index)) }}
+{{ end }}
 
-
-{{ return (partial (printf "views/%s" $view_file) (dict "page" $page "item" $item "index" $index)) }}
+{{ return $html }}

modules/blox-tailwind/layouts/partials/views/card.end.html

@@ -0,0 +1 @@
+</div>

modules/blox-tailwind/layouts/partials/views/card.start.html

@@ -0,0 +1 @@
+<div class="container max-w-[65ch] mx-auto bg-white dark:bg-slate-900 rounded-xl shadow-md overflow-hidden my-5"><!--max-w-md md:max-w-2xl-->

modules/blox-tailwind/layouts/partials/views/date-title-summary.end.html

@@ -0,0 +1,2 @@
+</div>
+</div>

modules/blox-tailwind/layouts/partials/views/date-title-summary.html

@@ -0,0 +1,30 @@
+{{ $item := .item }}
+{{ $page := .page }}
+{{ $summary := $item.Params.summary | default $item.Params.description | default $item.Summary }}
+{{ $summary =  $summary | page.RenderString }}
+<article class="md:grid md:grid-cols-4 md:items-baseline">
+  <div class="md:col-span-3 group relative flex flex-col items-start">
+    <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+      <div
+        class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl"></div>
+      <a href="{{$item.RelPermalink}}"><span
+        class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl"></span><span class="relative z-10">{{$item.Title}}</span></a>
+    </h2>
+    <time
+      class="md:hidden relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-1"
+      datetime="{{ time.Format "2006-01-02" $item.Date }}">
+      {{ time.Format (site.Params.locale.date_format | default ":date_long") $item.Date }}
+    </time>
+    <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">{{$summary}}</p>
+    <div aria-hidden="true" class="relative z-10 mt-4 flex items-center text-sm font-medium text-primary-500">
+    {{ T "read_more" | default "Read more" }}
+      <svg aria-hidden="true" class="ml-1 h-4 w-4 stroke-current" fill="none" viewBox="0 0 16 16">
+        <path d="M6.75 5.75 9.25 8l-2.5 2.25" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+      </svg>
+    </div>
+  </div>
+  <time
+    class="mt-1 hidden md:block relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500"
+    datetime="{{ time.Format "2006-01-02" $item.Date }}">{{ time.Format (site.Params.locale.date_format | default ":date_long") $item.Date }}
+  </time>
+</article>

modules/blox-tailwind/layouts/partials/views/date-title-summary.start.html

@@ -0,0 +1,2 @@
+<div class="mt-16 sm:mt-20">
+<div class="flex max-w-3xl flex-col space-y-16">