Merge pull request #402 from gethinode/develop

Fix incorrect partial call

.github/workflows/build.yml

@@ -24,5 +24,7 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
     - run: npm ci
     - run: npm run build
+    - run: npm run build:example

.github/workflows/lint.yml

@@ -19,10 +19,13 @@ jobs:
 
     steps:
     - uses: actions/checkout@v3
+
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
+  
     - run: npm ci --ignore-scripts
     - run: npm run lint

.gitignore

@@ -1,5 +1,5 @@
 /_vendor
-/public
+public/
 resources/
 node_modules/
 

archetypes/default.md

@@ -1,2 +1,16 @@
-+++
-+++
+---
+# author: 
+title: {{ replace .Name "-" " " | title }}
+date: {{ .Date }}
+draft: true
+# layout: 
+# description: 
+# tags: 
+# icon: 
+# thumbnail: 
+    # url: 
+    # author: 
+    # authorURL: 
+    # origin: 
+    # originURL: 
+---

assets/scss/app.scss

@@ -18,6 +18,7 @@
 @import "components/clipboard.scss";
 @import "components/command.scss";
 @import "components/comments.scss";
+@import "components/feature.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
 @import "components/pagination.scss";

assets/scss/components/_feature.scss

@@ -0,0 +1,3 @@
+.feature {
+    margin-top: 0.3 * $navbar-offset;
+}

config/_default/hugo.toml

@@ -6,12 +6,13 @@ enableGitInfo = true
 # toml-docs-end main
 
 # additional settings
-googleAnalytics = "G-T85PPZ36GN"
-baseURL = "https://demo.gethinode.com/"
+# googleAnalytics = "G-xxxxxxxxxx"
+baseURL = "https://example.com/"
 canonifyURLs = false
 enableEmoji = true
 enableRobotsTXT = true
 enableInlineShortcodes = true
+summaryLength = 20
 
 # prevent build failures when using Hugo's Instagram shortcode due to deprecated Instagram API.
 # See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
@@ -24,7 +25,7 @@ timeout = "180s"
 # toml-docs-start language
 languageCode = "en-us"
 defaultContentLanguage = "en"
-defaultContentLanguageInSubdir = true
+defaultContentLanguageInSubdir = false
 # toml-docs-end language
 
 # toml-docs-start redirect

config/_default/languages.toml

@@ -1,31 +1,15 @@
 # toml-docs-start lang-main
 [en]
     languageName = "English"
-    contentDir = "content/en"
+    contentDir = "content"
     weight = 1
 # toml-docs-end lang-main
 # toml-docs-start lang-param
     [en.params.head]
         tagline = "A Hugo Theme"
-    [en.params.feature]
-        link = "about"
-        caption = "About"
+    [en.params.social]
+        title = "Follow me"
+        caption = "I work on everything coding and tweet developer memes"
     [en.params.footer]
-        license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
-        socialTitle = "Follow me"
-        socialCaption = "I work on everything coding and tweet developer memes"
+        # license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
 # toml-docs-end lang-param
-
-[nl]
-    languageName = "Nederlands"
-    contentDir = "content/nl"
-    weight = 2
-    [nl.params.head]
-        tagline = "Een Hugo Thema"
-    [nl.params.feature]
-        link = "over-mij"
-        caption = "Over mij"
-    [nl.params.footer]
-        license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
-        socialTitle = "Volg mij"
-        socialCaption = "Ik doe aan programmeren en tweet memes"

config/_default/menus/menus.en.toml

@@ -1,34 +1,12 @@
 [[main]]
-  name = "About"
-  pageRef = "/about/"
+  name = "Home"
+  pageRef = "/"
   weight = 10
 
-[[main]]
-  name = "Blog"
-  pageRef = "/blog/"
-  weight = 20
-
-[[main]]
-  name = "Projects"
-  pageRef = "/projects/"
-  weight = 30
-
-[[main]]
-  name = "Sample project"
-  pageRef = "/projects/sample-project/"
-  parent = "Projects"
-  weight = 1
-
-[[main]]
-  name = "Another project"
-  pageRef = "/projects/another-project/"
-  parent = "Projects"
-  weight = 2
-
 [[main]]
   name = "Tags"
-  pageRef = "/tags/"
-  weight = 40
+  pageRef = "/tags"
+  weight = 20
 
 [[social]]
   name = "LinkedIn"

config/_default/params.toml

@@ -5,6 +5,7 @@
     enableDarkMode = true
     modes = ["light", "dark"]
     canonifyAssetsURLs = false
+    endorse = true
     [main.externalLinks]
         cue = false
         tab = false
@@ -37,8 +38,7 @@
 
 # toml-docs-start home
 [home]
-    sections = ["blog", "projects"]
-    featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
+    # sections = ["posts"]
     fullCover = false
     centerHeadline = false
     style = ""
@@ -102,37 +102,21 @@
 # toml-docs-end sharing
 
 # toml-docs-start sections
-[sections]
-    [sections.blog]
-        title = "Blog"
-        sort = "date"
-        reverse = true
-        nested = true
-        cols = 3
-        color = ""
-        padding = "0"
-        header = "full"
-        footer = "none"
-        orientation = "stacked"
-        style = "border-0 card-zoom"
-        homepage = 3
-        separator = true
-    [sections.projects]
-        title = "Projects"
-        layout = "card"
-        sort = "title"
-        reverse = false
-        nested = true
-        cols = 1
-        background = "body-tertiary"
-        color = "body"
-        padding = "3"
-        header = "none"
-        footer = "tags"
-        orientation = "horizontal"
-        style = "border-1 card-emphasize"
-        homepage = 3
-        separator = false
+# [sections]
+#     [sections.posts]
+#         title = "Posts"
+#         sort = "date"
+#         reverse = true
+#         nested = true
+#         cols = 3
+#         color = ""
+#         padding = "0"
+#         header = "full"
+#         footer = "none"
+#         orientation = "stacked"
+#         style = "border-0 card-zoom"
+#         homepage = 3
+#         separator = true
 # toml-docs-end sections
 
 [favicon]
@@ -196,11 +180,4 @@
     #theme = "" 
 
 [links]
-    bs_badge_heading = "https://getbootstrap.com/docs/5.2/components/badge/#headings"
-    hinode_docs = "https://gethinode.com/docs"
-    hugo_imaging = "https://gohugo.io/content-management/image-processing/#imaging-configuration"
-    mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
-    observatory = "https://observatory.mozilla.org/analyze/demo.gethinode.com"
-    pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F"
-    utterances = "https://utteranc.es"
- 
+    hinode = "https://gethinode.com"

content/_index.md

@@ -0,0 +1,13 @@
+---
+title: Welcome to Hinode!
+thumbnail:
+    url: /img/sunrise.jpg
+    author: Harris Vo
+    authorURL: https://unsplash.com/@hoanvokim
+    origin: https://unsplash.com/photos/ZX6BPboJrYk
+    originName: Unsplash
+---
+
+A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
+
+{{< button href="https://gethinode.com/docs" icon="fas book-open" order="first" >}}Get Started{{< /button>}}

content/en/_index.md

@@ -1,6 +0,0 @@
----
-author: Mark Dumay
-title: Welcome to Hinode!
----
-
-A clean documentation and blog theme for your Hugo site based on Bootstrap 5.

content/nl/_index.md

@@ -1,6 +0,0 @@
----
-author: Mark Dumay
-title: Welkom bij Hinode!
----
-
-Een documentatie en blog thema voor Hugo gebaseerd op Bootstrap 5.

exampleSite/config/_default/hugo.toml

@@ -0,0 +1,78 @@
+title = "Hinode"
+copyright = "Copyright © 2023 Mark Dumay."
+paginate = 9
+enableGitInfo = true
+
+# additional settings
+googleAnalytics = "G-T85PPZ36GN"
+baseURL = "https://demo.gethinode.com/"
+canonifyURLs = false
+enableEmoji = true
+enableRobotsTXT = true
+enableInlineShortcodes = true
+
+# prevent build failures when using Hugo's Instagram shortcode due to deprecated Instagram API.
+# See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
+ignoreErrors = ["error-remote-getjson"]
+
+timeout = "180s"
+
+languageCode = "en-us"
+defaultContentLanguage = "en"
+defaultContentLanguageInSubdir = true
+
+[outputFormats.REDIR]
+mediaType = "text/netlify"
+baseName = "_redirects"
+isPlainText = true
+notAlternative = true
+
+[mediaTypes."text/netlify"]
+delimiter = ""
+
+[outputs]
+home = ["HTML", "RSS", "REDIR"]
+
+[build]
+  writeStats = true
+  
+[taxonomies]
+  tag = 'tags'
+
+[privacy]
+  [privacy.vimeo]
+    disabled = false
+    simple = true
+
+  [privacy.twitter]
+    disabled = false
+    enableDNT = true
+    simple = true
+
+  [privacy.instagram]
+    disabled = false
+    simple = true
+
+  [privacy.youtube]
+    disabled = false
+    privacyEnhanced = true
+
+[services]
+  [services.instagram]
+    disableInlineCSS = true
+  [services.twitter]
+    disableInlineCSS = true
+
+[outputFormats]
+  [outputFormats.XML]
+    isPlainText = false
+    mediaType = "application/xml"
+    isHtml = false
+    noUgly = true
+    permalinkable = false
+    name = "xml"
+
+[module]
+  replacements = 'github.com/gethinode/hinode -> ../..'
+  [[module.imports]]
+    path = "github.com/gethinode/hinode"

exampleSite/config/_default/languages.toml

@@ -0,0 +1,29 @@
+# toml-docs-start lang-main
+[en]
+    languageName = "English"
+    contentDir = "content/en"
+    weight = 1
+# toml-docs-end lang-main
+# toml-docs-start lang-param
+    [en.params.head]
+        tagline = "A Hugo Theme"
+    [en.params.social]
+        title = "Follow me"
+        caption = "I work on everything coding and tweet developer memes"
+    [en.params.footer]
+        # license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
+# toml-docs-end lang-param
+
+[nl]
+    languageName = "Nederlands"
+    contentDir = "content/nl"
+    weight = 2
+    [nl.params.head]
+        tagline = "Een Hugo Thema"
+    [nl.params.social]
+        title = "Volg mij"
+        caption = "Ik doe aan programmeren en tweet memes"
+    [nl.params.footer]
+        # license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
+    [nl.params.sections.projects]
+        title = "Projecten"

exampleSite/config/_default/markup.toml

@@ -0,0 +1,35 @@
+defaultMarkdownHandler = "goldmark"
+
+[highlight]
+    anchorLineNos = false
+    codeFences = true
+    guessSyntax = true
+    hl_Lines = ""
+    lineAnchors = ""
+    lineNoStart = 1
+    lineNos = false
+    lineNumbersInTable = false
+    noClasses = false
+    tabWidth = 2
+    ## Update the 'create:syntax' command in package.json to modify the style
+    ## The first two lines have been modified to remove the background color
+    # style = "monokailight" 
+
+[goldmark]
+    [goldmark.extensions]
+        definitionList = true
+        footnote = true
+        linkify = true
+        strikethrough = true
+        table = true
+        taskList = true
+        typographer = true
+    [goldmark.parser]
+        autoHeadingID = true
+        autoHeadingIDType = 'github'
+    [goldmark.parser.attribute]
+        block = true
+    [goldmark.renderer]
+        hardWraps = false
+        unsafe = true
+        xhtml = false

exampleSite/config/_default/menus/menus.en.toml

@@ -0,0 +1,73 @@
+[[main]]
+  name = "About"
+  pageRef = "/about/"
+  weight = 10
+
+[[main]]
+  name = "Blog"
+  pageRef = "/blog/"
+  weight = 20
+
+[[main]]
+  name = "Projects"
+  pageRef = "/projects/"
+  weight = 30
+
+[[main]]
+  name = "Sample project"
+  pageRef = "/projects/sample-project/"
+  parent = "Projects"
+  weight = 1
+
+[[main]]
+  name = "Another project"
+  pageRef = "/projects/another-project/"
+  parent = "Projects"
+  weight = 2
+
+[[main]]
+  name = "Tags"
+  pageRef = "/tags/"
+  weight = 40
+
+[[social]]
+  name = "LinkedIn"
+  pre = "fab linkedin"
+  url = "https://linkedin.com/"
+  weight = 10
+
+[[social]]
+  name = "GitHub"
+  pre = "fab fa-github"
+  url = "https://github.com/"
+  weight = 20
+
+[[social]]
+  name = "Medium"
+  pre = "fab medium"
+  url = "https://medium.com/"
+  weight = 30
+
+# toml-docs-start sample-navigation
+[[sample]]
+  name = "Blog"
+  pageRef = "/blog/"
+  weight = 10
+
+[[sample]]
+  name = "Projects"
+  pageRef = "/projects/"
+  weight = 20
+
+[[sample]]
+  name = "Sample project"
+  pageRef = "/projects/sample-project/"
+  parent = "Projects"
+  weight = 1
+
+[[sample]]
+  name = "Another project"
+  pageRef = "/projects/another-project/"
+  parent = "Projects"
+  weight = 2
+# toml-docs-end sample-navigation

exampleSite/config/_default/params.toml

@@ -0,0 +1,183 @@
+[main]
+    separator = "-"
+    description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
+    enableDarkMode = true
+    modes = ["light", "dark"]
+    canonifyAssetsURLs = false
+    [main.externalLinks]
+        cue = true
+        tab = true
+
+[modules]
+    core = ["bootstrap", "flexsearch", "fontawesome"]
+    optional = ["leaflet", "katex"]
+    excludeSCSS = ["bootstrap"]
+    disableTemplate = ["katex"]
+    [modules.fontawesome]
+        inline = true
+        debug = true
+        skipMissing = false
+
+[debugging]
+    showJS = false
+    showSCSS = false
+
+[docs]
+    basePath = "/" # TODO: replace
+    github = "https://github.com/gethinode/hinode"
+    release = "https://github.com/gethinode/hinode/releases/tag/"
+    checkVersion = false
+
+[home]
+    sections = ["blog", "projects"]
+    fullCover = false
+    centerHeadline = false
+    style = ""
+
+[navigation]
+    anchor = true
+    logo = "/img/logo_icon.svg"
+    color = "body"
+    fixed = true
+    offset = "3.8em"
+    search = true
+    breadcrumb = true
+    toc = true
+    sidebar = true
+
+[messages]
+    placement = "bottom-right"
+
+[sharing]
+    enabled = true
+    sort = "weight"
+    reverse = false
+    webshare = true
+
+[[sharing.providers]]
+    name = "LinkedIn"
+    url = "https://www.linkedin.com/sharing/share-offsite/?url={url}"
+    icon = "fab linkedin"
+    weight = 10
+
+[[sharing.providers]]
+    name = "Twitter"
+    url = "https://twitter.com/home?status={url}"
+    icon = "fab x-twitter"
+    weight = 20
+
+[[sharing.providers]]
+    name = "Facebook"
+    url = "https://www.facebook.com/sharer.php?u={url}"
+    icon = "fab facebook"
+    weight = 30
+
+[[sharing.providers]]
+    name = "WhatsApp"
+    url = "whatsapp://send?text={title}%20{url}"
+    icon = "fab whatsapp"
+    weight = 40
+
+[[sharing.providers]]
+    name = "email"
+    url = "{url}"
+    icon = "fas link"
+    weight = 50
+    clipboard = true
+
+[sections]
+    [sections.blog]
+        title = "Blog"
+        sort = "date"
+        reverse = true
+        cols = 3
+        color = ""
+        padding = "0"
+        header = "full"
+        footer = "none"
+        orientation = "stacked"
+        style = "border-0 card-zoom"
+        homepage = 3
+        separator = true
+    [sections.projects]
+        title = "Projects"
+        layout = "card"
+        sort = "title"
+        reverse = false
+        nested = true
+        cols = 1
+        background = "body-tertiary"
+        color = "body"
+        padding = "3"
+        header = "none"
+        footer = "tags"
+        orientation = "horizontal"
+        style = "border-1 card-emphasize"
+        homepage = 3
+        separator = false
+
+[favicon]
+    logo = "img/favicon.png"
+    sizes = [16, 32, 48]
+
+# toml-docs-start theme-colors
+[style]
+    primary = "#d43900"
+    secondary = "#6c757d"
+    success = "#198754"
+    info = "#0dcaf0"
+    warning = "#ffc107"
+    danger = "#dc3545"
+    light = "#f8f9fa"
+    dark = "#212529"
+    themeOpacity = "10"
+    themeFont = "Inter"
+    # themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
+    themeFontPath = "/fonts" # local path
+    purge = true
+# toml-docs-end theme-colors
+
+[schema]
+    type = "Organization"
+    name = "Hinode"
+    locale = "en-US"
+    # twitter = "https://twitter.com/gethinode"
+    # linkedIn = ""
+    github = "https://github.com/gethinode/hinode"
+    section = "blog"
+    [author]
+        name = "Mark Dumay"
+        # twitter = "https://twitter.com/markdumay"
+        linkedin = "https://www.linkedin.com/in/markdumay/"
+        github = "https://github.com/markdumay"
+    [logo]
+        url = "img/logo512x512.png"
+        width = 512
+        height = 512
+    [image]
+        url = "img/logo1280x640.png"
+        width = 1280
+        height = 640
+
+[opengraph]
+    images = ["logo.png"]
+    locale = "en_US"
+
+[comments]
+    enabled = false
+    repo = "" # Replace with your repository.
+    #issueTerm = "pathname" # pathname, url, title, og:title
+    #label = "comment"
+    # By default, light and dark mode correspond to github-light and github-dark, respectively.
+    # Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark.
+    #theme = "" 
+
+[links]
+    bs_badge_heading = "https://getbootstrap.com/docs/5.3/components/badge/#headings"
+    hinode_docs = "https://gethinode.com"
+    hugo_imaging = "https://gohugo.io/content-management/image-processing/#imaging-configuration"
+    mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
+    observatory = "https://observatory.mozilla.org/analyze/demo.gethinode.com"
+    pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F"
+    utterances = "https://utteranc.es"
+    hinode = "https://gethinode.com"

exampleSite/config/_default/server.toml

@@ -0,0 +1,43 @@
+# toml-docs-start server-config
+[[headers]]
+for = '/**'
+[headers.values]
+    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
+    X-Content-Type-Options = "nosniff"
+    X-XSS-Protection = "1; mode=block"
+    Content-Security-Policy = """\
+        default-src 'self'; \
+        script-src 'self' \
+            https://utteranc.es/client.js https://*.google-analytics.com https://*.googletagmanager.com; \
+        style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
+        object-src 'none'; \
+        base-uri 'self'; \
+        connect-src 'self'
+            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
+        font-src 'self' https://fonts.gstatic.com; \
+        frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
+        img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
+        manifest-src 'self'; \
+        media-src 'self' \
+        """
+    X-Frame-Options = "SAMEORIGIN"
+    Referrer-Policy = "strict-origin"
+    Permissions-Policy = """\
+        geolocation=(), \
+        midi=(), \
+        sync-xhr=(), \
+        microphone=(), \
+        camera=(), \
+        magnetometer=(), \
+        gyroscope=(), \
+        fullscreen=(), \
+        payment=() \
+        """
+    cache-control = """\
+        max-age=0, \
+        no-cache, \
+        no-store, \
+        must-revalidate \
+        """
+    Access-Control-Allow-Origin = "*"
+# toml-docs-end server-config

exampleSite/content/en/_index.md

