+ 
-
+
@@ -117,9 +117,3 @@ Doks comes with [commands](https://getdoks.org/docs/prologue/commands/) for comm
- [Netlify Community](https://community.netlify.com/)
- [Hugo Forums](https://discourse.gohugo.io/)
- [Doks Discussions](https://github.com/h-enk/doks/discussions)
-
-## Blog
-
-* [Doks v0.2](https://getdoks.org/blog/doks-v0.2/)
-* [Say hello to Doks 👋](https://getdoks.org/blog/say-hello-to-doks/)
-
diff --git a/assets/js/clipboard.js b/assets/js/clipboard.js
index b216c12..55eec7b 100644
--- a/assets/js/clipboard.js
+++ b/assets/js/clipboard.js
@@ -1,8 +1,27 @@
import Clipboard from 'clipboard';
-var clipboard = new Clipboard('.btn-clipboard');
+var pre = document.getElementsByTagName('pre');
+
+for (var i = 0; i < pre.length; ++ i)
+{
+ var element = pre[i];
+ var mermaid = element.getElementsByClassName('language-mermaid')[0];
+
+ if (mermaid == null) {
+ element.insertAdjacentHTML('afterbegin', '');
+ }
+}
+
+var clipboard = new Clipboard('.btn-copy', {
+
+ target: function(trigger) {
+ return trigger.nextElementSibling;
+ },
+
+});
clipboard.on('success', function(e) {
+
/*
console.info('Action:', e.action);
console.info('Text:', e.text);
diff --git a/assets/js/highlight.js b/assets/js/highlight.js
index f9879dc..c96b781 100644
--- a/assets/js/highlight.js
+++ b/assets/js/highlight.js
@@ -3,7 +3,7 @@ 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 xml from 'highlight.js/lib/languages/xml';
import ini from 'highlight.js/lib/languages/ini';
import yaml from 'highlight.js/lib/languages/yaml';
import markdown from 'highlight.js/lib/languages/markdown';
@@ -11,14 +11,14 @@ import markdown from 'highlight.js/lib/languages/markdown';
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('json', json);
hljs.registerLanguage('bash', bash);
-hljs.registerLanguage('html', htmlbars);
+hljs.registerLanguage('html', xml);
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) => {
+ document.querySelectorAll('pre code:not(.language-mermaid)').forEach((block) => {
hljs.highlightElement(block);
});
});
diff --git a/assets/js/index.js b/assets/js/index.js
index 8c87d5f..0df2fd2 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -64,37 +64,54 @@ Source:
(function(){
- var index = new FlexSearch({
- preset: 'score',
- cache: true,
- doc: {
- id: 'id',
- field: [
- 'title',
- 'description',
- 'content',
- ],
- store: [
- 'href',
- 'title',
- 'description',
- ],
- },
+ var index = new FlexSearch.Document({
+ tokenize: "forward",
+ cache: 100,
+ document: {
+ id: 'id',
+ store: [
+ "href", "title", "description"
+ ],
+ index: ["title", "description", "content"]
+ }
});
+
+ // Not yet supported: https://github.com/nextapps-de/flexsearch#complex-documents
+
+ /*
var docs = [
{{ range $index, $page := (where .Site.Pages "Section" "docs") -}}
{
id: {{ $index }},
- href: "{{ .RelPermalink | relURL }}",
+ href: "{{ .Permalink }}",
title: {{ .Title | jsonify }},
description: {{ .Params.description | jsonify }},
content: {{ .Content | jsonify }}
},
{{ end -}}
];
+ */
- index.add(docs);
+ // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
+
+ {{ $list := (where .Site.Pages "Section" "docs") -}}
+ {{ $len := (len $list) -}}
+
+ index.add(
+ {{ range $index, $element := $list -}}
+ {
+ id: {{ $index }},
+ href: "{{ .Permalink }}",
+ title: {{ .Title | jsonify }},
+ description: {{ .Params.description | jsonify }},
+ content: {{ .Content | jsonify }}
+ })
+ {{ if ne (add $index 1) $len -}}
+ .add(
+ {{ end -}}
+ {{ end -}}
+ ;
userinput.addEventListener('input', show_results, true);
suggestions.addEventListener('click', accept_suggestion, true);
@@ -102,13 +119,13 @@ Source:
function show_results(){
var value = this.value;
- var results = index.search(value, 5);
+ var results = index.search(value, { limit: 5, index: ["content"], enrich: true });
var entry, childs = suggestions.childNodes;
var i = 0, len = results.length;
suggestions.classList.remove('d-none');
- results.forEach(function(page) {
+ results.forEach(function(results) {
entry = document.createElement('div');
@@ -118,9 +135,11 @@ Source:
t = entry.querySelector('span:first-child'),
d = entry.querySelector('span:nth-child(2)');
- a.href = page.href;
- t.textContent = page.title;
- d.textContent = page.description;
+ // console.log(results);
+
+ a.href = results.result[i].doc.href;
+ t.textContent = results.result[i].doc.title;
+ d.textContent = results.result[i].doc.description;
suggestions.appendChild(entry);
diff --git a/assets/js/mermaid.js b/assets/js/mermaid.js
new file mode 100644
index 0000000..2ab0b9a
--- /dev/null
+++ b/assets/js/mermaid.js
@@ -0,0 +1,11 @@
+import mermaid from 'mermaid/dist/mermaid';
+
+var config = {
+ theme: 'default',
+ fontFamily: '"Jost", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";',
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+ mermaid.initialize(config);
+ mermaid.init(undefined, '.language-mermaid');
+});
diff --git a/assets/lambda/.gitignore b/assets/lambda/.gitignore
deleted file mode 100644
index e69de29..0000000
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
index 29a22a5..fc76d8e 100644
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -8,7 +8,7 @@
@import "bootstrap/scss/bootstrap";
/** Import highlight.js */
-// @import "highlight.js/scss/dracula";
+// @import "highlight.js/scss/github-dark-dimmed";
/** Import KaTeX */
@import "katex/dist/katex";
@@ -17,14 +17,14 @@
@import "common/fonts";
@import "common/global";
@import "common/dark";
-@import "components/doks";
-// @import "components/syntax";
-@import "components/code";
@import "components/alerts";
@import "components/buttons";
+@import "components/code";
+@import "components/syntax";
@import "components/comments";
@import "components/forms";
@import "components/images";
+@import "components/mermaid";
@import "components/search";
@import "components/tables";
@import "layouts/footer";
diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss
index 0789939..479dfc1 100644
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@@ -98,6 +98,10 @@ body.dark .page-links a {
color: $body-color-dark;
}
+body.dark .btn-toggle-nav a {
+ color: $body-color-dark;
+}
+
body.dark .showcase-meta a {
color: $body-color-dark;
}
@@ -114,6 +118,43 @@ body.dark .page-links a:hover {
color: $link-color-dark;
}
+body.dark .btn-toggle {
+ color: $body-color-dark;
+ background-color: transparent;
+ border: 0;
+}
+
+body.dark .btn-toggle:hover,
+body.dark .btn-toggle:focus {
+ color: $body-color-dark;
+}
+
+body.dark .btn-toggle::before {
+ width: 1.25em;
+ line-height: 0;
+ content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+ transition: transform 0.35s ease;
+ transform-origin: 0.5em 50%;
+ margin-bottom: 0.125rem;
+}
+
+body.dark .btn-toggle[aria-expanded="true"] {
+ color: $body-color-dark;
+}
+
+body.dark .btn-toggle[aria-expanded="true"]::before {
+ transform: rotate(90deg);
+}
+
+body.dark .btn-toggle-nav a:hover,
+body.dark .btn-toggle-nav a:focus {
+ color: $link-color-dark;
+}
+
+body.dark .btn-toggle-nav a.active {
+ color: $link-color-dark;
+}
+
body.dark .navbar-light .navbar-text a {
color: $navbar-dark-active-color;
}
@@ -188,12 +229,7 @@ body.dark .docs-navigation {
}
body.dark pre code::-webkit-scrollbar-thumb {
- background: $border-dark;
-}
-
-body.dark code:not(.hljs) {
- background: $body-overlay-dark;
- color: $body-color-dark;
+ background: $gray-400;
}
body.dark pre code:hover {
@@ -202,7 +238,17 @@ body.dark pre code:hover {
}
body.dark pre code::-webkit-scrollbar-thumb:hover {
- background: $border-dark;
+ background: $gray-500;
+}
+
+body.dark code:not(.hljs):not(.language-mermaid) {
+ background: $body-overlay-dark;
+ color: $body-color-dark;
+}
+
+body.dark .mermaid,
+body.dark pre code.language-mermaid {
+ background: $white;
}
body.dark blockquote {
diff --git a/assets/scss/common/_variables.scss b/assets/scss/common/_variables.scss
index 4bb8fc4..eab8191 100644
--- a/assets/scss/common/_variables.scss
+++ b/assets/scss/common/_variables.scss
@@ -24,6 +24,10 @@ $pink-500: #d32e9d;
$primary: $purple;
+$color-btn-bg: $pink-500;
+$color-btn-border: darken($pink-500, 5%);
+$color-btn-text: $white;
+
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
diff --git a/assets/scss/components/_alerts.scss b/assets/scss/components/_alerts.scss
index b40c571..ae6fbf7 100644
--- a/assets/scss/components/_alerts.scss
+++ b/assets/scss/components/_alerts.scss
@@ -61,3 +61,9 @@
.alert .alert-link:focus {
text-decoration: none;
}
+
+.alert code {
+ background: darken($beige, 5%);
+ color: $black;
+ padding: 0.25rem 0.5rem;
+}
diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss
index f20a0d2..713f819 100644
--- a/assets/scss/components/_buttons.scss
+++ b/assets/scss/components/_buttons.scss
@@ -50,42 +50,136 @@ body.dark .toggle-dark {
display: none;
}
-.btn-clipboard {
- display: none;
+pre {
+ position: relative;
+}
+
+@include media-breakpoint-down(md) {
+ .btn-copy {
+ display: none;
+ }
+}
+
+.btn-copy {
+ transition: opacity 0.3s ease-in-out;
+ opacity: 0;
+ position: absolute;
+ right: 0.25rem;
+ top: 0.25rem;
+ z-index: 10;
+ font-family: $font-family-sans-serif;
+ font-size: $font-size-sm;
+ padding: 0.25rem 0.5rem;
+ color: $color-btn-text;
+ background-color: $color-btn-bg;
+ border-color: $color-btn-border;
+}
+
+.btn-copy:hover {
+ color: $color-btn-text;
+ background-color: lighten($color-btn-bg, 5%);
+ border-color: lighten($color-btn-border, 15%);
+}
+
+.btn-copy:focus {
+ color: $color-btn-text;
+ background-color: $color-btn-bg;
+ border-color: lighten($color-btn-border, 15%);
+ box-shadow: none;
+}
+
+.btn-copy:active,
+.btn-copy.active {
+ color: $color-btn-text;
+ background-color: $color-btn-bg;
+ border-color: lighten($color-btn-border, 15%);
+}
+
+.btn-copy:active:focus,
+.btn-copy.active:focus {
+ box-shadow: none;
}
@include media-breakpoint-up(md) {
- .doks-clipboard {
- position: relative;
- float: right;
- }
-
- .btn-clipboard {
- position: absolute;
- top: 1rem;
- right: 0.25rem;
- z-index: 10;
- display: block;
- padding: 0.25rem 0.5rem;
- font-size: $font-size-sm;
+ pre:hover .btn-copy {
+ opacity: 1;
}
}
-.copy-status::after {
+.btn-copy::after {
content: "Copy";
display: block;
+ color: $color-btn-text;
+}
+
+.btn-copy:hover::after {
+ content: "Copy";
+ display: block;
+ color: $color-btn-text;
+}
+
+.btn-copy:focus::after,
+.btn-copy:active::after {
+ content: "Copied";
+ display: block;
+ color: $color-btn-text;
+}
+
+.collapsible-sidebar {
+ margin: 2.125rem 0;
+}
+
+.btn-toggle {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.25rem 0.5rem 0.25rem 0;
+ font-weight: $headings-font-weight;
+ font-size: $font-size-base;
+ text-transform: uppercase;
+ color: $body-color;
+ background-color: transparent;
+ border: 0;
+}
+
+.btn-toggle:hover,
+.btn-toggle:focus {
+ color: $body-color;
+ background-color: transparent;
+ outline: 0;
+ box-shadow: none;
+}
+
+.btn-toggle::before {
+ width: 1.25em;
+ line-height: 0;
+ content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+ transition: transform 0.35s ease;
+ transform-origin: 0.5em 50%;
+ margin-bottom: 0.125rem;
+}
+
+.btn-toggle[aria-expanded="true"] {
color: $body-color;
}
-.copy-status:hover::after {
- content: "Copy";
- display: block;
- color: $pink-500;
+.btn-toggle[aria-expanded="true"]::before {
+ transform: rotate(90deg);
}
-.copy-status:focus::after,
-.copy-status:active::after {
- content: "Copied";
- display: block;
- color: $pink-500;
+.btn-toggle-nav a {
+ display: inline-flex;
+ padding: 0.1875rem 0.5rem;
+ margin-top: 0.125rem;
+ margin-left: 1.25rem;
+ text-decoration: none;
+}
+
+.btn-toggle-nav a:hover,
+.btn-toggle-nav a:focus {
+ background-color: transparent;
+ color: $link-color;
+}
+
+.btn-toggle-nav a.active {
+ color: $link-color;
}
diff --git a/assets/scss/components/_code.scss b/assets/scss/components/_code.scss
index 9ad855b..eb0c0a0 100644
--- a/assets/scss/components/_code.scss
+++ b/assets/scss/components/_code.scss
@@ -49,14 +49,18 @@ pre code::-webkit-scrollbar {
}
pre code::-webkit-scrollbar-thumb {
- background: $gray-200;
+ background: $gray-400;
}
pre code:hover {
scrollbar-width: thin;
- scrollbar-color: $gray-200 transparent;
+ scrollbar-color: $gray-500 transparent;
}
pre code::-webkit-scrollbar-thumb:hover {
- background: $gray-200;
+ background: $gray-500;
+}
+
+code.language-mermaid {
+ background: none;
}
diff --git a/assets/scss/components/_doks.scss b/assets/scss/components/_doks.scss
deleted file mode 100644
index 4c8bfc7..0000000
--- a/assets/scss/components/_doks.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
-
-Doks — based on Ascetic by (c) Ivan Sagalaev {{ .Params.lead | safeHTML }}
Get started - +