From 7bc15dc0ec65b48b98f9150f72a2abf7a681ab1f Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Wed, 9 Feb 2022 20:05:13 +0100 Subject: [PATCH 1/5] feat: add details shortcode --- assets/scss/app.scss | 1 + assets/scss/components/_details.scss | 74 ++++++++++++++++++++++++ content/en/docs/prologue/introduction.md | 68 ++++++++++++++++++++++ layouts/shortcodes/details.html | 6 ++ 4 files changed, 149 insertions(+) create mode 100644 assets/scss/components/_details.scss create mode 100644 layouts/shortcodes/details.html diff --git a/assets/scss/app.scss b/assets/scss/app.scss index fc76d8e..b788eee 100644 --- a/assets/scss/app.scss +++ b/assets/scss/app.scss @@ -20,6 +20,7 @@ @import "components/alerts"; @import "components/buttons"; @import "components/code"; +@import "components/details"; @import "components/syntax"; @import "components/comments"; @import "components/forms"; diff --git a/assets/scss/components/_details.scss b/assets/scss/components/_details.scss new file mode 100644 index 0000000..c9289b5 --- /dev/null +++ b/assets/scss/components/_details.scss @@ -0,0 +1,74 @@ +details { + display: block; + border: 1px solid $gray-300; + border-radius: 4px; + padding: 0.5rem 0.5rem 0; + margin: 0.5rem 0; +} + +summary { + &::marker { + content: ""; + } +} + +details summary { + display: inline-block; + width: calc(100% + 1rem); + margin: -0.5rem -0.5rem 0; + padding: 0.5rem; +} + +details summary:hover { + background: $gray-100; +} + +/* +details > summary:first-of-type { + display: inline-block; +} +*/ + +details summary::before { + display: inline-block; + 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: center center; + margin-right: 0.125rem; +} + +details[open] > summary::before { + transform: rotate(90deg); +} + +details summary > * { + display: inline; +} + +details[open] { + padding: 0.5rem; +} + +details[open] > summary { + border-bottom: 1px solid $gray-300; + margin-bottom: 0.5rem; +} + +details h2, +details h3, +details h4 { + margin: 0 0 1rem; +} + +details p:last-child { + margin-bottom: 0; +} + +details ul, +details ol { + margin-bottom: 0; +} + +details pre { + margin: 0 0 1rem; +} diff --git a/content/en/docs/prologue/introduction.md b/content/en/docs/prologue/introduction.md index 53a7ed1..83785a7 100644 --- a/content/en/docs/prologue/introduction.md +++ b/content/en/docs/prologue/introduction.md @@ -13,6 +13,74 @@ weight: 100 toc: true --- +## Shortcode + +{{< details "Markdown and HTML" >}} +_Markdown_ and HTML will be rendered. +{{< /details >}} + +{{< details "Unordered list" >}} + +- step 1 +- step 2 + +{{< /details >}} + +{{< details "Ordered list" >}} + +1. step 1 +2. step 2 +3. step 3 + +{{< /details >}} + +{{< details "Parent" >}} +Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. +{{< details "Child" >}} +Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. +{{< details "Grandchild" >}} +Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. +{{< /details >}} +{{< /details >}} +{{< /details >}} + +{{< details "Start in open state" open >}} +Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. +{{< /details >}} + +{{< details "Headings" >}} + +## Heading 2 + +Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. + +Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. + +Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. + +### Heading 3 + +Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. + +#### Heading 4 + +Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. +{{< /details >}} + +{{< details "Custom HTML styled summary" >}} +Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. +{{< /details >}} + +{{< details "Code" >}} +Paragraph before code block + +```bash +npm run create [path] [flags] +``` + +Paragraph after code block +{{< /details >}} + ## Get started There are two main ways to get started with Doks: diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html new file mode 100644 index 0000000..02380ef --- /dev/null +++ b/layouts/shortcodes/details.html @@ -0,0 +1,6 @@ + + + {{ with .Get 0 }}{{ . | safeHTML }}{{ else }}{{ errorf "No summary provided"}}{{ end }} + + {{ with .Inner -}}{{ . | markdownify}}{{ else -}}{{ errorf "No details provided"}}{{ end -}} + \ No newline at end of file From cd42b954ff95f7ddf0c2b53c982ddaa38e4f0c49 Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Wed, 9 Feb 2022 20:17:54 +0100 Subject: [PATCH 2/5] config: add _details.scss to whitelister postcss.config.js --- config/postcss.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/config/postcss.config.js b/config/postcss.config.js index f9d1a18..6f9b6c9 100644 --- a/config/postcss.config.js +++ b/config/postcss.config.js @@ -26,6 +26,7 @@ module.exports = { './assets/scss/components/_alerts.scss', './assets/scss/components/_buttons.scss', './assets/scss/components/_code.scss', + './assets/scss/components/_details.scss', './assets/scss/components/_diagrams.scss', './assets/scss/components/_syntax.scss', './assets/scss/components/_search.scss', From 151aaef5a6c6bd4c0639835b427a4e772a55d8b7 Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Thu, 10 Feb 2022 10:14:36 +0100 Subject: [PATCH 3/5] fix: remove whitespace shortcode --- assets/scss/components/_details.scss | 39 +++++++++++++----------- config/postcss.config.js | 1 - content/en/docs/prologue/introduction.md | 2 ++ layouts/shortcodes/details.html | 4 +-- 4 files changed, 24 insertions(+), 22 deletions(-) diff --git a/assets/scss/components/_details.scss b/assets/scss/components/_details.scss index c9289b5..0b56bef 100644 --- a/assets/scss/components/_details.scss +++ b/assets/scss/components/_details.scss @@ -2,51 +2,54 @@ details { display: block; border: 1px solid $gray-300; border-radius: 4px; - padding: 0.5rem 0.5rem 0; + padding: 0.5rem 1rem 0; margin: 0.5rem 0; } -summary { +/* +details summary { &::marker { content: ""; } } +*/ -details summary { - display: inline-block; - width: calc(100% + 1rem); - margin: -0.5rem -0.5rem 0; - padding: 0.5rem; +summary { + list-style: none; + display: inline; + width: calc(100% + 2rem); + margin: -0.5rem -1rem 0; + padding: 0.5rem 0.75rem; } -details summary:hover { +summary::-webkit-details-marker { + display: none; +} + +summary:hover { background: $gray-100; } -/* -details > summary:first-of-type { - display: inline-block; -} -*/ - details summary::before { display: inline-block; 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: center center; - margin-right: 0.125rem; + margin-right: 0.375rem; } details[open] > summary::before { transform: rotate(90deg); } +/* details summary > * { - display: inline; + display: inline-block; } +*/ details[open] { - padding: 0.5rem; + padding: 0.5rem 1rem; } details[open] > summary { @@ -57,7 +60,7 @@ details[open] > summary { details h2, details h3, details h4 { - margin: 0 0 1rem; + margin: 1rem 0 0.5rem; } details p:last-child { diff --git a/config/postcss.config.js b/config/postcss.config.js index 6f9b6c9..f9d1a18 100644 --- a/config/postcss.config.js +++ b/config/postcss.config.js @@ -26,7 +26,6 @@ module.exports = { './assets/scss/components/_alerts.scss', './assets/scss/components/_buttons.scss', './assets/scss/components/_code.scss', - './assets/scss/components/_details.scss', './assets/scss/components/_diagrams.scss', './assets/scss/components/_syntax.scss', './assets/scss/components/_search.scss', diff --git a/content/en/docs/prologue/introduction.md b/content/en/docs/prologue/introduction.md index 83785a7..2ff8d8e 100644 --- a/content/en/docs/prologue/introduction.md +++ b/content/en/docs/prologue/introduction.md @@ -50,6 +50,8 @@ Doks is a Hugo theme for building secure, fast, and SEO-ready documentation webs {{< details "Headings" >}} +Paragraph before heading. + ## Heading 2 Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html index 02380ef..61a7183 100644 --- a/layouts/shortcodes/details.html +++ b/layouts/shortcodes/details.html @@ -1,6 +1,4 @@ - - {{ with .Get 0 }}{{ . | safeHTML }}{{ else }}{{ errorf "No summary provided"}}{{ end }} - + {{ with .Get 0 -}}{{ . | safeHTML }}{{ else -}}{{ errorf "No summary provided"}}{{ end -}} {{ with .Inner -}}{{ . | markdownify}}{{ else -}}{{ errorf "No details provided"}}{{ end -}} \ No newline at end of file From a2585ea83a8367261c7d15b330dbddda60efb3b6 Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Thu, 10 Feb 2022 14:12:24 +0100 Subject: [PATCH 4/5] ux: add styles for dark mode --- assets/scss/common/_dark.scss | 16 ++++++++++++++++ assets/scss/components/_details.scss | 4 ++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss index c312215..7608aa4 100644 --- a/assets/scss/common/_dark.scss +++ b/assets/scss/common/_dark.scss @@ -543,3 +543,19 @@ $navbar-dark-active-color: $link-color-dark; [data-dark-mode] .dropdown-menu-main .dropdown-item.active { color: $link-color-dark; } + +[data-dark-mode] details { + border: 1px solid $border-dark; +} + +[data-dark-mode] summary:hover { + background: $body-overlay-dark; +} + +[data-dark-mode] details[open] > summary { + border-bottom: 1px solid $border-dark; +} + +[data-dark-mode] details summary::before { + 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"); +} diff --git a/assets/scss/components/_details.scss b/assets/scss/components/_details.scss index 0b56bef..f3877dc 100644 --- a/assets/scss/components/_details.scss +++ b/assets/scss/components/_details.scss @@ -1,7 +1,7 @@ details { display: block; - border: 1px solid $gray-300; - border-radius: 4px; + border: 1px solid $gray-200; + border-radius: 0.25rem; padding: 0.5rem 1rem 0; margin: 0.5rem 0; } From ef77f4f99d959753acc612ab1ef72ce33c43c026 Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Mon, 14 Feb 2022 10:48:49 +0100 Subject: [PATCH 5/5] content: prepare for merge --- content/en/docs/prologue/introduction.md | 70 ------------------------ 1 file changed, 70 deletions(-) diff --git a/content/en/docs/prologue/introduction.md b/content/en/docs/prologue/introduction.md index 2ff8d8e..53a7ed1 100644 --- a/content/en/docs/prologue/introduction.md +++ b/content/en/docs/prologue/introduction.md @@ -13,76 +13,6 @@ weight: 100 toc: true --- -## Shortcode - -{{< details "Markdown and HTML" >}} -_Markdown_ and HTML will be rendered. -{{< /details >}} - -{{< details "Unordered list" >}} - -- step 1 -- step 2 - -{{< /details >}} - -{{< details "Ordered list" >}} - -1. step 1 -2. step 2 -3. step 3 - -{{< /details >}} - -{{< details "Parent" >}} -Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. -{{< details "Child" >}} -Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. -{{< details "Grandchild" >}} -Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. -{{< /details >}} -{{< /details >}} -{{< /details >}} - -{{< details "Start in open state" open >}} -Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. -{{< /details >}} - -{{< details "Headings" >}} - -Paragraph before heading. - -## Heading 2 - -Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. - -Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. - -Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. - -### Heading 3 - -Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. - -#### Heading 4 - -Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. -{{< /details >}} - -{{< details "Custom HTML styled summary" >}} -Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. -{{< /details >}} - -{{< details "Code" >}} -Paragraph before code block - -```bash -npm run create [path] [flags] -``` - -Paragraph after code block -{{< /details >}} - ## Get started There are two main ways to get started with Doks: