YAML usage in PocoCMS

The optional front matter used in PocoCMS documents follows a human-readable configuration language called YAML. The front matter is considered to be a separate document from the article itself, even though they're in the same file: the front matter is a YAML document in its own right. The front matter is never displayed. It determines how the document gets displayed and rendered into HTML.

Here's an example:

Filename: index.md
---
pagetheme: pocodocs
hide: header
---
hello, world.

As you've probably figured out, this will display a page with the article contents hello, word., surrounded by an informal, colorful theme without its header.

The separate YAML document is between the --- lines. Those lines are delimiters. They are part of neither document. They act solely to enclose the YAML.

After the second such --- line, the YAML document ends and your Markdown article begins.

Avoid blank YAML sections

The YAML specification warns against constructions like the example below, where the entire YAML document is empty but still surrounded by delimiters:

Filename: badyaml.doc
---
---
↑ Just remove these if they're empty

More on YAML at a high level

The following section describes how PocoCMS uses slighly uconventional YAML conventions.

For example, here's the complete text of a page that gets displayed without a header:

---
hide: header
---
hello, world.

The YAML portion of the document is a single rule called hide. It consists of a key/value pair separated with a colon.

Rules that end in S take lists, not just a single value

If you see a key ending in s, it means you can list one or more values. They should start with a - and a space, and should each take exactly one line. For example, all theme README.md files contain a list of stylesheets required for the theme:

  stylesheets:
  - "../../css/base.css"
  - "https://unpkg.com/mvp.css@1.12/mvp.css"
  - "pasteboard.css"

Double quotes everywere!

Here a rule showing why many rule values are double-quoted in PocoCMS, even though you don't see this in many other YAML files.

---
styles:
- "p {font-family:'Hoefler Text', 'Nimbus Roman No9 L Regular', serif;}"
---

This causes the body text for paragraphs to choose fonts from the list given, in decreasing priority order. Your browser wil search for the font named Hoefler Text when rendering paragraphs. If Hoefler Text can't be found, it will attempt to use Nimbus Roman No9 L Regular (hell of a font name) If all those fail it will fall back to the serif font, which is internal to your browser and which is guaranteed to be available.

Sharp-eyed YAML users will notice that in both the case of header above for the hide rule, and styles for style tags, the quotes surrounding the value aren't strictly necessary according to YAML rules. For example:

  stylesheets:
  - "https://unpkg.com/mvp.css@1.12/mvp.css"

The reason for this is that sometime characters used by CSS seem to cause problems with the Go template engine or the Go YAML parser, notably the curly brace characters { and }.

Because of that we suggest double-quoting values (the right side of a rule) whenever there might be some ambiguity. It eliminates a whole class of problems that can be otherwise hard to track down.

Comments

YAML files let you add notes or temporary strike out lines using comments. A comment is any line starting with the # character. It causes YAML to ignore the rest of the line. Here are a few examples of how it might be used.

Comments in a Markdown page

---
styles:
# Old version:
# "p {font-family:sans-serif;}"
# New version:
- "p {font-family:'Hoefler Text', 'Nimbus Roman No9 L Regular', serif;}"
---
# Welcome!

hello, world.

Although this appears to be a Markdown page, remember that the Markdown only starts after the second --- delimiter. Everything between those delimiters is YAML, and # followed by a space specifies that YAML ignores anything that space. That's a comment.

Comments in a theme READ.me file

Here' another example of YAML comments, this time in a theme READE.me page. Once again, comments appear in the YAML portion, not the markdown.

---
# Need better branding than just "Informer"
branding: Informer 

# Original theme file is header.md
header: newheader.md

# Disable aside in the theme
#aside: aside.md

stylesheets:
# Consider making it a narrow theme
#- ../../css/skinny.css
- "informer.css"
---