Project 83, Content and data

Markdown Blog Engine

Write posts in Markdown, drop them in one HTML file and get a real blog: a list, tags, search, reading time and a page for every post.

Main API: hashchange routing
Content: Markdown + front matter
Dependencies: None
Your browser: Checking

The blog

Click a post, filter by tag or search. Posts are Markdown inside script tags. Use the back button: each post has its own address.

How it works

Posts live in script tagsEach post is Markdown inside a script tag with type text/markdown, so the browser ignores it and the script reads it.
Front matter and a small parserThe block between the --- lines gives the title, date, tags and cover. A 30 line parser turns headings, lists, quotes, code and links into HTML.
Hash routingLinks like #/post/sourdough-start switch to the post view. The hashchange event makes the back button work.

const [, frontMatter, body] = text.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
const meta = Object.fromEntries(frontMatter.split("\n").map((l) => {
  const i = l.indexOf(":");
  return [l.slice(0, i).trim(), l.slice(i + 1).trim()];
}));
addEventListener("hashchange", () => {
  const m = location.hash.match(/^#\/post\/(.+)/);
  m ? showPost(m[1]) : showList();
});