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:

README.md

@@ -55,6 +55,7 @@ Additional features include:
 - Social links
 - Blog pagination
 - Code highlighting
+- Command prompt
 - Color customization
 - i18n support
 
@@ -155,8 +156,8 @@ The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under
 <!-- 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

assets/js/index.js

@@ -163,7 +163,7 @@ Source:
 */
 
 const svgCopy =
-  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
+  '<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>';
 

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";
 
@@ -61,6 +62,7 @@ $themeColor: {{ site.Params.style.themeColor | default "#007bff" }};
 @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";

assets/scss/components/_clipboard.scss

@@ -5,11 +5,9 @@
     right: 0;
     padding: 2px 7px 5px;
     margin: 5px;
-    color: #767676;
-    border-color: #767676;
-    background-color: #ededed;
-    border: 1px solid;
-    border-radius: 6px;
+    color: $secondary;
+    background-color: transparent;
+    border-style: none;
     font-size: 0.8em;
     z-index: 1;
     opacity: 0;
@@ -17,17 +15,16 @@
 }
 
 .clipboard-button > svg {
-    fill: #767676;
+    fill: $secondary;
 }
 
 .clipboard-button:hover {
     cursor: pointer;
-    border-color: #696969;
-    background-color: #e0e0e0;
+    color: $primary;
 }
 
 .clipboard-button:hover > svg {
-    fill: #696969;
+    fill: $primary;
 }
 
 .clipboard-button:focus {

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;
+}

content/en/blog/code-highlighting.md

@@ -55,3 +55,129 @@ func GetTitleFunc(style string) func(s string) string {
   }
 }
 {{< / 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/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 -}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Hinode is a clean blog theme for Hugo, an open-source static site generator",
   "main": "index.js",
   "publishConfig": {
@@ -31,6 +31,7 @@
     "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": {
@@ -44,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.97.0"
+    "hugo": "0.104.3"
   }
 }