Merge pull request #42 from markdumay/develop

Add command prompt to features

.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 headings** - The local development server uses the header configuration as provided by `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

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

config/postcss.config.js

@@ -10,38 +10,38 @@ module.exports = {
         './layouts/**/*.html',
         './content/**/*.md',
       ],
-      safelist: {
-        standard: [
-          /lazyloaded/,
-          /table/,
-          /thead/,
-          /tbody/,
-          /tr/,
-          /th/,
-          /td/,
-          /h5/,
-          /alert-link/,
-          /container-xxl/,
-          /container-fluid/,
-          /^bg-opacity-\d+/,
-          /svg.*/, 
-          /fa.*/,
-          /ratio.*/,
-          /suggestion.*/,
-        ],
-        ...whitelister([
+      safelist: [
+        /lazyloaded/,
+        /table/,
+        /thead/,
+        /tbody/,
+        /tr/,
+        /th/,
+        /td/,
+        /h5/,
+        /alert-link/,
+        /container-xxl/,
+        /container-fluid/,
+        /^bg-opacity-\d+/,
+        /svg.*/, 
+        /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 %}}

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,14 +1,14 @@
-<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 -}}
                 <img src="{{ .Site.Params.main.logo }}" alt="{{ .Site.Title }} logo" height="30">
             {{ else -}}
-                <span class="fw-bold ">{{ .Site.Title }}</span>
+                <span class="fw-bold">{{ .Site.Title }}</span>
             {{ 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/scripts.html

@@ -12,7 +12,7 @@
 
 {{ $indexTemplate := resources.Get "js/index.js" -}}
 {{ $jsIndex := $indexTemplate | resources.ExecuteAsTemplate "index.js" . }}
-{{ $js := (slice  $jsIndex) | resources.Concat "js/main.js" }}
+{{ $js := (slice $jsIndex) | resources.Concat "js/main.js" }}
 
 {{ if not hugo.IsProduction }}
     <script src="{{ $js.RelPermalink }}"></script>

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/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/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.0",
   "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"]