Commit 7bc15dc0 authored by Henk Verlinde's avatar Henk Verlinde
Browse files

feat: add details shortcode

parent e3fdbaa2

assets/scss/app.scss

+1 −0
Original line number Diff line number Diff line
@@ -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";

assets/scss/components/_details.scss

0 → 100644
+74 −0
Original line number Diff line number Diff line 
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;

}

content/en/docs/prologue/introduction.md

+68 −0
Original line number Diff line number Diff line
@@ -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:

layouts/shortcodes/details.html

0 → 100644
+6 −0
Original line number Diff line number Diff line 
<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>
 
 No newline at end of file