feat: add details shortcode
This commit is contained in:
Henk Verlinde
parent
e3fdbaa259
commit
7bc15dc0ec
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue