mdales.tngl.sh
A work in progress attempt to make a dynamic version of my static website.
Page frontmatter#
Frontmatter gives you a place to store extra information in the page, which you can pull out during your rendering of the page yourself, but there are some particular keys that webplats itself recognised and will use:
| Key | Type | Usage |
|---|---|---|
| title | string | The title of the page |
| date | ISO 8601 date string | The date of publishing - typically used when ordering pages, which is reverse chronological. |
| draft | boolean | If both present and true then the page will not be included in routing. |
| titleimage | dict | Must contain both an image key, which is a relative path for the image, and alt key which is the image description for accessibility. This image will be used for thumbnails in the header and in section lists. |
| synopsis | string | A short description of the page's contents, typically for section lists. |
| scripts | list of strings | List of paths to javascript files that should be loaded in the page |
| resources | list of strings | Files besides the index.md that should be presented via URL |
| content | boolean | If this key exists and is marked false, then no route to the page will exist, but it will still be listed in the section. Makes it easy to build up sections where you want a list of things but those things shouldn't have a page. |
| tags | list of strings | Tags associated with the page. |
| aliases | list of strings | Alternative site relative URLs this page can be accessed via. These will generate 302 responses to the canonical version of the page. |
| in_feed | boolean | If this key exists and is marked false, the page will not appear in the RSS feed. |
| indexed | boolean | If this key exists and is marked false, the page will not appear in the section index. |
Shortcodes#
Whilst markdown is preferred, there are some Jekyll/Hugo style short codes supported:
| Shortcode | Args | Usage |
|---|---|---|
| audio | filename | Inserts an audio player into the page |
| chart | sytle, CSV filename, x-axis column, y-axis column | Insert a chart using vega-lite into page |
| compare | filename1, filename2 | Adds an image comparison slide |
| geojson | filename | Inserts a map with the data from the geojson displayed |
| img | filename, alt text | Inserts a raster image or SVG into the page |
| video | filename, thumbnail image filename | Inserts an HTML5 video player into the page |
| videoloop | filename, thumbnail image filename | Inserts an HTML5 video player into the page configured to loop |
| youtube | video code | Inserts a non-cookie based youtube embed |
Other extensions#
If you have D2 installed then you can use code blocks to include flow chart diagrams, like so:
```d2
direction: right
A -> B
A -> C
B -> D
C -> D
```