@@ -0,0 +1,14 @@
+---
+author: Mark Dumay
+title: Welcome to Hinode!
+thumbnail:
+    url: /img/sunrise.jpg
+    author: Harris Vo
+    authorURL: https://unsplash.com/@hoanvokim
+    origin: https://unsplash.com/photos/ZX6BPboJrYk
+    originName: Unsplash
+---
+
+A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
+
+{{< button href="about" >}}About{{< /button>}}

exampleSite/content/en/blog/bootstrap-elements.md

@@ -1,12 +1,15 @@
 ---
 author: Mark Dumay
 title: Bootstrap elements
-date: 2023-05-20
+date: 2023-08-05
 description: Use shortcodes to add common Bootstrap elements with ease.
 tags: ["bootstrap", "shortcode"]
-thumbnail: img/boots.jpg
-photoCredits: <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a>
-photoSource: <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a>
+thumbnail:
+  url: img/boots.jpg
+  author: Nathan Dumlao
+  authorURL: https://unsplash.com/@nate_dumlao
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/QLPWQvHvmII
 ---
 
 Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
@@ -170,6 +173,28 @@ Use the `docs` shortcode to display the content of a `js`, `scss` or `toml` file
 
 {{< docs name="theme-colors" file="config/_default/params.toml" >}}
 
+## Example
+
+Use the `example` shortcode to display a code example and to render a preview of the same input.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command */>}}
+export MY_VAR=123
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## File
+
+Use the `file` shortcode to print and highlight the full content of a given input file.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* file path="./config/_default/languages.toml" id="file-collapse-1" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Icon
 
 As an example, the following shortcodes show a square check, a brand logo, and a circle check.

exampleSite/content/en/blog/components.md

@@ -4,9 +4,12 @@ title: Components
 date: 2023-07-21
 description: Use shortcodes to add predefined components powered by external libraries.
 tags: ["bootstrap", "shortcode"]
-thumbnail: img/puzzle.jpg
-photoCredits: <a href="https://unsplash.com/@ryoji__iwata">Ryoji Iwata</a>
-photoSource: <a href="https://unsplash.com/photos/5siQcvSxCP8">Unsplash</a>
+thumbnail:
+  url: img/puzzle.jpg
+  author: Ryoji Iwata
+  authorURL: https://unsplash.com/@ryoji__iwata
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/5siQcvSxCP8
 modules: ["katex", "leaflet"]
 ---
 

exampleSite/content/en/blog/first-post.md

@@ -4,9 +4,12 @@ title: First post
 date: 2022-10-01
 description: This is my first blog post.
 tags: ["blog"]
-thumbnail: img/notepad.jpg
-photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
-photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
+thumbnail:
+  url: img/notepad.jpg
+  author: Frederick Medina
+  authorURL: https://unsplash.com/@frederickjmedina
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/PdfRE-xB--s
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate, ante in luctus congue, leo risus semper justo, vel consequat sapien lectus quis ipsum. In imperdiet urna justo. Nulla vel pellentesque ipsum. Cras congue feugiat dolor ac aliquam. Pellentesque eget dui venenatis, ultrices urna ac, vehicula nibh. Curabitur est lectus, dapibus eu vehicula non, malesuada et dui. Nam enim nulla, egestas et nunc non, elementum aliquet justo. Mauris euismod mauris sapien, eget vestibulum odio dictum sit amet. Morbi nisl elit, placerat at auctor in, finibus ac neque. Curabitur placerat feugiat risus non vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis cursus est, nec posuere libero.

exampleSite/content/en/blog/fourth-post.md

@@ -4,9 +4,12 @@ title: Fourth post
 date: 2023-01-01
 description: This is my fourth blog post.
 tags: ["blog"]
-thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
-photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
-photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>
+thumbnail:
+  url: img/flowers.jpg
+  author: Arvee Marie
+  authorURL: https://unsplash.com/@flutterhappy
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/YnfGtpt2gf4
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus libero in felis accumsan, vitae imperdiet metus vehicula. Quisque nec dignissim purus. In id dui porta sapien posuere viverra nec vel nisi. Sed varius tincidunt lectus, quis sagittis felis interdum id. Proin purus odio, ultrices auctor libero convallis, volutpat gravida turpis. Ut commodo metus orci, quis sagittis lectus rhoncus non. Nulla et lectus tortor. Suspendisse quam felis, molestie non odio quis, consequat venenatis orci. Etiam sed turpis sit amet elit scelerisque imperdiet. Sed suscipit felis non nibh suscipit egestas. Nulla sodales libero non rhoncus consequat. Nunc in elit at est cursus congue ut ac velit. Cras luctus libero augue, id semper sapien volutpat ultrices.

exampleSite/content/en/blog/second-post.md

@@ -4,9 +4,12 @@ title: Second post
 date: 2022-11-01
 description: This is my second blog post.
 tags: ["blog"]
-thumbnail: img/phone.jpg # https://picsum.photos/id/160/3200/2119
-photoCredits: <a href="https://unsplash.com/@thomweerd">Thom</a> 
-photoSource: <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
+thumbnail:
+  url: img/phone.jpg
+  author: Thom
+  authorURL: https://unsplash.com/@thomweerd
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/Zdcq3iKly6g
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin sapien. Ut porttitor lectus eu tempor ultricies. Sed semper tincidunt nibh pellentesque condimentum. Vivamus dictum sem eu rhoncus semper. Vestibulum convallis congue tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris magna urna, egestas sit amet ligula quis, viverra semper arcu. Praesent laoreet nunc vitae nulla posuere facilisis.

exampleSite/content/en/blog/third-post.md

@@ -4,9 +4,12 @@ title: Third post
 date: 2022-12-01
 description: This is my third blog post.
 tags: ["blog"]
-thumbnail: https://picsum.photos/id/184/4288/2848.jpg
-photoCredits: <a href="https://unsplash.com/@timdegroot">Tim de Groot</a>
-photoSource: <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
+thumbnail:
+  url: https://picsum.photos/id/184/4288/2848.jpg
+  author: Tim de Groot
+  authorURL: https://unsplash.com/@timdegroot
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/yNGQ830uFB4
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id scelerisque ligula. Vestibulum eu lorem tortor. Suspendisse tristique ultrices mauris, non maximus lorem faucibus in. Suspendisse sagittis eleifend dapibus. Curabitur dignissim luctus sapien eu consequat. Proin congue dui vel ipsum bibendum varius. Pellentesque cursus nisi metus, egestas eleifend ipsum sollicitudin vitae. Sed vitae erat elementum, semper turpis sed, molestie nulla.

exampleSite/content/nl/_index.md

@@ -0,0 +1,14 @@
+---
+author: Mark Dumay
+title: Welkom bij Hinode!
+thumbnail:
+    url: /img/sunrise.jpg
+    author: Harris Vo
+    authorURL: https://unsplash.com/@hoanvokim
+    origin: https://unsplash.com/photos/ZX6BPboJrYk
+    originName: Unsplash
+---
+
+Een documentatie en blog thema voor Hugo gebaseerd op Bootstrap 5.
+
+{{< button href="over-mij" >}}Over mij{{< /button>}}

exampleSite/content/nl/blog/bootstrap-elements.md

@@ -2,12 +2,15 @@
 author: Mark Dumay
 title: Bootstrap elementen
 slug: bootstrap-elementen
-date: 2023-02-17
+date: 2023-08-05
 description: Gebruik shortcodes om eenvoudig Bootstrap elementen toe te voegen.
 tags: ["bootstrap", "shortcode"]
-thumbnail: img/boots.jpg
-photoCredits: <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a>
-photoSource: <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a>
+thumbnail:
+  url: img/boots.jpg
+  author: Nathan Dumlao
+  authorURL: https://unsplash.com/@nate_dumlao
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/QLPWQvHvmII
 ---
 
 Hinode beschikt over meerdere shortcodes om eenvoudig Bootstrap elementen toe te voegen aan je website. De [officiële documentatie]({{< param "links.hinode_docs" >}}) bevat meer details.
@@ -171,6 +174,28 @@ Gebruik de volgende shortcode om de inhoud van een `toml` of `scss` bestand te t
 
 {{< docs name="theme-colors" file="config/_default/params.toml" >}}
 
+## Example
+
+Gebruik de `example` shortcode om zowel de input als een voorbeeld van code te tonen.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command */>}}
+export MY_VAR=123
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## File
+
+Gebruik de `file` shortcode om de volledige inhoud van een bestand te tonen, inclusief taalafhankelijke opmaak.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* file path="./config/_default/languages.toml" id="file-collapse-1" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Icon
 
 De volgende shortcodes tonen drie verschillende iconen:

exampleSite/content/nl/blog/components.md

@@ -5,9 +5,12 @@ slug: componenten
 date: 2023-07-21
 description: Gebruik shortcodes om voorgedefiniëerde componenten toe te voegen die gebruikmaken van externe libraries.
 tags: ["bootstrap", "shortcode"]
-thumbnail: img/puzzle.jpg
-photoCredits: <a href="https://unsplash.com/@ryoji__iwata">Ryoji Iwata</a>
-photoSource: <a href="https://unsplash.com/photos/5siQcvSxCP8">Unsplash</a>
+thumbnail:
+  url: img/puzzle.jpg
+  author: Ryoji Iwata
+  authorURL: https://unsplash.com/@ryoji__iwata
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/5siQcvSxCP8
 modules: ["katex", "leaflet"]
 ---
 
