Merge pull request #1760 from gethinode/templatev2

Templatev2

Author: markdumay

assets/scss/components/_navbar.scss

@@ -76,6 +76,11 @@
 	cursor: pointer;
 }
 
+.mode-toggle .label svg {
+    height: 1em;
+    width: 1.25em;
+}
+
 // Source: https://jsfiddle.net/njhgr40m/
 
 @if $enable-dark-mode {

config/_default/hugo.toml

@@ -149,7 +149,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
   [[module.imports]]
     path = "github.com/gethinode/mod-flexsearch/v3"
   [[module.imports]]
-    path = "github.com/gethinode/mod-fontawesome/v4"
+    path = "github.com/gethinode/mod-fontawesome/v5"
   [[module.imports]]
     path = "github.com/gethinode/mod-google-analytics/v2"
   [[module.imports]]

config/_default/params.toml

@@ -19,15 +19,54 @@
         cue = false
         tab = false
     [main.build]
-        transpiler = "libsass"
+        transpiler = "dartsass"
+        silenceDeprecations = true
     [main.colorMode]
         enabled = true
         modes = ["light", "dark"]
         toggle = false
-        iconLight = "fas sun"
-        iconDark = "fas moon"
 # toml-docs-end main
 
+# toml-docs-start icons
+[icons]
+    # Color mode toggle
+    colorModeLight       = "fas sun"
+    colorModeDark        = "fas moon"
+    # Navbar
+    navbarLanguage       = "fas globe"
+    navbarOverflow       = "fas ellipsis"
+    navbarVersionCheck   = "fas check"
+    # Pagination
+    paginationFirst      = "fas angles-left"
+    paginationPrev       = "fas angle-left"
+    paginationNext       = "fas angle-right"
+    paginationLast       = "fas angles-right"
+    # Other navigation
+    breadcrumbBack       = "fas angle-left"
+    pageNavPrev          = "fas arrow-left"
+    pageNavNext          = "fas arrow-right"
+    # Content
+    tocSort              = "fas sort"
+    cardReadMore         = "fas chevron-right"
+    externalLink         = "fas up-right-from-square"
+    testimonialNext      = "fas chevron-right"
+    testimonialQuote     = "fas quote-right"
+    headingAnchor        = "fas link"
+    notFoundPage         = "fas link-slash"
+    sharingWebshare      = "fas share-nodes"
+    sharingDownload      = "fas download"
+    [icons.admonition]
+        note       = "fas circle-info"
+        info       = "fas circle-info"
+        tip        = "fa lightbulb"
+        important  = "fas exclamation"
+        warning    = "fas triangle-exclamation"
+        caution    = "fa hand"
+    [icons.release]
+        deprecated = "fas trash-can"
+        feature    = "fas rocket"
+# toml-docs-end icons
+
 # toml-docs-start images
 [images]
     [images.cloudinary]
@@ -107,12 +146,9 @@
     [navigation.padding]
         x = 4
         y = 4
-    [navigation.language]
-        icon = "fas globe"
     [navigation.search]
         enabled = true
         modal = true
-        icon = "fas magnifying-glass"
 # toml-docs-end navigation
 
 # toml-docs-start messages

config/postcss.config.js

@@ -14,7 +14,7 @@ const purgecss = purgeCSSPlugin({
     const els = JSON.parse(content).htmlElements
     return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
   },
-  dynamicAttributes: ['data-bs-theme', 'data-bs-theme-animate'],
+  dynamicAttributes: ['data-bs-theme', 'data-bs-main-theme', 'data-bs-theme-animate', 'role'],
   fontFace: false,
   safelist: {
     standard: [
@@ -103,6 +103,9 @@ const purgecss = purgeCSSPlugin({
       // Bootstrap responsive tables
       /table-responsive/,  // All table-responsive-* variants and attribute selectors
 
+      // Color mode toggle - d-none-main-* classes plus [data-bs-main-theme="dark"] compound selectors
+      /d-none-main/,
+
       // Bootstrap transitions and utilities that get added via JS
       /fade/,
       /^translate/         // Bootstrap utilities

data/structures/button.yml

@@ -24,6 +24,8 @@ arguments:
     release: v1.0.0
   placement:
   icon:
+  icon-class:
+    release: v2.0.0
   order:
   justify:
   toast-id:

data/structures/download.yml

@@ -8,7 +8,7 @@ arguments:
   outline:
     default: true
   icon:
-    default: fas download
+    default: download
   order:
     default: last
   button-size:

data/structures/table.yml

@@ -27,6 +27,8 @@ arguments:
   searchable:
     release: v0.24.13
   wrap:
+  wrapper:
+    release: v2.0.0
   # deprecated arguments
   paging:
     type: bool

docs/content/blocks/_index.md

@@ -11,9 +11,9 @@ content_blocks:
         allow you to quickly assemble your content pages using visual elements.
         Powered by [Bookshop](https://github.com/CloudCannon/bookshop), these
         blocks are ready for visual editing using [CloudCannon](https://cloudcannon.com/).
-        Click on an item for more details about a block.
+        Click on an item for more details.
       align: start
-      width: 8
+    width: 8
     breadcrumb: true
 
   - _bookshop_name: articles

docs/content/blocks/about.md

@@ -2,7 +2,7 @@
 _schema: default
 title: About
 description: Use the about content block to display a lead text next to a featured illustration.
-icon: fas info
+icon: info-circle
 ---
 
 ## Overview
@@ -85,11 +85,11 @@ Set `link-type` to `link` to add links below the content.
   links:
     - title: First link
       url: 'about'
-      icon: fas chevron-right
+      icon: chevron-right
       force: true
     - title: Second link
       url: 'components/image/#args/'
-      icon: fas chevron-right
+      icon: chevron-right
     - title: Third link
       url: 'https://google.com'
 ```
@@ -121,7 +121,7 @@ Set `link-type` to `button` to add buttons below the content. You can adjust the
   links:
     - title: Primary button
       url: 'about'
-      icon: fas chevron-right
+      icon: chevron-right
       force: true
     - title: Outline button
       url: 'https://google.com'

docs/content/blocks/approach.md

@@ -2,7 +2,7 @@
 _schema: default
 title: Approach
 description: Use the approach block to show a featured image with one or more steps.
-icon: fas stairs
+icon: stairs
 ---
 
 ## Overview
@@ -25,18 +25,18 @@ The `approach` block renders a featured image with one or more steps.
   illustration:
     image: /img/placeholder.png
   orientation: stacked
-  icon_style: fa-xs text-primary
+  icon_style: text-primary
   padding: 0
   align: start
   elements:
     - title: First Step
-      icon: fas 1
+      icon: 1-circle
       content: Content of the first card
     - title: Second Step
-      icon: fas 2
+      icon: 2-circle
       content: Content of the second card
     - title: Third Step
-      icon: fas 3
+      icon: 3-circle
       content: Content of the third card
 ```