feat: surface layout previews and refresh example imagery

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 }}