feat: add 'aside' as a shortcode (#6)

The README has been updated to show a code example of both, including an
exemplary screenshot.

Since Hugo 0.55, we have to use `markdownify` in shortcodes that contain
HTML elements. At least we have to, if we want to render markdown code
inside the HTML element.

To use the `<aside>` element, we have to wrap our content in an
`<article>` tag.

This fixes #4.

Co-authored-by: Robert Lützner <robert.luetzner@iternity.com>
This commit is contained in:
Robert Lützner 2023-02-23 20:04:33 +00:00 committed by GitHub
parent 82e5f2ccab
commit 80cd7cf8f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 30 additions and 3 deletions

View File

@ -26,6 +26,28 @@ For more information on starting a Hugo website and using custom themes, refer t
Freedom to Write has provided some awesome guides on writing HTML that works automatically with the formatting of Readable. For a complete HTML page guide on writing custom pages, see [Overall Structure](https://codeberg.org/Freedom-to-Write/readable.css/wiki/Overall-Structure). For some neat tips that may make life easier working with this style sheet, read [Quick Tips](https://codeberg.org/Freedom-to-Write/readable.css/wiki/Quick-Tips). Freedom to Write has provided some awesome guides on writing HTML that works automatically with the formatting of Readable. For a complete HTML page guide on writing custom pages, see [Overall Structure](https://codeberg.org/Freedom-to-Write/readable.css/wiki/Overall-Structure). For some neat tips that may make life easier working with this style sheet, read [Quick Tips](https://codeberg.org/Freedom-to-Write/readable.css/wiki/Quick-Tips).
## Shortcodes
### aside
readable.css prefers the `<aside>` HTML element over blockquotes. This theme supports both.
```text
> This is a blockquote.
>
> This is a default **markdown** element and supports formatting inside it.
{{< aside >}}
This is an aside element.
You can use **markdown** formatting inside it.
{{</ aside >}}
```
The above code generates the following output:
![Comparing a blockquote to an aside. The blockquote has a thin bar on it's left, while the aside element is inside a nice box with rounded corners.](/docs/blockquote_vs_aside.png)
## Notes ## Notes
- Benjamin loves when new sites and projects pop up using the readable.css framework! - Benjamin loves when new sites and projects pop up using the readable.css framework!

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

View File

@ -2,5 +2,7 @@
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ partial "metadata.html" . }} {{ partial "metadata.html" . }}
<!-- <br><br> --> <!-- <br><br> -->
<article>
{{ .Content }} {{ .Content }}
</article>
{{ end }} {{ end }}

View File

@ -1,5 +1,7 @@
{{ define "main" }} {{ define "main" }}
{{ partial "metadata.html" . }} {{ partial "metadata.html" . }}
<!-- <br><br> --> <!-- <br><br> -->
<article>
{{ .Content }} {{ .Content }}
</article>
{{ end }} {{ end }}

View File

@ -0,0 +1 @@
<aside>{{ .Inner | markdownify }}</aside>