diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 9b81e8c6..817486d2 100644 --- a/assets/css/compiled/main.css +++ b/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); } diff --git a/exampleSite/assets/images/v3/documentation.png b/exampleSite/assets/images/v3/documentation.png new file mode 100644 index 00000000..8d4f1d66 Binary files /dev/null and b/exampleSite/assets/images/v3/documentation.png differ diff --git a/exampleSite/assets/images/v3/layouts.png b/exampleSite/assets/images/v3/layouts.png new file mode 100644 index 00000000..096bd0c5 Binary files /dev/null and b/exampleSite/assets/images/v3/layouts.png differ diff --git a/exampleSite/assets/images/v3/publishing.png b/exampleSite/assets/images/v3/publishing.png new file mode 100644 index 00000000..8d8647ef Binary files /dev/null and b/exampleSite/assets/images/v3/publishing.png differ diff --git a/exampleSite/assets/js/home.js b/exampleSite/assets/js/home.js index 89409f9c..178b1cda 100644 --- a/exampleSite/assets/js/home.js +++ b/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)); }); } diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 37ee952b..5a6ab279 100644 --- a/exampleSite/config/_default/params.toml +++ b/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 diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md index 0a32b174..48eefc4b 100644 --- a/exampleSite/content/docs/configuration/index.md +++ b/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. | diff --git a/exampleSite/content/docs/getting-started/index.md b/exampleSite/content/docs/getting-started/index.md index 554c2b69..ed234311 100644 --- a/exampleSite/content/docs/getting-started/index.md +++ b/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"] diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 37e2c91f..182f5d52 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/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"] diff --git a/exampleSite/layouts/layout-lab/list.html b/exampleSite/layouts/layout-lab/list.html index 9a0d4f2c..d5ba4c1f 100644 --- a/exampleSite/layouts/layout-lab/list.html +++ b/exampleSite/layouts/layout-lab/list.html @@ -6,28 +6,7 @@
{{ .Content }}
-
-
- {{ range $index, $layout := slice "landing" "background" "hero" "profile" "page" "card" }} - - {{ end }} -
- -
- {{ range $index, $layout := slice "landing" "background" "hero" "profile" "page" "card" }} -
- {{ partial (printf "home/%s.html" $layout) $ }} -
- {{ end }} -
-
+
{{ partial "home/layout-switcher.html" . }}
{{ end }} diff --git a/layouts/index.html b/layouts/index.html index 3b35e78a..2754c1ef 100644 --- a/layouts/index.html +++ b/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") }} + {{ 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 }} diff --git a/layouts/partials/home/layout-switcher.html b/layouts/partials/home/layout-switcher.html new file mode 100644 index 00000000..9d5845e6 --- /dev/null +++ b/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" }} +
+
+
+
+

Theme playground

+

Try a homepage layout

+

Same content, six built-in Blowfish layouts. Pick one to preview it in place.

+
+ Layout documentation +
+
+ {{ range $index, $layout := $layouts }} + + {{ end }} +
+
+ +
+ {{ range $index, $layout := $layouts }} +
+ {{ partial (printf "home/%s.html" $layout) $ }} +
+ {{ end }} +
+