⚡ allow landing page templates to be used multiple times #128

⚡ add `image text` landing page template
colinwilson · Nov 20, 2023 · 415647f · 415647f
1 parent a91c50e
commit 415647f
Show file tree

Hide file tree

Showing 12 changed files with 216 additions and 85 deletions.
diff --git a/assets/images/templates/single/google_lighthouse_circle_v1.0.svg b/assets/images/templates/single/google_lighthouse_circle_v1.0.svg
diff --git a/assets/scss/custom/components/_backgrounds.scss b/assets/scss/custom/components/_backgrounds.scss
@@ -7,6 +7,9 @@ $value in $theme-colors {
     .bg-#{$name} {
         background-color: rgba($value, 0.04) !important;
     }
+    .bg-hard-#{$name} {
+        background-color: rgba($value, 1) !important;
+    }
     .bg-soft-#{$name} {
         background-color: rgba($value, 0.1) !important;
         border: 1px solid rgba($value, 0.1) !important;

diff --git a/assets/scss/style.scss b/assets/scss/style.scss
@@ -46,6 +46,6 @@ $font-family-monospace:  {{ .Site.Params.mono_font | default "SFMono-Regular, Me
 @import "custom/pages/features";
 @import "custom/pages/helper";
 @import "custom/pages/hero";
-{{ if .Site.Data.landing.image_compare.enable }}@import "custom/pages/image-compare-viewer";{{ end }}
+{{ if ($.Scratch.Get "image_compare_enabled") }}@import "custom/pages/image-compare-viewer";{{ end }}
 
 // @import "custom/pages/simplebar";
diff --git a/data/landing.yaml b/data/landing.yaml
@@ -4,18 +4,19 @@
 hero:
   enable: true
   weight: 10
+  template: hero
 
   backgroundImage:
     path: "images/templates/hero"
     filename:
       desktop: "gradient-desktop.webp"
       mobile: "gradient-mobile.webp"
 
-  # badge:
-  #   text: v0.0.2
-  #   color: primary # primary, secondary, success, danger, warning, info, light, dark
-  #   pill: false # boolean
-  #   soft: true # boolean
+  badge:
+    text: v0.1.0
+    color: primary # primary, secondary, success, danger, warning, info, light, dark
+    pill: false # boolean
+    soft: true # boolean
 
   # titleLogo:
   #   path: "images/logos"
@@ -44,10 +45,11 @@ hero:
 
   info: "**Open Source** MIT Licensed."
 
-# Features Grid
-features:
+# Feature Grid
+featureGrid:
   enable: true
   weight: 20
+  template: feature grid
 
   title: Why choose Lotus Docs?
   subtitle: Lotus Docs is a highly configurable Hugo documentation theme. Yet, with the default configuration you can deploy and publish your documentation site in a matter of minutes. Check out some core features below.
@@ -79,7 +81,7 @@ features:
 
     - title: Search by DocSearch
       icon: search
-      description: Search your docs with DocSearch. A powerful, efficient and accessible search solution built on Algolia Crawler & Autocomplete. TBC.
+      description: Search your docs with DocSearch. A powerful, efficient and accessible search solution built on Algolia Crawler & Autocomplete.
 
     - title: Multilingual Support
       icon: translate
@@ -90,9 +92,10 @@ features:
       description: Built on Bootstrap 5, Lotus Docs allows for a familiar, flexible, and intuitive developer experience. Easily customise your site via SCSS variables and files.
 
 # Image compare
-image_compare:
+imageCompare:
   enable: true
   weight: 30
+  template: image compare
 
   title: Customise The Lotus Docs Appearance
   subtitle: Much of Lotus Docs' appearance can be customised. Dark mode is optional (enabled by default) and you can choose a Google font that suites you via the config parameters.

diff --git a/exampleSite/data/landing.yaml b/exampleSite/data/landing.yaml
@@ -4,18 +4,19 @@
 hero:
   enable: true
   weight: 10
+  template: hero
 
   backgroundImage:
     path: "images/templates/hero"
     filename:
       desktop: "gradient-desktop.webp"
       mobile: "gradient-mobile.webp"
 
-  # badge:
-  #   text: v0.0.2
-  #   color: primary # primary, secondary, success, danger, warning, info, light, dark
-  #   pill: false # boolean
-  #   soft: true # boolean
+  badge:
+    text: v0.1.0
+    color: primary # primary, secondary, success, danger, warning, info, light, dark
+    pill: false # boolean
+    soft: true # boolean
 
   # titleLogo:
   #   path: "images/logos"
@@ -36,18 +37,19 @@ hero:
   ctaButton:
     icon: rocket_launch
     btnText: "Get Started"
-    url: "/docs/quickstart/"
+    url: "/docs/quickstart/#create-a-new-lotus-docs-site"
   cta2Button:
     icon: construction
     btnText: "In Development"
     url: "https://github.com/colinwilson/lotusdocs"
 
   info: "**Open Source** MIT Licensed."
 
-# Features Grid
-features:
+# Feature Grid
+featureGrid:
   enable: true
   weight: 20
+  template: feature grid
 
   title: Why choose Lotus Docs?
   subtitle: Lotus Docs is a highly configurable Hugo documentation theme. Yet, with the default configuration you can deploy and publish your documentation site in a matter of minutes. Check out some core features below.
@@ -79,7 +81,7 @@ features:
 
     - title: Search by DocSearch
       icon: search
-      description: Search your docs with DocSearch. A powerful, efficient and accessible search solution built on Algolia Crawler & Autocomplete.
+      description: Search your docs with DocSearch. A powerful, efficient and accessible search solution built on Algolia Crawler & Autocomplete. TBC.
 
     - title: Multilingual Support
       icon: translate
@@ -89,10 +91,42 @@ features:
       icon: palette
       description: Built on Bootstrap 5, Lotus Docs allows for a familiar, flexible, and intuitive developer experience. Easily customise your site via SCSS variables and files.
 
+imageText:
+  enable: true
+  weight: 25
+  template: image text
+
+  title: Built with performance and accessability in mind. Top scores on Google's Lighthouse
+  subtitle: A default Lotus Docs deployment is capable of achieving 4 x 100 scores on Google's Lighthouse performance analysis tool.
+
+  list:
+    - text: Blazing fast page loads
+      icon: speed
+
+    - text: Sensible default SEO friendly settings
+      icon: area_chart
+
+    - text: Designed to be accessible
+      icon: accessibility
+
+  image:
+    path: "images/templates/single"
+    filename: "google_lighthouse_circle_v1.0.svg"
+    alt: "Google LightHouse 100% Illustration" # Optional but recommended
+
+  imgOrder:
+    desktop: 2
+    mobile: 1
+
+  ctaButton:
+    text: Learn more
+    url: "/docs/"
+
 # Image compare
-image_compare:
+imageCompare:
   enable: true
   weight: 30
+  template: image compare
 
   title: Customise The Lotus Docs Appearance
   subtitle: Much of Lotus Docs' appearance can be customised. Dark mode is optional (enabled by default) and you can choose a Google font that suites you via the config parameters.

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -8,6 +8,25 @@
     {{ end }}
 {{ end }}
 
+<!--
+Is an image_compare landing page template enabled?
+If so, collect and consolidate the items config from each enabled instance
+-->
+{{ $ic := newScratch }}
+{{ range $value := .Site.Data.landing }}
+    {{ $template := string (replaceRE `( |-{1,})` "_" $value.template) }}
+    {{ if eq $template "image_compare" }}
+        {{ if $value.enable }}
+        {{ $ic.Add "enabled" (slice $value.enable) }}
+            {{ range $value.items }}
+                {{ $ic.Add "config" (slice (.config | jsonify | safeJS)) }}
+            {{ end }}
+        {{ end }}
+    {{- end }}
+{{ end }}
+
+{{ $.Scratch.Set "image_compare_enabled" (in ($ic.Get "enabled") true) }}
+
 <html lang="{{ site.LanguageCode }}" dir="ltr">
     {{- partial "head.html" . -}}
     <body>
@@ -28,21 +47,19 @@
             {{- $js := (slice $app) | resources.Concat "/js/bundle.js" }}
             <script type="text/javascript" src="{{ $js.Permalink }}" {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }}></script>
         {{- end }}
-        {{ if .Site.Data.landing.image_compare.enable }}
-            <script>
-                // Image Compare Viewer
-                const viewers = document.querySelectorAll(".image-compare");
-                let configs = [
-                    {{ range .Site.Data.landing.image_compare.items }}
-                        {{ if .config }}
-                            {{ .config | jsonify | safeJS }},
-                        {{ end }}
-                    {{ end }}
-                ];
-                viewers.forEach((element, i) => {
+
+        <!-- Image Compare Viewer Config -->
+        {{ if ($.Scratch.Get "image_compare_enabled") }}
+        <script>
+            const viewers = document.querySelectorAll(".image-compare");
+            let configs = [
+                {{ (delimit ($ic.Get `config`) `,`) | safeJS }}
+            ];
+            viewers.forEach((element, i) => {
                 let view = new ImageCompare(element, configs[i]).mount();
-                });
-            </script>
-        {{- end }}
+            });
+        </script>
+        {{ end }}
+
     </body>
 </html>
diff --git a/layouts/index.html b/layouts/index.html
@@ -3,19 +3,22 @@
     {{ $map := newScratch }}
 
     {{ range $key, $value := $landingData }}
-        {{ $template := (index $key) }}
+        {{ $sectionTitle := (index $key) }}
         {{ $weight := string ($value.weight) }}
-        {{ with $weight }}
-            {{ $map.SetInMap "wgtTpl" $weight $template }}
-        {{ else }}
-            {{ $map.SetInMap "wgtTpl" (index $key) $template }}
+        {{ $template := string (replaceRE `( |-{1,})` "_" $value.template) }}
+        {{ with and $template $weight }}
+            {{ $map.SetInMap "wgtTpl" $sectionTitle (dict
+            "weight" $weight
+            "template" $template
+            "sectionTitle" $sectionTitle
+            )}}
         {{ end }}
     {{ end }}
 
-    {{ $indexContext := newScratch }}
-    {{ $indexContext.Set "indexContext" . }}
-    {{ range sort ($map.Get "wgtTpl") }}
-        {{ $path := printf "landing/%s.html" . }}
-        {{ partialCached $path ($indexContext.Get "indexContext") }}
+    {{ range sort ($map.Get "wgtTpl") ".weight" }}
+        {{ $.Scratch.Set "sectionTitle" .sectionTitle }}
+        {{ $path := printf "landing/%s.html" .template }}
+        {{ partial $path $.Page }}
     {{ end }}
+    {{/* printf "%s" (sort ($map.Get "wgtTpl") ".weight" ) */}}
 {{ end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -37,7 +37,7 @@
     {{ end }}
         <script src="{{ $js.RelPermalink }}" {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end -}} defer></script>
     <!-- Image Compare Viewer -->
-    {{ if .Site.Data.landing.image_compare.enable }}
+    {{ if ($.Scratch.Get "image_compare_enabled") }}
         {{ $imagecompare := resources.Get "js/image-compare-viewer.min.js" }}
         {{- if not .Site.IsServer }}
             {{- $js := (slice $imagecompare) | resources.Concat "/js/image-compare.js" | minify | fingerprint "sha384" }}

diff --git a/layouts/partials/landing/features.html → layouts/partials/landing/feature_grid.html b/layouts/partials/landing/features.html → layouts/partials/landing/feature_grid.html
@@ -1,14 +1,16 @@
-{{ if .Site.Data.landing.features.enable }}
+{{ $sectionTitle := .Scratch.Get "sectionTitle" }}
+{{ with (index .Site.Data.landing $sectionTitle) }}
+{{ if eq .enable true }}
 <!-- Features Start -->
 <div class="container mt-100 mt-60">
     <div class="row justify-content-center">
         <div class="col-12 text-center">
             <div class="section-title">
-                {{ if .Site.Data.landing.features.title }}
-                    <h4 class="title fw-bold mb-4">{{ .Site.Data.landing.features.title }}</h4>
+                {{ with .title }}
+                    <h4 class="title fw-bold mb-4">{{ . }}</h4>
                 {{ end }}
-                {{ if .Site.Data.landing.features.subtitle }}
-                    <p class="text-muted para-desc mb-4 pb-2 mx-auto">{{ .Site.Data.landing.features.subtitle | markdownify }}</p>
+                {{ with .subtitle }}
+                    <p class="text-muted para-desc mb-4 pb-2 mx-auto">{{ . | markdownify }}</p>
                 {{ end }}
             </div>
         </div><!--end col-->
@@ -17,7 +19,7 @@ <h4 class="title fw-bold mb-4">{{ .Site.Data.landing.features.title }}</h4>
     <div class="row">
         <div class="col-lg-12">
             <div class="row">
-                {{ range .Site.Data.landing.features.items }}
+                {{ range .items }}
                     <div class="col-md-4 col-12">
                         <div class="d-flex features feature-primary p-3">
                             <div class="{{ if .icon }}icon{{ else }}no-icon{{ end }} text-center rounded-3 text-primary me-3">
@@ -40,4 +42,5 @@ <h4 class="title">{{ .title }}</h4>
 </div>
 <!--end container-->
 <!-- features End -->
+{{ end }}
 {{ end }}