feat: add doks default style + examples

This commit is contained in:
Henk Verlinde 2021-03-16 08:55:07 +01:00
parent 5180bd53c6
commit ad91b0523e
10 changed files with 155 additions and 9 deletions

View File

@ -6,6 +6,7 @@ import bash from 'highlight.js/lib/languages/bash';
import htmlbars from 'highlight.js/lib/languages/htmlbars'; import htmlbars from 'highlight.js/lib/languages/htmlbars';
import ini from 'highlight.js/lib/languages/ini'; import ini from 'highlight.js/lib/languages/ini';
import yaml from 'highlight.js/lib/languages/yaml'; import yaml from 'highlight.js/lib/languages/yaml';
import markdown from 'highlight.js/lib/languages/markdown';
hljs.registerLanguage('javascript', javascript); hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('json', json); hljs.registerLanguage('json', json);
@ -14,6 +15,7 @@ hljs.registerLanguage('html', htmlbars);
hljs.registerLanguage('ini', ini); hljs.registerLanguage('ini', ini);
hljs.registerLanguage('toml', ini); hljs.registerLanguage('toml', ini);
hljs.registerLanguage('yaml', yaml); hljs.registerLanguage('yaml', yaml);
hljs.registerLanguage('md', markdown);
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('pre code').forEach((block) => { document.querySelectorAll('pre code').forEach((block) => {

View File

@ -8,14 +8,15 @@
@import "bootstrap/scss/bootstrap"; @import "bootstrap/scss/bootstrap";
/** Import highlight.js */ /** Import highlight.js */
@import "highlight.js/scss/gradient-dark"; // @import "highlight.js/scss/dracula";
/** Import theme styles */ /** Import theme styles */
@import "common/fonts"; @import "common/fonts";
@import "common/global"; @import "common/global";
@import "common/dark"; @import "common/dark";
@import "components/code"; @import "components/doks";
// @import "components/syntax"; // @import "components/syntax";
@import "components/code";
@import "components/alerts"; @import "components/alerts";
@import "components/buttons"; @import "components/buttons";
@import "components/comments"; @import "components/comments";

View File

@ -110,7 +110,6 @@ $font-size-xl: $font-size-base * 1.375;
$font-size-lg: $font-size-base * 1.25; $font-size-lg: $font-size-base * 1.25;
$font-size-md: $font-size-base * 1.125; $font-size-md: $font-size-base * 1.125;
$font-size-sm: $font-size-base * 0.875; $font-size-sm: $font-size-base * 0.875;
$font-size-xs: $font-size-base * 0.625;
$line-height-base: 1.5; $line-height-base: 1.5;

View File

@ -62,12 +62,12 @@ body.dark .toggle-dark {
.btn-clipboard { .btn-clipboard {
position: absolute; position: absolute;
top: 2.125rem; top: 1rem;
right: 1rem; right: 0.25rem;
z-index: 10; z-index: 10;
display: block; display: block;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: $font-size-xs; font-size: $font-size-sm;
} }
} }

View File

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

View File

@ -4,6 +4,12 @@
identifier = "prologue" identifier = "prologue"
url = "/docs/prologue/" url = "/docs/prologue/"
[[docs]]
name = "Examples"
weight = 20
identifier = "examples"
url = "/docs/examples/"
[[docs]] [[docs]]
name = "Help" name = "Help"
weight = 60 weight = 60

View File

@ -48,10 +48,10 @@ editPage = false
[options] [options]
lazySizes = true lazySizes = true
clipBoard = true clipBoard = false
instantPage = true instantPage = true
flexSearch = true flexSearch = true
darkMode = true darkMode = true
bootStrapJs = false bootStrapJs = false
breadCrumb = false breadCrumb = false
highLight = false highLight = true

View File

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

View File

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

View File

@ -1,5 +1,5 @@
{{ if .Site.Params.options.clipBoard -}} {{ if .Site.Params.options.clipBoard -}}
<div class="doks-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> </div>
{{ end -}} {{ end -}}