@@ -35,3 +38,5 @@ De volgende shortcode toont een interactieve kaart van Amsterdam.
 {{</* map lat=52.377 long=4.90 zoom=13 popup="Amsterdam CS" popup-lat=52.378062 popup-long=4.900562 */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
+
+[bar]({{< param "links" >}})

exampleSite/content/nl/blog/first-post.md

@@ -5,9 +5,12 @@ slug: eerste-artikel
 date: 2022-10-01
 description: Dit is mijn eerste artikel.
 tags: ["blog"]
-thumbnail: img/notepad.jpg
-photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
-photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
+thumbnail:
+  url: img/notepad.jpg
+  author: Frederick Medina
+  authorURL: https://unsplash.com/@frederickjmedina
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/PdfRE-xB--s
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate, ante in luctus congue, leo risus semper justo, vel consequat sapien lectus quis ipsum. In imperdiet urna justo. Nulla vel pellentesque ipsum. Cras congue feugiat dolor ac aliquam. Pellentesque eget dui venenatis, ultrices urna ac, vehicula nibh. Curabitur est lectus, dapibus eu vehicula non, malesuada et dui. Nam enim nulla, egestas et nunc non, elementum aliquet justo. Mauris euismod mauris sapien, eget vestibulum odio dictum sit amet. Morbi nisl elit, placerat at auctor in, finibus ac neque. Curabitur placerat feugiat risus non vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis cursus est, nec posuere libero.

exampleSite/content/nl/blog/fourth-post.md

@@ -5,9 +5,12 @@ slug: vierde-artikel
 date: 2023-01-01
 description: Dit is mijn vierde artikel.
 tags: ["blog"]
-thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
-photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
-photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>
+thumbnail:
+  url: img/flowers.jpg
+  author: Arvee Marie
+  authorURL: https://unsplash.com/@flutterhappy
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/YnfGtpt2gf4
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus libero in felis accumsan, vitae imperdiet metus vehicula. Quisque nec dignissim purus. In id dui porta sapien posuere viverra nec vel nisi. Sed varius tincidunt lectus, quis sagittis felis interdum id. Proin purus odio, ultrices auctor libero convallis, volutpat gravida turpis. Ut commodo metus orci, quis sagittis lectus rhoncus non. Nulla et lectus tortor. Suspendisse quam felis, molestie non odio quis, consequat venenatis orci. Etiam sed turpis sit amet elit scelerisque imperdiet. Sed suscipit felis non nibh suscipit egestas. Nulla sodales libero non rhoncus consequat. Nunc in elit at est cursus congue ut ac velit. Cras luctus libero augue, id semper sapien volutpat ultrices.

exampleSite/content/nl/blog/second-post.md

@@ -5,9 +5,12 @@ slug: tweede-artikel
 date: 2022-11-01
 description: Dit is mijn tweede artikel.
 tags: ["blog"]
-thumbnail: img/phone.jpg # https://picsum.photos/id/160/3200/2119
-photoCredits: <a href="https://unsplash.com/@thomweerd">Thom</a> 
-photoSource: <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
+thumbnail:
+  url: img/phone.jpg
+  author: Thom
+  authorURL: https://unsplash.com/@thomweerd
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/Zdcq3iKly6g
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin sapien. Ut porttitor lectus eu tempor ultricies. Sed semper tincidunt nibh pellentesque condimentum. Vivamus dictum sem eu rhoncus semper. Vestibulum convallis congue tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris magna urna, egestas sit amet ligula quis, viverra semper arcu. Praesent laoreet nunc vitae nulla posuere facilisis.

exampleSite/content/nl/blog/third-post.md

@@ -5,9 +5,12 @@ slug: derde-artikel
 date: 2022-12-01
 description: Dit is mijn derde artikel.
 tags: ["blog"]
-thumbnail: https://picsum.photos/id/184/4288/2848.jpg
-photoCredits: <a href="https://unsplash.com/@timdegroot">Tim de Groot</a>
-photoSource: <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
+thumbnail:
+  url: https://picsum.photos/id/184/4288/2848.jpg
+  author: Tim de Groot
+  authorURL: https://unsplash.com/@timdegroot
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/yNGQ830uFB4
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id scelerisque ligula. Vestibulum eu lorem tortor. Suspendisse tristique ultrices mauris, non maximus lorem faucibus in. Suspendisse sagittis eleifend dapibus. Curabitur dignissim luctus sapien eu consequat. Proin congue dui vel ipsum bibendum varius. Pellentesque cursus nisi metus, egestas eleifend ipsum sollicitudin vitae. Sed vitae erat elementum, semper turpis sed, molestie nulla.

exampleSite/go.mod

@@ -0,0 +1,11 @@
+module github.com/gethinode/hinode-test
+
+go 1.19
+
+require (
+	github.com/gethinode/mod-bootstrap v1.1.1 // indirect
+	github.com/gethinode/mod-flexsearch v1.2.0 // indirect
+	github.com/gethinode/mod-fontawesome v1.2.4 // indirect
+	github.com/gethinode/mod-katex v1.0.2 // indirect
+	github.com/gethinode/mod-leaflet v0.3.4 // indirect
+)

exampleSite/go.sum

@@ -0,0 +1,10 @@
+github.com/gethinode/mod-bootstrap v1.1.1 h1:Tx4M5hGVOFrEaxnUONDAm6N9xuRi5UphKlT7F26HujU=
+github.com/gethinode/mod-bootstrap v1.1.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
+github.com/gethinode/mod-flexsearch v1.2.0 h1:SSMpWzK9SMbi9QRYfil9PJZLLWWLHWzlTc69UxtSWAA=
+github.com/gethinode/mod-flexsearch v1.2.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-fontawesome v1.2.4 h1:SqE3CQ+boaBIhrVh3MPu4nz0uoHPfEH5t60nNY1CfsI=
+github.com/gethinode/mod-fontawesome v1.2.4/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-katex v1.0.2 h1:pIG4n3qLl/IVe7BEiwn+GL8r5lOCtF6FDxlcrPKdAXk=
+github.com/gethinode/mod-katex v1.0.2/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-leaflet v0.3.4 h1:oY+YQ0JiJuhFQNrk9XgFdg0NMsTUQPXNfnILp4ia4r4=
+github.com/gethinode/mod-leaflet v0.3.4/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=

go.mod

@@ -4,7 +4,7 @@ go 1.19
 
 require (
 	github.com/gethinode/mod-bootstrap v1.1.1 // indirect
-	github.com/gethinode/mod-flexsearch v1.1.4 // indirect
+	github.com/gethinode/mod-flexsearch v1.2.0 // indirect
 	github.com/gethinode/mod-fontawesome v1.2.4 // indirect
 	github.com/gethinode/mod-katex v1.0.2 // indirect
 	github.com/gethinode/mod-leaflet v0.3.4 // indirect

go.sum

@@ -16,6 +16,8 @@ github.com/gethinode/mod-flexsearch v1.1.3 h1:lzmSvnJL6ABjp03avYzSvJJ7hw01CpHap1
 github.com/gethinode/mod-flexsearch v1.1.3/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.1.4 h1:dJvwBxYlLe/VGlctLn8k89STJ5toATIjNnXIlNeanOY=
 github.com/gethinode/mod-flexsearch v1.1.4/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.2.0 h1:SSMpWzK9SMbi9QRYfil9PJZLLWWLHWzlTc69UxtSWAA=
+github.com/gethinode/mod-flexsearch v1.2.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-fontawesome v1.0.2 h1:ZSK6D20/w4y5GnfYfTBB58uHD0ChIfkpKfRGwioS9rg=
 github.com/gethinode/mod-fontawesome v1.0.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.1.0 h1:rsDzUI+3ZlS/do2ff3ne8/z3KwHeysmuA+WsXlumXXk=

i18n/de.yaml

@@ -91,6 +91,9 @@
 - id: home
   translation: "Startseite"
 
+- id: poweredBy
+  translation: "Ermöglicht durch {{ . }}."
+
 # Staticman
 - id: noComment
   translation: "Kein Kommentar"

i18n/en.yaml

@@ -120,6 +120,9 @@
 - id: home
   translation: "Home"
 
+- id: poweredBy
+  translation: "Powered by {{ . }}."
+
 # Staticman
 - id: noComment
   translation: "No comment"

i18n/nl.yaml

@@ -111,6 +111,9 @@
 - id: home
   translation: "Home"
 
+- id: poweredBy
+  translation: "Mede mogelijk gemaakt door {{ . }}."
+
 # Staticman
 - id: noComment
   translation: "Geen commentaar"

layouts/_default/list.html

@@ -4,7 +4,7 @@
         "section" .Type
         "home" false
         "nested" .Params.Nested
-        "title" .Title
+        "title" (or .Title .Type)
         "description" .Description
         "content" .Content
         "paginate" true)

layouts/_default/single.html

@@ -47,10 +47,40 @@
     {{- end -}}
 
     {{ if not (in (slice "docs" "minimal") .Layout) }}
-        {{ if .Params.thumbnail -}}
-            {{- $credits := "" -}}
-            {{- if .Params.photoCredits }}{{ if .Params.PhotoSource }}{{ $credits = printf "%s %s %s %s" (T "photoBy") .Params.photoCredits (T "photoOn") .Params.PhotoSource }}{{ end }}{{ end -}}
-            {{- partial "assets/image.html" (dict "url" .Params.thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits) -}}
+        {{- $thumbnail := "" -}}
+        {{- $credits := "" -}}
+        
+        {{- if reflect.IsMap .Params.Thumbnail -}}
+            {{- $thumbnail = .Params.Thumbnail.url -}}
+            {{- $author := "" -}}
+            {{- if and .Params.Thumbnail.authorURL "text" .Params.Thumbnail.author }}
+                {{- $author = partial "utilities/link" (dict "destination" .Params.Thumbnail.authorURL "text" .Params.Thumbnail.author) -}}
+            {{- else if .Params.Thumbnail.author }}
+                {{- $author = .Params.Thumbnail.author -}}
+            {{- end -}}
+
+            {{- $origin := "" -}}
+            {{- if and .Params.Thumbnail.originURL "text" .Params.Thumbnail.origin }}
+                {{- $origin = partial "utilities/link" (dict "destination" .Params.Thumbnail.originURL "text" .Params.Thumbnail.origin) -}}
+            {{- else if .Params.Thumbnail.origin }}
+                {{- $origin = .Params.Thumbnail.origin -}}
+            {{- end }}
+
+            {{- if and $author $origin }}
+                {{ $credits = printf "%s %s %s %s" (T "photoBy") $author (T "photoOn") $origin }}
+            {{ else if $author }}
+                {{ $credits = printf "%s %s" (T "photoBy") $author }}
+            {{ end }}
+        {{ else }}
+            {{- $thumbnail = .Params.Thumbnail -}}
+            {{ if or .Params.photoCredits .Params.photoSource }}
+                {{ warnf "DEPRECATED: frontmatter variables `photoCredits` and `photoSource` have been deprecated in release v0.18: %s" .RelPermalink }}
+            {{ end }}
+            {{- if and .Params.photoCredits .Params.PhotoSource }}{{ $credits = printf "%s %s %s %s" (T "photoBy") .Params.photoCredits (T "photoOn") .Params.PhotoSource }}{{ end -}}
+        {{- end -}}
+
+        {{ if $thumbnail -}}
+            {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits) -}}
         {{ end -}}
     {{ end }}
     {{ .Content }}

