commit 8516268663820d9973d5fda1c18140440c38c768
parent 11a5fd69c362abc6509ec20458258a7434081b42
Author: FIGBERT <figbert@figbert.com>
Date: Thu, 27 Aug 2020 21:02:11 -0700
:speech_balloon: Add template posts
Diffstat:
5 files changed, 303 insertions(+), 0 deletions(-)
diff --git a/content/posts/_index.md b/content/posts/_index.md
@@ -0,0 +1,7 @@
++++
+title = "Posts"
+sort_by = "date"
+template = "page-list.html"
+page_template = "article.html"
++++
+
diff --git a/content/posts/emoji-support.md b/content/posts/emoji-support.md
@@ -0,0 +1,52 @@
++++
+title = "Emoji Support"
+description = "Guide to emoji usage in d3c3nt"
+date = 2020-08-25
++++
+
+Emoji can be used with the d3c3nt theme using the `emoji` shortcode in your markdown files. d3c3nt's emojis are provided by [OpenMoji][openmoji] for a consistent,
+stylized look across all platforms and embedded as inline `svg`s to reduce network requests.<!-- more -->
+
+## Shortcode
+
+The emoji shortcode expects two parameters, `id` and `alt`.
+
+The `id` parameter is the Unicode codepoint/s of the emoji. You can find this either from the Unicode parameter of an
+emoji as listed on [the OpenMoji library][lib], or from the "Codepoints" section on [Emojipedia][emojipedia] (the section after "U+". For multiple codepoints, combine them
+with a dash).
+
+The `alt` parameter provides a description of the image for better accessibility.
+
+## Examples
+### Unicode
+**Grinning Face:** {{ emoji(id="1F600", alt="A grinning face") }}
+```rs
+{{/* emoji(id="1F600", alt="A grinning face") */}}
+```
+**Flag of Antarctica:** {{ emoji(id="1F1E6-1F1F6", alt="Flag of Antarctica") }}
+```rs
+{{/* emoji(id="1F1E6-1F1F6", alt="Flag of Antarctica") */}}
+```
+### Extra Unicode
+**Hacker Cat:** {{ emoji(id="1F431-200D-1F4BB", alt="Hacker Cat") }}
+```rs
+{{/* emoji(id="1F431-200D-1F4BB", alt="Hacker Cat") */}}
+```
+### Extra OpenMoji
+**Flag of the United Federation of Planets:** {{ emoji(id="1F3F3-FE0F-200D-1F7E6-200D-1F30C", alt="Flag of the United Federation of Planets") }}
+```rs
+{{/* emoji(id="1F3F3-FE0F-200D-1F7E6-200D-1F30C", alt="Flag of the United Federation of Planets") */}}
+```
+**Github Logo:** {{ emoji(id="E045", alt="Github Logo") }}
+```rs
+{{/* emoji(id="E045", alt="Github Logo") */}}
+```
+**Web Syndication:** {{ emoji(id="E381", alt="Web Syndication") }}
+```rs
+{{/* emoji(id="E381", alt="Web Syndication") */}}
+```
+
+[openmoji]: https://openmoji.org/
+[lib]: https://openmoji.org/library/
+[emojipedia]: https://emojipedia.org/
+
diff --git a/content/posts/markdown-syntax.md b/content/posts/markdown-syntax.md
@@ -0,0 +1,133 @@
++++
+title = "Markdown Syntax Guide"
+description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
+date = 2020-08-27
++++
+
+This article offers a sample of basic Markdown syntax that can be used in Zola files. It also shows whether basic HTML elements are decorated with CSS in a Zola theme.
+<!-- more -->
+
+## Headings
+
+The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
+
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+
+## Paragraph
+
+Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis
+aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus
+ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad wuibus
+unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
+
+Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
+
+## Blockquotes
+
+The blockquote element represents content that is quoted from another source, optionally with a citation in a `cite` element, and optionally with in-line changes such as
+annotations and abbreviations.
+
+#### Blockquote without attribution
+
+> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
+> **Note** that you can use *Markdown syntax* within a blockquote.
+
+#### Blockquote with attribution
+
+> It's really hard to think of text to put here, because there are so many dead memes that would disrupt the flow of this article. You should use this theme.<br/>
+> — <cite>Big Chungus</cite>
+
+## Footnotes
+
+Zola supports footnotes in Markdown via `pulldown-cmark`.[^1] Reference them in your content, and then write whatever you want at the bottom of the page.
+
+## Tables
+
+Tables aren't part of the core Markdown spec, but Zola supports supports them out-of-the-box.
+
+ Name | Age
+--------|------
+ Bob | 27
+ Alice | 23
+
+#### Inline Markdown within tables
+
+| Italics | Bold | Code |
+| -------- | -------- | ------ |
+| *italics* | **bold** | `code` |
+
+## Code Blocks
+
+#### Code block with backticks
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example HTML5 Document</title>
+</head>
+<body>
+ <p>Test</p>
+</body>
+</html>
+```
+
+#### Code block indented with four spaces
+
+ <!doctype html>
+ <html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Example HTML5 Document</title>
+ </head>
+ <body>
+ <p>Test</p>
+ </body>
+ </html>
+
+## List Types
+
+#### Ordered List
+
+1. First item
+2. Second item
+3. Third item
+
+#### Unordered List
+
+* List item
+* Another item
+* And another item
+
+#### Nested list
+
+* Fruit
+ * Apple
+ * Orange
+ * Banana
+* Dairy
+ * Milk
+ * Cheese
+
+## Other Elements — abbr, sub, sup, kbd, mark
+
+<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
+
+H<sub>2</sub>O
+
+X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
+
+Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
+
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
+---
+[^1]: [`pulldown-cmark`](https://github.com/raphlinus/pulldown-cmark) is a CommonMark parser written in Rust. For the time being, footnotes do not link back to the text they
+began from. I expect this to change eventually, but it has to be implemented upstream from Zola.
+
diff --git a/content/posts/placeholder-text.md b/content/posts/placeholder-text.md
@@ -0,0 +1,36 @@
++++
+title = "Placeholder Text"
+description = "Lorem Ipsum Dolor Si Amet"
+date = 2020-08-24
++++
+
+Lorem est tota propiore conpellat pectoribus de pectora summo.<!-- more --> Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque,
+furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque
+patulos Dryopen deorum.
+
+1. Exierant elisi ambit vivere dedere
+2. Duce pollice
+3. Eris modo
+4. Spargitque ferrea quos palude
+
+Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
+
+1. Comas hunc haec pietate fetum procerum dixit
+2. Post torum vates letum Tiresia
+3. Flumen querellas
+4. Arcanaque montibus omnes
+5. Quidem et
+
+# Vagus elidunt
+
+Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque
+creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
+
+Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque
+tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat,
+sui et.
+
+Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx
+ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante
+urbem Propoetides **parte**.
+
diff --git a/content/posts/rich-content.md b/content/posts/rich-content.md
@@ -0,0 +1,75 @@
++++
+title = "Rich Content"
+description = "A brief description of Hugo Shortcodes"
+date = 2020-08-26
++++
+
+d3c3nt ships with several custom shortcodes to augment CommonMark and add additional functionality to your posts, in addition to those [already provided by Zola][built-in].
+`video`, `image`, `gif`, `audio`, and `emoji` were created as simple, privacy-friendly tools for you to use in your markdown.<!-- more -->
+
+## Video
+
+The `video` shortcode takes an array of strings called `sources` and returns a `<video>` tag. Each string in the `sources` array should be a path to a video file of a different
+type (`webm`, `mp4`, etc). Each individual source is then converted into a `<source>` tag, and the element is returned.
+
+### Usage
+```rs
+{{/* video(sources=["example.webm", "example.mp4"]) */}}
+```
+### Output
+```html
+{{ video(sources=["example.webm", "example.mp4"]) }}
+```
+
+## Image
+
+The `image` shortcode returns a `<picture>` tag and takes an array of strings called `sources`, and two strings called `fallback_path` and `fallback_alt`. Each string in the
+`sources` array should be a path to an image file of a different type (`webp`, `png`, `jpg`, etc), which is then converted into a `<source>` tag. `fallback_path` and
+`fallback_alt` are used to create an `<img>` tag for the browser to fall back on if the other formats aren't yet supported.
+
+### Usage
+```rs
+{{/* image(sources=["example.webp", "example.jpg", "example.png"], fallback_path="example.png", fallback_alt="Lorem Ipsum") */}}
+```
+### Output
+```html
+{{ image(sources=["example.webp", "example.jpg", "example.png"], fallback_path="example.png", fallback_alt="Lorem Ipsum") }}
+```
+
+## GIF
+
+The `gif` shortcode is exactly the same as the [video shortcode][video] – it takes an array of strings called `sources` and returns a `<video>` tag. The only difference is in
+the exterior tag, which has four additional properties: `autoplay`, `loop`, `muted`, `playsinline`. Using the `<video>` tag in place of gifs allows for reduced file sizes, which
+is important to optimize UX, especially in regions where internet is slower or less reliable.
+
+### Usage
+```rs
+{{/* gif(sources=["example.webm", "example.mp4"]) */}}
+```
+### Output
+```html
+{{ gif(sources=["example.webm", "example.mp4"]) }}
+```
+
+## Audio
+
+The `audio` shortcode – similarly to the [video shortcode][video] – takes an array of strings called `sources` and returns an `<audio>` tag. Each string in the `sources` array
+should be a path to an audio file of a different type (`wav`, `ogg`, `mp3`, etc). Each individual source is then converted into a `<source>` tag, and the element is returned.
+
+### Usage
+```rs
+{{/* audio(sources=["example.wav", "example.ogg", "example.mp3"]) */}}
+```
+### Output
+```html
+{{ audio(sources=["example.wav", "example.ogg", "example.mp3"]) }}
+```
+
+## Emoji
+
+To learn how to use the `emoji` shortcode, check out the post on [emoji support in d3c3nt][emoji]!
+
+[built-in]: https://www.getzola.org/documentation/content/shortcodes/#built-in-shortcodes
+[video]: @/posts/rich-content.md#video
+[emoji]: @/posts/emoji-support.md
+
