Update docs and config.toml

- Add instructions for Contact section clock and Plausible
- Update README and Theme Features post

Close #273

README.md

@@ -176,6 +176,14 @@ See the [hugo documentation](https://gohugo.io/content-management/multilingual/)
 
 Introduction contains a default menu. If you want to override this, you can do so by defining a `menu.main` in `config.toml`.
 
+## Contact section clock
+
+Introduction can optionally show your current local time in your [contact section](https://hugo-introduction.netlify.app/#contact). This uses vanilla JS and variables you provide. You can set this up by copying the settings in the exampleSite `config.toml` for `localTime`, `timeZone`, and `timeFormat`.
+
+## Plausible
+
+You can easily use Plausible.io for analytics by setting `plausible = true` in your `config.toml`. Plausible offers a privacy-friendly alternative to Google Analytics. You'll need your own Plausible account - see [plausible.io](https://plausible.io/) for more.
+
 ## Google Analytics
 
 Set `googleAnalytics` in `config.toml` to activate Hugo's [internal Google Analytics template](https://gohugo.io/templates/internal/#google-analytics).

assets/sass/_base.sass

@@ -34,7 +34,7 @@ a
         color: $primary
 
 h1, h2, .title, .subtitle
-    color: $h-color    
+    color: $h-color
 
 .title
     font-weight: $title-weight
@@ -51,6 +51,20 @@ hr
     background-color: $secondary
     height: 1px
 
+details
+    padding: .5em .5em 0
+
+summary
+    margin: -.5em -.5em 0
+    padding: .5em
+    cursor: pointer
+
+details[open]
+    padding: .5em
+
+details[open] summary
+    margin-bottom: .5em
+
 .container
     max-width: 1000px
 
@@ -78,9 +92,9 @@ pre
     border: none
 
 .card-thumbnail
-  width: 100%
-  height: 100%
-  object-fit: cover
+    width: 100%
+    height: 100%
+    object-fit: cover
 
 .bold-title
     font-size: 6rem

exampleSite/config.toml

@@ -5,7 +5,7 @@ DefaultContentLanguage           = "en"                    # Default language fo
 # googleAnalytics                 = ""                     # https://gohugo.io/templates/internal/#google-analytics
 
 [params]
-    themeStyle                   = "light"                 # Choose "light" or "dark" or "auto"
+    themeStyle                   = "auto"                  # Choose "light" or "dark" or "auto"
     favicon                      = "/img/fav.ico"          # Path to favicon file
     showRSSButton                = false                   # Show rss button in navigation
     fadeIn                       = true                    # Turn on/off the fade-in effect
@@ -14,6 +14,7 @@ DefaultContentLanguage           = "en"                    # Default language fo
     email                        = "youremail@email.com"   # E-mail address for contact section
     # customCSS                  = ["foo.css"]             # Include custom css files placed under assets/
     # customJS                   = ["foo.js"]              # Include custom JavaScript files placed under assets/
+    # plausible                  = true                    # Use Plausible analytics (requires an account at Plausible.io)
 
     # Configure the home page
     [params.home]

exampleSite/content/en/blog/configuration.md

@@ -7,6 +7,20 @@ series: ["quickstart"]
 
 Here are some helpful tips for setting up this theme.
 
+## Configuration
+
+Most of what you'll want to configure is demonstrated in the exampleSite `config.toml`. This is [Hugo's configuration file](https://gohugo.io/getting-started/configuration/). You can copy the `config.toml` in the `exampleSite/` to your site root get started.
+
+<details><summary>Here are all the options included in the configuration file for this example site!</summary>
+
+```toml
+{{% md %}}
+{{< readfile file="config.toml" >}}
+{{% /md %}}
+```
+
+</details>
+
 ## Syntax Highlighting
 
 Introduction allows the use of Hugo's rich built-in syntax highlighting capabilities. See [Syntax Highlighting](https://gohugo.io/content-management/syntax-highlighting/) in the Hugo docs.
@@ -45,15 +59,3 @@ defaultMarkdownHandler = "goldmark"
 [markup.goldmark.renderer]
 unsafe = true
 ```
-
-## Configuration
-
-Introduction can be easily configured using [Hugo's configuration file](https://gohugo.io/getting-started/configuration/). You can copy the `config.toml` in the `exampleSite/` to your site root get started.
-
-Here are all the options included in the configuration file for this example site!
-
-```toml
-{{% md %}}
-{{< readfile file="config.toml" >}}
-{{% /md %}}
-```

exampleSite/content/en/home/contact.md

@@ -4,4 +4,4 @@ title: "Contact"
 
 In the Contact section of **Introduction**, you may optionally display the current time in your preferred timezone.
 
-This lets visitors know what sort of response time to expect when they contact you. The timezone is easily set in the `config.toml` file.
+This lets visitors know what sort of response time to expect when they contact you. The timezone is easily set in the `config.toml` file. See the exampleSite configuration for instructions.

exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content

@@ -7929,6 +7929,20 @@ hr {
   background-color: #dbdbdb;
   height: 1px; }
 
+details {
+  padding: .5em .5em 0; }
+
+summary {
+  margin: -.5em -.5em 0;
+  padding: .5em;
+  cursor: pointer; }
+
+details[open] {
+  padding: .5em; }
+
+details[open] summary {
+  margin-bottom: .5em; }
+
 .container {
   max-width: 1000px; }
 

layouts/_default/baseof.html

@@ -3,6 +3,7 @@
     <head>
         {{ block "head" . }}
         {{ partial "head/metadata.html" . }}
+        {{ partial "head/plausible.html" . }}
         {{ partial "head/openGraph.html" . }}
         {{ partial "head/favicons.html" . }}
         {{ partial "head/css.html" . }}

layouts/index.html

@@ -3,6 +3,7 @@
 
     <head>
         {{ partial "head/metadata.html" . }}
+        {{ if .Site.Params.plausible }}{{ partial "head/plausible.html" . }}{{ end }}
         {{ partial "head/openGraph.html" . }}
         {{ partial "head/favicons.html" . }}
         {{ partial "head/css.html" . }}