layouts/index.html

@@ -4,17 +4,23 @@
 
 {{- define "main" -}}
     {{- $page := . -}}
+    {{- $sections := site.Params.home.sections -}}
+    {{- if not $sections -}}
+        {{ range $section := site.Sections }}
+            {{ $sections = $sections | append $section.Type }}
+        {{ end }}
+    {{- end -}}
 
-    {{- range $index, $section := site.Params.home.sections -}}
+    {{- range $index, $section := $sections -}}
         {{- $sectionPage := site.GetPage "section" $section -}}
         {{- $sectionURL := $sectionPage.RelPermalink -}}
-        {{- $title := $sectionPage.Title -}}
-        {{- $thumbnail := $sectionPage.Params.Thumbnail -}}
+        {{- $title := or $sectionPage.Title $sectionPage.Type -}}
+        {{- $thumbnail := (or (and (reflect.IsMap $sectionPage.Params.Thumbnail) $sectionPage.Params.Thumbnail.url) $sectionPage.Params.Thumbnail) -}}
         {{- $icon := $sectionPage.Params.Icon -}}
-        {{- $description := $sectionPage.Description -}}
         {{- $content := $sectionPage.Content -}}
-
-        {{- $moreTitle := (T (printf "more%s" (strings.FirstUpper $section))) -}}
+        {{- $sectionTitle := strings.FirstUpper $sectionPage.Type -}}
+        {{- $moreTitle := T (printf "more%s" $sectionTitle) }}
+        {{- $moreTitle = or $moreTitle (printf (T "more" (pluralize $sectionTitle))) -}}
 
         {{- partial "assets/section-list.html" (dict 
             "page" $page 

layouts/partials/assets/card-group.html

@@ -110,11 +110,12 @@
             {{- if $element.RelPermalink -}}
                 {{- $params = merge $params (dict "path" $element.File.Path) -}}
             {{- else -}}
+                {{- $thumbnail := (or (and (reflect.IsMap $element.Params.Thumbnail) $element.Params.Thumbnail.url) $element.Params.Thumbnail) -}}
                 {{- $params = merge $params (dict
                     "title" $element.Title
                     "href" $element.RelPermalink
-                    "description" (or $element.Description $element.Content)
-                    "thumbnail" $element.Params.thumbnail
+                    "description" (partial "utilities/GetDescription.html" $element)
+                    "thumbnail" $thumbnail
                     "icon" $element.Params.icon
                 ) -}}
             {{- end -}}

layouts/partials/assets/card.html

@@ -112,8 +112,8 @@
 {{- with $page -}}
     {{- if not $title }}{{ $title = .Title }}{{ end -}}
     {{- if not $href }}{{ $href = .RelPermalink  }}{{ end -}}
-    {{- if not $description }}{{ $description = .Description }}{{ end -}}
-    {{- if not $thumbnail }}{{ $thumbnail = .Params.thumbnail }}{{ end -}}
+    {{- if not $description }}{{ $description = partial "utilities/GetDescription.html" . }}{{ end -}}
+    {{- if not $thumbnail }}{{ $thumbnail = (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) }}{{ end -}}
     {{- if not $icon }}{{ $icon = .Params.icon }}{{ end -}}
 {{- end -}}
 

layouts/partials/assets/image.html

@@ -103,7 +103,7 @@
             {{- if $absoluteURL -}}
                 {{- $imgset = printf "%s, %s %sw" $imgset $scaled.Permalink (index $widths $index) -}}
             {{- else -}}
-            {{- $imgset = printf "%s, %s %sw" $imgset $scaled.RelPermalink (index $widths $index) -}}
+                {{- $imgset = printf "%s, %s %sw" $imgset $scaled.RelPermalink (index $widths $index) -}}
             {{- end -}}
         {{- end -}}
         {{- $imgset = strings.TrimPrefix ", " $imgset -}}

layouts/partials/assets/list.html

@@ -52,6 +52,7 @@
 <div class="d-none d-md-block p-0">
     {{- range $index, $item := $list -}}
         {{- $odd := eq (mod $index 2) 1 -}}
+        {{- $thumbnail := (or (and (reflect.IsMap $item.Params.Thumbnail) $item.Params.Thumbnail.url) $item.Params.Thumbnail) -}}
         <div class="container ratio-section d-flex flex-column">
             <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
                 <div class="col-6{{ if $odd }} order-last{{ end }}">
@@ -60,7 +61,7 @@
                         {{- $style = "reveal fade-bottom-n5 rotate-n5 ps-3" -}}
                         {{- if $odd }}{{ $style = "reveal fade-bottom-5 rotate-5 pe-3" }}{{ end }}
                     {{ end }}
-                    {{ partial "partials/list-img.html" (dict "thumbnail" $item.Params.Thumbnail "style" $style "mode" $item.Params.colormode) }}
+                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "style" $style "mode" $item.Params.colormode) }}
                 </div>
                 <div class="col-6{{ if $odd }} order-first{{ end }} psw-lg-5 p-5">
                     {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (or $item.Description $item.Content)) }}
@@ -73,13 +74,14 @@
 <div class="d-md-none">
     {{- range $index, $item := $list -}}
         {{- $odd := eq (mod $index 2) 1 -}}
+        {{- $thumbnail := (or (and (reflect.IsMap $item.Params.Thumbnail) $item.Params.Thumbnail.url) $item.Params.Thumbnail) -}}
         <div class="container d-flex flex-column">
             <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
                 <div class="col-12 text-center">
-                    {{ partial "partials/list-img.html" (dict "thumbnail" $item.Params.Thumbnail "mode" $item.Params.colormode) }}
+                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "mode" $item.Params.colormode) }}
                 </div>
                 <div class="col-12 p-3">
-                    {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (or $item.Description $item.Content)) }}
+                    {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (partial "utilities/GetDescription.html" $item)) }}
                 </div>
             </div>
         </div>

layouts/partials/assets/nav.html

@@ -93,14 +93,15 @@
             {{ $header := $item.Title }}
             {{ $body := $item.Content }}
             {{ $show := eq $index 0}}
+            {{- $thumbnail := (or (and (reflect.IsMap $item.Params.Thumbnail) $item.Params.Thumbnail.url) $item.Params.Thumbnail) -}}
             <div class="tab-pane{{ if $show }} active{{ end }}" id="nav-{{ $id }}-{{ $index }}" role="tabpanel" aria-labelledby="{{ $id }}-btn-{{ $index }}" tabindex="0">
                 {{- if eq $pane "persona" -}}
                 {{- partial "assets/persona.html" (dict  
                     "title" $item.Title
                     "class" $class
                     "color" $color
-                    "content" (or $item.Description $item.Content)
-                    "thumbnail" $item.Params.Thumbnail
+                    "content" (partial "utilities/GetDescription.html" $item)
+                    "thumbnail" $thumbnail
                 ) -}}
                 {{- else -}}
                     {{- (or $item.Description $item.Content) -}}

layouts/partials/assets/navbar.html

@@ -13,6 +13,7 @@
     "logo"          Optional address of the logo image, defaults to the parameter "logo" set in the "main" section of
                     the site's parameter configuration. 
     "title"         Optional brand title, displayed when the logo is not set. Defaults to the site's title.
+    "class":        Optional class attribute of the navbar container.
 -->
 
 <!-- Inline partial to render the color mode switcher -->
@@ -185,7 +186,9 @@
 {{- if eq $color "black" }}{{ $theme = "dark" }}{{ end -}}
 {{- if eq $color "white" }}{{ $theme = "light" }}{{ end -}}
 
-<div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
+{{- $class := .class -}}
+
+<div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0{{ with $class }} {{ . }}{{ end }}"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
     {{- partial "assets/page-alert.html" (dict "page" $page) -}}
     <nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
         <div class="container-xxl p-0">

layouts/partials/assets/persona.html

@@ -51,7 +51,7 @@
     {{- if not $title }}{{ $title = .Title }}{{ end -}}
     {{- if not $href }}{{ $href = .RelPermalink  }}{{ end -}}
     {{- if not $content }}{{ $content = .Content }}{{ end -}}
-    {{- if not $thumbnail }}{{ $thumbnail = .Params.thumbnail }}{{ end -}}
+    {{- if not $thumbnail }}{{ $thumbnail = (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) }}{{ end -}}
 {{- end -}}
 
 {{- $class := .class -}}

layouts/partials/assets/section-list.html

@@ -24,7 +24,7 @@
 {{- $padding := "0" -}}
 {{- $header := "full" -}}
 {{- $footer := "none" -}}
-{{- $style := "" -}}
+{{- $style := "border-0 card-zoom" -}}
 {{- $homepage := 3 -}}
 {{- $background := "" -}}
 {{- $layout := "card" -}}

layouts/partials/assets/toast.html

@@ -3,6 +3,7 @@
     "id"            Optional id of the toast message, defaults to "toast-message-0".
     "header":       Optional header of the toast message.
     "message":      Required toast message.
