ux: update dark mode+
This commit is contained in:
Henk Verlinde
15
content/docs/cheat-sheets/_index.md
Normal file
15
content/docs/cheat-sheets/_index.md
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: "Cheat Sheets"
|
||||
description: ""
|
||||
lead: ""
|
||||
date: 2023-05-12T16:35:16+02:00
|
||||
lastmod: 2023-05-12T16:35:16+02:00
|
||||
draft: false
|
||||
images: []
|
||||
menu:
|
||||
docs:
|
||||
parent: ""
|
||||
identifier: "cheat-sheets-6bc84c337d53d392074322ff6492c34c"
|
||||
weight: 200
|
||||
toc: true
|
||||
---
|
||||
110
content/docs/cheat-sheets/markdown-basic-syntax/index.md
Normal file
110
content/docs/cheat-sheets/markdown-basic-syntax/index.md
Normal file
@ -0,0 +1,110 @@
|
||||
---
|
||||
title: "Markdown Basic Syntax"
|
||||
description: "A quick reference to the Markdown basic syntax."
|
||||
summary: "A quick reference to the Markdown basic syntax."
|
||||
date: 2023-05-12T16:35:44+02:00
|
||||
lastmod: 2023-05-12T16:35:44+02:00
|
||||
draft: false
|
||||
images: []
|
||||
menu:
|
||||
docs:
|
||||
parent: ""
|
||||
identifier: "markdown-basic-syntax-08aeef306d3f46c4e40c17b559b715c1"
|
||||
weight: 210
|
||||
toc: true
|
||||
---
|
||||
|
||||
A quick reference to the Markdown basic syntax.
|
||||
{ .lead }
|
||||
|
||||
{{< callout icon="info-circle" >}}
|
||||
Refer to the [basic syntax](https://www.markdownguide.org/basic-syntax) reference guide for more information.
|
||||
{{< /callout >}}
|
||||
|
||||
## Heading
|
||||
|
||||
```md
|
||||
# H1
|
||||
## H2
|
||||
### H3
|
||||
```
|
||||
|
||||
## Bold
|
||||
|
||||
```md
|
||||
**bold text**
|
||||
```
|
||||
|
||||
**bold text**
|
||||
|
||||
## Italic
|
||||
|
||||
```md
|
||||
*italicized text*
|
||||
```
|
||||
|
||||
*italicized text*
|
||||
|
||||
## Blockquote
|
||||
|
||||
```md
|
||||
> blockquote
|
||||
```
|
||||
|
||||
> blockquote
|
||||
|
||||
## Ordered List
|
||||
|
||||
```md
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
```
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
## Unordered List
|
||||
|
||||
```md
|
||||
- First item
|
||||
- Second item
|
||||
- Third item
|
||||
```
|
||||
|
||||
- First item
|
||||
- Second item
|
||||
- Third item
|
||||
|
||||
## Code
|
||||
|
||||
```bash
|
||||
`code`
|
||||
```
|
||||
|
||||
`code`
|
||||
|
||||
## Horizontal Rule
|
||||
|
||||
```md
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Link
|
||||
|
||||
```md
|
||||
[Markdown Guide](https://www.markdownguide.org)
|
||||
```
|
||||
|
||||
[Markdown Guide](https://www.markdownguide.org)
|
||||
|
||||
## Image
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
153
content/docs/cheat-sheets/markdown-extended-syntax/index.md
Normal file
153
content/docs/cheat-sheets/markdown-extended-syntax/index.md
Normal file
@ -0,0 +1,153 @@
|
||||
---
|
||||
title: "Markdown Extended Syntax"
|
||||
description: "A quick reference to the Markdown extended syntax."
|
||||
summary: "A quick reference to the Markdown extended syntax."
|
||||
date: 2023-05-12T16:35:56+02:00
|
||||
lastmod: 2023-05-12T16:35:56+02:00
|
||||
draft: false
|
||||
images: []
|
||||
menu:
|
||||
docs:
|
||||
parent: ""
|
||||
identifier: "markdown-extended-syntax-f467db1a842b35cffcbd916e2e6a56bc"
|
||||
weight: 220
|
||||
toc: true
|
||||
---
|
||||
|
||||
A quick reference to the Markdown extended syntax.
|
||||
{ .lead }
|
||||
|
||||
{{< callout icon="info-circle" >}}
|
||||
Refer to the [extended syntax](https://www.markdownguide.org/extended-syntax) reference guide for more information.
|
||||
{{< /callout >}}
|
||||
|
||||
## Table
|
||||
|
||||
```md
|
||||
| Syntax | Description |
|
||||
| ----------- | ----------- |
|
||||
| Header | Title |
|
||||
| Paragraph | Text |
|
||||
```
|
||||
|
||||
| Syntax | Description |
|
||||
| ----------- | ----------- |
|
||||
| Header | Title |
|
||||
| Paragraph | Text |
|
||||
|
||||
## Fenced Code Block
|
||||
|
||||
````md
|
||||
```json
|
||||
{
|
||||
"firstName": "John",
|
||||
"lastName": "Smith",
|
||||
"age": 25
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
```json
|
||||
{
|
||||
"firstName": "John",
|
||||
"lastName": "Smith",
|
||||
"age": 25
|
||||
}
|
||||
```
|
||||
|
||||
## Footnote
|
||||
|
||||
```md
|
||||
Here's a sentence with a footnote. [^1]
|
||||
|
||||
[^1]: This is the footnote.
|
||||
```
|
||||
|
||||
Here's a sentence with a footnote. [^1]
|
||||
|
||||
[^1]: This is the footnote.
|
||||
|
||||
## Heading ID
|
||||
|
||||
```md
|
||||
### My Great Heading{#custom-id}
|
||||
```
|
||||
|
||||
### My Great Heading{#custom-id}
|
||||
|
||||
```html
|
||||
<h3 id="custom-id">My Great Heading</h3>
|
||||
```
|
||||
|
||||
## Definition List
|
||||
|
||||
```md
|
||||
term
|
||||
: definition
|
||||
```
|
||||
|
||||
term
|
||||
: definition
|
||||
|
||||
## Strikethrough
|
||||
|
||||
```md
|
||||
~~The world is flat.~~
|
||||
```
|
||||
|
||||
~~The world is flat.~~
|
||||
|
||||
## Task List
|
||||
|
||||
```md
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
{.list-unstyled}
|
||||
```
|
||||
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
{.list-unstyled}
|
||||
|
||||
## Emoji
|
||||
|
||||
{{< callout icon="info-circle" >}}
|
||||
Copy the emoji shortcode from [Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/) by clicking on the emoji.
|
||||
{{< /callout >}}
|
||||
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">That is so funny! :joy:
|
||||
</span></span></code></pre></div>
|
||||
|
||||
That is so funny! :joy:
|
||||
|
||||
## Unsupported elements
|
||||
|
||||
{{< callout icon="info-circle" >}}
|
||||
Hugo does not [support](https://www.markdownguide.org/tools/hugo/#hugo-markdown-support) the highlight, subscript, and superscript elements. Use the HTML element itself instead.
|
||||
{{< /callout >}}
|
||||
|
||||
### Highlight
|
||||
|
||||
```md
|
||||
I need to highlight these <mark>very important words</mark>.
|
||||
```
|
||||
|
||||
I need to highlight these <mark>very important words</mark>.
|
||||
|
||||
### Subscript
|
||||
|
||||
```md
|
||||
H<sub>2</sub>O
|
||||
```
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
### Superscript
|
||||
|
||||
```md
|
||||
X<sup>2</sup>
|
||||
```
|
||||
|
||||
X<sup>2</sup>
|
||||
273
content/docs/cheat-sheets/shortcodes/index.md
Normal file
273
content/docs/cheat-sheets/shortcodes/index.md
Normal file
@ -0,0 +1,273 @@
|
||||
---
|
||||
title: "Shortcodes"
|
||||
description: "A quick reference to the Doks shortcodes."
|
||||
summary: "A quick reference to the Doks shortcodes."
|
||||
date: 2023-05-12T16:36:04+02:00
|
||||
lastmod: 2023-05-12T16:36:04+02:00
|
||||
draft: false
|
||||
images: []
|
||||
menu:
|
||||
docs:
|
||||
parent: ""
|
||||
identifier: "shortcodes-b20379ce4f24fa487bf2dd1a8367a4f1"
|
||||
weight: 230
|
||||
toc: true
|
||||
---
|
||||
|
||||
A quick reference to the Doks shortcodes.
|
||||
{.lead}
|
||||
|
||||
{{< callout icon="info-circle" >}}
|
||||
Refer to [components](https://getdoks.org/docs/components/) for more information.
|
||||
{{< /callout >}}
|
||||
|
||||
## SVG
|
||||
|
||||
Add an [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) from the assets directory, page resources, or Tabler icons.
|
||||
|
||||
{{< callout icon="info-circle" >}}
|
||||
The [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) gets embedded into the pages' HTML.
|
||||
{{< /callout >}}
|
||||
|
||||
### Assets directory
|
||||
|
||||
Add e.g. a logo from the `assets` directory:
|
||||
|
||||
```md
|
||||
{{</* svg icon="svgs/logos/logo-netlify-small-monochrome-lightmode.svg" width="192px" height="79px" class="icon-custom netlify-logo" */>}}
|
||||
```
|
||||
|
||||
{{< svg icon="svgs/logos/logo-netlify-small-monochrome-lightmode.svg" width="192px" height="79px" class="icon-custom netlify-logo" >}}
|
||||
|
||||
### Page resources
|
||||
|
||||
{{< callout icon="info-circle" >}}
|
||||
Refer to [page resources](https://gohugo.io/content-management/page-resources/) and [page bundles](https://gohugo.io/content-management/page-bundles/) for more information.
|
||||
{{< /callout >}}
|
||||
|
||||
Add e.g a monogram
|
||||
:
|
||||
|
||||
```md
|
||||
{{</* svg icon="logo-netlify-monogram-monochrome-lightmode.svg" width="64px" height="57px" class="icon-custom netlify-monogram" */>}}
|
||||
```
|
||||
|
||||
{{< svg icon="logo-netlify-monogram-monochrome-lightmode.svg" width="64px" height="57px" class="icon-custom netlify-monogram" >}}
|
||||
|
||||
### Tabler icons
|
||||
|
||||
{{< callout icon="copy" >}}
|
||||
Copy the icon name from [Tabler Icons](https://tabler-icons.io/) by clicking on it's name.
|
||||
{{< /callout >}}
|
||||
|
||||
Add a Tabler icon:
|
||||
|
||||
```md
|
||||
{{</* svg "rubber-stamp" */>}}
|
||||
```
|
||||
|
||||
{{< svg "rubber-stamp" >}}
|
||||
|
||||
Specify [SVG attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute), for example:
|
||||
|
||||
```md
|
||||
{{</* svg icon="rubber-stamp" stroke-width="1" height="3rem" width="3rem" class="icon-custom" */>}}
|
||||
```
|
||||
|
||||
{{< svg icon="rubber-stamp" stroke-width="1" height="3rem" width="3rem" class="icon-custom" >}}
|
||||
|
||||
## Callouts
|
||||
|
||||
```md
|
||||
{{</* callout */>}} This is a default callout. Example text to show it in action. {{</* /callout */>}}
|
||||
```
|
||||
|
||||
```md
|
||||
{{</* callout info */>}} This is an info callout. Example text to show it in action. {{</* /callout */>}}
|
||||
```
|
||||
|
||||
```md
|
||||
{{</* callout warning */>}} This is a warning callout. Example text to show it in action. {{</* /callout */>}}
|
||||
```
|
||||
|
||||
```md
|
||||
{{</* callout danger */>}} This is a danger callout. Example text to show it in action. {{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout >}} This is a default callout. Example text to show it in action. {{< /callout >}}
|
||||
|
||||
{{< callout info >}} This is an info callout. Example text to show it in action. {{< /callout >}}
|
||||
|
||||
{{< callout warning >}} This is a warning callout. Example text to show it in action. {{< /callout >}}
|
||||
|
||||
{{< callout danger >}} This is a danger callout. Example text to show it in action. {{< /callout >}}
|
||||
|
||||
### Tabler icons
|
||||
|
||||
{{< callout icon="copy" >}}
|
||||
Copy the icon name from [Tabler Icons](https://tabler-icons.io/) by clicking on it's name.
|
||||
{{< /callout >}}
|
||||
|
||||
```md
|
||||
{{</* callout context="info" icon="info-circle" */>}} This is an **info** callout. Example text to show it in action. {{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout context="info" icon="info-circle" >}} This is an **info** callout. Example text to show it in action.{{< /callout >}}
|
||||
|
||||
```md
|
||||
{{</* callout context="info" icon="info-circle" */>}}
|
||||
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within a callout works with this kind of content.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout context="info" icon="info-circle" >}}
|
||||
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within a callout works with this kind of content.
|
||||
{{< /callout >}}
|
||||
|
||||
### Title
|
||||
|
||||
```md
|
||||
{{</* callout context="info" title="Callout title" */>}} This is an info callout. Example text to show it in action. {{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout context="info" title="Callout title" >}} This is an info callout. Example text to show it in action. {{< /callout >}}
|
||||
|
||||
```md
|
||||
{{</* callout context="info" title="Callout title" icon="info-circle" */>}} This is an info callout. Example text to show it in action. {{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout context="info" title="Callout title" icon="info-circle" >}} This is an info callout. Example text to show it in action. {{< /callout >}}
|
||||
|
||||
### Inline code
|
||||
|
||||
{{< callout context="light" icon="info-circle" >}}
|
||||
You can change the commands in the scripts section of `./package.json`.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout context="warning" icon="info-circle" >}}
|
||||
You can change the commands in the scripts section of `./package.json`.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout context="danger" icon="info-circle" >}}
|
||||
You can change the commands in the scripts section of `./package.json`.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout context="info" icon="info-circle" >}}
|
||||
You can change the commands in the scripts section of `./package.json`.
|
||||
{{< /callout >}}
|
||||
|
||||
## Details
|
||||
|
||||
```md
|
||||
{{</* details "How will we conduct IEP and 504 meetings?" */>}}
|
||||
All meetings will be held *remotely*.
|
||||
{{</* /details */>}}
|
||||
```
|
||||
|
||||
{{< details "How will we conduct IEP and 504 meetings?" >}}
|
||||
All meetings will be held *remotely*.
|
||||
{{< /details >}}
|
||||
|
||||
### Start in open state
|
||||
|
||||
```md
|
||||
{{</* details "Start in open state" open */>}}
|
||||
This Boolean attribute indicates whether the details — that is, the contents of the <details> element — are currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent. By default this attribute is absent which means the details are not visible.
|
||||
{{</* /details */>}}
|
||||
```
|
||||
|
||||
{{< details "Start in open state" open >}}
|
||||
This Boolean attribute indicates whether the details — that is, the contents of the `<details>` element — are currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent. By default this attribute is absent which means the details are not visible.
|
||||
{{< /details >}}
|
||||
|
||||
## Tabs
|
||||
|
||||
````md
|
||||
{{</* tabs "create-new-site" */>}}
|
||||
{{</* tab "npm" */>}}
|
||||
|
||||
```bash
|
||||
npm create hyas@latest
|
||||
```
|
||||
|
||||
{{</* /tab */>}}
|
||||
{{</* tab "pnpm" */>}}
|
||||
|
||||
```bash
|
||||
pnpm create hyas@latest
|
||||
```
|
||||
|
||||
{{</* /tab */>}}
|
||||
{{</* tab "Yarn" */>}}
|
||||
|
||||
```bash
|
||||
yarn create hyas
|
||||
```
|
||||
|
||||
{{</* /tab */>}}
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{< callout icon="info-circle" >}}
|
||||
The selected tab is remembered in and across pages.
|
||||
{{< /callout >}}
|
||||
|
||||
Run the following command in your terminal to start our handy install wizard, `create-hyas`.
|
||||
|
||||
{{< tabs "create-new-site" >}}
|
||||
{{< tab "npm" >}}
|
||||
|
||||
```bash
|
||||
npm create hyas@latest
|
||||
```
|
||||
|
||||
{{< /tab >}}
|
||||
{{< tab "pnpm" >}}
|
||||
|
||||
```bash
|
||||
pnpm create hyas@latest
|
||||
```
|
||||
|
||||
{{< /tab >}}
|
||||
{{< tab "Yarn" >}}
|
||||
|
||||
```bash
|
||||
yarn create hyas
|
||||
```
|
||||
|
||||
{{< /tab >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
`cd` into your new project directory to begin using Hyas. Install your dependencies before continuing.
|
||||
|
||||
{{< tabs "install-dependencies" >}}
|
||||
{{< tab "npm" >}}
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
{{< /tab >}}
|
||||
{{< tab "pnpm" >}}
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
{{< /tab >}}
|
||||
{{< tab "Yarn" >}}
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
{{< /tab >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
## Video
|
||||
|
||||
```md
|
||||
{{</* video ratio="16x9" attributes="controls autoplay muted" webm-src="videos/flower.webm" mp4-src="videos/flower.mp4" */>}}
|
||||
```
|
||||
|
||||
{{< video ratio="16x9" attributes="controls autoplay muted" webm-src="videos/flower.webm" mp4-src="videos/flower.mp4" >}}
|
||||
@ -0,0 +1,16 @@
|
||||
<svg width="128" height="113" viewBox="0 0 128 113" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_236_179)">
|
||||
<path d="M34.593 94.2052H33.3844L27.3514 88.1722V86.9637L36.5743 77.7409H42.9639L43.8158 78.5928V84.9824L34.593 94.2052Z" fill="#181A1C"/>
|
||||
<path d="M27.3514 25.9703V24.7617L33.3844 18.7287H34.593L43.8158 27.9515V34.3411L42.9639 35.1931H36.5743L27.3514 25.9703Z" fill="#181A1C"/>
|
||||
<path d="M80.4594 74.759H71.6824L70.9493 74.026V53.4802C70.9493 49.8248 69.5129 46.9915 65.1046 46.8925C62.836 46.833 60.2405 46.8925 57.4668 47.0014L57.0507 47.4274V74.0161L56.3176 74.7491H47.5406L46.8075 74.0161V38.9179L47.5406 38.1848H67.2939C74.9713 38.1848 81.1925 44.406 81.1925 52.0834V74.026L80.4594 74.759Z" fill="#181A1C"/>
|
||||
<path d="M35.8412 61.6034H0.73307L0 60.8703V52.0735L0.73307 51.3404H35.8412L36.5743 52.0735V60.8703L35.8412 61.6034Z" fill="#181A1C"/>
|
||||
<path d="M127.277 61.6034H92.1687L91.4356 60.8703V52.0735L92.1687 51.3404H127.277L128.01 52.0735V60.8703L127.277 61.6034Z" fill="#181A1C"/>
|
||||
<path d="M58.9428 27.2185V0.887367L59.6759 0.154297H68.4727L69.2058 0.887367V27.2185L68.4727 27.9515H59.6759L58.9428 27.2185Z" fill="#181A1C"/>
|
||||
<path d="M58.9428 112.056V85.7254L59.6759 84.9923H68.4727L69.2058 85.7254V112.056L68.4727 112.79H59.6759L58.9428 112.056Z" fill="#181A1C"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_236_179">
|
||||
<rect width="128" height="112.635" fill="white" transform="translate(0 0.154297)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Reference in New Issue
Block a user