From 5180bd53c6349372916907783fa9d0d3b22755af Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@ventizo.com>
Date: Mon, 15 Mar 2021 18:55:49 +0100
Subject: [PATCH 1/4] feat: add highlight.js as an option

---
 assets/js/highlight.js                     | 22 ++++++++++++++
 assets/scss/app.scss                       |  7 +++--
 assets/scss/common/_dark.scss              | 17 +++++++----
 assets/scss/common/_variables.scss         |  1 +
 assets/scss/components/_buttons.scss       | 12 +++++++-
 assets/scss/components/_code.scss          | 34 +++++++++++-----------
 config/_default/config.toml                |  2 +-
 config/_default/params.toml                |  1 +
 layouts/partials/footer/script-footer.html | 12 +++++++-
 layouts/shortcodes/btn-copy.html           |  6 +++-
 package-lock.json                          | 17 +++++++++++
 package.json                               |  1 +
 12 files changed, 103 insertions(+), 29 deletions(-)
 create mode 100644 assets/js/highlight.js

diff --git a/assets/js/highlight.js b/assets/js/highlight.js
new file mode 100644
index 0000000..e84cd66
--- /dev/null
+++ b/assets/js/highlight.js
@@ -0,0 +1,22 @@
+import hljs from 'highlight.js/lib/core';
+
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import bash from 'highlight.js/lib/languages/bash';
+import htmlbars from 'highlight.js/lib/languages/htmlbars';
+import ini from 'highlight.js/lib/languages/ini';
+import yaml from 'highlight.js/lib/languages/yaml';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('html', htmlbars);
+hljs.registerLanguage('ini', ini);
+hljs.registerLanguage('toml', ini);
+hljs.registerLanguage('yaml', yaml);
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('pre code').forEach((block) => {
+    hljs.highlightBlock(block);
+  });
+});
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
index 2d74faf..49f62c2 100644
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -7,14 +7,17 @@
 /** Import Bootstrap */
 @import "bootstrap/scss/bootstrap";
 
+/** Import highlight.js */
+@import "highlight.js/scss/gradient-dark";
+
 /** Import theme styles */
 @import "common/fonts";
 @import "common/global";
 @import "common/dark";
-@import "components/alerts";
-@import "components/buttons";
 @import "components/code";
 // @import "components/syntax";
+@import "components/alerts";
+@import "components/buttons";
 @import "components/comments";
 @import "components/forms";
 @import "components/images";
diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss
index d6a2092..ad814a5 100644
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@@ -38,6 +38,16 @@ body.dark .btn-primary {
   color: $body-bg-dark !important;
 }
 
