feat: surface layout previews and refresh example imagery

assets/css/compiled/main.css

@@ -13,6 +13,7 @@
     --container-2xs: 18rem;
     --container-md: 28rem;
     --container-xl: 36rem;
+    --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
     --container-7xl: 80rem;
@@ -1470,6 +1471,9 @@
   .w-screen {
     width: 100vw;
   }
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
@@ -1896,6 +1900,9 @@
   .border-primary-500 {
     border-color: rgba(var(--color-primary-500), 1);
   }
+  .border-primary-600 {
+    border-color: rgba(var(--color-primary-600), 1);
+  }
   .border-secondary-400 {
     border-color: rgba(var(--color-secondary-400), 1);
   }
@@ -2019,6 +2026,12 @@
       background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 85%, transparent);
     }
   }
+  .bg-primary-50\/70 {
+    background-color: color-mix(in srgb, rgba(rgba(var(--color-primary-50), 1), 1) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgba(var(--color-primary-50), 1) 70%, transparent);
+    }
+  }
   .bg-primary-100 {
     background-color: rgba(var(--color-primary-100), 1);
   }
@@ -2532,9 +2545,15 @@
   .decoration-neutral-300 {
     text-decoration-color: rgba(var(--color-neutral-300), 1);
   }
+  .decoration-primary-300 {
+    text-decoration-color: rgba(var(--color-primary-300), 1);
+  }
   .decoration-primary-500 {
     text-decoration-color: rgba(var(--color-primary-500), 1);
   }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
   .underline-offset-auto {
     text-underline-offset: auto;
   }
@@ -3101,6 +3120,12 @@
     .sm\:flex-row {
       flex-direction: row;
     }
+    .sm\:items-end {
+      align-items: flex-end;
+    }
+    .sm\:justify-between {
+      justify-content: space-between;
+    }
     .sm\:overflow-hidden {
       overflow: hidden;
     }
@@ -3352,12 +3377,21 @@
   .dark\:border-primary-300:is(.dark *) {
     border-color: rgba(var(--color-primary-300), 1);
   }
+  .dark\:border-primary-500:is(.dark *) {
+    border-color: rgba(var(--color-primary-500), 1);
+  }
   .dark\:border-primary-600:is(.dark *) {
     border-color: rgba(var(--color-primary-600), 1);
   }
   .dark\:border-primary-900:is(.dark *) {
     border-color: rgba(var(--color-primary-900), 1);
   }
+  .dark\:border-primary-900\/70:is(.dark *) {
+    border-color: color-mix(in srgb, rgba(rgba(var(--color-primary-900), 1), 1) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, rgba(var(--color-primary-900), 1) 70%, transparent);
+    }
+  }
   .dark\:border-secondary-600:is(.dark *) {
     border-color: rgba(var(--color-secondary-600), 1);
   }
@@ -3487,6 +3521,9 @@
   .dark\:bg-primary-400:is(.dark *) {
     background-color: rgba(var(--color-primary-400), 1);
   }
+  .dark\:bg-primary-500:is(.dark *) {
+    background-color: rgba(var(--color-primary-500), 1);
+  }
   .dark\:bg-primary-800:is(.dark *) {
     background-color: rgba(var(--color-primary-800), 1);
   }

exampleSite/assets/js/home.js