+    "class":        Optional class attribute of the toast element.
 -->
 
 {{- $id := printf "toast-message-%d" 0 -}}
@@ -19,7 +20,9 @@
     {{- errorf "partial [assets/toast.html] - Missing message text" -}}
 {{ end -}}
 
-<div id="{{ $id }}" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+{{- $class := .class -}}
+
+<div id="{{ $id }}" class="toast{{ with $class }} {{ . }}{{ end }}" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
         {{ with $header }}<strong class="me-auto">{{ . }}</strong>{{ end }}
         <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

layouts/partials/footer/footer.html

@@ -4,6 +4,10 @@
             {{- $copyright := printf "%s © %s %s %s." (T "copyright") (dateFormat "2006" now) .Site.Title (T "rights") }}
             {{ cond (gt (len .Site.Copyright) 0) .Site.Copyright $copyright }}
             {{ .Site.Params.footer.license | safeHTML }}
+            {{ if .Site.Params.main.endorse }}
+                {{ $link := partial "utilities/link" (dict "destination" (index site.Params.links "hinode") "text" "Hinode" "class" "link-secondary") }}
+                {{ T "poweredBy" $link | safeHTML }}
+            {{ end }}
         </small>
     </div>
 </footer>

layouts/partials/footer/social.html

@@ -1,10 +1,19 @@
+{{ if .Site.Params.footer.socialTitle }}
+    {{ warnf "DEPRECATED: parameter `Params.home.socialTitle` has been deprecated in release v0.18"}}
+{{ end }}
+{{ if .Site.Params.footer.socialCaption }}
+    {{ warnf "DEPRECATED: parameter `Params.home.socialCaption` has been deprecated in release v0.18"}}
+{{ end }}
+
 {{- $tab := site.Params.main.externalLinks.tab -}}
 <div class="container-fluid">
     <div class="row row-cols-1 row-cols-sm-4 bg-primary p-3 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
         <div class="col col-md-2 d-none d-md-block"></div>
         <div class="col col-sm-6 col-md-4">
-            <div class="fs-3 fw-bold">{{ .Site.Params.footer.socialTitle }}</div>
-            <p>{{ .Site.Params.footer.socialCaption }}</p>
+            {{ if gt .Site.Menus.social 0 }}
+                <div class="fs-3 fw-bold">{{ or .Site.Params.footer.socialTitle .Site.Params.social.title }}</div>
+                <p>{{ or .Site.Params.footer.socialCaption .Site.Params.social.caption }}</p>
+            {{ end }}
         </div>
         <div class="col text-sm-start text-center col-sm-6 col-md-4">
             {{ range .Site.Menus.social -}}

layouts/partials/head/seo.html

@@ -7,22 +7,17 @@
     {{ $.Scratch.Set "title" .Site.Title -}}
 {{ end -}}
 
-{{ with .Description -}}
-    {{ $.Scratch.Set "description" . -}}
-{{ else -}}
-    {{ with .Summary | plainify -}}
-        {{ $.Scratch.Set "description" . -}}
-    {{ else -}}
-        {{ $.Scratch.Set "description" .Site.Params.main.description -}}
-    {{ end -}}
-{{ end -}}
+{{ $description := or (partial "utilities/GetDescription.html" .) .Site.Params.main.description }}
+{{ $.Scratch.Set "description" $description -}}
 
-{{ with .Params.thumbnail -}}
-    {{ $source := partial "utilities/GetImage.html" (dict "url" .) -}}
-    {{ with $source -}}
+{{- $thumbnail := (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) -}}
+{{ with $thumbnail -}}
+    {{ $img := partial "utilities/GetImage.html" (dict "url" .) -}}
+    {{ with $img -}}
         {{ $dim := "1280x640" -}}
-        {{ $img := (.Fill (printf "%s jpg" $dim)) -}}
-        {{ $.Scratch.Set "thumbnail" ($img.Permalink | absURL) -}}
+        {{ $scaled := (.Fill (printf "%s jpg" $dim)) -}}
+        {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink ".jpg" (printf "-%s.jpg" $dim)) -}}
+        {{ $.Scratch.Set "thumbnail" ($scaled.Permalink | absURL) -}}
     {{ end -}}
 {{ else -}}
     {{ with .Site.Params.schema.image.url -}}    
@@ -57,7 +52,7 @@
 {{ end -}}
 
     {{ if .IsHome -}}
-        <title>{{ .Site.Title }} {{ .Site.Params.main.separator }} {{ .Site.Params.head.tagline }}</title>
+        <title>{{ .Site.Title }} {{ if .Site.Params.head.tagline }} {{ .Site.Params.main.separator }} {{ .Site.Params.head.tagline }}{{ end }}</title>
     {{ else -}}
         <title>{{ .Site.Title }} {{ .Site.Params.main.separator }} {{ .Title }}</title>
     {{ end -}}

layouts/partials/home/featured.html

@@ -1,20 +1,21 @@
-<div class="container-fluid flex-fill bg-primary bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }}">
-    <div class="container-xxl p-4">
-        <div class="row row-cols-1 row-cols-sm-3 align-items-center pt-5 pb-5 h-100">
-            <div class="col col-md-2 d-none d-md-block"></div>
-            <div class="col col-sm-6 col-md-4 text-center text-sm-start">
-                <p class="display-4">{{ .Title }}</p>
-                <p>{{ .Content }}</p>
-                {{ if .Site.Params.feature.link }}
-                    <p><a class="btn btn-primary" href="{{ .Site.Params.feature.link | safeURL }}" role="button">{{ .Site.Params.feature.caption | default (T "about") }}</a></p>
-                {{ end }}
-            </div>
-            <div class="col col-sm-6 col-md-4">
-                {{ if .Site.Params.home.featurePhoto }}
-                    {{- partial "assets/image.html" (dict "url" .Site.Params.home.featurePhoto "ratio" "4x3" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Site.Title) -}}
-                {{ end }}
-            </div>
-            <div class="col col-md-2 d-none d-md-block"></div>
+<div class="container-fluid flex-fill feature">
+    <div class="row row-cols-1 row-cols-sm-4 h-100 bg-primary px-4 py-5 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
+        <div class="col col-lg-2 d-none d-lg-block bg-info order-1"></div>
+        <div class="col col-sm-6 col-lg-4 text-center text-sm-start order-3 order-sm-2">
+            <p class="display-4">{{ .Title }}</p>
+            <p>{{ .Content }}<p>
         </div>
+        <div class="col text-sm-start text-center col-sm-6 col-lg-4 order-2 order-sm-3">
+            {{- $thumbnail := (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) -}}
+            {{- $thumbnail = or $thumbnail .Site.Params.home.featurePhoto -}}
+            {{ if .Site.Params.home.featurePhoto }}
+                {{ warnf "DEPRECATED: parameter `Params.home.featurePhoto` has been deprecated in release v0.18"}}
+            {{ end }}
+            {{- if $thumbnail -}}
+                {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Site.Title) -}}
+            {{ end }}
+            <div class="pb-5 d-block d-sm-none"></div>
+        </div>
+        <div class="col col-lg-2 d-none d-lg-block bg-info order-4"></div>
     </div>
 </div>

layouts/partials/utilities/GetDescription.html

@@ -0,0 +1,12 @@
+{{- $page := . -}}
+{{- if ne (printf "%T" $page) "*hugolib.pageState" -}}
+    {{- errorf "partial [utilities/GetDescription.html] - Expected page context" -}}
+{{- end -}}
+
+{{- $decription := $page.Description -}}
+{{- if not $decription -}}
+    {{- $decription = $page.Summary -}}
+    {{- if $page.Truncated }}{{ $decription = print $decription "..." }}{{ end -}}}
+{{- end -}}
+
+{{- return $decription -}}

layouts/partials/utilities/link.html

@@ -40,4 +40,6 @@
     {{ $destination = relLangURL $destination }}
 {{- end -}}
 
-<a href="{{ $destination | safeURL }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>{{ $text }}</a>
+{{- $class := .class -}}
+
+<a {{ with $class }}class="{{ . }}" {{ end }}href="{{ $destination | safeURL }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>{{ $text }}</a>

layouts/shortcodes/alert.html

@@ -6,6 +6,7 @@
     "icon"          Optional class and name of a Font Awesome icon to include.
     "type"          Optional type of the alert, either "danger" or "info". Generates an alert with related color and
                     icon.
+    "class":        Optional class attribute of the alert element.
 -->
 
 {{- $error := false -}}
@@ -48,8 +49,10 @@
     {{ $error = true -}}
 {{ end -}}
 
+{{- $class := .Get "class" -}}
+
 {{- if not $error -}}
-    <div class="d-flex alert alert-{{ $color }} {{ if $dismissible }}alert-dismissible fade show{{ end }}" role="alert">
+    <div class="d-flex alert alert-{{ $color }} {{ if $dismissible }}alert-dismissible fade show{{ end }}{{ with $class }} {{ . }}{{ end }}" role="alert">
         {{ with $icon }}<div class="pt-1 pe-2">{{ . }}</div>{{ end }}
         <div class="flex-grow-1 my-auto">
             {{ trim .Inner " \r\n" | markdownify | safeHTML -}}

layouts/shortcodes/command.html

@@ -1,3 +1,13 @@
+<!-- 
+    Generates terminal output for either `bash`, `powershell`, or `sql` shell languages. The shortcode supports the
+    following named arguments:
+    "user"          Optional user to add to the prompt, e.g. "user".
+    "host"          Optional host to add to the prompt, e.g. "localhost".
+    "prompt"        Optional prompt override, e.g. "PS C:\Users\User>".
+    "shell"         Type of shell, either "bash" (default), "powershell", or "sql".
+    "class"         Optional class attribute of the command element.
+-->
+
 {{- $host := .Get "host" -}}
 {{- $user := .Get "user" -}}
 {{- $prompt := .Get "prompt" -}}
@@ -60,6 +70,8 @@
     {{- $output = (replace $output "<span class=\"c\">#" "<span class=\"c\">" | safeHTML) -}}
 {{- end -}}
 
