Big documentation rewrite, move docs to example site
This commit is contained in:
Alex Shpak
@@ -1,3 +1,20 @@
|
||||
---
|
||||
bookFlatSection: true
|
||||
weight: 60
|
||||
bookCollapseSection: true
|
||||
---
|
||||
|
||||
# Shortcodes
|
||||
|
||||
Hugo Book includes shortcodes for common documentation patterns. All interactive shortcodes work without JavaScript using CSS-only techniques.
|
||||
|
||||
Hugo shortcodes use two delimiter styles:
|
||||
|
||||
`{{</* shortcode */>}}`
|
||||
: Renders inner content as plain HTML. Use for shortcodes that don't contain markdown.
|
||||
|
||||
`{{%/* shortcode */%}}`
|
||||
: Processes inner content as markdown. Use when the shortcode body contains markdown formatting.
|
||||
|
||||
> [!NOTE]
|
||||
> Use `{{%/* shortcode */%}}` when the body contains markdown that needs to be rendered. `{{</* shortcode */>}}` passes content as-is without markdown processing.
|
||||
> When nesting shortcodes (e.g. tabs inside columns), the outer shortcode must use `{{%/* shortcode */%}}` for the inner shortcodes and markdown to be processed.
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
# Asciinema
|
||||
|
||||
Asciinema shortcode integrates asciinema player into the markdown page.
|
||||
Embed terminal recordings with the [Asciinema](https://asciinema.org/) player.
|
||||
|
||||
## Syntax
|
||||
|
||||
```tpl
|
||||
{{</* asciinema
|
||||
cast="asciinema-627097.cast"
|
||||
or
|
||||
cast="https://asciinema.org/a/vJNKUQFjuh7qKI2j3OoaKs8Jk.cast"
|
||||
cast="recording.cast"
|
||||
loop=true
|
||||
autoplay=true
|
||||
speed=2 */>}}
|
||||
```
|
||||
|
||||
The `cast` parameter accepts page resources, site resources, or remote URLs.
|
||||
|
||||
## Example
|
||||
|
||||
{{< asciinema
|
||||
cast="asciinema-627097.cast"
|
||||
loop=true
|
||||
@@ -20,6 +24,9 @@ Asciinema shortcode integrates asciinema player into the markdown page.
|
||||
|
||||
## Parameters
|
||||
|
||||
All parameters added to the shortcode will be transformed to options for Asciinema player, expect `cast` parameter that is used to locate cast file. Cast file follows same rules as portable image, it could be site resource, page resource or remote file URL.
|
||||
`cast`
|
||||
: Path to the `.cast` file. Can be a local resource or a remote URL.
|
||||
|
||||
[List of Asciinema options](https://docs.asciinema.org/manual/player/options/)
|
||||
All other parameters are passed directly to the Asciinema player. See the [Asciinema player options](https://docs.asciinema.org/manual/player/options/) for the full list.
|
||||
|
||||
Common options: `autoplay`, `loop`, `speed`, `theme`, `cols`, `rows`, `idleTimeLimit`, `preload`.
|
||||
|
||||
@@ -1,13 +1,26 @@
|
||||
# Buttons
|
||||
|
||||
Buttons are styled links that can lead to local page or external link.
|
||||
Styled links that can point to local pages or external URLs. External links automatically open in a new tab.
|
||||
|
||||
## Example
|
||||
## Syntax
|
||||
|
||||
```tpl
|
||||
{{</* button relref="/" [class="..."] */>}}Get Home{{</* /button */>}}
|
||||
{{</* button href="https://github.com/alex-shpak/hugo-book" */>}}Contribute{{</* /button */>}}
|
||||
{{</* button href="https://github.com/alex-shpak/hugo-book" */>}}Github{{</* /button */>}}
|
||||
```
|
||||
|
||||
{{<button href="/">}}Get Home{{</button>}}
|
||||
{{<button href="https://github.com/alex-shpak/hugo-book">}}Contribute{{</button>}}
|
||||
## Example
|
||||
|
||||
{{<button href="/">}}Home{{</button>}}
|
||||
{{<button href="https://github.com/alex-shpak/hugo-book">}}Github{{</button>}}
|
||||
|
||||
## Parameters
|
||||
|
||||
`href`
|
||||
: URL for external links.
|
||||
|
||||
`relref`
|
||||
: Hugo page reference for internal links.
|
||||
|
||||
`class`
|
||||
: Additional CSS classes.
|
||||
|
||||
@@ -1,65 +1,47 @@
|
||||
# Columns
|
||||
|
||||
Columns help organize shorter pieces of content horizontally for readability. `columns` shortcode styles markdown list as up to 3 columns.
|
||||
Organize content horizontally. Renders a markdown list as up to 3 side-by-side columns.
|
||||
|
||||
## Example
|
||||
## Syntax
|
||||
|
||||
```tpl
|
||||
{{%/* columns [ratio="1:1"] [class="..."] */%}}
|
||||
- ### Left Content
|
||||
Lorem markdownum insigne...
|
||||
- ### Left
|
||||
Content...
|
||||
|
||||
- ### Mid Content
|
||||
Lorem markdownum insigne...
|
||||
|
||||
- ### Right Content
|
||||
Lorem markdownum insigne...
|
||||
- ### Right
|
||||
Content...
|
||||
{{%/* /columns */%}}
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
{{% columns %}}
|
||||
- ### Left Content
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
|
||||
Miseratus fonte Ditis conubia.
|
||||
- ### File-Tree Menu
|
||||
The sidebar menu is automatically generated from your content directory structure. Pages are ordered by `weight` frontmatter.
|
||||
|
||||
- ### Mid Content
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter!
|
||||
- ### Hugo Menus
|
||||
Additional menu entries can be added above or below the file-tree using Hugo's standard menu system in your site config.
|
||||
|
||||
- ### Right Content
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
|
||||
Miseratus fonte Ditis conubia.
|
||||
- ### Landing Menu
|
||||
Pages with `layout: landing` use a separate menu defined under `menu.home` for header navigation.
|
||||
{{% /columns %}}
|
||||
|
||||
## Settings size ratio for columns
|
||||
## Custom Ratio
|
||||
|
||||
Set relative column widths with the `ratio` parameter
|
||||
|
||||
```tpl
|
||||
{{%/* columns ratio="1:2" */%}}
|
||||
- ## x1 Column
|
||||
Lorem markdownum insigne...
|
||||
|
||||
- ## x2 Column
|
||||
Lorem markdownum insigne...
|
||||
- ### Sidebar
|
||||
- ### Content Area
|
||||
{{%/* /columns */%}}
|
||||
```
|
||||
|
||||
{{% columns ratio="1:2" %}}
|
||||
- ### x1 Column
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
|
||||
Miseratus fonte Ditis conubia.
|
||||
- ### File-Tree Menu
|
||||
The sidebar menu is automatically generated from your content directory structure. Pages are ordered by `weight` frontmatter.
|
||||
|
||||
- ### x2 Column
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter!
|
||||
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
|
||||
Miseratus fonte Ditis conubia.
|
||||
- ### Hugo Menus
|
||||
Additional menu entries can be added above or below the file-tree using Hugo's standard menu system in your site config.
|
||||
{{% /columns %}}
|
||||
|
||||
@@ -1,30 +1,37 @@
|
||||
# Details
|
||||
|
||||
Details shortcode is a helper for `details` html5 element. To collapse the details either omit the `open`
|
||||
keyword when using positional arguments or set `open=false` when using parameters.
|
||||
Collapsible content using the HTML5 `<details>` element.
|
||||
|
||||
## Example with positional arguments
|
||||
## Syntax
|
||||
|
||||
Positional arguments:
|
||||
```tpl
|
||||
{{%/* details "Title" [open] */%}}
|
||||
## Markdown content
|
||||
Lorem markdownum insigne...
|
||||
Markdown content
|
||||
{{%/* /details */%}}
|
||||
```
|
||||
|
||||
{{% details "Title" open %}}
|
||||
## Markdown content
|
||||
Lorem markdownum insigne...
|
||||
{{% /details %}}
|
||||
|
||||
## Example with parameters
|
||||
Named parameters:
|
||||
```tpl
|
||||
{{%/* details title="Title" open=true */%}}
|
||||
## Markdown content
|
||||
Lorem markdownum insigne...
|
||||
Markdown content
|
||||
{{%/* /details */%}}
|
||||
```
|
||||
|
||||
{{% details title="Title" open=true %}}
|
||||
## Markdown content
|
||||
Lorem markdownum insigne...
|
||||
## Example
|
||||
|
||||
{{% details "What Hugo version is required?" %}}
|
||||
Hugo Book requires Hugo {x} or later, extended edition. The extended edition is needed for SCSS processing.
|
||||
{{% /details %}}
|
||||
|
||||
{{% details "How do I override the theme?" open %}}
|
||||
Create matching files in your project's `layouts/` or `assets/` directory. Hugo's lookup order will use your files over the theme's.
|
||||
{{% /details %}}
|
||||
|
||||
## Parameters
|
||||
|
||||
`title` (or first positional argument)
|
||||
: The summary text shown when collapsed.
|
||||
|
||||
`open` (or second positional argument)
|
||||
: Start expanded. Default: collapsed.
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
---
|
||||
---
|
||||
|
||||
@@ -1,32 +1,43 @@
|
||||
# Badges
|
||||
|
||||
> [!WARNING]
|
||||
> Experimental, could change in the future or be removed
|
||||
Inline labels for annotating content with status, versions, or metadata.
|
||||
|
||||
Badges can be used to annotate your pages with additional information or mark specific places in markdown content.
|
||||
## Syntax
|
||||
|
||||
{{< badge title="Title" value="Value" >}}
|
||||
{{< badge style="info" title="Hugo" value="0.147.6" >}}
|
||||
{{< badge style="success" title="Build" value="Passing" >}}
|
||||
{{< badge style="warning" title="Coverage" value="25%" >}}
|
||||
{{< badge style="danger" title="Issues" value="120" >}}
|
||||
```tpl
|
||||
{{</* badge style="info" title="Hugo" value="0.158" */>}}
|
||||
```
|
||||
|
||||
## Examples
|
||||
## Styles
|
||||
|
||||
| Shortcode | Output |
|
||||
| -- | -- |
|
||||
| `{{</* badge style="info" title="hugo" value="0.147.6" */>}}` | {{< badge style="info" title="Hugo" value="0.147.6" >}} |
|
||||
| -- | -- |
|
||||
| `{{</* badge style="info" title="Hugo" value="0.158" */>}}` | {{< badge style="info" title="Hugo" value="0.158" >}} |
|
||||
| `{{</* badge style="success" title="Build" value="Passing" */>}}` | {{< badge style="success" title="Build" value="Passing" >}} |
|
||||
| `{{</* badge style="warning" title="Coverage" value="25%" */>}}` | {{< badge style="warning" title="Coverage" value="25%" >}} |
|
||||
| `{{</* badge style="danger" title="Issues" value="120" */>}}` | {{< badge style="danger" title="Issues" value="120" >}} |
|
||||
| `{{</* badge style="warning" title="Coverage" value="25%" */>}}` | {{< badge style="warning" title="Coverage" value="25%" >}} |
|
||||
| `{{</* badge style="danger" title="Issues" value="120" */>}}` | {{< badge style="danger" title="Issues" value="120" >}} |
|
||||
| | |
|
||||
| `{{</* badge style="info" title="Title" */>}}` | {{< badge style="info" title="Title" >}} |
|
||||
| `{{</* badge style="info" value="Value" */>}}` | {{< badge style="info" value="Value" >}} |
|
||||
| `{{</* badge title="Default" */>}}` | {{< badge value="Default" >}} |
|
||||
| `{{</* badge style="info" title="Title" */>}}` | {{< badge style="info" title="Title" >}} |
|
||||
| `{{</* badge style="info" value="Value" */>}}` | {{< badge style="info" value="Value" >}} |
|
||||
| `{{</* badge value="Default" */>}}` | {{< badge value="Default" >}} |
|
||||
|
||||
## Use in links
|
||||
## Use in Links
|
||||
|
||||
Wrap a badge in a markdown link
|
||||
|
||||
A badge can be wrapped in markdown link producing following result: [{{< badge title="Hugo" value="0.147.6" >}}](https://github.com/gohugoio/hugo/releases/tag/v0.147.6)
|
||||
```tpl
|
||||
[{{</* badge title="Hugo" value="0.147.6" */>}}](https://github.com/gohugoio/hugo/releases/tag/v0.147.6)
|
||||
[{{</* badge title="Hugo" value="0.158" */>}}](https://github.com/gohugoio/hugo/releases/tag/v0.158.0)
|
||||
```
|
||||
|
||||
[{{< badge title="Hugo" value="0.158" >}}](https://github.com/gohugoio/hugo/releases/tag/v0.158.0)
|
||||
|
||||
## Parameters
|
||||
|
||||
`style`
|
||||
: Visual style. One of: `default`, `info`, `success`, `warning`, `danger`, `note`, `tip`, `important`, `caution`.
|
||||
|
||||
`title`
|
||||
: Label text (left side).
|
||||
|
||||
`value`
|
||||
: Value text (right side).
|
||||
|
||||
@@ -1,33 +1,47 @@
|
||||
# Cards
|
||||
|
||||
> [!WARNING]
|
||||
> Experimental, could change in the future or be removed
|
||||
Content blocks with optional images and links. Often used with [Columns](/docs/shortcodes/columns) for grid layouts.
|
||||
|
||||
## Syntax
|
||||
|
||||
```tpl
|
||||
{{</* card [href="..."] [image="..."] [title="..."] */>}}
|
||||
Markdown content
|
||||
{{</* /card */>}}
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
{{% columns %}}
|
||||
- {{< card image="placeholder.svg" >}}
|
||||
### Line 1
|
||||
Line 2
|
||||
### With Image
|
||||
Cards can display an image above the content.
|
||||
{{< /card >}}
|
||||
|
||||
- {{< card image="placeholder.svg" >}}
|
||||
This is tab MacOS content.
|
||||
{{< /card >}}
|
||||
{{% /columns %}}
|
||||
|
||||
{{% columns %}}
|
||||
- {{< card href="/docs/shortcodes/experimental/cards" >}}
|
||||
**Markdown**
|
||||
Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa.
|
||||
{{< /card >}}
|
||||
|
||||
- {{< card >}}
|
||||
Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie.
|
||||
### With Link {anchor=false}
|
||||
When `href` is set, the entire card becomes clickable.
|
||||
{{< /card >}}
|
||||
|
||||
- {{< card title="Card" >}}
|
||||
### Heading
|
||||
This is tab MacOS content.
|
||||
### Plain Card
|
||||
A basic card with no image or link, used for grouping related content.
|
||||
{{< /card >}}
|
||||
{{% /columns %}}
|
||||
|
||||
## Parameters
|
||||
|
||||
`href`
|
||||
: Makes the card a link. The entire card area becomes clickable.
|
||||
|
||||
`image`
|
||||
: Path to an image displayed above the card content. Supports page resources and URLs.
|
||||
|
||||
`title`
|
||||
: Accessible title for the card.
|
||||
|
||||
`alt`
|
||||
: Alt text for the card image.
|
||||
|
||||
`class`
|
||||
: Additional CSS classes.
|
||||
|
||||
@@ -1,33 +1,30 @@
|
||||
# Images
|
||||
|
||||
> [!WARNING]
|
||||
> Experimental, could change in the future or be removed
|
||||
Enhanced image display with click-to-expand behavior.
|
||||
|
||||
Image shortcode produces an image that can be clicked to expand.
|
||||
## Syntax
|
||||
|
||||
```tpl
|
||||
{{</* image src="photo.jpg" alt="Description" title="Caption" loading="lazy" */>}}
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
```go-html-template
|
||||
{{</* image src="placeholder.svg" alt="A placeholder" title="A placeholder" loading="lazy" */>}}
|
||||
```
|
||||
{{< image src="placeholder.svg" alt="A placeholder" title="A placeholder" loading="lazy" >}}
|
||||
{{< image src="placeholder.svg" alt="Placeholder image" title="Click to expand" loading="lazy" >}}
|
||||
|
||||
## Parameters
|
||||
|
||||
`src` {{< badge style="warning" title="Required" >}}
|
||||
: The link to the image
|
||||
`src`
|
||||
: Path to the image. Supports page resources, site resources, and URLs.
|
||||
|
||||
`class` {{< badge style="info" title="Optional" >}}
|
||||
: An optional CSS class name that will be applied to the `img` element
|
||||
|
||||
`alt` {{< badge style="info" title="Optional" >}}
|
||||
: An optional alternate text for the image
|
||||
|
||||
`title` {{< badge style="info" title="Optional" >}}
|
||||
: An optional title for the image
|
||||
|
||||
`loading` {{< badge style="info" title="Optional" >}}
|
||||
: Sets `loading` control for the image: `lazy`, `eager` or `auto`
|
||||
`alt`
|
||||
: Alternate text for accessibility.
|
||||
|
||||
`title`
|
||||
: Caption displayed below the image.
|
||||
|
||||
`loading`
|
||||
: Loading strategy: `lazy`, `eager`, or `auto`.
|
||||
|
||||
`class`
|
||||
: Additional CSS classes on the `<img>` element.
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
bookHidden: true
|
||||
---
|
||||
|
||||
# Section
|
||||
|
||||
Render child pages of the current section as a definition list with titles and descriptions.
|
||||
|
||||
## Syntax
|
||||
|
||||
```tpl
|
||||
{{</* section [summary] */>}}
|
||||
```
|
||||
|
||||
## Parameters
|
||||
|
||||
`summary`
|
||||
: When present, includes the page summary below each title.
|
||||
@@ -1,75 +1,64 @@
|
||||
# Hints
|
||||
|
||||
Hint shortcode can be used as a hint/alert/notification block.
|
||||
Callout blocks for notes, warnings, and other contextual messages. Also supports standard GitHub markdown alerts.
|
||||
|
||||
## Syntax
|
||||
|
||||
```tpl
|
||||
{{%/* hint [info|success|warning|danger] */%}}
|
||||
**Markdown content**
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
Markdown content
|
||||
{{%/* /hint */%}}
|
||||
```
|
||||
|
||||
Or using markdown alerts
|
||||
|
||||
```markdown
|
||||
> [!NOTE|TIP|IMPORTANT|WARNING|CAUTION]
|
||||
> **Markdown content**
|
||||
> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
> Markdown content
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
{{% hint %}}
|
||||
**Markdown content**
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
**Default hint**
|
||||
Without a specified type.
|
||||
{{% /hint %}}
|
||||
|
||||
{{% hint info %}}
|
||||
**Markdown content**
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
**Info**
|
||||
Use for supplementary information that helps the reader.
|
||||
{{% /hint %}}
|
||||
|
||||
{{% hint success %}}
|
||||
**Markdown content**
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
**Success**
|
||||
Use to highlight a recommended approach or positive outcome.
|
||||
{{% /hint %}}
|
||||
|
||||
{{% hint warning %}}
|
||||
**Markdown content**
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
**Warning**
|
||||
Use for important caveats or potential issues.
|
||||
{{% /hint %}}
|
||||
|
||||
{{% hint danger %}}
|
||||
**Markdown content**
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
**Danger**
|
||||
Use for critical warnings about breaking changes or data loss.
|
||||
{{% /hint %}}
|
||||
|
||||
## Support for markdown alerts
|
||||
## Markdown Alerts
|
||||
|
||||
Standard GitHub markdown alert syntax is also supported:
|
||||
|
||||
> [!NOTE]
|
||||
> **Note**
|
||||
> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
> The theme requires Hugo **extended** edition for SCSS processing.
|
||||
|
||||
> [!TIP]
|
||||
> **Tip**
|
||||
> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
> Set `disablePathToLower = true` in your config to preserve URL casing.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> **Important**
|
||||
> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
> The `unsafe = true` goldmark setting is required for Mermaid and KaTeX shortcodes.
|
||||
|
||||
> [!WARNING]
|
||||
> **Warning**
|
||||
> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
> Service worker support is experimental and may change in future releases.
|
||||
|
||||
> [!CAUTION]
|
||||
> **Caution**
|
||||
> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
> Enabling `BookPortableLinks = 'error'` will fail the build if any markdown link targets are missing.
|
||||
|
||||
@@ -4,73 +4,62 @@ title: KaTeX
|
||||
|
||||
# KaTeX
|
||||
|
||||
KaTeX shortcode let you render math typesetting in markdown document. See [KaTeX](https://katex.org/)
|
||||
Render math typesetting with [KaTeX](https://katex.org/). The library is loaded automatically on first use.
|
||||
|
||||
{{% hint info %}}
|
||||
**Override KaTeX initialization config**
|
||||
To override the [initialization config](https://katex.org/docs/options.html) for KaTeX,
|
||||
create a `katex.json` file in your `assets` folder!
|
||||
{{% /hint %}}
|
||||
|
||||
# Example
|
||||
{{< katex />}}
|
||||
|
||||
|
||||
## Activation
|
||||
KaTeX is activated on the page by first use of the shortcode or render block. you can force activation with empty `{{</* katex /*/>}}` and use delimiters defined in configuration in `assets/katex.json`.
|
||||
|
||||
## Rendering as block
|
||||
KaTeX is activated on the page by the first use of the shortcode or a `katex` code block. You can force activation with `{{</* katex /*/>}}`, then use delimiters anywhere on the page.
|
||||
|
||||
## Block Rendering
|
||||
|
||||
Three equivalent ways to render display math:
|
||||
|
||||
{{% columns %}}
|
||||
|
||||
```latex
|
||||
{{</* katex display=true >}}
|
||||
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||
{{< /katex */>}}
|
||||
```
|
||||
- **Shortcode**
|
||||
```tpl
|
||||
{{</* katex display=true >}}
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||
{{< /katex */>}}
|
||||
```
|
||||
|
||||
````latex
|
||||
```katex
|
||||
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||
```
|
||||
````
|
||||
- **Code block**
|
||||
````
|
||||
```katex
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||
```
|
||||
````
|
||||
|
||||
````latex
|
||||
$$
|
||||
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||
$$
|
||||
````
|
||||
|
||||
<--->
|
||||
|
||||
{{< katex display=true >}}
|
||||
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||
{{< /katex >}}
|
||||
|
||||
---
|
||||
|
||||
```katex
|
||||
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
$$
|
||||
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||
$$
|
||||
- **Dollar delimiters**
|
||||
```
|
||||
$$
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||
$$
|
||||
```
|
||||
|
||||
{{% /columns %}}
|
||||
|
||||
## Rendering inline
|
||||
When KaTeX is active on the page it is possible to write inline expressions.
|
||||
Result:
|
||||
|
||||
| Code | Output |
|
||||
| -- | -- |
|
||||
$$
|
||||
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||
$$
|
||||
|
||||
## Inline Rendering
|
||||
|
||||
| Syntax | Output |
|
||||
| -- | -- |
|
||||
| `{{</* katex >}}\pi(x){{< /katex */>}}` | {{< katex >}}\pi(x){{< /katex >}} |
|
||||
| `\\( \pi(x) \\)` | \\( \pi(x) \\) |
|
||||
|
||||
## Configuration
|
||||
KaTeX configuration could be adjusted by editing `assets/katex.json` file. For example to enabled inline delimiters `$..$` put content below into the file.
|
||||
|
||||
Override KaTeX options by creating `assets/katex.json`. For example, to enable `$...$` inline delimiters
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -83,3 +72,4 @@ KaTeX configuration could be adjusted by editing `assets/katex.json` file. For e
|
||||
}
|
||||
```
|
||||
|
||||
See [KaTeX options](https://katex.org/docs/options.html) for all available settings.
|
||||
|
||||
@@ -1,186 +1,69 @@
|
||||
# Mermaid Chart
|
||||
# Mermaid
|
||||
|
||||
[MermaidJS](https://mermaid-js.github.io/) is library for generating svg charts and diagrams from text.
|
||||
Render diagrams and charts with [Mermaid](https://mermaid.js.org/). The library is loaded automatically on first use.
|
||||
|
||||
{{% hint info %}}
|
||||
**Override Mermaid initialization config**
|
||||
To override the [initialization config](https://mermaid-js.github.io/mermaid/#/Setup) for Mermaid,
|
||||
create a `mermaid.json` file in your `assets` folder!
|
||||
{{% /hint %}}
|
||||
> [!TIP]
|
||||
> Override Mermaid initialization by creating `assets/mermaid.json` in your project.
|
||||
|
||||
## Example
|
||||
## Syntax
|
||||
|
||||
Use fenced code blocks (recommended) or the shortcode
|
||||
|
||||
````tpl
|
||||
```mermaid
|
||||
graph LR
|
||||
A --> B
|
||||
```
|
||||
````
|
||||
|
||||
```tpl
|
||||
{{</* mermaid [class="..."] */>}}
|
||||
graph LR
|
||||
A --> B
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
{{% columns %}}
|
||||
- ````tpl
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
State1: The state with a note
|
||||
note right of State1
|
||||
Important information! You can write
|
||||
notes.
|
||||
end note
|
||||
State1 --> State2
|
||||
note left of State2 : This is the note to the left.
|
||||
```
|
||||
````
|
||||
|
||||
- ```mermaid
|
||||
stateDiagram-v2
|
||||
State1: The state with a note
|
||||
note right of State1
|
||||
Important information! You can write
|
||||
notes.
|
||||
end note
|
||||
State1 --> State2
|
||||
note left of State2 : This is the note to the left.
|
||||
```
|
||||
{{% /columns %}}
|
||||
|
||||
{{% columns %}}
|
||||
- ```tpl
|
||||
{{</* mermaid [class="..."] >}}
|
||||
stateDiagram-v2
|
||||
State1: The state with a note
|
||||
note right of State1
|
||||
Important information! You can write
|
||||
notes.
|
||||
end note
|
||||
State1 --> State2
|
||||
note left of State2 : This is the note to the left.
|
||||
{{< /mermaid */>}}
|
||||
flowchart TD
|
||||
A[Content Files] --> B[Hugo Build]
|
||||
B --> C[HTML Output]
|
||||
B --> D[Search Index]
|
||||
B --> E[RSS Feed]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Browser->>Hugo: Request page
|
||||
Hugo->>Theme: Apply template
|
||||
Theme->>Browser: Rendered HTML
|
||||
Browser->>Browser: Load shortcodes
|
||||
```
|
||||
|
||||
- ```mermaid
|
||||
pie title Theme Assets
|
||||
"SCSS" : 8
|
||||
"HTML Templates" : 30
|
||||
"JavaScript" : 3
|
||||
"i18n Files" : 35
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gitGraph
|
||||
commit id: "init"
|
||||
commit id: "add theme"
|
||||
branch feature
|
||||
checkout feature
|
||||
commit id: "add docs"
|
||||
commit id: "add config"
|
||||
checkout main
|
||||
merge feature
|
||||
commit id: "deploy"
|
||||
```
|
||||
|
||||
- {{< mermaid >}}
|
||||
stateDiagram-v2
|
||||
State1: The state with a note
|
||||
note right of State1
|
||||
Important information! You can write
|
||||
notes.
|
||||
end note
|
||||
State1 --> State2
|
||||
note left of State2 : This is the note to the left.
|
||||
{{< /mermaid >}}
|
||||
{{% /columns %}}
|
||||
|
||||
## Diagrams
|
||||
Explore more diagrams and syntax on Mermaid [documentation page](https://mermaid.js.org/syntax/flowchart.html).
|
||||
|
||||
{{% columns %}}
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
State1: The state with a note
|
||||
note right of State1
|
||||
Important information! You can write
|
||||
notes.
|
||||
end note
|
||||
State1 --> State2
|
||||
note left of State2 : This is the note to the left.
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->>John: Hello John, how are you?
|
||||
John-->>Alice: Great!
|
||||
Alice-)John: See you later!
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
title: Animal example
|
||||
---
|
||||
classDiagram
|
||||
note "From Duck till Zebra"
|
||||
Animal <|-- Duck
|
||||
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
title: Simple sample
|
||||
---
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
<--->
|
||||
|
||||
```mermaid
|
||||
---
|
||||
title: Example Git diagram
|
||||
---
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
section Another
|
||||
Task in Another :2014-01-12, 12d
|
||||
another task :24d
|
||||
```
|
||||
|
||||
```mermaid
|
||||
pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
```
|
||||
|
||||
```mermaid
|
||||
quadrantChart
|
||||
title Reach and engagement of campaigns
|
||||
x-axis Low Reach --> High Reach
|
||||
y-axis Low Engagement --> High Engagement
|
||||
quadrant-1 We should expand
|
||||
quadrant-2 Need to promote
|
||||
quadrant-3 Re-evaluate
|
||||
quadrant-4 May be improved
|
||||
Campaign A: [0.3, 0.6]
|
||||
Campaign B: [0.45, 0.23]
|
||||
Campaign C: [0.57, 0.69]
|
||||
Campaign D: [0.78, 0.34]
|
||||
Campaign E: [0.40, 0.34]
|
||||
Campaign F: [0.35, 0.78]
|
||||
```
|
||||
|
||||
{{% /columns %}}
|
||||
Explore more diagram types on the [Mermaid documentation](https://mermaid.js.org/syntax/flowchart.html).
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
bookHidden: true
|
||||
---
|
||||
|
||||
# Section
|
||||
|
||||
Section renders pages in section as definition list, using title and description. Optional param `summary` can be used to show or hide page summary
|
||||
|
||||
## Example
|
||||
|
||||
```tpl
|
||||
{{</* section [summary] */>}}
|
||||
```
|
||||
|
||||
{{<section summary>}}
|
||||
@@ -1,6 +0,0 @@
|
||||
# First page
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
<!--more-->
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
@@ -1,6 +0,0 @@
|
||||
# Second Page
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
<!--more-->
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
@@ -1,35 +1,31 @@
|
||||
# Steps
|
||||
|
||||
Steps shortcode styles numbered list as series of points for better content organization.
|
||||
Render an ordered list as a series of numbered steps with visual connectors.
|
||||
|
||||
## Syntax
|
||||
|
||||
```tpl
|
||||
{{%/* steps */%}}
|
||||
1. ## Suspendisse sed congue orci.
|
||||
...
|
||||
1. ## Step Title
|
||||
Step description...
|
||||
|
||||
2. ## Maecenas scelerisque sem.
|
||||
...
|
||||
|
||||
3. ## Etiam risus purus.
|
||||
...
|
||||
|
||||
4. ## Curabitur sed lacinia velit.
|
||||
...
|
||||
2. ## Step Title
|
||||
Step description...
|
||||
{{%/* /steps */%}}
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
{{% steps %}}
|
||||
1. ## Suspendisse sed congue orci.
|
||||
Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie. Curabitur pellentesque sodales ipsum, sed efficitur libero euismod ac. Donec sit amet erat nunc. Suspendisse porta nisl velit, quis auctor massa commodo nec. Donec sollicitudin tellus sit amet massa condimentum luctus. Etiam molestie at ante et convallis.
|
||||
1. ## Create your site
|
||||
Run `hugo new site my-docs` to scaffold a new Hugo project.
|
||||
|
||||
2. ## Maecenas scelerisque sem.
|
||||
Maecenas scelerisque sem a tellus dignissim, in sodales neque varius. Integer quis ex quis sem posuere consequat. Morbi interdum ex et mollis maximus. Proin sed quam nisl. Donec tempus non risus vel auctor. Ut ultricies vitae urna in laoreet. Phasellus cursus nunc sit amet sodales euismod. Suspendisse potenti.
|
||||
2. ## Add the theme
|
||||
Clone or add hugo-book as a submodule in your `themes/` directory.
|
||||
|
||||
3. ## Etiam risus purus.
|
||||
Etiam risus purus, suscipit a orci quis, mollis mollis ante. Vestibulum congue nisl malesuada tortor egestas, a lobortis tellus dictum. Nam nec ultrices justo. Donec malesuada dignissim posuere.
|
||||
3. ## Write content
|
||||
Add markdown files under `content/docs/`. Each file becomes a page in the sidebar menu.
|
||||
|
||||
4. ## Curabitur sed lacinia velit.
|
||||
Curabitur sed lacinia velit. Nullam sed ante non quam lobortis hendrerit. Phasellus elementum, erat sit amet imperdiet pulvinar, odio massa lobortis ipsum, in tincidunt metus dolor vel ligula.
|
||||
{{% /steps %}}
|
||||
4. ## Deploy
|
||||
Run `hugo` to build the site. The output is in the `public/` directory, ready for any static hosting.
|
||||
{{% /steps %}}
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
# Tabs
|
||||
|
||||
Tabs let you organize content by context, for example installation instructions for each supported platform.
|
||||
Organize content by context, for example installation instructions for each supported platform.
|
||||
|
||||
## Syntax
|
||||
|
||||
```tpl
|
||||
{{</* tabs */>}}
|
||||
{{%/* tab "MacOS" */%}} # MacOS Content {{%/* /tab */%}}
|
||||
{{%/* tab "Linux" */%}} # Linux Content {{%/* /tab */%}}
|
||||
{{%/* tab "Windows" */%}} # Windows Content {{%/* /tab */%}}
|
||||
{{%/* tab "First" */%}} Markdown content {{%/* /tab */%}}
|
||||
{{%/* tab "Second" */%}} Markdown content {{%/* /tab */%}}
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
@@ -14,37 +15,22 @@ Tabs let you organize content by context, for example installation instructions
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{% tab "MacOS" %}}
|
||||
# MacOS
|
||||
|
||||
This is tab **MacOS** content.
|
||||
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
|
||||
Miseratus fonte Ditis conubia.
|
||||
{{% tab "macOS" %}}
|
||||
```shell
|
||||
brew install hugo
|
||||
```
|
||||
{{% /tab %}}
|
||||
|
||||
{{% tab "Linux" %}}
|
||||
# Linux
|
||||
|
||||
This is tab **Linux** content.
|
||||
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
|
||||
Miseratus fonte Ditis conubia.
|
||||
```shell
|
||||
sudo snap install hugo
|
||||
```
|
||||
{{% /tab %}}
|
||||
|
||||
{{% tab "Windows" %}}
|
||||
# Windows
|
||||
|
||||
This is tab **Windows** content.
|
||||
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
|
||||
Miseratus fonte Ditis conubia.
|
||||
```shell
|
||||
choco install hugo-extended
|
||||
```
|
||||
{{% /tab %}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -1,106 +0,0 @@
|
||||
---
|
||||
bookHidden: true
|
||||
---
|
||||
|
||||
{{% columns %}}
|
||||
- ## Asciinema
|
||||
{{< asciinema
|
||||
cast="asciinema-627097.cast"
|
||||
loop=true
|
||||
autoplay=true
|
||||
speed=2 >}}
|
||||
|
||||
- ## Badge
|
||||
{{<badge title="Title" value="Value">}}
|
||||
|
||||
- ## Button
|
||||
{{<button href="/">}}A Button{{</button>}}
|
||||
|
||||
- ## Card
|
||||
{{<card href="/docs/shortcodes/experimental/cards">}}
|
||||
**Markdown**
|
||||
Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa.
|
||||
{{</card>}}
|
||||
|
||||
- ## Details
|
||||
{{<details "Title" open>}}
|
||||
## Markdown content
|
||||
Lorem markdownum insigne...
|
||||
{{</details>}}
|
||||
|
||||
- ## Hint
|
||||
{{<hint danger>}}
|
||||
**Markdown content**
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
{{</hint>}}
|
||||
|
||||
- ## Image
|
||||
{{<image src="placeholder.svg" alt="A placeholder" title="A placeholder" loading="lazy">}}
|
||||
|
||||
- ## KaTeX
|
||||
{{<katex display="true">}}
|
||||
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||
{{</katex>}}
|
||||
|
||||
- ## Mermaid
|
||||
{{<mermaid>}}
|
||||
stateDiagram-v2
|
||||
State1: The state with a note
|
||||
note right of State1
|
||||
Important information! You can write
|
||||
notes.
|
||||
end note
|
||||
State1 --> State2
|
||||
note left of State2 : This is the note to the left.
|
||||
{{</mermaid>}}
|
||||
|
||||
- ## Steps
|
||||
{{<steps>}}
|
||||
1. ## Suspendisse sed congue orci.
|
||||
Suspendisse sed congue orci, eu congue metus.
|
||||
|
||||
2. ## Maecenas scelerisque sem.
|
||||
Maecenas scelerisque sem a tellus dignissim.
|
||||
|
||||
3. ## Etiam risus purus.
|
||||
Etiam risus purus, suscipit a orci quis.
|
||||
|
||||
4. ## Curabitur sed lacinia velit.
|
||||
Curabitur sed lacinia velit. Nullam sed ante non quam.
|
||||
{{</steps>}}
|
||||
|
||||
- ## Tabs
|
||||
{{<tabs>}}
|
||||
{{<tab "MacOS">}}
|
||||
# MacOS
|
||||
|
||||
This is tab **MacOS** content.
|
||||
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
|
||||
Miseratus fonte Ditis conubia.
|
||||
{{</tab>}}
|
||||
{{<tab "Linux">}}
|
||||
# Linux
|
||||
|
||||
This is tab **Linux** content.
|
||||
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
|
||||
Miseratus fonte Ditis conubia.
|
||||
{{</tab>}}
|
||||
{{<tab "Windows">}}
|
||||
# Windows
|
||||
|
||||
This is tab **Windows** content.
|
||||
|
||||
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
|
||||
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
|
||||
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
|
||||
Miseratus fonte Ditis conubia.
|
||||
{{</tab>}}
|
||||
{{</tabs>}}
|
||||
{{% /columns %}}
|
||||
Reference in New Issue
Block a user