Merge branch 'release' into add-rss-atom-feed-autodiscovery

Author: colinwilson

README.md

@@ -6,8 +6,6 @@
 
 Check out the demo site [https://lotusdocs.dev/docs/](https://lotusdocs.dev/docs/) (also doubles as the documentation guide for Lotus Docs 📖)
 
-🚧 **WARNING** 🚧 - **Lotus Docs is currently in pre-release development and thus not recommended for use in production at this time. But please do try it out 😊. Pull requests and feedback are most welcome.**
-
 ## Features
 
 * [x] Modern documentation layout
@@ -41,7 +39,7 @@ Check out the demo site [https://lotusdocs.dev/docs/](https://lotusdocs.dev/docs
 
 ### Requirements
 
-- Hugo **Extended** (minimum version: 0.117.0)
+- Hugo **Extended** (minimum version: 0.120.0)
 - git
 - Go (minimum version v1.20)
 

assets/images/templates/single/google_lighthouse_circle_v1.0.svg

@@ -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;

assets/scss/custom/components/_backgrounds.scss

@@ -5,6 +5,11 @@ body {
     color: $body-color;
     background-color: $body-bg;
 }
+@media (max-width: 1199px) {
+    html {
+        scroll-padding-top: 80px;
+    }
+}
 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     font-family: $font-family-base;
     line-height: 1.4;

assets/scss/custom/structure/_general.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";

assets/scss/style.scss

@@ -1,7 +1,7 @@
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.100.0"
+    min = "0.120.0"
   [[module.imports]]
     path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
     disable = false

config.toml

@@ -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.

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.
@@ -56,43 +58,102 @@ features:
     - title: Fast
       icon: speed
       description: 4 x 100's score on Google Lighthouse by default. Lotus Docs removes unused CSS, prefetches asset links, and lazy loads content images.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: SEO Friendly
       icon: trending_up
       description: Data is automatically structured to be SEO friendly. Includes Meta tags, Opengraph, and Twitter cards. Choose the settings that best suit you.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Secure by default
       icon: lock
       description: Lotus Docs' default configuration scores A+ on Mozilla Observatory. You can update the default Security Headers to suit your requirements.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Optional Features
       icon: settings
       description: Many Lotus Docs features are configurable via optional parameters. Require DocSearch for your site? Then enable it via a single setting.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Deploy to Vercel
       icon: change_history
       description: Deploy to Vercel in seconds. Vercel Functions, Vercel Redirects/Rewrites, and Vercel Headers are all configurable for an enriched experience.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Dark Mode
       icon: dark_mode
-      description: "Prefer not to be blasted by the sun while reading? Switch to a low-light UI with the click of a button. Modify colour variables to match your branding."
+      description: Prefer not to be blasted by the sun while reading? Switch to a low-light UI with the click of a button. Modify colour variables to match your branding.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - 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.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Multilingual Support
       icon: translate
       description: Lotus Docs supports Hugo's Multilingual Mode. Create documentation in multiple languages side by side with i18n support.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Bootstrap v5
       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.
+      ctaLink:
+        text: learn more
+        url: /docs/
+
+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.

exampleSite/data/landing.yaml

@@ -109,7 +109,8 @@ defaultContentLanguage = 'en'
 
         # Link behaviour
         intLinkTooltip  = true                                # Enable a tooltip for internal links that displays info about the destination? default false
-        # extLinkNewTab   = false                               # Open external links in a new Tab? default true
+        # extLinkNewTab   = false                             # Open external links in a new Tab? default true
+        # logoLinkURL = ""                                    # Set a custom URL destination for the top header logo link.
 
     [params.flexsearch] # Parameters for FlexSearch
         enabled             = true

exampleSite/hugo.toml

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