gethinode/hinode

A clean documentation and blog theme for your Hugo site based on Bootstrap 5

Hugo Theme Hinode

A clean documentation and blog theme for your Hugo site based on Bootstrap 5

About • Prerequisites • Installation • Configuration • Contributing • Donate • License

About

• Online Demo
• PageSpeed Insights
• Mozilla Observatory

Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator. Based on the Bootstrap 5 framework, the rendered site is fast, secure, and responsive. Hinode uses FlexSearch to enable full text search across your site. Finally, the theme supports Node Package Manager (npm) to automate the build process and to keep track of dependencies.

Detailed information about Hinode is available on the official website.

Prerequisites

Hinode is a Hugo theme that uses modules to install and maintain various components. It can be installed using either Hugo or npm. If you would like to take advantage of automation, the npm approach is recommended. Refer to the Hinode template for installation instructions with npm.

The installation instructions in this readme install Hinode as a regular Hugo theme. Hinode requires the following software to be installed on your local machine.

• Go binary
• Hugo (extended version)

Git is recommended, but is not a strict requirement.

Installation

Installation notes for Windows

The installation for Windows requires PowerShell v7. Download it from the Microsoft Store as needed. Check your current version with the command $PSVersionTable.

Start a new Hinode project in three steps:

1. Create a new site

   hugo new site my-hinode-site && cd my-hinode-site

2. Initialize the module system

   hugo mod init example.com/my-hinode-site
   echo "[[module.imports]]" >> hugo.toml
   echo "path = 'github.com/gethinode/hinode'" >> hugo.toml

3. Start a development server

   hugo server

Configuration

See the official documentation on how to configure your site.

Contributing

See the official documentation on how to contribute to the open-source development of Hinode.

Credits

Hinode is inspired by the following themes:

• Blist - a clean and fast blog theme for your Hugo site using Tailwind CSS.
• Doks - a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.

Donate

License

The hinode, docs, and template codebase is released under the MIT license. The documentation of Hinode is licensed under the Creative Commons (CC BY-NC 4.0) license. This includes all files within the repository's /content and /exampleSite/content folders and their children, as well as the "README" in the repository root. This applies to all public repositories maintained by gethinode on GitHub, including the gethinode/hinode, gethinode/template, and gethinode/docs repositories, unless specified otherwise.

hinode's Issues

Fix spacing of blog captions

Unable to link any external image in a post

Hi Mark and all developers,
I'm trying to use your theme for my blog but I can't seem to link any external images within a post.
I have tried inserting an image as a thumbnail, as html code, in markdown, but it either doesn't render at all or gives me an error.
How can this be solved?

Warning: no problems in Blist

Insertion via Thumbnail

---
author: "Hugo Authors"
title: "Test"
date: 2021-07-13
description: "Lorem Ipsum Dolor Si Amet"
tags: ["markdown", "text"]
thumbnail: https://picsum.photos/id/1002/3000/2000
---

Result

