From ad91b0523e6e240c98710bfedfd31342cb2389dc Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Tue, 16 Mar 2021 08:55:07 +0100 Subject: [PATCH] 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 + +*/ + +.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 ( +
+ {block} +
+ ) +} + +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 -}}
- +
{{ end -}} \ No newline at end of file