-<div class="mb-3 syntax-highlight">
+{{- $class := .Get "class" -}}
+
+<div class="mb-3 syntax-highlight{{ with $class }} {{ . }}{{ end }}">
     {{- $output -}}
 </div>

layouts/shortcodes/docs.html

@@ -1,11 +1,23 @@
-{{- /*
+<!-- 
     Source: https://github.com/twbs/bootstrap/blob/main/site/layouts/shortcodes/scss-docs.html
 
-    Usage: `docs name="name" file="path/filename.<toml|scss>"`
+    Capture a code snippet from a `toml` or `scss` input file. The shortcode scans for named markers in a local file:   
+    - For `.toml` files, use `# toml-docs-start` and `# toml-docs-end` followed by the snippet name
+    - For `.scss` files, use `// scss-docs-start` and `// scss-docs-end` followed by the snippet name
     
-    Prints everything between `# toml-docs-start "name"` and `# toml-docs-end "name"`
-    comments in the docs, or between `// scss-docs-start` and `// scss-docs-end`.
-*/ -}}
+    The snippet between the two markers is then rendered using syntax highlighting. The shortcode supports the
+    following named arguments:
+
+    "name"          Name of the code snippet, used to identify the relevant section of the input file.
+    "file"          Path of the input file. The path is relative to the `basePath` defined in the `docs` section of the
+                    site's parameters. If the file starts with `./`, the path of the repository is used as base path instead.
+    "show"          If unset, shows the panel with the code snippet in collapsed state. By default, the panel is
+                    expanded.
+    "full"          If unset, shows the filename only. By default, the full relative path is shown.
+    "id"            Optional id of the collapse panel, defaults to "docs-collapse-n" with a sequential number n
+                    starting at 1.
+    "class"         Optional class argument of the tab control.
+-->
 
 {{- $name := .Get "name" -}}
 {{- $basePath := .Site.Params.docs.basePath -}}
