Merge pull request #44 from markdumay/develop

External links

.github/workflows/lint.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [14.x, 16.x, 18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

.github/workflows/npm-publish.yml

@@ -0,0 +1,35 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  workflow_dispatch:
+    branches: [ main ]
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: npm test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.stylelintignore

@@ -1,4 +1,5 @@
 assets/scss/common/_variables.scss
+assets/scss/components/_syntax.scss
 assets/scss/vendor
 assets/scss/app.scss
 node_modules

README.md

@@ -55,6 +55,7 @@ Additional features include:
 - Social links
 - Blog pagination
 - Code highlighting
+- Command prompt
 - Color customization
 - i18n support
 
@@ -72,10 +73,7 @@ Start a new Hinode project in three steps:
 
 ### 1. Create a new site
 
-<!-- Hinode is available as a child theme, and a starter theme:
-
-- Use the Hinode child theme, if you do **not** plan to customize a lot, and/or need future Hinode updates.
-- Use the Hinode starter theme, if you plan to customize a lot, and/or do **not** need future Hinode updates.
+Hinode is available as a [child theme][repository_child], and a [main theme][repository]. The child theme uses [npm][npm] to link to the latest available version of the Hinode theme. As such, it is less applicable if you plan to customize a lot. Vice versa, the main theme allows for heavy customization, but is not synchronized with the latest available Hinode theme automatically.
 
 Not quite sure? Use the Hinode child theme.
 
@@ -85,7 +83,7 @@ Not quite sure? Use the Hinode child theme.
 git clone https://github.com/markdumay/hugo-theme-hinode-child.git my-hinode-site && cd my-hinode-site
 ```
 
-#### Hinode starter theme -->
+#### Hinode main theme
 
 ```bash
 git clone https://github.com/markdumay/hugo-theme-hinode.git my-hinode-site && cd my-hinode-site
@@ -107,11 +105,11 @@ npm run start
 
 The main site configuration is available in `./config/_default`. Some remarks:
 
-- Menu items - `menus/menus.en.toml` contains language-specific items for the navigation bar and social media links for the home page's footer.
-- Content - Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`.
-- Theme color - Update `themeColor` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility.
-- Comments - Comments are powered by [utterances][utterances], a lightweight comments widget built on GitHub issues. Update the `repo`  of the `[comments]` section of `params.toml`.
-- Security headings - The local development server uses the header configuration as provided by `server.toml`. Similar settings are provided in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
+- **Menu items** - `menus/menus.en.toml` contains language-specific items for the navigation bar and social media links for the home page's footer.
+- **Content** - Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`.
+- **Theme color** - Update `themeColor` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility.
+- **Comments** - Comments are powered by [utterances][utterances], a lightweight comments widget built on GitHub issues. Update the `repo`  of the `[comments]` section of `params.toml`.
+- **Security policy** - The theme uses rather strict security policies by default. Be sure to allow references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
 
 ## Contributing
 
@@ -137,7 +135,7 @@ The Hinode theme is inspired by the following themes:
 
 ## License
 
-The `hugo-theme-hinode` codebase is released under the [MIT license][license]. The documentation (including the "README") is licensed under the Creative Commons ([CC BY-NC 4.0)][cc-by-nc-4.0] license.
+The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under the [MIT license][license]. The documentation (including the "README") is licensed under the Creative Commons ([CC BY-NC 4.0)][cc-by-nc-4.0] license.
 
 <!-- MARKDOWN PUBLIC LINKS -->
 [blist]: https://github.com/apvarun/blist-hugo-theme
@@ -158,8 +156,9 @@ The `hugo-theme-hinode` codebase is released under the [MIT license][license]. T
 <!-- MARKDOWN MAINTAINED LINKS -->
 <!-- TODO: add blog link
 [blog]: https://markdumay.com
--->
 [blog]: https://github.com/markdumay
+-->
 [demo]: https://hinode-demo.markdumay.org/
 [license]: https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE
 [repository]: https://github.com/markdumay/hugo-theme-hinode.git
+[repository_child]: https://github.com/markdumay/hugo-theme-hinode-child.git

assets/js/index.js

@@ -155,3 +155,42 @@ Source:
     }
   }
 }());
+
+
+/*
+Source:
+  - https://simplernerd.com/hugo-add-copy-to-clipboard-button/
+*/
+
+const svgCopy =
+  '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>';
+const svgCheck =
+  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
+
+const addCopyButtons = (clipboard) => {
+    // 1. Look for pre > code elements in the DOM
+    document.querySelectorAll("pre > code").forEach((codeBlock) => {
+      // 2. Create a button that will trigger a copy operation
+      const button = document.createElement("button");
+      button.className = "clipboard-button";
+      button.type = "button";
+      button.innerHTML = svgCopy;
+      button.addEventListener("click", () => {
+        clipboard.writeText(codeBlock.innerText).then(
+          () => {
+            button.blur();
+            button.innerHTML = svgCheck;
+            setTimeout(() => (button.innerHTML = svgCopy), 2000);
+          },
+          (error) => (button.innerHTML = "Error")
+        );
+      });
+      // 3. Append the button directly before the pre tag
+      const pre = codeBlock.parentNode;
+      pre.parentNode.insertBefore(button, pre);
+    });
+  };
+  
+  if (navigator && navigator.clipboard) {
+    addCopyButtons(navigator.clipboard);
+  }

