feat: add doks default style + examples

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) => {

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";

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;
 

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

assets/scss/components/_doks.css

@@ -0,0 +1,50 @@
+/*
+
+Doks — based on Ascetic by (c) Ivan Sagalaev <[email protected]>
+
+*/
+
+.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;
+}

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

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

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: []
+---

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
+```

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