@@ -27,26 +27,27 @@ window.addEventListener("DOMContentLoaded", (event) => {
 });
 
 function initLayoutLab() {
-  const lab = document.querySelector("[data-layout-lab]");
-  if (!lab) return;
+  document.querySelectorAll("[data-layout-switcher]").forEach((lab) => {
+    const buttons = lab.querySelectorAll("[data-layout-switcher-button]");
+    const panels = lab.querySelectorAll("[data-layout-switcher-panel]");
+    const activate = (layout) => {
+      buttons.forEach((button) => {
+        const active = button.dataset.layoutSwitcherButton === layout;
+        button.setAttribute("aria-selected", String(active));
+        button.classList.toggle("border-primary-600", active);
+        button.classList.toggle("bg-primary-600", active);
+        button.classList.toggle("text-white", active);
+        button.classList.toggle("dark:border-primary-500", active);
+        button.classList.toggle("dark:bg-primary-500", active);
+      });
+      panels.forEach((panel) => {
+        panel.hidden = panel.dataset.layoutSwitcherPanel !== layout;
+      });
+    };
 
-  const buttons = lab.querySelectorAll("[data-layout-preview-button]");
-  const panels = lab.querySelectorAll("[data-layout-preview-panel]");
-  const activate = (layout) => {
     buttons.forEach((button) => {
-      const active = button.dataset.layoutPreviewButton === layout;
-      button.setAttribute("aria-selected", String(active));
-      button.classList.toggle("bg-primary-600", active);
-      button.classList.toggle("text-white", active);
-      button.classList.toggle("dark:border-primary-600", active);
+      button.addEventListener("click", () => activate(button.dataset.layoutSwitcherButton));
     });
-    panels.forEach((panel) => {
-      panel.hidden = panel.dataset.layoutPreviewPanel !== layout;
-    });
-  };
-
-  buttons.forEach((button) => {
-    button.addEventListener("click", () => activate(button.dataset.layoutPreviewButton));
   });
 }
 

exampleSite/config/_default/params.toml

@@ -51,6 +51,7 @@ fingerprintAlgorithm = "sha512" # Valid values are "sha512" (default), "sha384",
 
 [homepage]
   layout = "landing" # valid options: page, profile, hero, card, background, landing, custom
+  layoutSwitcher = true # opt-in interactive preview of the built-in layouts
   # homepageImage = "/img/iceland.jpg" # used in: hero, and card
   showRecent = true
   showRecentItems = 12

exampleSite/content/docs/configuration/index.md

@@ -3,6 +3,7 @@ title: "Configuration"
 weight: 4
 draft: false
 description: "All the configuration variables available in Blowfish."
+featureimage: "images/v3/layouts.png"
 slug: "configuration"
 tags: ["config", "docs"]
 series: ["Documentation"]
@@ -243,7 +244,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
 
 | Name | Default | Description |
 | --- | --- | --- |
-| `homepage.layout` | `"profile"` | The layout of the homepage. Valid values are `page`, `profile`, `hero`, `card`, `background`, or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details. |
+| `homepage.layout` | `"profile"` | The layout of the homepage. Valid values are `page`, `profile`, `hero`, `card`, `background`, `landing`, or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details. |
+| `homepage.layoutSwitcher` | `false` | Renders an interactive, in-place preview switcher for the built-in homepage layouts. Intended for demos and design review because it renders every preview layout. |
 | `homepage.homepageImage` | _Not set_ | Image to be used in `hero` and `card` layouts. Can be set as local image from asset directory or external image url. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details. |
 | `homepage.showRecent` | `false` | Whether or not to display the recent articles list on the homepage. |
 | `homepage.showRecentItems` | 5 | How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles. |

exampleSite/content/docs/getting-started/index.md

@@ -3,6 +3,7 @@ title: "Getting Started"
 weight: 3
 draft: false
 description: "All the front matter variables available in Blowfish."
+featureimage: "images/v3/publishing.png"
 slug: "getting-started"
 tags: ["installation", "docs"]
 series: ["Documentation"]

exampleSite/content/docs/shortcodes/index.md

@@ -3,6 +3,7 @@ title: "Shortcodes"
 weight: 6
 draft: false
 description: "All the shortcodes available in Blowfish."
+featureimage: "images/v3/documentation.png"
 slug: "shortcodes"
 tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
 series: ["Documentation"]

exampleSite/layouts/layout-lab/list.html

@@ -6,28 +6,7 @@
     <div class="prose mx-auto mt-5 dark:prose-invert">{{ .Content }}</div>
   </section>
 
-  <section data-layout-lab class="mb-14">
-    <div class="not-prose mb-8 flex flex-wrap justify-center gap-2" role="tablist" aria-label="Homepage layouts">
-      {{ range $index, $layout := slice "landing" "background" "hero" "profile" "page" "card" }}
-        <button
-          type="button"
-          class="rounded-full border border-neutral-300 px-4 py-2 text-sm font-bold text-neutral-700 transition hover:border-primary-400 hover:text-primary-600 dark:border-neutral-700 dark:text-neutral-200 dark:hover:text-primary-400 {{ if eq $index 0 }}bg-primary-600 text-white hover:bg-primary-500 hover:text-white dark:border-primary-600{{ end }}"
-          data-layout-preview-button="{{ $layout }}"
-          role="tab"
-          aria-selected="{{ cond (eq $index 0) `true` `false` }}">
-          {{ $layout | title }}
-        </button>
-      {{ end }}
-    </div>
-
-    <div class="rounded-3xl border border-neutral-200 bg-neutral/40 p-4 shadow-sm dark:border-neutral-800 dark:bg-neutral-900/30 sm:p-8">
-      {{ range $index, $layout := slice "landing" "background" "hero" "profile" "page" "card" }}
-        <div data-layout-preview-panel="{{ $layout }}" role="tabpanel"{{ if ne $index 0 }} hidden{{ end }}>
-          {{ partial (printf "home/%s.html" $layout) $ }}
-        </div>
-      {{ end }}
-    </div>
-  </section>
+  <section class="mb-14">{{ partial "home/layout-switcher.html" . }}</section>
 
   <script defer type="text/javascript" src="{{ $jsHome.RelPermalink }}" integrity="{{ $jsHome.Data.Integrity }}"></script>
 {{ end }}

layouts/index.html

@@ -1,8 +1,14 @@
 {{ define "main" }}
-  {{ $partial := print "home/" .Site.Params.homepage.layout ".html" }}
-  {{ if templates.Exists ( printf "partials/%s" $partial ) }}
-    {{ partial $partial . }}
+  {{ if .Site.Params.homepage.layoutSwitcher | default false }}
+    {{ partial "home/layout-switcher.html" . }}
+    {{ $jsHome := resources.Get "js/home.js" | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+    <script defer type="text/javascript" src="{{ $jsHome.RelPermalink }}" integrity="{{ $jsHome.Data.Integrity }}"></script>
   {{ else }}
-    {{ partial "home/profile.html" . }}
+    {{ $partial := print "home/" .Site.Params.homepage.layout ".html" }}
+    {{ if templates.Exists ( printf "partials/%s" $partial ) }}
+      {{ partial $partial . }}
+    {{ else }}
+      {{ partial "home/profile.html" . }}
+    {{ end }}
   {{ end }}
 {{ end }}

layouts/partials/home/layout-switcher.html

@@ -0,0 +1,27 @@
+{{/* Opt-in preview for Blowfish's built-in homepage layouts. */}}
+{{ $layouts := slice "landing" "background" "hero" "profile" "page" "card" }}
+<section data-layout-switcher>
+  <div class="mb-8 rounded-3xl border border-primary-200 bg-primary-50/70 p-5 shadow-sm dark:border-primary-900/70 dark:bg-primary-950/30 sm:p-6">
+    <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+      <div>
+        <p class="text-sm font-bold uppercase tracking-[0.18em] text-primary-600 dark:text-primary-400">Theme playground</p>
+        <h2 class="mt-1 text-2xl font-black tracking-tight text-neutral-950 dark:text-white">Try a homepage layout</h2>
+        <p class="mt-1 max-w-2xl text-sm text-neutral-600 dark:text-neutral-300">Same content, six built-in Blowfish layouts. Pick one to preview it in place.</p>
+      </div>
+      <a class="text-sm font-bold text-primary-600 underline decoration-primary-300 underline-offset-4 hover:text-primary-500 dark:text-primary-400" href="{{ `docs/homepage-layout/` | relLangURL }}">Layout documentation</a>
+    </div>
+    <div class="mt-5 flex flex-wrap gap-2" role="tablist" aria-label="Homepage layouts">
+      {{ range $index, $layout := $layouts }}
+        <button type="button" class="rounded-full border border-neutral-300 bg-white px-4 py-2 text-sm font-bold text-neutral-700 shadow-sm transition hover:border-primary-400 hover:text-primary-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:text-primary-400 {{ if eq $index 0 }}border-primary-600 bg-primary-600 text-white hover:bg-primary-500 hover:text-white dark:border-primary-500 dark:bg-primary-500{{ end }}" data-layout-switcher-button="{{ $layout }}" role="tab" aria-selected="{{ cond (eq $index 0) `true` `false` }}">{{ $layout | title }}</button>
+      {{ end }}
+    </div>
+  </div>
+
+  <div class="rounded-3xl border border-neutral-200 bg-neutral/40 p-4 shadow-sm dark:border-neutral-800 dark:bg-neutral-900/30 sm:p-8">
+    {{ range $index, $layout := $layouts }}
+      <div data-layout-switcher-panel="{{ $layout }}" role="tabpanel"{{ if ne $index 0 }} hidden{{ end }}>
+        {{ partial (printf "home/%s.html" $layout) $ }}
+      </div>
+    {{ end }}
+  </div>
+</section>