🎨 Theme update, 📁 content update

config.toml

@@ -25,12 +25,12 @@ enableGitInfo = true # N.B. .GitInfo does not currently function with submodule
 [params]
 
   # google_fonts = [
-  #   ["Nunito Sans", "300, 400, 600, 700"],
+  #   ["Comic Neue", "300, 400, 600, 700"],
   #   ["Source Code Pro", "500, 700"]
   # ]
 
-  # sans_serif_font = "Nunito Sans"     # Default is System font
-  # secondary_font  = "Nunito Sans"     # Default is System font
+  # sans_serif_font = "Comic Neue"     # Default is System font
+  # secondary_font  = "Comic Neue"     # Default is System font
   # mono_font       = "Source Code Pro" # Default is System font
 
     [params.footer]
@@ -46,6 +46,8 @@ enableGitInfo = true # N.B. .GitInfo does not currently function with submodule
     [params.docs] # Parameters for the /docs 'template'
         title           = "Lotus Labs Documentation"          # default html title for documentation pages/sections
 
+        darkMode        = true                                # enable dark mode option? default false
+
         ghrepo          = "github.com/colinwilson/lotusdocs.vercel.app"  # Git repository URL for your site
         editPage        = true                                # enable 'Edit this page' feature - default false
         lastMod         = true                                # enable 'Last modified' date on pages - default false
@@ -67,7 +69,7 @@ enableGitInfo = true # N.B. .GitInfo does not currently function with submodule
 
     [params.docsearch] # Parameters for DocSearch
         appID     = "O2QIOCBDAK" # Algolia Application ID
-        apiKey    = "fdc60eee76a72a35d739b54521498b77" # Algolia Search-Only API Key
+        apiKey    = "fdc60eee76a72a35d739b54521498b77" # Algolia Search-Only API (Public) Key
         indexName = "prod_lotusdocs.dev" # Index Name to perform search on (or set env variable HUGO_PARAM_DOCSEARCH_indexName)
 
 [menu]

content/docs/feature-guide/_index.md

@@ -0,0 +1,11 @@
+---
+weight: 210
+title: "Feature Guide"
+description: "A Guide to Using Lotus Docs' Features."
+icon: celebration
+lead: ""
+date: 2022-11-22T12:36:15+00:00
+lastmod: 2022-11-22T12:36:15+00:00
+draft: true
+images: []
+---

content/docs/feature-guide/shortcodes/_index.md

@@ -0,0 +1,11 @@
+---
+weight: 220
+title: "Shortcodes"
+description: "Lotus Docs Custom Shortcodes."
+icon: code
+lead: ""
+date: 2022-11-22T12:40:15+00:00
+lastmod: 2022-11-22T12:40:15+00:00
+draft: true
+images: []
+---

content/docs/feature-guide/shortcodes/alerts.md