assets/scss/app.scss

@@ -9,6 +9,7 @@ $themeColor: {{ site.Params.style.themeColor | default "#007bff" }};
 
 // Import Bootstrap configuration
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 
@@ -60,10 +61,13 @@ $themeColor: {{ site.Params.style.themeColor | default "#007bff" }};
 @import "components/blockquote.scss";
 @import "components/buttons.scss";
 @import "components/card.scss";
+@import "components/clipboard.scss";
+@import "components/command.scss";
 @import "components/comments.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
 @import "components/search.scss";
+@import "components/syntax.scss";
 @import "components/vimeo.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";

assets/scss/common/_variables.scss

@@ -1,5 +1,6 @@
 // Bootstrap variables overrides for theme
 $primary:                       $themeColor;
+$enable-negative-margins:       true;
 
 // Font awesome variables overrides for theme
 $fa-font-path:                  "../fonts";

assets/scss/components/_clipboard.scss

@@ -0,0 +1,41 @@
+// Adapted from https://simplernerd.com/hugo-add-copy-to-clipboard-button/
+
+.clipboard-button {
+    position: absolute;
+    right: 0;
+    padding: 2px 7px 5px;
+    margin: 5px;
+    color: $secondary;
+    background-color: transparent;
+    border-style: none;
+    font-size: 0.8em;
+    z-index: 1;
+    opacity: 0;
+    transition: 0.1s;
+}
+
+.clipboard-button > svg {
+    fill: $secondary;
+}
+
+.clipboard-button:hover {
+    cursor: pointer;
+    color: $primary;
+}
+
+.clipboard-button:hover > svg {
+    fill: $primary;
+}
+
+.clipboard-button:focus {
+    outline: 0;
+}
+
+.highlight {
+    position: relative;
+}
+
+.highlight:hover > .clipboard-button {
+    opacity: 1;
+    transition: 0.2s;
+}

assets/scss/components/_command.scss

