Document creating content, setting og:image tags, and generating article images

Add section for creating content articles with hugo cli
Add section for setting non-default `og:image` header tags
Add section for generating article images with ImageMagick
Add section for organizing content pages

Jafner.dev/README.md

@@ -16,3 +16,63 @@
 - To insert a table of contents inline with the text, use the `{{% toc %}}` shortcode.
 - Tables of contents are configured under the `[markup]` configuration node in [`config.toml`](/config.toml).
 
+## Create a New Homelab or Project Article
+Use hugo's `hugo new content` command with the path (relative to root) to the content page for the new article. 
+
+Examples:
+- `hugo new content content/projects/my-new-project.md` This will create a new draft page with the title and date set smartly, as well as `draft = true`
+- `hugo new content content/projects/my-new-project/index.md` This will create a new draft page inside a page bundle, creating the bundle directory if needed. 
+
+## Set non-default `og:image` image for embedders
+To set the image that is used when other sites or services embed a link (e.g. Discord), we use the `ogimage` page param in the frontmatter. The value is the path to the desired image relative to the `static` directory. 
+
+Examples:
+- Unset `ogimage` tag will fall back to [`/static/img/logo.png`](/static/img/logo.png).
+- `ogimage = 'img/mobilebanner.png'` will use `/static/img/mobilebanner.png`.
+
+This is separate from any image content visible on the site itself, which makes it useful for preserving the cleanliness of the reading experience.
+
+## Generate article images with ImageMagick
+Assign the text to use for the article image to the `LOGOTEXT` variable. E.g. `LOGOTEXT="Jafner.dev"`
+
+```bash
+LOGOTEXT="Jafner.dev"
+wget -qO- "http://fonts.googleapis.com/css?family=Inter" |\
+grep -o "http://.*.ttf" |\
+xargs curl -o Inter.ttf &&\
+convert -size 1200x627 xc:#1b1c1d -pointsize 128 \
+    -font @Inter.ttf -fill #A9A9B3 -draw "text 50,360 '>$ ~/$LOGOTEXT'"\
+    -font "Noto-Sans-Mono-Regular" -fill #FE5186 -gravity East -draw "text 50,0 '█'"\
+    $LOGOTEXT.logo.png &&\
+rm Inter.ttf
+```
+
+And that will generate an image like:
+
+![](jafner.dev.logo.png)
+
+It can be a little finicky to make the text *look right*, especially getting the left-right spacing down. Use the following parameters to make changes:
+
+- `xc:#1b1c1d` sets the background color to the provided hex code.
+- `-pointsize 128` sets the font size of the text.
+- The first `-font @Inter.ttf` sets the font to [Inter](https://fonts.google.com/specimen/Inter), the preferred font for the site. 
+- The first `-fill #A9A9B3` sets the color for the text part of the logo.
+- The first `-draw "text 50,360 '>$ ~/$LOGOTEXT'"` draws the `>$ ~/` part of the logo, then uses the `$LOGOTEXT` variable for the proceeding text. The `text 50,360` describes the X,Y offset in pixels from the top-left of the image to begin drawing the text. 
+- The second `-font "Noto-Sans-Mono-Regular"` sets the font we need to use for Unicode character support. See the list of available fonts with `convert -list font | less`. If we don't need the cursor block, this entire line can be omitted.
+- The second `-fill #FE5186` sets the color of the [cursor block](https://www.compart.com/en/unicode/U+2588).
+- `-gravity East` sets the draw orientation to the middle of the right side of the frame. 
+- The second `-draw "text 50,0 '█'"` draws the unicode cursor block character 50 pixels X-offset (from the middle-right) 
+
+Hex codes:
+- Pink cursor block: #FE5186
+- Dark grey header background: #1A1B1C
+- Light grey header logo text: #A9A9B2
+
+# Organizing Content
+When creating new content, we gotta keep in mind a few of the systems that are dependent on organizational consistency.
+
+1. Use `slug = 'mypage'` to set the name that will be used in the URL, and in the dynamic logo at the top-left.
+   1. For `homelab` articles, this will be prepended with `/homelab/` already, so don't be redundant. E.g. don't use `slug = 'homelab-tour'`, use `slug = 'tour'`. The former will render as `/homelab/homelab-tour/` and the latter will render as `/homelab/tour/`
+2. Isn't `/homelab/` a type of `/projects/` ? Yes. But it's such a huge project that it has earned its own category.
+3. Titles should be either like `Homelab Tour: Reviewing the what, how, and why of my lab`, or `Esports-grade Overwatch 2 on Linux`. That is, either a very short title with an expounding subtitle, or a sufficiently self-descriptive title. 
+   1. Use a colon to separate subtitle.