@@ -0,0 +1,102 @@
+---
+weight: 220
+title: "Alerts"
+icon: notification_important
+description: "How to use Alert Shortcodes to render custom page alerts in markdown."
+lead: "Alerts."
+date: 2022-11-22T13:42:31+00:00
+lastmod: 2022-11-22T13:42:31+00:00
+draft: true
+images: []
+toc: true
+---
+
+## Adding a Page Alert
+
+A page alert can be added to your markdown using the following Hugo shortcode:
+
+```md
+{{</* alert text="This is the default alert. It consists of a default theme colour and icon." /*/>}}
+```
+
+The above code results in the following alert:
+
+{{< alert text="This is the default alert. It consists of a default theme colour and icon." />}}
+
+## Alert with Context
+
+Add context to an alert via the `context` parameter:
+
+```md
+{{</* alert context="info" text="This is an alert with an <strong>info</strong> context. It consists of the info theme colour and icon." /*/>}}
+```
+
+Here's what is rendered:
+
+{{< alert context="info" text="This is an alert with an <strong>info</strong> context. It consists of the info theme colour and icon." />}}
+
+Additional alert contexts include `success`, `danger`, `warning`, `primary`, `light` and `dark`:
+
+{{< alert context="success" text="This is an alert with a <strong>success</strong> context. It consists of the success theme colour and icon." />}}
+
+{{< alert context="danger" text="This is an alert with a <strong>danger</strong> context. It consists of the danger theme colour and icon." />}}
+
+{{< alert context="warning" text="This is an alert with a <strong>warning</strong> context. It consists of the warning theme colour and icon." />}}
+
+{{< alert context="primary" text="This is an alert with a <strong>primary</strong> context. Its theme and icon colors match those of the current primary theme colour." />}}
+
+{{< alert context="light" text="This is an alert with a <strong>light</strong> context. It consists of the light theme colour. The light alert has no default icon." />}}
+
+{{< alert context="dark" text="This is an alert with a <strong>dark</strong> context. It consists of the dark theme colour. The dark alert has no default icon." />}}
+
+## Alert with Custom Emoji Icon
+
+The default icon for an alert context can be substituted with an emoji using the `icon` parameter:
+
+```md
+{{</* alert icon="🍅" context="info" text="This is an <strong>info</strong> context alert with a tomato emoji replacing the default icon. The info theme colour remains unchanged." /*/>}}
+```
+
+{{< alert icon="🍅" context="info" text="This is an <strong>info</strong> context alert with a tomato emoji replacing the default icon. The info theme colour remains unchanged." />}}
+
+## Alert with No Icon
+
+An alert can be rendered without its default icon by setting the `icon` parameter to an empty space, `icon=" "`:
+
+{{< alert context="warning" >}}
+**N.B.** The icon parameter **must** contain a space. Setting it to `icon=""` will render the default icon.
+{{< /alert >}}
+
+```md
+{{</* alert icon=" " context="info" text="This <strong>info</strong> context alert has no icon." /*/>}}
+```
+
+{{< alert icon=" " context="info" text="This <strong>info</strong> context alert has no icon." />}}
+
+## Render Markdown & HTML inside an Alert
+
+Using a [paired shortcode](https://gohugo.io/content-management/shortcodes/) allows Markdown and HTML to be rendered inside an alert:
+
+```md
+{{</* alert icon="🛒" context="success" >}}
+This ***paired shortcode*** alert contains a **markdown** list and header:
+
+#### My Shopping List:
+1. Tomatoes
+2. Bananas
+3. Pineapples
+
+and a sentence <em>styled</em> using <strong>HTML</strong> tags such as \<strong\> and \<em\>
+{{< /alert /*/>}}
+```
+
+{{< alert icon="🛒" context="success" >}}
+This ***paired shortcode*** alert contains a **markdown** list and header:
+
+#### My Shopping List:
+1. Tomatoes
+2. Bananas
+3. Pineapples
+
+and a sentence <em>styled</em> using <strong>HTML</strong> tags such as \<strong\> and \<em\>
+{{< /alert >}}

content/docs/test_markdown/tables-and-tabs.md → content/docs/feature-guide/shortcodes/tables-and-tabs.md

@@ -1,13 +1,13 @@
 ---
+weight: 240
 title: "Tables & Tabs"
 icon: table_chart
-description: "A demonstration of how Lotus Docs creates and renders table & tabs"
-lead: "An example markdown page for testing purposes."
+description: "How to use Lotus Docs tables & tabs shortcodes to render great looking markdown tables and tabs"
+lead: "Using Hugo shortcodes to render tables and tabs."
 date: 2022-11-05T04:41:15+00:00
 lastmod: 2022-11-05T04:41:15+00:00
 draft: true
 images: []
-weight: 10040
 toc: true
 ---
 

content/docs/overview.md

@@ -22,7 +22,7 @@ categories = [""]
 +++
 
 {{< alert context="danger" >}}
-Lotus Docs is currently in the very early stages of development and is, therefore, **not** ready for use in production. You're welcome to test the theme yourself, and contributions to [the project](https://github.com/colinwilson/lotusdocs) a very welcome.
+Lotus Docs is currently in the very early stages of development and is, therefore, **not** recommended for use in production. You're welcome to test the theme yourself, and contributions to [the project](https://github.com/colinwilson/lotusdocs) a very welcome.
 {{< /alert >}}
 
 Welcome to the Lotus Docs user guide. This guide shows you how to start creating technical documentation sites using Lotus Docs, including site customisation and using Lotus Docs' features and templates.

content/docs/test_markdown/unorthodox.md

@@ -52,7 +52,7 @@ This next sentence [demonstrates](https://colinwilson.uk) the colour of a link i
 
 {{< alert context="danger" text="The Tutorial is intended for novice to intermediate users.<br> Hello World" />}}
 
-{{< alert context="secondary" >}}
+{{< alert context="light" >}}
 The Tutorial is intended for novice to intermediate users.<br> Hello World
 This next sentence [demonstrates](https://colinwilson.uk) the colour of a link inside an alert box.
 {{< /alert >}}