@@ -0,0 +1,43 @@
+/* Adapted from PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&plugins=command-line */
+
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+.command-line-prompt {
+    border-right: 1px solid #999;
+    display: block;
+    float: left;
+    font-size: 100%;
+    letter-spacing: -1px;
+    margin-right: 1em;
+    pointer-events: none;
+    text-align: right;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.command-line-prompt > span::before {
+    opacity: 0.7;
+    content: " ";
+    display: block;
+    padding-right: 0.8em;
+}
+
+.command-line-prompt > span[data-prompt]::before {
+    content: attr(data-prompt);
+}
+
+.command-line-prompt > span[data-continuation-prompt]::before {
+    content: attr(data-continuation-prompt);
+}
+
+.command-line span.token.output {
+    /* Make shell output lines a bit lighter to distinguish them from shell commands */
+    opacity: 0.7;
+}

assets/scss/components/_syntax.scss

@@ -0,0 +1,85 @@
+/* Background */ .bg { color: #272822; background-color: #fafafa }
+/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
+/* CodeLine */ .chroma .cl {  }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #00a8c8 }
+/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
+/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
+/* KeywordNamespace */ .chroma .kn { color: #f92672 }
+/* KeywordPseudo */ .chroma .kp { color: #00a8c8 }
+/* KeywordReserved */ .chroma .kr { color: #00a8c8 }
+/* KeywordType */ .chroma .kt { color: #00a8c8 }
+/* Name */ .chroma .n { color: #111111 }
+/* NameAttribute */ .chroma .na { color: #75af00 }
+/* NameBuiltin */ .chroma .nb { color: #111111 }
+/* NameBuiltinPseudo */ .chroma .bp { color: #111111 }
+/* NameClass */ .chroma .nc { color: #75af00 }
+/* NameConstant */ .chroma .no { color: #00a8c8 }
+/* NameDecorator */ .chroma .nd { color: #75af00 }
+/* NameEntity */ .chroma .ni { color: #111111 }
+/* NameException */ .chroma .ne { color: #75af00 }
+/* NameFunction */ .chroma .nf { color: #75af00 }
+/* NameFunctionMagic */ .chroma .fm { color: #111111 }
+/* NameLabel */ .chroma .nl { color: #111111 }
+/* NameNamespace */ .chroma .nn { color: #111111 }
+/* NameOther */ .chroma .nx { color: #75af00 }
+/* NameProperty */ .chroma .py { color: #111111 }
+/* NameTag */ .chroma .nt { color: #f92672 }
+/* NameVariable */ .chroma .nv { color: #111111 }
+/* NameVariableClass */ .chroma .vc { color: #111111 }
+/* NameVariableGlobal */ .chroma .vg { color: #111111 }
+/* NameVariableInstance */ .chroma .vi { color: #111111 }
+/* NameVariableMagic */ .chroma .vm { color: #111111 }
+/* Literal */ .chroma .l { color: #ae81ff }
+/* LiteralDate */ .chroma .ld { color: #d88200 }
+/* LiteralString */ .chroma .s { color: #d88200 }
+/* LiteralStringAffix */ .chroma .sa { color: #d88200 }
+/* LiteralStringBacktick */ .chroma .sb { color: #d88200 }
+/* LiteralStringChar */ .chroma .sc { color: #d88200 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 }
+/* LiteralStringDoc */ .chroma .sd { color: #d88200 }
+/* LiteralStringDouble */ .chroma .s2 { color: #d88200 }
+/* LiteralStringEscape */ .chroma .se { color: #8045ff }
+/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 }
+/* LiteralStringInterpol */ .chroma .si { color: #d88200 }
+/* LiteralStringOther */ .chroma .sx { color: #d88200 }
+/* LiteralStringRegex */ .chroma .sr { color: #d88200 }
+/* LiteralStringSingle */ .chroma .s1 { color: #d88200 }
+/* LiteralStringSymbol */ .chroma .ss { color: #d88200 }
+/* LiteralNumber */ .chroma .m { color: #ae81ff }
+/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
+/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
+/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
+/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
+/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
+/* Operator */ .chroma .o { color: #f92672 }
+/* OperatorWord */ .chroma .ow { color: #f92672 }
+/* Punctuation */ .chroma .p { color: #111111 }
+/* Comment */ .chroma .c { color: #75715e }
+/* CommentHashbang */ .chroma .ch { color: #75715e }
+/* CommentMultiline */ .chroma .cm { color: #75715e }
+/* CommentSingle */ .chroma .c1 { color: #75715e }
+/* CommentSpecial */ .chroma .cs { color: #75715e }
+/* CommentPreproc */ .chroma .cp { color: #75715e }
+/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd {  }
+/* GenericEmph */ .chroma .ge { font-style: italic }
+/* GenericError */ .chroma .gr {  }
+/* GenericHeading */ .chroma .gh {  }
+/* GenericInserted */ .chroma .gi {  }
+/* GenericOutput */ .chroma .go {  }
+/* GenericPrompt */ .chroma .gp {  }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu {  }
+/* GenericTraceback */ .chroma .gt {  }
+/* GenericUnderline */ .chroma .gl {  }
+/* TextWhitespace */ .chroma .w {  }

config/_default/markup.toml

@@ -7,10 +7,10 @@ defaultMarkdownHandler = "goldmark"
     hl_Lines = ""
     lineAnchors = ""
     lineNoStart = 1
-  lineNos = true
+    lineNos = false
     lineNumbersInTable = false
     noClasses = false
-  # style = "monokai" # This parameter affects nothing, see https://github.com/razonyang/hugo-theme-bootstrap#syntax-highlighting.
+    # style = "monokailight" ## Update the 'create:syntax' command in package.json to modify the style
     tabWidth = 2
 
 [goldmark]

config/_default/server.toml

@@ -16,7 +16,7 @@ for = '/**'
         connect-src 'self' localhost:1313 ws://localhost:1313/livereload; \
         font-src 'self' https://fonts.gstatic.com; \
         frame-src 'self' localhost:1313 https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' https://i.vimeocdn.com https://i.ytimg.com; \
+        img-src 'self' https: data:; \
         manifest-src 'self'; \
         media-src 'self' \
         """

config/postcss.config.js

@@ -10,8 +10,7 @@ module.exports = {
         './layouts/**/*.html',
         './content/**/*.md',
       ],
-      safelist: {
-        standard: [
+      safelist: [
         /lazyloaded/,
         /table/,
         /thead/,
@@ -28,20 +27,21 @@ module.exports = {
         /fa.*/,
         /ratio.*/,
         /suggestion.*/,
-        ],
       ...whitelister([
           './assets/scss/components/_blockquote.scss',
           './assets/scss/components/_buttons.scss',
           './assets/scss/components/_card.scss',
+          './assets/scss/components/_clipboard.scss',
           './assets/scss/components/_img.scss',
           './assets/scss/components/_navbar.scss',
           './assets/scss/components/_search.scss',
+          './assets/scss/components/_syntax.scss',
           './assets/scss/layouts/_reboot.scss',
           './assets/scss/layouts/type.scss',
           './node_modules/bootstrap/scss/_dropdown.scss',
           './node_modules/bootstrap/scss/_utilities.scss',
         ]),
-      },
+      ],
     }),
   ],
 }

content/en/blog/code-highlighting.md

@@ -0,0 +1,183 @@
+---
+author: "Mark Dumay"
+title: "Code Highlighting"
+date: 2022-04-16
+description: "Examples on how to enable code highlighting"
+tags: ["code"]
+thumbnail: img/notepad.jpg
+credits: Photo by <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a> on <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
+---
+
+## Code Fencing
+
+Use code fencing to highlight the syntax of a specific language.
+
+```json
+{
+  "version": "0.2.0",
+  "themes": [],
+  "projects": [],
+  "configuration": {}
+}
+```
+
+```html
+<div class="highlight">
+    <pre>
+        <code>some code...</code>
+    </pre>
+</div>
+```
+
+## Highlight Partial
+
+Use the `highlight` partial to customize the layout of a specific code block.
+
+{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
+// GetTitleFunc returns a func that can be used to transform a string to
+// title case.
+//
+// The supported styles are
+//
+// - "Go" (strings.Title)
+// - "AP" (see https://www.apstylebook.com/)
+// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
+//
+// If an unknown or empty style is provided, AP style is what you get.
+func GetTitleFunc(style string) func(s string) string {
+  switch strings.ToLower(style) {
+  case "go":
+    return strings.Title
+  case "chicago":
+    return transform.NewTitleConverter(transform.ChicagoStyle)
+  default:
+    return transform.NewTitleConverter(transform.APStyle)
+  }
+}
+{{< / highlight >}}
+
+## Command Prompt Shortcode
+
+The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages.
+
+### Bash (default shell)
+
+Use the `command` shortcode to generate a block with a default bash command prompt.
+
+```html
+{{%/* command */%}}
+export MY_VAR=123
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command %}}
+export MY_VAR=123
+{{% /command %}}
+
+Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
+
+```html
+{{%/* command user="user" host="localhost" */%}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command user="user" host="localhost" %}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{% /command %}}
+
+### PowerShell
+
+Set the `shell` argument to `powershell` to generate a PowerShell terminal. Override the `prompt` to add a directory if needed. Use the backtick `` ` `` symbol to denote a line continuation.
+
+```html
+{{%/* command prompt="PS C:\Users\User>" shell="powershell" */%}}
+Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command prompt="PS C:\Users\User>" shell="powershell" %}}
+Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!
+{{% /command %}}
+
+### SQL
+
+Set the `shell` argument to `sql` to generate a SQL terminal. Use the `(con)` suffix to denote a line continuation.
+
+```html
+{{%/* command prompt="mysql>" shell="sql" */%}}
+set @my_var = 'foo';
+set @my_other_var = 'bar';
+CREATE TABLE people ((con)
+first_name VARCHAR(30) NOT NULL,(con)
+last_name VARCHAR(30) NOT NULL(con)
+);
+(out)Query OK, 0 rows affected (0.09 sec)
+insert into people(con)
+values ('John', 'Doe');
+(out)Query OK, 1 row affected (0.02 sec)
+select *(con)
+from people(con)
+order by last_name;
+(out)+------------+-----------+
+(out)| first_name | last_name |
+(out)+------------+-----------+
+(out)| John       | Doe       |
+(out)+------------+-----------+
+(out)1 row in set (0.00 sec)
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command prompt="mysql>" shell="sql" %}}
+set @my_var = 'foo';
+set @my_other_var = 'bar';
+CREATE TABLE people ((con)
+first_name VARCHAR(30) NOT NULL,(con)
+last_name VARCHAR(30) NOT NULL(con)
+);
+(out)Query OK, 0 rows affected (0.09 sec)
+insert into people(con)
+values ('John', 'Doe');
+(out)Query OK, 1 row affected (0.02 sec)
+select *(con)
+from people(con)
+order by last_name;
+(out)+------------+-----------+
+(out)| first_name | last_name |
+(out)+------------+-----------+
+(out)| John       | Doe       |
+(out)+------------+-----------+
+(out)1 row in set (0.00 sec)
+{{% /command %}}

content/en/blog/emoji-support.md

@@ -4,7 +4,8 @@ title: "Emoji Support"
 date: 2021-07-15
 description: "Guide to emoji usage in Hugo"
 tags: ["emoji"]
-thumbnail: img/dunes.jpg # https://picsum.photos/id/184/4288/2848
+# thumbnail: img/dunes.jpg
+thumbnail: https://picsum.photos/id/184/4288/2848
 credits: Photo by <a href="https://unsplash.com/@timdegroot">Tim de Groot</a> on <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
 ---
 

layouts/_default/list.html

@@ -1,7 +1,7 @@
 {{ define "main" -}}
-    <div class="p-5">
+    <div class="p-4">
         <h1>{{ .Title }}</h1>
-        <div class="container-fluid">
+        <div class="container-fluid p-0">
             <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
                 {{ $max := sub (len .Pages) 1 -}}
                 {{ range $index, $element := (.Paginate .RegularPagesRecursive).Pages -}}

layouts/_default/single.html

@@ -3,7 +3,7 @@
     {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "language" $.Page.Language "format" "long")) -}}
     
     <div class="container-fluid">
-        <div class="row row-cols-1 row-cols-sm-3 align-items-center p-5">
+        <div class="row row-cols-1 row-cols-sm-3 align-items-center p-3">
             <div class="col col-md-2 d-none d-md-block"></div>
             <div class="col col-sm-12 col-md-8">
                 {{ range .Params.tags -}}
@@ -18,7 +18,7 @@
                     {{ else -}}
                         &nbsp;&bull;&nbsp;
                     {{ end -}}
-                    {{ i18n "readingTime"}}{{ .ReadingTime }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }}
+                    {{ .ReadingTime }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }}
                     &nbsp;&bull;
                     {{ .WordCount }}&nbsp;{{ i18n "words" }}
                 </small>
@@ -27,7 +27,7 @@
         </div>    
 
         {{ if .Params.thumbnail -}}
-            <div class="row row-cols-1 row-cols-sm-3 align-items-center p-5">
+            <div class="row row-cols-1 row-cols-sm-3 align-items-center p-3">
                 <div class="col col-md-2 d-none d-md-block"></div>
                 <div class="col col-sm-12 col-md-8">
                     {{- partial "image.html" (dict "url" .Params.thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" .Params.credits) -}}
@@ -36,7 +36,7 @@
             </div>    
         {{ end -}}
         
-        <div class="row row-cols-1 row-cols-sm-2 p-5">
+        <div class="row row-cols-1 row-cols-sm-2 p-3">
             <div class="col col-md-2 d-none d-md-block"></div>
             <div class="col col-sm-12 col-md-8">
                 {{ .Content }}
@@ -69,7 +69,7 @@
 
     {{- if and .Site.Params.comments.enabled .Params.showComments | default true -}}
         <div class="container-fluid">
-            <div class="row row-cols-1 row-cols-sm-2 p-5">
+            <div class="row row-cols-1 row-cols-sm-2 p-3">
                 <div class="col col-md-2 d-none d-md-block"></div>
                 <div class="col col-sm-12 col-md-8">
                     <hr>

layouts/index.html

@@ -3,14 +3,14 @@
 
     {{ range $section, $taxonomy := .Site.Sections -}}
         {{ if eq $section 0 -}}
-            <div class="p-5">
+            <div class="p-4">
                 <h1>Recent posts</h1>
-                <div class="container-fluid">
-                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
+                <div class="container-fluid p-0">
+                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
                         {{ $items := first 3 ($taxonomy.Pages.ByDate.Reverse) -}}
                         {{ $max := sub (len $items) 1 -}}
                         {{ range $index, $element := $items -}}
-                            <div class="col">
+                            <div class="col gx-4">
                                 {{- partial "assets/blog-card.html" $element -}}
                             </div>
                             {{ if (lt $index $max) -}}
@@ -27,13 +27,13 @@
                 {{ end -}}
             </div>
         {{ else -}}
-            <div class="p-5">
+            <div class="p-4">
                 <h1>{{ $taxonomy.Title }}</h1>
                 <div class="container-fluid">
                     <div class="row row-cols-1 g-4">
                         {{ $items := first 3 ($taxonomy.Pages) -}}
                         {{ range $index, $element := $items -}}
-                            <div class="col">
+                            <div class="col p-0">
                                 {{- partial "assets/project-card.html" $element -}}
                             </div>
                         {{ end -}}

layouts/partials/assets/blog-card.html

@@ -4,11 +4,11 @@
             {{- partial "image.html" (dict "url" .Params.thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" .Params.title) -}}
         </a>
     {{ end }}
-    <div class="card-body d-flex flex-column">
+    <div class="card-body d-flex flex-column p-0">
         <p class="card-text">
             <small class="text-muted text-uppercase">
                 {{- partial "utilities/date.html" (dict "date" .Date "language" $.Page.Language "format" "long") -}}
-                &bull; {{ i18n "readingTime"}}{{ .ReadingTime }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }}
+                &bull; {{ .ReadingTime }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }}
                 {{ if isset .Params "tags" -}}
                     {{ range first 1 .Params.tags -}}
                         &bull; <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}" class="text-decoration-none text-primary" aria-label="Tag: {{ . }}">{{ . }}</a>

layouts/partials/assets/navbar.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-sm bg-white navbar-light ps-4 pe-4">
+<nav class="navbar navbar-expand-sm bg-white navbar-light m-3">
 	<div class="container-fluid">
         <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
             {{ if .Site.Params.main.logo -}}
@@ -8,7 +8,7 @@
             {{ end -}}
         </a>
 
-		<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+		<button class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
 			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 			<span class="toggler-icon top-bar"></span>
 			<span class="toggler-icon middle-bar"></span>

layouts/partials/footer/social.html

@@ -1,9 +1,9 @@
 <div class="container-fluid">
-    <div class="row row-cols-1 row-cols-sm-4 bg-primary p-5 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
+    <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.socialTitle }}</div>
-            {{ .Site.Params.socialCaption }}
+            <p>{{ .Site.Params.socialCaption }}</p>
         </div>
         <div class="col text-sm-start text-center col-sm-6 col-md-4">
             {{ range .Site.Menus.social -}}

layouts/partials/head/seo.html

@@ -17,9 +17,16 @@
 
 {{ with .Params.thumbnail }}
     {{ $source := resources.Get . -}}
+    {{ if not $source }}
+        {{ $source = resources.GetRemote . -}}
+    {{ end }}
+    {{ with $source }}
         {{ $dim := "1280x640" -}}
-    {{ $img := ($source.Fill (printf "%s jpg" $dim)) -}}
+        {{ $img := (.Fill (printf "%s jpg" $dim)) -}}
         {{ $.Scratch.Set "thumbnail" ($img.Permalink | absURL) -}}
+    {{ else }}
+        {{ warnf "Cannot find thumbnail: %q" . }}
+    {{ end }}
 {{ else }}
     {{ with .Site.Params.schemaImage -}}    
         {{ $.Scratch.Set "thumbnail" (. | absURL) }}

layouts/partials/image.html

@@ -1,9 +1,9 @@
 <!-- 
-    Render an image with responsive image sizing. The image should be available as resource stored in the "assets"
-    folder. Images are resized using default media breakpoints and are converted to webp format. The image is
-    processed using the quality setting specified in the [imaging] section of the main config file (defaults to 75).
-    A fallback image is provided for older browsers. The image is wrapped in a figure if a caption is provided, else
-    the image is wrapped in a div with a ratio constraint. The partial supports the following arguments:
+    Render a local or remote image with responsive image sizing. Images are resized using default media breakpoints
+    and are converted to webp format. The image is processed using the quality setting specified in the [imaging]
+    section of the main config file (defaults to 75). A fallback image is provided for older browsers. The image is
+    wrapped in a figure if a caption is provided, else the image is wrapped in a div with a ratio constraint. The
+    partial supports the following arguments:
     "url":          Required relative url of the image, e.g. "img/example.jpg"
     "ratio":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
     "outerClass":   Optional class attribute of the outer div element, e.g. "img-wrap".
@@ -13,10 +13,18 @@
 -->
 
 
-{{ $img := resources.Get .url -}}
+{{ $img := resources.GetMatch .url -}}
+{{ $ratio := .ratio}}
+{{ $outerClass := .outerClass -}}
 {{ $innerClass := .innerClass -}}
 {{ $title := .title -}}
+{{ $caption := .caption -}}
 
+{{ if not $img }}
+    {{ $img = resources.GetRemote .url -}}
+{{ end}}
+
+{{ with $img }}
     <!-- default ratio 4x3 -->
     {{ $smDim := "576x432" -}}
     {{ $mdDim := "768x576" -}}
@@ -24,19 +32,19 @@
     {{ $xlDim := "1200x900" -}}
     {{ $xxlDim := "1400x1050" -}}
 
-{{ if eq .ratio "1x1" -}}
+    {{ if eq $ratio "1x1" -}}
         {{ $smDim = "576x576" -}}
         {{ $mdDim = "768x768" -}}
         {{ $lgDim = "992x992" -}}
         {{ $xlDim = "1200x1200" -}}
         {{ $xxlDim = "1400x1400" -}}
-{{ else if eq .ratio "16x9" -}}
+    {{ else if eq $ratio "16x9" -}}
         {{ $smDim = "576x324" -}}
         {{ $mdDim = "768x432" -}}
         {{ $lgDim = "992x558" -}}
         {{ $xlDim = "1200x675" -}}
         {{ $xxlDim = "1400x788" -}}
-{{ else if eq .ratio "21x9" -}}
+    {{ else if eq $ratio "21x9" -}}
         {{ $smDim = "576x247" -}}
         {{ $mdDim = "768x329" -}}
         {{ $lgDim = "992x425" -}}
@@ -52,7 +60,7 @@
     {{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) -}}
 
 
-{{ with .caption -}}
+    {{ with $caption -}}
         <figure class="figure">
             <img class="figure-img img-fluid {{ $innerClass }}"
                 srcset="
@@ -67,7 +75,7 @@
             <figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>
         </figure>
     {{ else -}}
-    <div class="ratio ratio-{{ .ratio }} {{ .outerClass }}">
+        <div class="ratio ratio-{{ $ratio }} {{ $outerClass }}">
             <img class="img-fluid {{ $innerClass }}"
                 srcset="
                     {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
@@ -80,3 +88,6 @@
                 alt="{{ $title }}">
         </div>
     {{ end -}}
+{{ else }}
+    {{ warnf "Cannot find image resource: %q" .url }}
+{{ end }}

layouts/partials/intro.html

@@ -1,5 +1,5 @@
 <div class="container-fluid">
-    <div class="row row-cols-1 row-cols-sm-4 bg-primary p-5 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
+    <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">
             <p class="fs-1 fw-bold">{{ .Site.Params.introTitle }}</p>

layouts/shortcodes/command.html

@@ -0,0 +1,70 @@
+{{ $host := .Get "host" }}
+{{ $user := .Get "user" }}
+{{ $prompt := .Get "prompt" }}
+{{ $filter := "(out)" }}
+{{ $input := trim .Inner "\n" }}
+
+{{ $shell := lower (.Get "shell") }}
+{{ $continuationPrompt := ">" }}
+{{ $continuationStr := "\\" }}
+{{ if eq $shell "powershell" }}
+    {{ if not $prompt }}{{ $prompt = "PS>" }}{{ end }}
+    {{ $continuationPrompt = ">>" }}
+    {{ $continuationStr = "`" }}
+{{ else if eq $shell "sql" }}
+    {{ if not $prompt }}{{ $prompt = "sql>" }}{{ end }}
+    {{ $continuationPrompt = "->" }}
+    {{ $continuationStr = "(con)" }}
+{{ else }}
+    {{ $shell = "bash" }}
+    {{ if not $prompt }}{{ $prompt = "$" }}{{ end }}
+    {{ if (and ($host) ($user)) }}
+        {{ $prompt = printf "[%s@%s] %s" $user $host $prompt}}
+    {{ end }}
+{{ end }}
+
+
+
+
+{{ $lines := split $input "\n" }}
+{{ $prefix := ""}}
+{{ $prevLine := "" }}
+{{ $refined := "" }}
+{{ range $line := $lines }}
+    {{ if hasPrefix $line $filter }}
+        {{ $prefix = printf "%s<span></span>" $prefix }}
+        {{ if eq $shell "sql" }}
+            {{ $line = printf "--%s" (strings.TrimPrefix $filter $line) }}
+        {{ else }}
+            {{ $line = printf "#%s" (strings.TrimPrefix $filter $line) }}
+        {{ end }}
+    {{ else if (strings.HasSuffix $prevLine $continuationStr) }}
+        {{ $prefix = printf "%s<span data-prompt=\"%s\"></span>" $prefix $continuationPrompt }}
+    {{ else }}
+        {{ $prefix = printf "%s<span data-prompt=\"%s\"></span>" $prefix $prompt }}
+    {{ end }}
+    {{ $prevLine = $line }}
+    {{ if (and (eq $shell "sql") (strings.HasSuffix $line $continuationStr)) }}
+        {{ $line = strings.TrimSuffix $continuationStr $line }}
+    {{ end }}
+    {{ $refined = printf "%s\n%s" $refined $line }}
+{{ end }}
+
+{{ $refined := trim $refined "\n" }}
+
+{{ $output := (transform.Highlight $refined $shell | safeHTML) }}
+
+
+
+{{ $insert := printf "<span class=\"command-line-prompt\">%s</span><span class=\"line\">" $prefix }}
+
+{{ $output := (replace $output ("<span class=\"line\">" | safeHTML) $insert 1 | safeHTML) }}
+
+{{ if eq $shell "sql"}}
+    {{ $output = (replace $output "<span class=\"c1\">--" "<span class=\"c1\">" | safeHTML) }}
+{{ else }}        
+    {{ $output = (replace $output "<span class=\"c1\">#" "<span class=\"c1\">" | safeHTML) }}
+    {{ $output = (replace $output "<span class=\"c\">#" "<span class=\"c\">" | safeHTML) }}
+{{ end }}
+
+{{ $output }}

layouts/shortcodes/figure.html

@@ -13,7 +13,7 @@
     /><!-- Closing img tag -->
     {{- if .Get "link" }}</a>{{ end -}}
     {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
-        <figcaption>
+    <figcaption class="figure-caption">
             {{ with (.Get "title") -}}
                 <h4>{{ . }}</h4>
             {{- end -}}

layouts/shortcodes/image.html

@@ -1,8 +1,8 @@
 <!-- 
-    Render an image with responsive image sizing. The image should be available as resource stored in the "assets"
-    folder. Images are resized using default media breakpoints and are converted to webp format. The image is
-    processed using the quality setting specified in the [imaging] section of the main config file (defaults to 75).
-    A fallback image is provided for older browsers. The partial supports the following arguments:
+    Render a local or remote image with responsive image sizing. Images are resized using default media breakpoints
+    and are converted to webp format. The image is processed using the quality setting specified in the [imaging]
+    section of the main config file (defaults to 75). A fallback image is provided for older browsers. The partial
+    supports the following arguments:
     "src":          Required relative url of the image, e.g. "img/example.jpg"
     "ratio":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
     "class":        Optional class attribute of the inner img element, e.g. "rounded".
@@ -13,16 +13,17 @@
 {{ if isset .Params "src" }}
     {{ $url := .Get "src" }}
     {{ $ratio := "4x3" }}
-    {{ $class := "" }}
-    {{ $title := "" }}
-    {{ $caption := "" }}
-
-    {{ $img := resources.Get $url }}
     {{ with .Get "ratio" }}{{ $ratio = . }}{{ end }}
-    {{ with .Get "class" }}{{ $class = . }}{{ end }}
-    {{ with .Get "title" }}{{ $title = . }}{{ end }}
-    {{ with .Get "caption" }}{{ $caption = . }}{{ end }}
+    {{ $class := .Get "class" }}
+    {{ $title := .Get "title" }}
+    {{ $caption := .Get "caption" }}
 
+    {{ $img := resources.GetMatch $url }}
+    {{ if not $img }}
+        {{ $img = resources.GetRemote $url -}}
+    {{ end}}
+    
+    {{ with $img }}
         <!-- default ratio 4x3 -->
         {{ $smDim := "576x432" }}
         {{ $mdDim := "768x576" }}
@@ -72,5 +73,8 @@
             <figcaption class="figure-caption">{{ $caption }}</figcaption>
         </figure>   
     {{ else }}
-    {{ errorf "missing value for param 'src': %s" .Position }}
+        {{ warnf "Cannot find image resource: %q" $url }}
+    {{ end }}    
+{{ else }}
+    {{ errorf "Missing value for param 'src': %s" .Position }}
 {{ end }}

layouts/tags/list.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
     <div class="container-fluid">
-        <div class="row row-cols-1 row-cols-sm-3 align-items-center p-5">
+        <div class="row row-cols-1 row-cols-sm-3 align-items-center p-3">
             <div class="col col-md-2 d-none d-md-block"></div>
             <div class="col col-sm-12 col-md-8">
                 <h1>{{ .Name | humanize }}</h1>

package.json

@@ -1,13 +1,18 @@
 {
-  "name": "hugo-theme-hinode",
-  "version": "0.1.0",
+  "name": "@markdumay/hugo-theme-hinode",
+  "version": "0.5.1",
   "description": "Hinode is a clean blog theme for Hugo, an open-source static site generator",
   "main": "index.js",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "scripts": {
     "init": "shx rm -rf .git && git init -b main",
     "create": "exec-bin node_modules/.bin/hugo/hugo new",
     "prestart": "npm run clean",
     "start": "exec-bin node_modules/.bin/hugo/hugo server --bind=0.0.0.0 --disableFastRender",
+    "prod": "exec-bin node_modules/.bin/hugo/hugo server --bind=0.0.0.0 --disableFastRender -e production",
     "prebuild": "npm run clean",
     "build": "exec-bin node_modules/.bin/hugo/hugo --gc --minify",
     "build:preview": "npm run build -D -F",
@@ -24,7 +29,9 @@
     "precheck": "npm version",
     "check": "exec-bin node_modules/.bin/hugo/hugo version",
     "copy:fonts": "shx cp ./node_modules/@fortawesome/fontawesome-free/webfonts/* ./static/fonts/",
+    "create:syntax": "exec-bin node_modules/.bin/hugo/hugo gen chromastyles --style=monokailight > ./assets/scss/components/_syntax.scss",
     "postinstall": "hugo-installer --version otherDependencies.hugo --extended --destination node_modules/.bin/hugo",
+    "upgrade": "npx npm-check-updates -u",
     "version": "auto-changelog -p && git add CHANGELOG.md"
   },
   "repository": {
@@ -38,26 +45,26 @@
   },
   "homepage": "https://github.com/markdumay/hugo-theme-hinode#readme",
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^6.0.0",
-    "@fullhuman/postcss-purgecss": "^4.1.3",
-    "autoprefixer": "^10.4.2",
-    "bootstrap": "^5.1.3",
-    "eslint": "^7.32.0",
-    "eslint-config-standard": "^16.0.3",
+    "@fortawesome/fontawesome-free": "^6.2.0",
+    "@fullhuman/postcss-purgecss": "^5.0.0",
+    "autoprefixer": "^10.4.13",
+    "bootstrap": "^5.2.2",
+    "eslint": "^8.26.0",
+    "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-n": "^15.3.0",
+    "eslint-plugin-promise": "^6.1.1",
     "exec-bin": "^1.0.0",
-    "flexsearch": "^0.7.21",
-    "hugo-installer": "^3.1.0",
-    "markdownlint-cli2": "^0.4.0",
-    "postcss-cli": "^9.1.0",
+    "flexsearch": "^0.7.31",
+    "hugo-installer": "^4.0.1",
+    "markdownlint-cli2": "^0.5.1",
+    "postcss-cli": "^10.0.0",
     "purgecss-whitelister": "^2.4.0",
     "shx": "^0.3.4",
-    "stylelint": "^14.6.1",
-    "stylelint-config-standard-scss": "^3.0.0"
+    "stylelint": "^14.14.0",
+    "stylelint-config-standard-scss": "^6.0.0"
   },
   "otherDependencies": {
-    "hugo": "0.92.2"
+    "hugo": "0.104.3"
   }
 }

theme.toml

@@ -1,7 +1,7 @@
 name = "Hinode"
 license = "MIT"
 licenselink = "https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE"
-description = "Hinode is a clean blog theme for Hugo, an open-source static site generator."
+description = "A clean blog theme for your Hugo site based on Bootstrap 5."
 homepage = "https://github.com/markdumay/hugo-theme-hinode"
 demosite = "https://hinode-demo.markdumay.org/"
 tags = ["blog", "minimal", "modern", "customizable", "search", "bootstrap"]