feat: add details shortcode
This commit is contained in:
parent
e3fdbaa259
commit
7bc15dc0ec
|
@ -20,6 +20,7 @@
|
||||||
@import "components/alerts";
|
@import "components/alerts";
|
||||||
@import "components/buttons";
|
@import "components/buttons";
|
||||||
@import "components/code";
|
@import "components/code";
|
||||||
|
@import "components/details";
|
||||||
@import "components/syntax";
|
@import "components/syntax";
|
||||||
@import "components/comments";
|
@import "components/comments";
|
||||||
@import "components/forms";
|
@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
|
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
|
## Get started
|
||||||
|
|
||||||
There are two main ways to get started with Doks:
|
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