+body.dark .btn-outline-primary {
+  @include button-outline-variant($button-color-dark, $button-color-dark);
+
+  color: $link-color-dark;
+}
+
+body.dark .btn-outline-primary:hover {
+  color: $body-bg-dark;
+}
+
 body.dark .navbar {
   background: $body-bg-dark;
   opacity: 0.975;
@@ -178,12 +188,7 @@ body.dark ::selection {
   background: $selection-color-dark;
 }
 
-body.dark pre {
-  background: $body-overlay-dark;
-  color: $body-color-dark;
-}
-
-body.dark code {
+body.dark code:not(.hljs) {
   background: $body-overlay-dark;
   color: $body-color-dark;
 }
diff --git a/assets/scss/common/_variables.scss b/assets/scss/common/_variables.scss
index 4bb8fc4..e06f1a8 100644
--- a/assets/scss/common/_variables.scss
+++ b/assets/scss/common/_variables.scss
@@ -110,6 +110,7 @@ $font-size-xl:                $font-size-base * 1.375;
 $font-size-lg:                $font-size-base * 1.25;
 $font-size-md:                $font-size-base * 1.125;
 $font-size-sm:                $font-size-base * 0.875;
+$font-size-xs:                $font-size-base * 0.625;
 
 $line-height-base:            1.5;
 
diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss
index d9bb621..f30c81f 100644
--- a/assets/scss/components/_buttons.scss
+++ b/assets/scss/components/_buttons.scss
@@ -55,9 +55,19 @@ body.dark .toggle-dark {
 }
 
 @include media-breakpoint-up(md) {
+  .doks-clipboard {
+    position: relative;
+    float: right;
+  }
+
   .btn-clipboard {
+    position: absolute;
+    top: 2.125rem;
+    right: 1rem;
+    z-index: 10;
     display: block;
-    margin: 2.0625rem 0.25rem -4rem auto;
+    padding: 0.25rem 0.5rem;
+    font-size: $font-size-xs;
   }
 }
 
diff --git a/assets/scss/components/_code.scss b/assets/scss/components/_code.scss
index edbf3a6..f1ae47e 100644
--- a/assets/scss/components/_code.scss
+++ b/assets/scss/components/_code.scss
@@ -7,37 +7,37 @@ samp {
   border-radius: $border-radius;
 }
 
-pre {
-  background: $beige;
-  color: $black;
-  line-height: $line-height-base;
-  margin: 2rem 0;
-  overflow: auto;
-  padding: 1.25rem 1.5rem;
-  tab-size: 4;
-}
-
 code {
   background: $beige;
   color: $black;
   padding: 0.25rem 0.5rem;
 }
 
+pre {
+  margin: 2rem 0;
+}
+
 pre code {
-  background: none;
-  font-size: inherit;
-  padding: 0;
+  display: block;
+  overflow-x: auto;
+  line-height: $line-height-base;
+  padding: 1.25rem 1.5rem;
+  tab-size: 4;
+}
+
+.hljs {
+  padding: 1.25rem 1.5rem;
 }
 
 @include media-breakpoint-down(sm) {
-  pre {
-    margin: 2rem -1.5rem;
-  }
-
   pre,
   code,
   kbd,
   samp {
     border-radius: 0;
   }
+
+  pre {
+    margin: 2rem -1.5rem;
+  }
 }
diff --git a/config/_default/config.toml b/config/_default/config.toml
index dbdd83b..4661868 100644
--- a/config/_default/config.toml
+++ b/config/_default/config.toml
@@ -54,7 +54,7 @@ rel  = "sitemap"
     [markup.goldmark.renderer]
       unsafe = true
   [markup.highlight]
-    codeFences = true
+    codeFences = false
     guessSyntax = false
     hl_Lines = ""
     lineNoStart = 1
diff --git a/config/_default/params.toml b/config/_default/params.toml
index 3fa4b6d..d25962e 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -54,3 +54,4 @@ editPage = false
   darkMode = true
   bootStrapJs = false
   breadCrumb = false
+  highLight = false
diff --git a/layouts/partials/footer/script-footer.html b/layouts/partials/footer/script-footer.html
index 82e83fa..380c6a0 100644
--- a/layouts/partials/footer/script-footer.html
+++ b/layouts/partials/footer/script-footer.html
@@ -4,6 +4,9 @@
 {{ $bs := resources.Get "js/bootstrap.js" -}}
 {{ $bs := $bs | js.Build -}}
 
+{{ $highlight := resources.Get "js/highlight.js" -}}
+{{ $highlight := $highlight | js.Build -}}
+
 {{ $app := resources.Get "js/app.js" -}}
 
 {{ $slice := slice $app -}}
@@ -44,6 +47,9 @@
     <script src="{{ $bs.Permalink }}" defer></script>
   {{ end -}}
   <script src="{{ $js.Permalink }}" defer></script>
+  {{ if .Site.Params.options.highLight -}}
+    <script src="{{ $highlight.Permalink }}" defer></script>
+  {{ end -}}
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.Permalink }}" defer></script>
   {{ end -}}
@@ -51,10 +57,14 @@
   {{ $js := $js | minify | fingerprint "sha512" -}}
   {{ $index := $index | minify | fingerprint "sha512" -}}
   {{ $bs := $bs | minify | fingerprint "sha512" -}}
+  {{ $highlight := $highlight | minify | fingerprint "sha512" -}}
   {{ if .Site.Params.options.bootStrapJs -}}
-  <script src="{{ $bs.Permalink }}" integrity="{{ $bs.Data.Integrity }}" crossorigin="anonymous" defer></script>
+    <script src="{{ $bs.Permalink }}" integrity="{{ $bs.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
   <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ if .Site.Params.options.highLight -}}
+    <script src="{{ $highlight.Permalink }}" defer></script>
+  {{ end -}}
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
diff --git a/layouts/shortcodes/btn-copy.html b/layouts/shortcodes/btn-copy.html
index 35479e1..03da151 100644
--- a/layouts/shortcodes/btn-copy.html
+++ b/layouts/shortcodes/btn-copy.html
@@ -1 +1,5 @@
-<button class="btn-clipboard btn btn-sm btn-link" data-clipboard-text="{{ .Get "text" | safeHTML }}"><span class="copy-status"></span></button>
+{{ if .Site.Params.options.clipBoard -}}
+<div class="doks-clipboard">
+  <button class="btn-clipboard btn btn-outline-primary" data-clipboard-text="{{ .Get "text" | safeHTML }}"><span class="copy-status"></span></button>
+</div>
+{{ end -}}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d007b66..0163367 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "doks",
       "version": "0.1.6",
       "devDependencies": {
         "@babel/cli": "^7.13",
@@ -16,6 +17,7 @@
         "clipboard": "^2.0",
         "eslint": "^7.22",
         "flexsearch": "^0.6",
+        "highlight.js": "^10.6.0",
         "hugo-bin": "^0.69",
         "instant.page": "^5.1",
         "lazysizes": "^5.3",
@@ -6716,6 +6718,15 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.6.0.tgz",
+      "integrity": "sha512-8mlRcn5vk/r4+QcqerapwBYTe+iPL5ih6xrNylxrnBdHQiijDETfXX7VIxC3UiCRiINBJfANBAsPzAvRQj8RpQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -19444,6 +19455,12 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "highlight.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.6.0.tgz",
+      "integrity": "sha512-8mlRcn5vk/r4+QcqerapwBYTe+iPL5ih6xrNylxrnBdHQiijDETfXX7VIxC3UiCRiINBJfANBAsPzAvRQj8RpQ==",
+      "dev": true
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
diff --git a/package.json b/package.json
index 43424ce..dad207c 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "clipboard": "^2.0",
     "eslint": "^7.22",
     "flexsearch": "^0.6",
+    "highlight.js": "^10.6.0",
     "hugo-bin": "^0.69",
     "instant.page": "^5.1",
     "lazysizes": "^5.3",

From ad91b0523e6e240c98710bfedfd31342cb2389dc Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@ventizo.com>
Date: Tue, 16 Mar 2021 08:55:07 +0100
Subject: [PATCH 2/4] feat: add doks default style + examples

---
 assets/js/highlight.js               |  2 +
 assets/scss/app.scss                 |  5 +-
 assets/scss/common/_variables.scss   |  1 -
 assets/scss/components/_buttons.scss |  6 +--
 assets/scss/components/_doks.css     | 50 ++++++++++++++++++
 config/_default/menus.toml           |  6 +++
 config/_default/params.toml          |  4 +-
 content/docs/examples/_index.md      |  9 ++++
 content/docs/examples/code.md        | 79 ++++++++++++++++++++++++++++
 layouts/shortcodes/btn-copy.html     |  2 +-
 10 files changed, 155 insertions(+), 9 deletions(-)
 create mode 100644 assets/scss/components/_doks.css
 create mode 100644 content/docs/examples/_index.md
 create mode 100644 content/docs/examples/code.md

diff --git a/assets/js/highlight.js b/assets/js/highlight.js
index e84cd66..ddc671d 100644
--- a/assets/js/highlight.js
+++ b/assets/js/highlight.js
@@ -6,6 +6,7 @@ import bash from 'highlight.js/lib/languages/bash';
 import htmlbars from 'highlight.js/lib/languages/htmlbars';
 import ini from 'highlight.js/lib/languages/ini';
 import yaml from 'highlight.js/lib/languages/yaml';
+import markdown from 'highlight.js/lib/languages/markdown';
 
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('json', json);
@@ -14,6 +15,7 @@ hljs.registerLanguage('html', htmlbars);
 hljs.registerLanguage('ini', ini);
 hljs.registerLanguage('toml', ini);
 hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('md', markdown);
 
 document.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('pre code').forEach((block) => {
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
index 49f62c2..ac2ec11 100644
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -8,14 +8,15 @@
 @import "bootstrap/scss/bootstrap";
 
 /** Import highlight.js */
-@import "highlight.js/scss/gradient-dark";
+// @import "highlight.js/scss/dracula";
 
 /** Import theme styles */
 @import "common/fonts";
 @import "common/global";
 @import "common/dark";
-@import "components/code";
+@import "components/doks";
 // @import "components/syntax";
+@import "components/code";
 @import "components/alerts";
 @import "components/buttons";
 @import "components/comments";
diff --git a/assets/scss/common/_variables.scss b/assets/scss/common/_variables.scss
index e06f1a8..4bb8fc4 100644
--- a/assets/scss/common/_variables.scss
+++ b/assets/scss/common/_variables.scss
@@ -110,7 +110,6 @@ $font-size-xl:                $font-size-base * 1.375;
 $font-size-lg:                $font-size-base * 1.25;
 $font-size-md:                $font-size-base * 1.125;
 $font-size-sm:                $font-size-base * 0.875;
-$font-size-xs:                $font-size-base * 0.625;
 
 $line-height-base:            1.5;
 
diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss
index f30c81f..73d4eb5 100644
--- a/assets/scss/components/_buttons.scss
+++ b/assets/scss/components/_buttons.scss
@@ -62,12 +62,12 @@ body.dark .toggle-dark {
 
   .btn-clipboard {
     position: absolute;
-    top: 2.125rem;
-    right: 1rem;
+    top: 1rem;
+    right: 0.25rem;
     z-index: 10;
     display: block;
     padding: 0.25rem 0.5rem;
-    font-size: $font-size-xs;
+    font-size: $font-size-sm;
   }
 }
 
diff --git a/assets/scss/components/_doks.css b/assets/scss/components/_doks.css
new file mode 100644
index 0000000..cee7140
--- /dev/null
+++ b/assets/scss/components/_doks.css
@@ -0,0 +1,50 @@
+/*
+
+Doks — based on Ascetic by (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: $beige;
+  color: $black;
+}
+
+body.dark .hljs {
+  background: $body-overlay-dark;
+  color: $body-color-dark;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-section,
+.hljs-addition,
+.hljs-attribute,
+.hljs-link {
+  color: #888;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-meta,
+.hljs-deletion {
+  color: #ccc;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-name,
+.hljs-type,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/config/_default/menus.toml b/config/_default/menus.toml
index 7ed4bca..3426f62 100644
--- a/config/_default/menus.toml
+++ b/config/_default/menus.toml
@@ -4,6 +4,12 @@
   identifier = "prologue"
   url = "/docs/prologue/"
 
+[[docs]]
+  name = "Examples"
+  weight = 20
+  identifier = "examples"
+  url = "/docs/examples/"
+
 [[docs]]
   name = "Help"
   weight = 60
diff --git a/config/_default/params.toml b/config/_default/params.toml
index d25962e..6df21b5 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -48,10 +48,10 @@ editPage = false
 
 [options]
   lazySizes = true
-  clipBoard = true
+  clipBoard = false
   instantPage = true
   flexSearch = true
   darkMode = true
   bootStrapJs = false
   breadCrumb = false
-  highLight = false
+  highLight = true
diff --git a/content/docs/examples/_index.md b/content/docs/examples/_index.md
new file mode 100644
index 0000000..dadd987
--- /dev/null
+++ b/content/docs/examples/_index.md
@@ -0,0 +1,9 @@
+---
+title: "Examples"
+description: "Examples"
+lead: ""
+date: 2021-03-16T08:43:03+01:00
+lastmod: 2021-03-16T08:43:03+01:00
+draft: false
+images: []
+---
diff --git a/content/docs/examples/code.md b/content/docs/examples/code.md
new file mode 100644
index 0000000..0b6efd0
--- /dev/null
+++ b/content/docs/examples/code.md
@@ -0,0 +1,79 @@
+---
+title: "Code"
+description: "Code highlighting examples"
+lead: "Code highlighting examples"
+date: 2021-03-16T08:43:34+01:00
+lastmod: 2021-03-16T08:43:34+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "examples"
+weight: 200
+toc: true
+---
+
+## JavaScript
+
+```js
+function $initHighlight(block, cls) {
+  try {
+    if (cls.search(/\bno\-highlight\b/) != -1)
+      return process(block, true, 0x0F) +
+             ` class="${cls}"`;
+  } catch (e) {
+    /* handle exception */
+  }
+  for (var i = 0 / 2; i < classes.length; i++) {
+    if (checkCondition(classes[i]) === undefined)
+      console.log('undefined');
+  }
+
+  return (
+    <div>
+      <web-component>{block}</web-component>
+    </div>
+  )
+}
+
+export  $initHighlight;
+```
+
+## JSON
+
+```json
+[
+  {
+    "title": "apples",
+    "count": [12000, 20000],
+    "description": {"text": "...", "sensitive": false}
+  },
+  {
+    "title": "oranges",
+    "count": [17500, null],
+    "description": {"text": "...", "sensitive": false}
+  }
+]
+```
+
+## Bash
+
+```bash
+#!/bin/bash
+
+###### CONFIG
+ACCEPTED_HOSTS="/root/.hag_accepted.conf"
+BE_VERBOSE=false
+
+if [ "$UID" -ne 0 ]
+then
+ echo "Superuser rights required"
+ exit 2
+fi
+
+genApacheConf(){
+ echo -e "# Host ${HOME_DIR}$1/$2 :"
+}
+
+echo '"quoted"' | tr -d \" > text.txt
+```
diff --git a/layouts/shortcodes/btn-copy.html b/layouts/shortcodes/btn-copy.html
index 03da151..28a86f4 100644
--- a/layouts/shortcodes/btn-copy.html
+++ b/layouts/shortcodes/btn-copy.html
@@ -1,5 +1,5 @@
 {{ if .Site.Params.options.clipBoard -}}
 <div class="doks-clipboard">
-  <button class="btn-clipboard btn btn-outline-primary" data-clipboard-text="{{ .Get "text" | safeHTML }}"><span class="copy-status"></span></button>
+  <button class="btn-clipboard btn btn-link" data-clipboard-text="{{ .Get "text" | safeHTML }}"><span class="copy-status"></span></button>
 </div>
 {{ end -}}
\ No newline at end of file

From 6068b4ca422cb601f3fbe7a4c7c97ada255f7c0a Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@ventizo.com>
Date: Tue, 16 Mar 2021 08:58:46 +0100
Subject: [PATCH 3/4] config: add doks style to whitelister purgecss

---
 config/postcss.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/config/postcss.config.js b/config/postcss.config.js
index fae0993..37d8a90 100644
--- a/config/postcss.config.js
+++ b/config/postcss.config.js
@@ -19,6 +19,7 @@ module.exports = {
         'th',
         'td',
         ...whitelister([
+          './assets/scss/components/_doks.scss',
           './assets/scss/components/_code.scss',
           './assets/scss/components/_search.scss',
           './assets/scss/common/_dark.scss',

From ae49b46885a460999269110dd586c67e603c6d0d Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@ventizo.com>
Date: Tue, 16 Mar 2021 09:17:36 +0100
Subject: [PATCH 4/4] structure: rename doks style file to scss

---
 assets/scss/components/{_doks.css => _doks.scss} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename assets/scss/components/{_doks.css => _doks.scss} (100%)

diff --git a/assets/scss/components/_doks.css b/assets/scss/components/_doks.scss
similarity index 100%
rename from assets/scss/components/_doks.css
rename to assets/scss/components/_doks.scss