[#11] Add blog post bundle archetype

README.md

@@ -11,3 +11,22 @@ Start the Hugo server with drafts enabled:
 ```
 hugo server -D
 ```
+
+## Create a blog post
+
+From within the `website` directory:
+
+```
+hugo new --kind blog-bundle blog/post-name
+```
+
+### Blog post checklist
+
+Before publishing a new blog post:
+
+- [ ] Replace `title` in the front matter with your post title
+- [ ] Replace `description` in the front matter with a short 50-160 character summary. See [Meta Description](https://moz.com/learn/seo/meta-description) for guidelines
+- [ ] Replace  `tags` in the front matter with post-relevant tags
+- [ ] Replace references to `placeholder` images in `index.md` (note `image` in front matter is used for Open Graph image)
+- [ ] Add `png` and `webp` images as appropriate
+- [ ] Change `draft` front matter to `true`

archetypes/blog-bundle/index.md

@@ -0,0 +1,12 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+description: Summary between 50 and 160 characters
+image: placeholder.png
+tags:
+- relevant
+- tags
+draft: true
+---
+
+{{< picture image="placeholder.png" alt="Placeholder" >}}

themes/yvant/layouts/shortcodes/picture.html

@@ -0,0 +1,9 @@
+{{ $image := .Get "image"}}
+{{ $type_arr := split $image "." }}
+{{ $srcbase := index $type_arr 0 }}
+
+<picture>
+  <source srcset="{{$srcbase}}.webp" type="image/webp">
+  <source srcset="{{$srcbase}}.jp2" type="image/jp2">
+  <img src="{{.Get `image`}}" alt="{{.Get `alt` }}">
+</picture>