feat: add details shortcode

thuliteio · Feb 9, 2022 · 7bc15dc · 7bc15dc
1 parent e3fdbaa
commit 7bc15dc
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 0 deletions.
diff --git 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
@@ -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
@@ -13,6 +13,74 @@ weight: 100
 toc: true
 ---
 
+## Shortcode
+
+{{< details "Markdown and HTML" >}}
+_Markdown_ and <em>HTML</em> 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 "<span class=\"fw-bold\">Custom HTML styled summary</span>" >}}
+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
@@ -0,0 +1,6 @@
+<details{{ with .Get 1 }} {{ . | safeHTML }}{{ end -}}>
+  <summary>
+    {{ with .Get 0 }}{{ . | safeHTML }}{{ else }}{{ errorf "No summary provided"}}{{ end }}
+  </summary>
+  {{ with .Inner -}}{{ . | markdownify}}{{ else -}}{{ errorf "No details provided"}}{{ end -}}
+</details>