A flatter file structure (#21)

* Scaffold for moving posts to MD files

* Update feeds to work with markdown files

* Convert blog & meta-blog to flat files

* Convert savee to a provider

* Include site directory higher up

* Fix typo on CV

* Remove old font file

* Consume bookmarks v1 API

* Fix RSS feed:
XML does not allow whitespace at the start of a file

* Add in the rest of the markdown posts

* Fix JSON feed; RSS order.

* Tweak meta-post ordering

* Remove the need for a markdown() shortcode

.eleventy.js

@@ -14,19 +14,30 @@ module.exports = function (eleventyConfig) {
   const findByID = require("./src/_filters/findByID");
   const date = require("./src/_filters/date");
   const stars = require("./src/_filters/stars");
+  const depaginate = require("./src/_filters/dePaginated");
   eleventyConfig.addFilter("findByID", findByID);
   eleventyConfig.addFilter("formatDate", date);
   eleventyConfig.addFilter("starRating", stars);
+  eleventyConfig.addFilter("dePaginate", depaginate);
 
   const responsiveImage = require("./src/_shortcodes/responsiveImage");
-  const markdown = require("./src/_shortcodes/markdown");
+  const markdown = require("./src/_parsers/markdown");
   eleventyConfig.addShortcode("image", responsiveImage);
-  eleventyConfig.addShortcode("markdown", markdown);
+
+  eleventyConfig.addExtension("md", {
+    compile: async function (inputContent) {
+      const assets = await require("./src/_data/assets")();
+      return function () {
+        return markdown(inputContent, assets);
+      };
+    },
+  });
 
   return {
     dir: {
       input: "src",
     },
     htmlTemplateEngine: "njk",
+    markdownTemplateEngine: "njk",
   };
 };

src/_data/bookmarks.js

@@ -1,41 +1,32 @@
-const contentful = require("../_providers/contentful");
+const Cache = require("@11ty/eleventy-fetch");
 
 module.exports = async function bookmarks() {
-  const data = [
-    { title: "Current", bookmarks: [] },
-    { title: "2022", bookmarks: [] },
-    { title: "2021", bookmarks: [] },
-    { title: "2020", bookmarks: [] },
-    { title: "Archive", bookmarks: [] },
-  ];
-  const entries = await contentful.client
-    .getEntries({
-      content_type: "blogPost",
-      order: "-fields.publishDate",
-      limit: 1000,
-    })
-    .then((result) => result.items);
+  const credentials = Buffer.from(
+    `${process.env.BOOKMARKS_USER}:${process.env.BOOKMARKS_PASSWORD}`
+  ).toString("base64");
 
-  // Number the entries
-  entries.reverse().forEach((entry, i) => {
-    entry.fields.number = i + 1;
-  });
-  entries.reverse();
-
-  // Sort the entries into year sorted arrays
-  entries.forEach((entry) => {
-    const year = entry.fields.publishDate.split("-")[0];
+  const data = await Cache(`${process.env.BOOKMARKS_URL}/bookmarks`, {
+    duration: "1d",
+    type: "json",
+    fetchOptions: {
+      headers: {
+        Authorization: `Basic ${credentials}`,
+      },
+    },
+  }).then((json) => {
+    const result = {};
+    json.forEach((entry, i) => {
+      entry.number = i;
+      const date = new Date(entry.date);
+      const year = date.getFullYear();
+      if (typeof result[year] === "undefined") {
+        result[year] = [];
+      }
+      result[year].push(entry);
+    });
 
-    if (year === "2022") {
-      data[0].bookmarks.push(entry);
-      data[1].bookmarks.push(entry);
-    } else if (year === "2021") {
-      data[2].bookmarks.push(entry);
-    } else if (year === "2020") {
-      data[3].bookmarks.push(entry);
-    } else {
-      data[4].bookmarks.push(entry);
-    }
+    result.current = result["2022"];
+    return result;
   });
 
   return data;

src/_data/cv.json

@@ -13,7 +13,7 @@
     {
       "title": "Digital Designer",
       "period": "2015—2016",
-      "employer": "Condiment / Inn Style"
+      "employer": "FutureGov"
     },
     {
       "title": "Graphic Designer",

src/_data/navigation.json

@@ -35,7 +35,7 @@
         },
         {
           "name": "Blogroll",
-          "url": "/feeds",
+          "url": "/blogroll",
           "description": "A list of blogs I follow."
         }
       ]

src/_data/scrapbook.js

@@ -0,0 +1,7 @@
+const SaveeAPI = require("../_providers/savee");
+
+module.exports = async function scrapbook() {
+  const api = new SaveeAPI();
+
+  return api.getItems().then((json) => json.data);
+};

src/_filters/dePaginated.js

@@ -0,0 +1,10 @@
+module.exports = function dePaginated(input) {
+  let result = [];
+  const children = Object.keys(input);
+  children.forEach((child) => {
+    result.push(...input[child]);
+  });
+  result = result.reverse();
+
+  return result
+};

src/about.html → src/_includes/layouts/about.html

@@ -1,5 +1,5 @@
 ---
-layout: layout.html
+layout: layouts/default.html
 title: About
 theme: yellow
 ---
@@ -13,9 +13,21 @@ <h1 class="banner">
 {% set toc = ["History", "Experience", "Clients", "Skills", "Recognition"] %}
 {% include "toc.html" %}
 
+<figure class="columns flow | gap-xx-large">
+  <div class="grayscale-image | col-two-thirds">
+    {% set heroImage = assets | findByID("67sB2MPpzeoLerzcBcm6rk") %}
+    {% image heroImage, "threeQuarters" %}
+  </div>
+  <figcaption class="measure | push-down leading-crushed">
+    <small>
+      <strong class="tertiary-text">Image </strong>
+      {{ heroImage.fields.description }}
+    </small>
+  </figcaption>
+</figure>
+
 <article class="markdown | flow gap-xx-large" id="about">
-  {% set content = pages | findByID("gs1BugZQXA8mN7DniEOFx") %}
-  {% markdown content.fields.contentMarkdown, assets %}
+  {{ content | safe }}
 </article>
 
 <article class="columns | gap-xx-large">

src/colophon.html → src/_includes/layouts/colophon.html

@@ -1,29 +1,30 @@
 ---
-layout: layout.html
+layout: layouts/default.html
 title: Colophon
 theme: green
 ---
 
-{% set content = pages | findByID("3TxaAfROQOMMOtj5U6E4qG") %}
-
 <header class="flow | gap-x-large">
-  <h1 class="headline">{{ content.fields.title }}</h1>
+  <h1 class="headline">Colophon</h1>
   <section class="markdown">
-    {% markdown content.fields.descriptionMarkdown %}
+    <p>
+      This is a development blog, also a list of people, resources and tools
+      that have made this site what it is. Check back regularly, as I try to keep
+      this up-to-date, when I get time.
+    </p>
   </section>
   <hr>
 </header>
 
 <article class="flow | gap-xx-large">
   <div id="updates" class="gap-large">
     <h2>Updates</h2>
-    {% set posts = metaPosts %}
-    {% set postParent = '/colophon' %}
+    {% set posts = collections.metapost | reverse %}
     {% include "posts.html" %}
     {% include "commits.html" %}
     <hr />
   </div>
   <section id="notes" class="markdown | flow">
-    {% markdown content.fields.contentMarkdown %}
+    {{ content | safe }}
   </section>
 </article>

src/_includes/layouts/post.html

@@ -0,0 +1,12 @@
+---
+layout: layouts/default.html
+---
+
+{% from "stats.html" import stats %}
+<header class="flow | gap-x-large">
+  <h1 class="headline | measure | gap-large">{{ title }}</h1>
+  {{ stats(updatedDate = date, readableContent = content ) }}
+</header>
+<article class="markdown | flow | gap-xx-large">
+  {{ content | safe }}
+</article>

src/uses.html → src/_includes/layouts/uses.html

@@ -1,15 +1,18 @@
 ---
-layout: layout.html
+layout: layouts/default.html
 title: Uses
 theme: yellow
 ---
 
-{% set content = pages | findByID("5SoTrD2jI0S0AhFkkEDheb") %}
-
 <header class="flow | hero | gap-x-large">
-  <h1 class="headline">{{ content.fields.title }}</h1>
+  <h1 class="headline">Uses</h1>
   <section class="markdown">
-    {% markdown content.fields.descriptionMarkdown %}
+    <p>
+      This is a fairly living list of my design, development and personal setups.
+      Including software, hardware and as much detail in between. This page
+      follows many of those who have contributed to
+      <a href="https://uses.tech" target="_blank">uses.tech</a>
+    </p>
   </section>
   <hr>
 </header>
@@ -27,5 +30,5 @@ <h1 class="headline">{{ content.fields.title }}</h1>
 </article>
 
 <article class="markdown | flow | gap-xx-large">
-  {% markdown content.fields.contentMarkdown %}
+  {{ content | safe }}
 </article>

src/_includes/posts.html

@@ -1,14 +1,11 @@
 <ol class="flow | gap-large">
   {% for post in posts %}
   <li class="post | horizontal">
-    <a
-      href="{{ postParent }}/post/{{ post.fields.slug }}/"
-      aria-label="Post: {{ post.fields.title }}"
-    >
-      {{ post.fields.title }}
+    <a href="{{ post.url }}">
+      {{ post.data.title }}
     </a>
     <hr class="grow" />
-    <p class="tertiary-text">{{ post.sys.createdAt | formatDate("long") }}</p>
+    <p class="tertiary-text">{{ post.data.date | formatDate("long") }}</p>
   </li>
   {% endfor %}
 </ol>

src/_includes/scrapbook.html

@@ -17,7 +17,7 @@ <h2>Scrapbook</h2>
   </header>
 
   <div class="masonry">
-    {% for item in savee %}
+    {% for item in scrapbook %}
     <figure>
       <a href="{{ item.pageURL if item.pageURL else 'https://savee.it' + item.url }}" >
         <img

src/_shortcodes/markdown.js → src/_parsers/markdown.js

@@ -6,7 +6,7 @@ const externalLinksPlugin = require("markdown-it-external-links");
 const Token = require("markdown-it/lib/token");
 
 const findByID = require("../_filters/findByID");
-const responsiveImage = require("./responsiveImage");
+const responsiveImage = require("../_shortcodes/responsiveImage");
 
 function containsSidenote(token) {
   return (

src/_providers/savee.js

@@ -0,0 +1,19 @@
+const Cache = require("@11ty/eleventy-fetch");
+
+module.exports = class SaveeAPI {
+  constructor() {
+    this.url = "https://api.savee.it/user/interrobang/items/";
+  }
+
+  async getItems() {
+    return Cache(this.url, {
+      duration: "1d",
+      type: "json",
+      fetchOptions: {
+        headers: {
+          "Auth-Token": null,
+        },
+      },
+    });
+  }
+};

src/about.md

@@ -0,0 +1,15 @@
+---
+layout: layouts/about.html
+---
+
+## History
+
+I grew up in a small coastal town in the east of England ^[[Clacton-on-Sea, Essex](https://en.wikipedia.org/wiki/Clacton-on-Sea) – Former tourist hotspot, otherwise a normal seaside town in the UK.]. Not much happens in a town like that, but the beaches are nice. My choices at school were pretty limited, my favourite subjects were Computing, Media Studies, and Art - ‘design’ wasn’t something anyone was familiar with. Regardless I loved building things for screens, creating images, and writing. Eventually you’re told to find a future career, something you can ‘do’ for the rest of your life. I was determined that ‘something’ should be ‘something’ I’d like, and that would include my hobbies. I eventually started researching this thing called Graphic Design, it took me a while to work out what it was.
+
+![Clacton-on-sea, 1905](//images.ctfassets.net/6ijc0o3ju06b/5ttfehDL4Sxvg3aOhLgUW8/ecc9140ea82ec21e24b083782ca56a10/clacton-on-sea_1905.jpg "Clacton-on-sea, Essex. c 1905. – [Photochrom Print Collection](https://commons.wikimedia.org/wiki/File:Yacht_starting,_Clacton-on-Sea,_England-LCCN2002696557.jpg), via Wikimedia Commons ([Public Domain](https://en.wikipedia.org/wiki/Public_domain)), *Modifications: Cropped*.")
+
+While aimlessly googling “What do graphic designers do” I found a small forum of enthusiasts (the name of which I never remembered, if it still exists) who were swapping images of their favourite pieces of design. One commenter posted a blurry snapshot of what I’d eventually learn was ‘Watching Words Move’ ^[![Watching Words Move](//images.ctfassets.net/6ijc0o3ju06b/7v3RrzDwrLGLwoCSqsfoxb/7ad7025add5a785e5eff5bd9857f1cc5/watching-words-move-02.jpg) [Watching Words Move](http://robertbrownjohn.com/featured-work/watching-words-move-4/) – Robert Brownjohn, Ivan Chermayeff & Tom Geismar]. It amazed me, it is simple, playful and expressive, constructed solely from words, in a single typeface.
+
+A few years later, sat at a desk of a small design agency, I was again Googling: “What do Service Designers do?”, “What do Product Designers do?”. I loved parts of Graphic Design as a job, but my interest in User Experience, and User Interfaces had been growing. It was an itch that couldn’t be scratched designing logos and building small Wordpress sites. The empathy and considerate approaches of Product Design, combined with strategy and process appealed to me.
+
+A few more years later I’m happiest doing a little bit of everything that takes an idea and turns it into a working product or service. In my spare time (not chasing my toddler around) I tinker with new web technologies, read as much as I can about design, walk, and fawn over photos of brutalist architecture ^[![Barbican Estate](//images.ctfassets.net/6ijc0o3ju06b/79Hu9IUGsrBGNX5Mi6wvp0/f7e67105234cb73530540eba2229e719/18645109_317534235346261_6803231053017251840_n.jpg) I know the [Barbican Estate](https://en.wikipedia.org/wiki/Barbican_Estate) like the back of my hand].