@@ -20,6 +32,9 @@
 {{- $capture_end := "" -}}
 
 {{- $id := printf "docs-collapse-%d" .Ordinal -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
 
 {{- $supportedExtensions := slice "js" "scss" "toml" -}}
 {{- if in $supportedExtensions $extension -}}
@@ -53,6 +68,8 @@
     {{ errorf "Invalid value for param 'full': %s" $fullParam -}}
 {{ end -}}
 
+{{- $class := .Get "class" -}}
+
 {{- /* If any parameters are missing, print an error and exit */ -}}
 {{- if or (not $name) (not $file) -}}
     {{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}}
@@ -71,7 +88,7 @@
     {{- $match = replace $match $capture_start "" -}}
     {{- $match = replace $match $capture_end "" -}}
 
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs{{ with $class }} {{ . }}{{ end }}">
         <li class="nav-item">
             <a class="nav-link active font-monospace" 
                 href="#body-{{ $id }}" 

layouts/shortcodes/example.html

@@ -1,15 +1,15 @@
-{{- /*
-  Usage: `example args`
-
-  `args` are all optional and can be one of the following:
-    * id: the `div`'s id - default: ""
-    * class: any extra class(es) to be added to the `div` - default: ""
-    * lang: language used to display the code. Use "hugo" to process Hugo (escaped) shortcodes - default: "html"
-    * show_markup: if the markup should be output in the HTML - default: `true`
-    * show_preview: if the preview should be output in the HTML - default: `true`
-
+<!-- 
     Source: https://github.com/twbs/bootstrap/blob/main/site/layouts/shortcodes/example.html
-*/ -}}
+
+    Display a code example and render a preview of the same input. The shortcode accepts the languages supported by
+    Hugo's highlight function. The shortcode supports the following named arguments:
+
+    "id"            Optional identifier of the element's container.
+    "lang"          Language used to display the code. Use "hugo" to process Hugo (escaped) shortcodes, default value is "html".
+    "show_markup"   If the markup should be output in the HTML, defaults to "true".
+    "show_preview"  If the preview should be output in the HTML, defaults to "true".
+    "class"         Optional class attributes of the element's container.
+-->
 
 {{- $id := .Get "id" -}}
 {{- $class := .Get "class" -}}
@@ -25,18 +25,18 @@
     {{ $lang = "markdown" }}
 {{- end -}}
 
-<div class="rounded border mb-3">
+<div class="rounded border preview-background mb-3">
     {{- if eq $show_preview true -}}
-        <div {{ with $id }}id="{{ . }}"{{ end }} class="p-3 {{ with $class }} {{ . }}{{ end }} preview-background">
+        <div {{ with $id }}id="{{ . }}"{{ end }} class="rounded-top p-3 {{ with $class }} {{ . }}{{ end }}">
             {{- $content -}}
         </div>
     {{- end -}}
-    <div class="d-flex align-items-center ps-3 pe-3 py-1 border-top border-bottom syntax-highlight">
-        <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
-    </div>
-    <div class="rounded-bottom syntax-highlight">
-        {{- if eq $show_markup true -}}
+    {{- if eq $show_markup true -}}
+        <div class="d-flex align-items-center ps-3 pe-3 py-1{{ if $show_preview }} border-top{{ else }} rounded-top{{ end }} border-bottom syntax-highlight">
+            <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
+        </div>
+        <div class="rounded-bottom syntax-highlight border-none">
             {{- highlight (trim $input "\r\n") $lang "" -}}
-        {{- end -}}
-    </div>
+        </div>
+    {{- end -}}
 </div>

layouts/shortcodes/file.html

@@ -1,10 +1,17 @@
-{{- /*
+<!-- 
     Source: https://github.com/twbs/bootstrap/blob/main/site/layouts/shortcodes/scss-docs.html
 
-    Usage: `file path="path/to/filename" lang="lang" show="true" full="true"`
-
-    Prints the full content of any given file supported by the Chroma syntax highlighter.
-*/ -}}
+    Print the full content of any given file supported by the Chroma syntax highlighter. The shortcode supports the
+    following arguments:
+    "path"          Path of the input file. The path is relative to the `basePath` defined in the `docs` section of the
+                    site's parameters. If the file starts with `./`, the path of the repository is used as base path instead.
+    "lang"          Language to be used by the syntax highlighter.
+    "show"          If unset, shows the panel with the code in collapsed state. By default, the panel is expanded.
+    "full"          If unset, shows the filename only. By default, the full relative path is shown.
+    "id"            Optional id of the collapse panel, defaults to "file-collapse-n" with a sequential number n
+                    starting at 1.
+    "class"         Optional class argument of the tab control.
+-->
 
 {{- $basePath := .Site.Params.docs.basePath -}}
 {{- $file := .Get "path" }}
@@ -16,7 +23,10 @@
 
 {{- $extension := strings.TrimLeft "." (path.Ext $file)  }}
 {{- $lang := .Get "lang" | default $extension -}}
-{{- $id := printf "docs-collapse-%d" .Ordinal -}}
+{{- $id := printf "file-collapse-%d" .Ordinal -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
 
 {{ $supportedFlags := slice "true" "false" -}}
 {{ $showParam := "true" -}}
@@ -37,6 +47,8 @@
     {{ errorf "Invalid value for param 'full': %s" $fullParam -}}
 {{ end -}}
 
+{{- $class := .Get "class" -}}
+
 {{- /* If any parameters are missing, print an error and exit */ -}}
 {{- if not $file -}}
     {{- errorf "%s: %q: Missing required parameters! Got: path=%q!" .Position .Name $file -}}
@@ -46,7 +58,7 @@
     {{ $tmp := os.Stat $file }}
     {{- $content := readFile $file -}}
 
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs{{ with $class }} {{ . }}{{ end }}">
         <li class="nav-item">
             <a class="nav-link active font-monospace" 
                 href="#body-{{ $id }}" 

layouts/shortcodes/link.html

@@ -13,6 +13,7 @@
                     "main.externalLinks.tab" in the site's parameters.
     "case"          Optional flag to indicate if the retrieved title (e.g. no inner text is provided) of an internal
                     link should use its original case, defaults to true. If false, the title is set to lower case.
+    "class"         Optional class attribute of the anchor element.
 -->
 
 {{- $error := false -}}
@@ -49,7 +50,9 @@
 
 {{ $text := trim .Inner " \r\n" | markdownify | safeHTML }}
 
+{{- $class := .Get "class" -}}
+
 {{- if not $error -}}
-    {{ partial "utilities/link.html" (dict "destination" $url "text" $text "cue" $cue "tab" $tab "case" $case) }}
+    {{ partial "utilities/link.html" (dict "destination" $url "text" $text "cue" $cue "tab" $tab "case" $case "class" $class) }}
 {{- end -}}
 

layouts/shortcodes/navbar.html

@@ -15,6 +15,7 @@
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image.
     "title"         Optional brand title, displayed when the logo is not set.
+    "class":        Optional class attribute of the navbar container.
 -->
 
 {{ $error := false }}
@@ -84,6 +85,8 @@
 {{ $title := "" -}}
 {{ with .Get "title" }}{{ $title = . }}{{ end -}}
 
+{{- $class := .Get "class" -}}
+
 {{ if not $error -}}
     {{- partial "assets/navbar.html" (dict 
         "id" $id 
@@ -96,6 +99,7 @@
         "menus" $menus
         "logo" $logo
         "title" $title
+        "class" $class
         )
     -}}
 {{ end -}}

layouts/shortcodes/release.html

@@ -4,6 +4,7 @@
     "version":      Required version string, expects semver notation with a "v" prefix.
     "state":        Optional state, either "new" or "deprecated".
     "short":        Optional flag to indicate the release button should use short notation.
+    "class":        Optional class attribute of the button element.
 -->
 
 {{- $error := false -}}
@@ -54,6 +55,8 @@
     {{- end -}}
 {{- end -}}
 
+{{- $class := .Get "class" -}}
+
 {{- if not $error -}}
     <div class="pb-3">
     {{- partial "assets/button.html" (dict 
@@ -62,7 +65,7 @@
         "size" "sm"
         "color" $color
         "outline" "true"
-        "class" "rounded-2 fw-semibold")
+        "class" (trim (printf "rounded-2 fw-semibold %s" $class) " "))
     -}} 
     </div>
 {{- end -}}

layouts/shortcodes/timeline.html

@@ -1,4 +1,14 @@
-<!-- Inspired by the timeline snippet from Siddharth Panchal at https://bootsnipp.com/snippets/Q0ppE -->
+<!-- 
+    Inspired by the timeline snippet from Siddharth Panchal at https://bootsnipp.com/snippets/Q0ppE
+    
+    Show items ordered on a vertical timelime. The shortcode supports the following arguments:
+    "data"          Required filename of the timeline input. You can omit the file extension. The file should reside in
+                    the "data" folder.
+    "background"    Optional border color of the connector dots, defaults to the body background color. If set, uses a
+                    subtle background color that is adaptive to the current color mode.
+    "class"         Optional class attribute of the timeline's container.
+-->
+
 {{ $error := false }}
 
 {{- $data := .Get "data" -}}
@@ -21,6 +31,8 @@
     {{ $error = true -}}
 {{ end -}}
 
+{{- $class := .Get "class" -}}
+
 <!-- Inline partial to render icon -->
 {{- define "partials/timeline-icon.html" -}}
     {{- $col := default 6 .col -}}
@@ -74,7 +86,7 @@
 {{- end -}}
 
 <!-- Render default timeline -->
-<div class="container p-0 d-none d-md-block mb-5 {{ with $background }} timeline-bg-{{ . }}{{ end }}">
+<div class="container p-0 d-none d-md-block mb-5 {{ with $background }} timeline-bg-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}">
     {{ range $index, $item := $entries }}
         <div class="row timeline timeline-{{ $item.color }} timeline-dot g-0 ">
             {{ if eq (mod $index 2) 1 }}
@@ -90,7 +102,7 @@
 </div>
 
 <!-- Render timeline for smaller devices -->
-<div class="container p-0 d-block d-md-none {{ with $background }} timeline-bg-{{ . }}{{ end }}">
+<div class="container p-0 d-block d-md-none {{ with $background }} timeline-bg-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}">
     {{ range $index, $item := $entries }}
         <div class="row timeline-sm timeline-{{ $item.color }} timeline-dot g-0">
             {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end" "col" 3) }}

layouts/shortcodes/toast.html

@@ -2,6 +2,7 @@
     Prepares a toast message. Use a trigger to display the message. The shortcode supports the following arguments:
     "id"            Optional id of the toast message, defaults to "toast-message-n" with sequence n.
     "header":       Optional header of the toast message. Uses the site title by default.
+    "class"         Optional class attribute of the toast element.
 -->
 
 {{- $error := false -}}
@@ -10,8 +11,10 @@
 {{ $header := .Get "header" -}}
 {{ $message := trim .Inner " \r\n" -}}
 
+{{- $class := .Get "class" -}}
+
 {{ if not $message -}}
     {{ errorf "Missing inner element text: %s" .Position -}}
 {{ else if not $error -}}
-    {{ partial "assets/toast.html" (dict "id" $id "header" $header "message" $message) }}
+    {{ partial "assets/toast.html" (dict "id" $id "header" $header "message" $message "class" $class) }}
 {{ end -}}

layouts/shortcodes/tooltip.html

@@ -5,6 +5,7 @@
     "title"         Required text to display in the tooltip.
     "href"          Required address for the button or hyperlink.
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right". 
+    "class"         Optional class attribute of the tooltip's button element.
 -->
 
 {{ $error := false }}
@@ -40,6 +41,8 @@
     {{ $error = true }}
 {{ end -}}
 
+{{- $class := .Get "class" -}}
+
 {{ if not $error }}
-    <div class="d-inline-flex">{{- partial "assets/button.html" (dict "type" $type "title" $title "color" $color "tooltip" $tooltip "href" $href "placement" $placement) -}}</div>
+    <div class="d-inline-flex">{{- partial "assets/button.html" (dict "type" $type "title" $title "color" $color "tooltip" $tooltip "href" $href "placement" $placement "class" $class) -}}</div>
 {{ end }}

netlify.toml

@@ -1,14 +1,14 @@
 # toml-docs-start netlify
 [build]
-    publish = "public"
-    functions = "functions"
+    publish = "exampleSite/public"
+    # functions = "functions"
 
 [build.environment]
-    NODE_VERSION = "18.16.1"
-    NPM_VERSION = "9.5.1"
+    NODE_VERSION = "18.17.0"
+    NPM_VERSION = "9.6.7"
 
 [context.production]
-    command = "npm run build"
+    command = "npm run build:example"
 
 [context.production.environment]
     HUGO_VERSION = "0.110.0"
@@ -63,20 +63,14 @@
         Access-Control-Allow-Origin = "*"
 
 [context.deploy-preview]
-    command = "npm run build -- -b $DEPLOY_PRIME_URL"
+    command = "npm run build:example -- -b $DEPLOY_PRIME_URL"
 
 [context.branch-deploy]
-    command = "npm run build -- -b $DEPLOY_PRIME_URL"
-
-[context.next]
-    command = "npm run build"
-
-[context.next.environment]
-    HUGO_ENV = "next"
+    command = "npm run build:example -- -b $DEPLOY_PRIME_URL"
 
 [dev]
     framework = "#custom"
-    command = "npm run start"
+    command = "npm run start:example"
     targetPort = 1313
     port = 8888
     publish = "public"

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.17.3",
+  "version": "0.18.0-alpha2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.17.3",
+      "version": "0.18.0-alpha2",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",
@@ -18,7 +18,7 @@
         "eslint-plugin-import": "^2.28.0",
         "eslint-plugin-n": "^16.0.1",
         "eslint-plugin-promise": "^6.1.1",
-        "hugo-bin": "^0.112.1",
+        "hugo-bin": "^0.113.0",
         "markdownlint-cli2": "^0.8.1",
         "postcss-cli": "^10.1.0",
         "purgecss-whitelister": "^2.4.0",
@@ -3270,9 +3270,9 @@
       }
     },
     "node_modules/hugo-bin": {
-      "version": "0.112.1",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.112.1.tgz",
-      "integrity": "sha512-Iguqted2G4zE5ZCH3onkhp9jPxZqxjbnQXxoYgo4RdVQhvRD16E3AzzUfbEiQM9yDM+fKhHCr2ajl9t8JTw/pA==",
+      "version": "0.113.0",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.113.0.tgz",
+      "integrity": "sha512-LivqvBvXU/sAydUTH4eMMdsvrUEcJvwJHyWyZX+PfXPyvkCVTUekJcJ0Pg+oYBZrg/nyriyB/xfBFi6JlgTGpg==",
       "dev": true,
       "funding": [
         {
@@ -9619,9 +9619,9 @@
       }
     },
     "hugo-bin": {
-      "version": "0.112.1",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.112.1.tgz",
-      "integrity": "sha512-Iguqted2G4zE5ZCH3onkhp9jPxZqxjbnQXxoYgo4RdVQhvRD16E3AzzUfbEiQM9yDM+fKhHCr2ajl9t8JTw/pA==",
+      "version": "0.113.0",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.113.0.tgz",
+      "integrity": "sha512-LivqvBvXU/sAydUTH4eMMdsvrUEcJvwJHyWyZX+PfXPyvkCVTUekJcJ0Pg+oYBZrg/nyriyB/xfBFi6JlgTGpg==",
       "dev": true,
       "requires": {
         "@xhmikosr/bin-wrapper": "^11.0.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.17.3",
+  "version": "0.18.0-alpha2",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -17,20 +17,21 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "prestart": "npm run clean && npm run mod:vendor",
     "start": "hugo server --bind=0.0.0.0 --disableFastRender",
+    "start:example": "hugo server --bind=0.0.0.0 --disableFastRender -s exampleSite",
     "start:prod": "hugo server --bind=0.0.0.0 --disableFastRender --printI18nWarnings -e production",
-    "prebuild": "npm run clean && npm run -s mod:install",
+    "prebuild": "npm run clean:public && npm run -s mod:install",
     "build": "hugo --gc --minify",
+    "build:example": "npm run -s prebuild && hugo --gc --minify -s exampleSite",
     "build:debug": "hugo -e debug --debug",
     "build:preview": "npm run build -D -F",
-    "clean": "rimraf public resources",
+    "clean:public": "rimraf public",
     "clean:install": "rimraf package-lock.json node_modules",
     "lint": "npm run -s lint:scripts && npm run -s lint:styles && npm run -s lint:markdown",
     "lint:scripts": "eslint assets/js",
     "lint:styles": "stylelint \"assets/scss/**/*.{css,sass,scss,sss,less}\"",
-    "lint:markdown": "markdownlint-cli2 \"*.md\" \"content/**/*.md\"",
-    "lint:markdown-fix": "markdownlint-cli2-fix \"*.md\" \"content/**/*.md\"",
+    "lint:markdown": "markdownlint-cli2 \"*.md\" \"content/**/*.md\" \"exampleSite/**/*.md\"",
+    "lint:markdown-fix": "markdownlint-cli2-fix \"*.md\" \"content/**/*.md\" \"exampleSite/**/*.md\"",
     "mod:clean": "hugo mod clean",
     "mod:install": "hugo mod get ./... && npm run -s mod:vendor && npm run -s mod:tidy",
     "mod:update": "hugo mod get -u ./... && npm run -s mod:vendor && npm run -s mod:tidy",
@@ -66,7 +67,7 @@
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-n": "^16.0.1",
     "eslint-plugin-promise": "^6.1.1",
-    "hugo-bin": "^0.112.1",
+    "hugo-bin": "^0.113.0",
     "markdownlint-cli2": "^0.8.1",
     "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",