commit 80cd7cf8f1a96874a31b1adee321e11ec825bd07
parent 82e5f2ccabcf7e5bb282dcc18fd69df193ba4706
Author: Robert Lützner <robert.luetzner@pm.me>
Date: Thu, 23 Feb 2023 20:04:33 +0000
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>
Diffstat:
5 files changed, 30 insertions(+), 6 deletions(-)
diff --git a/README.md b/README.md
@@ -26,8 +26,30 @@ 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).
+## 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:
+
+
+
## Notes
- Benjamin loves when new sites and projects pop up using the readable.css framework!
- If you've built a complete site using this theme, submit an issue to the [original repo](https://codeberg.org/Freedom-to-Write/readable.css) with the URL of your site to be featured in the project's README.
- - Projects like this and other non-website uses of the framework, such as adapting it to other static site generators, can be featured on the page [Unofficial Related Projects (that are awesome)](https://codeberg.org/Freedom-to-Write/readable.css/wiki/Unofficial-Related-Projects-%28that-are-awesome%29). Go mention [@freedomtowrite@fosstodon.org](https://fosstodon.org/@freedomtowrite) to be featured there!
-\ No newline at end of file
+ - Projects like this and other non-website uses of the framework, such as adapting it to other static site generators, can be featured on the page [Unofficial Related Projects (that are awesome)](https://codeberg.org/Freedom-to-Write/readable.css/wiki/Unofficial-Related-Projects-%28that-are-awesome%29). Go mention [@freedomtowrite@fosstodon.org](https://fosstodon.org/@freedomtowrite) to be featured there!
diff --git a/docs/blockquote_vs_aside.png b/docs/blockquote_vs_aside.png
Binary files differ.
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -2,5 +2,7 @@
<h1>{{ .Title }}</h1>
{{ partial "metadata.html" . }}
<!-- <br><br> -->
+<article>
{{ .Content }}
-{{ end }}
-\ No newline at end of file
+</article>
+{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,5 +1,7 @@
{{ define "main" }}
{{ partial "metadata.html" . }}
<!-- <br><br> -->
+<article>
{{ .Content }}
-{{ end }}
-\ No newline at end of file
+</article>
+{{ end }}
diff --git a/layouts/shortcodes/aside.html b/layouts/shortcodes/aside.html
@@ -0,0 +1 @@
+<aside>{{ .Inner | markdownify }}</aside>