render of "section" failed: "/xxx/node_modules/@markdumay/hugo-theme-hinode/layouts/_default/list.html:9:28": execute of template failed at <partial "assets/blog-card.html" $element>: error calling partial: "/xxx/node_modules/@markdumay/hugo-theme-hinode/layouts/partials/assets/blog-card.html:4:16": execute of template failed at <partial "image.html" (dict "url" .Params.thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" .Params.title)>: "/xxx/node_modules/@markdumay/hugo-theme-hinode/layouts/partials/image.html:47:15": execute of template failed at <$img.Fill>: nil pointer evaluating resource.Resource.Fill  failed to render pages: render of "page" failed: execute of template failed at <partial "head/seo.html" .>: "/xxx/node_modules/@markdumay/hugo-theme-hinode/layouts/partials/head/seo.html:21:23": execute of template failed at <$source.Fill>: nil pointer evaluating resource.Resource.Fill `

/xxx/node_modules/@markdumay/hugo-theme-hinode/layouts/partials/head/seo.html:21:23:

    {{ $source := resources.Get . -}}
    {{ $dim := "1280x640" -}}
    {{ $img := ($source.Fill (printf "%s jpg" $dim)) -}}
    {{ $.Scratch.Set "thumbnail" ($img.Permalink | absURL) -}}
{{ else }}

Insertion with HTML code

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">

Result

W3Schools.com

Insertion with markdown

![Placeholder](https://picsum.photos/id/1002/3000/2000)

Result

Placeholder

Insertion as image

{{<image src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">}}

Result

 "/xxx/content/en/blog/test.md:15:1": failed to render shortcode "image": failed to process shortcode: "/xxx/node_modules/@markdumay/hugo-theme-hinode/layouts/shortcodes/image.html:53:19": execute of template failed at <$img.Fill>: nil pointer evaluating resource.Resource.Fill 

/xxx/content/en/blog/test.md:15:1:



{{<image src="https://www.w3schools.com/images/w3schools_green.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}


/xxx/node_modules/@markdumay/hugo-theme-hinode/layouts/shortcodes/image.html:53:19:

    {{ end }}
    
    {{ $sm := ($img.Fill (printf "%s webp" $smDim)) }}
    {{ $md := ($img.Fill (printf "%s webp" $mdDim)) }}
    {{ $lg := ($img.Fill (printf "%s webp" $lgDim)) }}

Add support for icons next to thumbnails

Is your feature request related to a problem? Please describe.
The current content pages support an optional thumbnail, which is used in both list pages and single pages.

Describe the solution you'd like
Add support for optional icons too. This could be used for feature pages for example.

Describe alternatives you've considered
N/A

Additional context
N/A

Add version switch support for documents

Thanks for creating this theme. It is the best hugo theme I have ever seen.

Is your feature request related to a problem? Please describe.

For a typical project, they may have docs for different versions, It would be great to switch between the versions

Describe the solution you'd like

Just like the lodash docs here: https://lodash.com/docs/3.10.1, they have a version switcher for that

Describe alternatives you've considered

List all available versions works too, just like this one: https://ziglang.org/documentation/0.10.1/

Maybe we can support both?

Additional context

Thanks again.

Fix TOC header

The table of contents header is not translated properly, see this page for example.

[BUG] Ensure navbar background is always opaque when collapsed

Describe the bug
The navbar background is not always opaque when in collapsed state, making it difficult to read the menu items.

To reproduce
Steps to reproduce the behavior:

1. Go to the homepage of the docs site
2. Resize the viewport to ensure the navbar toggler is visible
3. Change the color mode
4. Click on the toggler
5. Observe the background of the navbar menu

Expected behavior
The navbar background should be opaque when collapsed. Also, the background should be transparent after changing the color mode.

Manual Install Option

I am kicking the tires on Hinode... but have been left scratching my head...

For those of us who choose not to use full automation for deployment, could you consider a fallback in your docs on how to build and build:prod to the local /public folder?

This would make it much easier for those of us on other platforms to grab the results and host them elsewhere, like AWS, or internal corporate servers.

Much appreciated!

[BUG] Make sidebar navigation scrollable

Describe the bug
The current sidebar used for secondary navigation is not scrollable. This makes the interaction less user-friendly.

To reproduce
Steps to reproduce the behavior:

1. Go to docs
2. Expand the first four menu items
3. Scroll down on the page below the fold
4. Observe the sidebar behavior

Expected behavior
The sidebar navigation should be scrollable independent of the main content.

Additional context
See the Bootstrap docs for expected behavior.

Cannot npm run start main theme in README

Thank you for providing a nice hugo theme.
I tried to run the example in the README, but it gave me an error. Attached below is the detailed output. If you know the cause of the problem, I would be happy to get an answer.

Thank you in advance.

Environment

• Windows 11 Home (64-bit)
• node version v18.13.0
• hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended windows/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio

Run all command on Terminal in VSCode

Description

For main theme, I could not run npm run start.

git clone https://github.com/markdumay/hugo-theme-hinode.git my-hinode-site && cd my-hinode-site
npm install
npm run start

> @markdumay/[email protected] prestart
> npm run clean


> @markdumay/[email protected] clean
> shx rm -rf public resources


> @markdumay/[email protected] start
> exec-bin node_modules/.bin/hugo/hugo server --bind=0.0.0.0 --disableFastRender

Start building sites …
hugo v0.108.0-a0d64a46e36dd2f503bfd5ba1a5807b900df231d+extended windows/amd64 BuildDate=2022-12-06T13:37:56Z VendorInfo=gohugoio
ERROR 2023/01/10 22:42:41 render of "section" failed: "C:\Users\nanjakorewa-win-ms\workspace\my-hinode-site\layouts\_default\list.html:9:28": execute of template failed: template: _default/list.html:9:28: executing "main" at <partial "assets/blog-card.html" $element>: error calling partial: "C:\Users\nanjakorewa-win-ms\workspace\my-hinode-site\layouts\partials\assets\blog-card.html:4:16": execute of template failed: template: partials/assets/blog-card.html:4:16: executing "partials/assets/blog-card.html" at <partial "image.html" (dict "url" .Params.thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" .Params.title)>: error calling partial: "C:\Users\nanjakorewa-win-ms\workspace\my-hinode-site\layouts\partials\image.html:26:12": execute of template failed: template: partials/image.html:26:12: executing "partials/image.html" at <partial "utilities/GetImage.html" (dict "url" $url)>: error calling partial: "C:\Users\nanjakorewa-win-ms\workspace\my-hinode-site\layouts\partials\utilities\GetImage.html:12:20": execute of template failed: template: partials/utilities/GetImage.html:12:20: executing "partials/utilities/GetImage.html" at <resources.GetMatch>: error calling GetMatch: runtime error: invalid memory address or nil pointer dereference
Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: partials/head/head.html:7:7: executing "head" at <partial "head/seo.html" .>: error calling partial: "C:\Users\nanjakorewa-win-ms\workspace\my-hinode-site\layouts\partials\head\seo.html:19:18": execute of template failed: template: partials/head/seo.html:19:18: executing "partials/head/seo.html" at <partial "utilities/GetImage.html" (dict "url" .)>: error calling partial: "C:\Users\nanjakorewa-win-ms\workspace\my-hinode-site\layouts\partials\utilities\GetImage.html:12:20": execute of template failed: template: partials/utilities/GetImage.html:12:20: executing "partials/utilities/GetImage.html" at <resources.GetMatch>: error calling GetMatch: runtime error: invalid memory address or nil pointer dereference
Built in 23963 ms

I am not familiar with hugo and could not find the detailed cause, but based on the error message, I can see that the error is inside utilities/GetImage.html. Then, it seemed that the thumbnail: https://picsum.photos/id/184/4288/2848.jpg line in emoji-support.md was the cause. Then I excluded emoji-support.md and npm run start worked fine.

[BUG] Problem displaying theme layout correctly after last update

Describe the bug
I am having problems displaying the layout of this theme after updating it.
I still have the old versions and do not have this problem.

To reproduce
Steps to reproduce the behavior:

1. hugo new site xxx
2. git clone git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site (also applies to child one)
3. npm install
4. npm run start

Expected behavior
I expect it to be fixed as before.

Log file

Screenshots

Environment (please complete the following information):

• Hinode version: v0.12.12
• Host OS: Fedora Linux 37 (Workstation Edition)
• Node version: v18.15.0
• Hugo version: hugo v0.111.3-5d4eb5154e1fed125ca8e9b5a0315c4180dab192 linux/amd64 BuildDate=2023-03-12T11:40:50Z VendorInfo=gohugoio
• Browser: Mozilla Firefox 112.0.2 (64 bit) - Chromium 113.0.5672.63 (64 bit)

[BUG] Reduce flickering when reloading site with color mode enabled

Describe the bug
When dark mode is enabled, Hinode defaults to a dark theme during page load. The site switches to the final theme when loading has completed. This might cause flickering when the final theme is light instead of dark.

To reproduce
Steps to reproduce the behavior:

1. Switch to the light theme
2. Refresh repeatedly
3. Observe the color of the navbar during refresh

Expected behavior
The site should not flicker during refresh.

Environment (please complete the following information):

• Host OS: macOS Ventura 13.3
• Node version: node v18.15.0
• Hugo version: v0.111.3-5d4eb5154e1fed125ca8e9b5a0315c4180dab192+extended darwin/arm64 BuildDate=2023-03-12T11:40:50Z VendorInfo=gohugoio
• Browser: Google Chrome Version 111.0.5563.146 (Official Build) (arm64)

Additional context
The flickering appears to be caused by the script bundle not being on the critical rendering path. Although this improves the site's responsiveness, it has an unwanted side effect for the specific color mode behavior. This article provides a more in-depth explanation and potential solution.

[BUG] Building in docker container fails

Describe the bug
Hugo cannot build successfully

To reproduce
Steps to reproduce the behavior:

docker run --rm -it -p 8000:8000 node:gallium-bullseye-slim bash
# install git curl node hugo, update to latest version, etc
# clone the repo
npm install
npm run start -- --port 8000 --debug

Expected behavior
Web server spins up

Log file

DEBUG 2023/04/07 12:27:48 found menu: "main", in site config                                                                                                                                             [50/3703]
DEBUG 2023/04/07 12:27:48 found menu: "main", in site config                                                                                                                                                      
DEBUG 2023/04/07 12:27:48 found menu: "social", in site config                                                                                                                                                    
DEBUG 2023/04/07 12:27:48 found menu: "social", in site config                                                                                                                                                    
DEBUG 2023/04/07 12:27:48 found menu: "social", in site config                                                                                                                                                    
DEBUG 2023/04/07 12:27:48 found menu: "sample", in site config                                                                                                                                                    
DEBUG 2023/04/07 12:27:48 found menu: "sample", in site config                                           
DEBUG 2023/04/07 12:27:48 found menu: "sample", in site config                                           
DEBUG 2023/04/07 12:27:48 found menu: "sample", in site config                                           
DEBUG 2023/04/07 12:27:49 Render page Sample project to "/en/projects/sample-project/index.html"         
DEBUG 2023/04/07 12:27:50 Render page Welcome to Hinode! to "/en/index.html"                             
DEBUG 2023/04/07 12:27:52 Render page Blog to "/en/blog/index.html"                                      
DEBUG 2023/04/07 12:28:03 Render page Projects to "/en/projects/index.html"                              
DEBUG 2023/04/07 12:28:07 Render page Tags to "/en/tags/index.html"                                      
DEBUG 2023/04/07 12:28:12 Render page blog to "/en/tags/blog/index.html"                                 
DEBUG 2023/04/07 12:28:12 Render page bootstrap to "/en/tags/bootstrap/index.html"                       
DEBUG 2023/04/07 12:28:21 creating alias: /en/blog/page/1/index.html redirecting to http://localhost:8000/en/blog/
DEBUG 2023/04/07 12:28:21 Render page css to "/en/tags/css/index.html"                                   
DEBUG 2023/04/07 12:28:29 Render page golang to "/en/tags/golang/index.html"                             
DEBUG 2023/04/07 12:28:35 Render page html to "/en/tags/html/index.html"                                 
DEBUG 2023/04/07 12:28:35 creating alias: /en/projects/page/1/index.html redirecting to http://localhost:8000/en/projects/
ERROR 2023/04/07 12:28:35 render of "page" failed: "/root/my-hinode-site/layouts/_default/single.html:108:23": execute of template failed: template: _default/single.html:108:23: executing "main" at <partial "pa
rtials/body.html" .>: error calling partial: execute of template failed: template: _default/single.html:33:16: executing "partials/body.html" at <partial "image.html" (dict "url" .Params.thumbnail "ratio" "21x9
" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits)>: error calling partial: "/root/my-hinode-site/layouts/partials/image.html:72:23": execute of template failed: template
: partials/image.html:72:23: executing "partials/image.html" at <$img.Fill>: error calling Fill: image "/root/my-hinode-site/assets/img/notepad.jpg": this feature is not available in your current Hugo version, 
see https://goo.gl/YMrWcn for more information      
ERROR 2023/04/07 12:28:35 render of "page" failed: "/root/my-hinode-site/layouts/_default/single.html:108:23": execute of template failed: template: _default/single.html:108:23: executing "main" at <partial "pa
rtials/body.html" .>: error calling partial: execute of template failed: template: _default/single.html:33:16: executing "partials/body.html" at <partial "image.html" (dict "url" .Params.thumbnail "ratio" "21x9
" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits)>: error calling partial: "/root/my-hinode-site/layouts/partials/image.html:72:23": execute of template failed: template
: partials/image.html:72:23: executing "partials/image.html" at <$img.Fill>: error calling Fill: image "/root/my-hinode-site/assets/img/flowers.jpg": this feature is not available in your current Hugo version, 
see https://goo.gl/YMrWcn for more information      
ERROR 2023/04/07 12:28:35 render of "page" failed: "/root/my-hinode-site/layouts/_default/single.html:108:23": execute of template failed: template: _default/single.html:108:23: executing "main" at <partial "pa
rtials/body.html" .>: error calling partial: execute of template failed: template: _default/single.html:33:16: executing "partials/body.html" at <partial "image.html" (dict "url" .Params.thumbnail "ratio" "21x9
" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits)>: error calling partial: "/root/my-hinode-site/layouts/partials/image.html:72:23": execute of template failed: template
: partials/image.html:72:23: executing "partials/image.html" at <$img.Fill>: error calling Fill: image "/root/my-hinode-site/assets/img/phone.jpg": this feature is not available in your current Hugo version, se
e https://goo.gl/YMrWcn for more information        
ERROR 2023/04/07 12:28:35 render of "page" failed: "/root/my-hinode-site/layouts/_default/single.html:108:23": execute of template failed: template: _default/single.html:108:23: executing "main" at <partial "pa
rtials/body.html" .>: error calling partial: execute of template failed: template: _default/single.html:33:16: executing "partials/body.html" at <partial "image.html" (dict "url" .Params.thumbnail "ratio" "21x9
" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits)>: error calling partial: "/root/my-hinode-site/layouts/partials/image.html:72:23": execute of template failed: template
: partials/image.html:72:23: executing "partials/image.html" at <$img.Fill>: error calling Fill: image "/root/my-hinode-site/assets/img/coffee.jpg": this feature is not available in your current Hugo version, s
ee https://goo.gl/YMrWcn for more information       
ERROR 2023/04/07 12:28:35 TOCSS: failed to transform "style.app.scss" (text/x-scss). Check your Hugo installation; you need the extended version to build SCSS/SASS with transpiler set to 'libsass'.: this featur
e is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information          
Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: partials/head/head.html:6:7: executing "head" at <partial "head/stylesheet.html" .>: error call
ing partial: "/root/my-hinode-site/layouts/partials/head/stylesheet.html:26:4": execute of template failed: template: partials/head/stylesheet.html:26:4: executing "partials/head/stylesheet.html" at <partial "h
ead/icons.html" (dict "css" $css)>: error calling partial: "/root/my-hinode-site/layouts/partials/head/icons.html:22:54": execute of template failed: template: partials/head/icons.html:22:54: executing "partial
s/head/icons.html" at <$css.Content>: error calling Content: TOCSS: failed to transform "style.app.scss" (text/x-scss). Check your Hugo installation; you need the extended version to build SCSS/SASS with transp
iler set to 'libsass'.: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information

Environment (please complete the following information):

• Docker OS: Debian GNU/Linux 11 (bullseye)
• Node version: v18.15.0
• Hugo version: hugo v0.111.3-5d4eb5154e1fed125ca8e9b5a0315c4180dab192 linux/amd64 BuildDate=2023-03-12T11:40:50Z VendorInfo=gohugoio

Add sharing on social media

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
Add buttons to share a page on different social media. Ideally, the sharing options would be configurable and could be disabled globally or individually per page. The supported media should include:

• Twitter
• LinkedIn
• Facebook
• WhatsApp
• Plain link

Describe alternatives you've considered
N/A

Additional context
N/A

Fix project and blog item tags

Question: change opacity of carousel

Hi, where can I change the opacity of the carousel component so that I don't get any darkness on top of the photos? Thank you!

[BUG] Improve CSS purge

Describe the bug
The CSS purge script removes too many elements, causing the stylesheets to fail.

To reproduce
Steps to reproduce the behavior:

• Run a local production server with npm run prod
• View the site in any browser
• Clear the browser cache if needed

Expected behavior
The stylesheets should render as expected.

Log file
N/A

Screenshots
See this blog for an example.

Environment (please complete the following information):

• Host OS: [macOS Ventura 13.1]
• Node version: [node v18.10.0]
• Hugo version: [hugo v0.108.0-a0d64a46e36dd2f503bfd5ba1a5807b900df231d+extended darwin/amd64 BuildDate=2022-12-06T13:37:56Z VendorInfo=gohugoio]
• Browser: [Chrome v109.0.5414.87 (Official Build) (arm64)]

Additional context
The bug impacts the child theme too.

[BUG] - Icon Short code in H1, H2, taints the side menu

Describe the bug
Using a short code, explicitly tested a Font Awesome Icon, in a markup header spoils the side menu with "HAHAHAHUGOSHORTCODE" strings

By way of example the markdown
## Maori Tattoos - Fact Box {{< fas vault >}}

produces an entry in the side menu that reads as:
[Maori Tattoos - Fact Box HAHAHUGOSHORTCODEs0HBHB]
And links to
(http://localhost:1313/en/posts/maori-tattoos/#maori-tattoos---fact-box-hahahugoshortcodes0hbhb)

To reproduce
Steps to reproduce the behavior:

1. Go to 'any blog post, update a header to include a shortcode icon`
2. Click on 'load the post in a browser
3. See error

Expected behavior
Either the Icon to be ignored in the side menu - the Text part only to show

Screenshots

Environment (please complete the following information):

• Hinode version: main - pulled Apr 24 2023
• Host OS: Ubuntu 20.04 with T2 kernel on MBP 2019
• Node version: 8.18.0
• Hugo version: hugo v0.111.3-5d4eb5154e1fed125ca8e9b5a0315c4180dab192+extended linux/amd64 BuildDate=2023-03-12T11:40:50Z
• Browser: Brave (Official Build) (amd64)]

[BUG] Fix rendering of vector logo

Describe the bug
The vector logo of Hinode refers to a font, which causes rendering issues on certain devices.

To reproduce
Steps to reproduce the behavior:

1. Visit gethinode.com
2. View the main logo in the featured section

Expected behavior
The logo text should be converted to a path instead of using a font.

Log file
N/A

Screenshots
N/A

Environment (please complete the following information):
N/A

Additional context
N/A

Enhance documentation

Is your feature request related to a problem? Please describe.
Hinode's documentation provides an overview on how to get started, how to configure the theme, and how to use the available shortcodes.

Describe the solution you'd like
Expand the documentation for the following topics:

Components

• Close button
• Navs & tabs
• Popover

Component examples

• Accordion
• Alert
• Badge
• Breadcrumb
• Button
• Button group
• Card
• Carousel
• Collapse
• Command prompt
• Icon
• Image
• Navbar
• Navs and tabs
• Spinner
• Toast
• Tooltip

Describe alternatives you've considered
N/A

Additional context
N/A

[BUG] fontawesome brand icons not working

Describe the bug
The fontawesome brand icons are not working properly.

To reproduce
Steps to reproduce the behavior:

1. Go to https://gethinode.com/docs/0.9/getting-started/introduction/
2. You can see that any of the brand icons are just square, not actual icons. For example, the menu on the top right corner to change the color scheme, you don't see the icons for "light", "dark", and "auto".

Expected behavior
The squares should actually be icons.

*Screenshots

Environment (please complete the following information):

• Hinode version: v0.14.6
• Host OS: macOS Ventura 13.4
• Node version: Node.js v20.2.0
• Hugo version: hugo v0.112.7+extended darwin/arm64 BuildDate=unknown
• Browser: Google Chrome Version 114.0.5735.90

Support original aspect ratio for images

Support linking to GitHub releases

Is your feature request related to a problem? Please describe.
The main repository uses GitHub to manage and describe its releases. New releases are automatically deployed as a package to npm. The main website https://gethinode.com should include a release section that highlights the key changes and features.

Describe the solution you'd like
To avoid maintaining content in two places, the releases on https://gethinode.com should link to the main release documentation maintained on GitHub. For example, the Markdown content page could include a link to the release in its front matter. A call to the GitHub release API could extract the relevant input from the release documentation.

Describe alternatives you've considered
N/A

Additional context
N/A

Clean up npm commands

Is your feature request related to a problem? Please describe.
Hinodes uses several npm commands defined in package.json. The current commands are somewhat cluttered and do not take advantage of using the latest available Hugo binary automatically.

Describe the solution you'd like
Clean up the npm commands, including automatic updating of the Hugo binary.

Describe alternatives you've considered
Refer to the Bootstrap repository for a more clean and concise example.

Additional context
N/A

Support Web Share API

Is your feature request related to a problem? Please describe.
The current version of Hinode supports optional social sharing of pages. It uses configurable buttons for each provider. The Web Share API provides a native solution instead. The feature is supported by most modern browsers, except Firefox. The Web Share API should be enabled using the current approach as fallback.

Describe the solution you'd like
This blog provides a basic script with fallback: https://dev.to/j471n/how-to-share-anything-from-your-website-by-web-share-api-1h5g

Describe alternatives you've considered
N/A

Additional context
N/A

Add additional deployment options

Is your feature request related to a problem? Please describe.
The current documentation describes how to deploy to Azure blob storage and Netlify only.

Describe the solution you'd like
Add additional deployment solutions for Azure Static Web Apps and GitHub pages.

Describe alternatives you've considered
Hugo contains a comprehensive overview of deployment strategies and targets. By adding support for the following services, the Hinode documentation will cover a wider range of deployment strategies:

• Azure Static Web Apps
• GitHub pages
• Manual deployment

Additional context
N/A

[BUG] Use responsive images for figure shortcode

Describe the bug
Unlike the image shortcode, the figure shortcode does not preprocess images but instead links to the original image source.

To reproduce
Steps to reproduce the behavior:

• Insert a figure shortcode
• Link to an (external) image source
• Render the site and review the HTML output

Expected behavior
The figure image should preprocess the (external) images and include them as an image set.

Log file
N/A

Screenshots
An example is available on this blog.

Environment (please complete the following information):

• Host OS: [macOS Ventura 13.1]
• Node version: [node v18.10.0]
• Hugo version: [hugo v0.108.0-a0d64a46e36dd2f503bfd5ba1a5807b900df231d+extended darwin/amd64 BuildDate=2022-12-06T13:37:56Z VendorInfo=gohugoio]
• Browser: [Safari v16.2 (18614.3.7.1.5)]

Additional context
The bug is not linked to a specific environment.

Fix tag button

The tag button has a broken link, as it does not consider the available translations for multiple languages.

For example, see this emoji button.

Switcher for language support

Hi Mark,
I was able to create menus and posts in a different language thanks to i18n support, but I don't see any drop-down menus to help me switch between languages like in Blist.
Can you add it? Have you planned to complete this feature?

Thanks 😄

[BUG] Fix focus of child elements in navbar

Describe the bug
The navbar displays a top-level menu with nesting at one depth level. The child items do not get a highlight color when the related page is active.

To reproduce
Steps to reproduce the behavior:

1. Go to /en/projects/
2. Notice the highlight (bold font) applied to Projects in the main navbar
3. Select /en/projects/another-project/
4. Observe the highlight (theme color background) is missing for Another project is the main navbar

Expected behavior
The behavior should be similar to the language switcher, which highlights the currently active language.

Log file
N/A

Screenshots
N/A

Environment (please complete the following information):

• Host OS: [e.g. macOS Ventura 13.1]
• Node version: [e.g. node v18.13.0]
• Hugo version: [e.g. hugo v0.110.0-e32a493b7826d02763c3b79623952e625402b168+extended darwin/arm64 BuildDate=2023-01-17T12:16:09Z VendorInfo=gohugoio]
• Browser: [Google Chrome Version 109.0.5414.119 (Official Build) (arm64)]

Additional context
N/A

Fix sql documentation

The line continuation suffix is incorrect in the Dutch documentation for the sql prompt.

Why is there no public folder and when I create it, it's in the gitignore?

Apologies for abusing the issue channel as a customer service.

I'm trying to deploy Hinode on Github, but I keep seeing the "readme" content when opening the page.

I followed this solution to create a public folder but I assume I'm working against how you intended it to be used?

Many thanks

Multilevel side-menu

Is your feature request related to a problem? Please describe.

I am working on a documentation site for multiple products (more than 2000 pages in total)

Describe the solution you'd like

I want to create a side menu for every product like

└── product
├── folder 1
│ ├── subfolder 1
│ ├── subfolder 2
│ └── subfolder 3
├── folder 2

Folders and subfolders may have multiple pages and subfolders

I have tried modifying the menu yaml file without any luck

• title: Product 1
  • title: Title1
    pages:
    • title: Introduction
    • title: Requirements
  • title: Title2
    pages:
    • title: Page 1
    • title: Page 2

Thank you

Go Module Support

I wonder if Go modules can be an option for getting Hinode?

I usually want to avoid the whole Javascript ecosystem as much as possible.

[BUG] Breadcrumbs are not visible

When breadcumbs is enabled in params.toml, they are not visible as they are overlapped by something else. What is just visible is the very bottom part of some of the characters in the breadcrumb.

To reproduce
Steps to reproduce the behavior:

1. Set breadcrumbs to true in params.toml.
2. Once the site rebuilds, some very small parts of the breadcrumbs are visible, below the search box.

Expected behavior
Obviously I expected the breadcrumbs to show :)

Screenshot

The screenshot shows, what is displayed when breadcrumbs are enabled and the 'Bootstrap elements' page is displayed. But, it is the same on every page that is supposed to show breadcrumbs. What is shown are some very small fragments of the characters in the breadcrumb like the very low part of the letter 'g' in 'Blog'.

Environment

• Hinode version: v0.15.1, but actually using template v0.8.2 (the issue is there on both)
• Host OS: Linux Mint Vera (21.1)
• Node version: v18.16.1
• Hugo version: hugo v0.114.0-9df2ec7988e5a217a14901cc76c0b7e76b2e9f02+extended linux/amd64 BuildDate=2023-06-19T17:01:43Z VendorInfo=gohugoio
• Browser: Tested on Firefox 114.0.2 and on Brave version 1.52.129 (using Chromium 114.0.5735.198)

Additional context
I can fix the problem by editing the file: node_modules/bootstrap/scss/_variables.css and change the line $breadcrumb-padding-y: to 1rem !default. This is the first time I work with nodejs, so I suppose there probably is a neater way of fixing this besides editing bootstrap files, but I am unclear on where I should fix that.
Also this fix makes the breadcrumbs visible, but also increases the space between the breadcrumbs and the title, which looks to be a bit much.
I am using the Hinode template myself, but I checked if it is also in this repository by cloning it and enabling the breadcrumbs and it indeed shows the same issue.

Make entire card clickable

Is your feature request related to a problem? Please describe.
The current card includes various elements. The individual thumbnail/icon, title, and description are clickable and link to the correct content page. However, the card itself is not clickable, although a hover effect suggests otherwise.

Describe the solution you'd like
Make the entire card clickable. Possibly the tag links need to be adjusted.

Describe alternatives you've considered
N/A

Additional context
N/A

Add support for nested menus

[BUG] Blog Posts After the Year 2022 Are Not Processed

Describe the bug
When creating a blog post that is after the year 2022, the site doesn't build a page for that post. However, no error is outputted to the logs, and this could also be my error.

To reproduce
Steps to reproduce the behavior:

1. Go to content/en/blog/
2. Write a blog post with any year after the year 2022.
3. Go to Blog or Tags page on website
4. No page is listed for that post

Log file
No error is outputted, only the following:

Change detected, rebuilding site.
2023-02-10 11:43:45.013 -0700
Source changed WRITE         "[REDACTED]/content/en/blog/2023/lorum-ipsum.md"
Total in 59 ms

Environment (please complete the following information):

• Host OS: Ubuntu 22.10
• Node version: node v18.7.0
• Hugo version: hugo v0.110.0-e32a493b7826d02763c3b79623952e625402b168+extended linux/amd64 BuildDate=2023-01-17T12:16:09Z VendorInfo=gohugoio
• Browser: Version 109.0.5414.119 (Official Build) (64-bit)

This is an awesome project and Hugo theme, and I hope to make it better!

An issue with the menu navigation

Describe the bug
I renamed the files in 'content' folder and modified files in config/_default, but it still shows error: cols:0

Reproduce the behavior

1. Renaming files and filenames
2. change the title in the respective index
3. modify menu.toml
4. modify param.toml
5. hugo server/npm run start
6. "ERROR Invalid value for param 'cols': 0 Error: Error building site: logged 1 error(s)

Expected behavior
Rename folders and files in content without changing the original layout of theme.

Screenshots

Environment (please complete the following information):

• Host Windows 11
• Node version: Node.js v18.15.0
• Hugo version: hugo v0.111.2-4164f8fef9d71f50ef3962897e319ab6219a1dad+extended windows/amd64
• Browser: Google Chrome Version 108.0.5359.124 (Official Build) (arm64)]

Additional context
Dear Mark,

I hope this message finds you well. First and foremost, I want to express my gratitude for creating such a beautiful and functional theme. It has been a pleasure working with it so far.
I am currently a student and I am helping my professor to build a website for our project showcase. I've run into an issue where I'm trying to update the navigation menu. I followed the steps of renaming folders and files, updating URLs, and modifying the menus file. However, every time I try to save and regenerate the site, I get an error message saying "Invalid value for param 'cols': 0".
I have followed the instructions in the documentation carefully, but I am still unable to resolve the issue. I would greatly appreciate any guidance or support you can offer to help me fix this problem.
Thank you in advance for your time and assistance.

Best regards,
Shaelyn

Support strict content security policy

Bootstrap uses embedded SVG icons throughout the SCSS files. The strict content security policy of the theme refuses to load these embedded files, resulting in missing icons. See Bootstrap issue #33134 for more details.

Add Leaflet javascript library to easily create interactive maps for your blog

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
Add Leaflet library inside the project to create marvelous interactive maps for your blog.

Describe alternatives you've considered
N/A

Additional context
Reference: https://leafletjs.com/download.html

defaultContentLanguageInSubdir and links in languages.toml

Is your feature request related to a problem? Please describe
The problem is that the functioning of the option defaultContentLanguageInSubdir depends on the hardcoded into languages.toml links (i.e. "/en/about").

Describe the solution you'd like
Although, I do not know whether there is or is no limitation with the Hugo to arrive at this specific solution, my description of it is as follows:

Perhaps, and in the example of the "/en/about" link, it could be possible for the "en" part to be generated dynamically depending on the high-level definition in the languages.toml (i.e. "[en]" and "[nl]" and "[mylang]"), and depending on whether the defaultContentLanguageInSubdir option is true or false, as well as depending on the weight.

Describe alternatives you've considered
As is now, the alternative to the proposed solution, is to change the hardcoded links by hand whenever the defaultContentLanguageInSubdir is set to true or false and whenever language's weight is altered.

Additional context
Please see the attached screenshot in respect to the proposed solution.

[Feature Request] Dark mode

Hi Mark,
It would be nice to have dark mode for this theme (like in Blist) where you can switch from the default theme to dark mode via a toggle.
Is there a possibility to have this feature?

Thank you!

Fix security policy settings for carousel buttons

Add paragraph link when hovering a heading

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
[getbootstrap.com] shows an anchor when hovering a paragraph header. This simplifies the sharing of content links.

Describe alternatives you've considered
N/A

Additional context
Consider adding <i class="fa-solid fa-link"></i> as icon.

[BUG] Fix shading of carousel on smaller screens

Describe the bug
The carousel adds shading to its images to enhance the contrast for labels and controls. The labels are hidden on smaller screens. However, the shading disappears too, making controls less visible.

To reproduce
Steps to reproduce the behavior:

1. Go to the optimization guide
2. Resize the viewport to small
3. Review the carousel in step 1

Expected behavior
The shading should be applied on all viewport sizes.

Add analytics support

Is your feature request related to a problem? Please describe.
Hugo supports Google Analytics with a boilerplate template. Currently Hinode ignores this setting.

Describe the solution you'd like
Support popular website analytics trackers such as Google Analytics or self-hosted solutions such as Countly. Include support for cookies to inform users about their privacy.

Describe alternatives you've considered
N/A

Additional context
N/A

Add carousel shortcode

Switch to gethinode.com

Is your feature request related to a problem? Please describe.
Hinode originated as a personal project. The project includes a demo site that deploys to https://hinode-demo.markdumay.org. The main site now includes many documentation pages, which are not relevant for a starter template.

Describe the solution you'd like
Move ownership of the main repository and related repositories to a new organization. Create a new docs repository that links to the main repository, but which keeps track of the documentation pages. Use the docs repository to generate a static website that deploys automatically to https://gethinode.com. Finally, simplify the main and child repositories and deploy them automatically to a subdomain on the main website. Ensure npm is updated accordingly.

Describe alternatives you've considered
N/A

Additional context
N/A

Support Dart Sass transpiler

Is your feature request related to a problem? Please describe.
The build pipeline for Sass uses Hugo pipes to transpile the Sass files into CSS. Hugo uses LibSass by default, which is deprecated since October 2020. Dart Sass supports a flexible module system among other features. No cross-platform solution of Dart Sass is available as of yet.

Describe the solution you'd like
Replace the LibSass library with Dart Sass. Ideally, the package is installed by npm automatically. The build pipeline should be able to ingest configuration values from Hugo, for example to set theme colors.

Describe alternatives you've considered

• Bootstrap uses Dart Sass to build its documentation site. However, it does not support Hugo configuration values.
• Hugo provides a workaround that uses Dart Sass embedded, which has the advantage to support Hugo variables natively. It is not fully compatible with npm yet.

Additional context
N/A

[BUG] Fix list config on home page

Describe the bug
The list section in params.toml has a parameter homepage to define the number of items to display on the home page. Its setting has no effect on the home page.

To reproduce
Steps to reproduce the behavior:

1. Set homepage = 5 in the section [list/blog] of config/_default/params.toml
2. Reload the browser for the homepage
3. Scroll down to the section Blog

Expected behavior
The home page should list five blog posts (if available) instead of three.

Log file
N/A

Screenshots
N/A

Environment (please complete the following information):

• Host OS: [e.g. macOS Ventura 13.1]
• Node version: [e.g. node v18.13.0]
• Hugo version: [e.g. hugo v0.110.0-e32a493b7826d02763c3b79623952e625402b168+extended darwin/arm64 BuildDate=2023-01-17T12:16:09Z VendorInfo=gohugoio]
• Browser: [Google Chrome Version 109.0.5414.119 (Official Build) (arm64)]

Additional context
N/A