Nostalgic Future Catalog

An experimental personal blog built from scratch with the static site generator lume for the next generation JavaScript/TypeScript runtime Deno.

Features

• The main contents are my posts, journals (logs), musical album collections, photos, bookmarks (clips), self-made tracks and illustration collections.
• Homepage with featured and recent contents in TweetDeck-inspired (RIP) multi-column layout.
• The technical motivation of building this site is to learn to build a website from scratch without relying on popular heavy frameworks like React. So only 6 lines of JavaScript is used in the built site (to persist a toggle's state). Modern HTML/CSS and static site generator gives us enough power to build a plain but rich, elegant and flexible site.
• Custom Chinese/Japanese/Korean (CJK) typesetting to complement the slow progress of CSS implementation, including proper punctuation squeezing, inter-script space, vertical writing mode, text grid constraint and mixed script typography. Many codes are borrowed from a great CJK typesetting library Tategaki. The main reference is W3C Editor's Draft Requirements for Chinese Text Layout.
• For easier browsing, entities can be grouped by categories/tags in note, log, album and clip sections.

Structure

• src/
  • _includes: Most of the reusable components and layouts written in Nunjucks.
  • _data/site.yml: Global data of the site including title, navigation links and featured contents.
  • index.njk: Homepage layout.
  • style/index.css: Global CSS for all important styling.
  • And other section directories.
• _config.ts: Lume config file for setting up plugins such as RSS feed generator and image transformation. Custom filters and preprocessors are also defined in this file.
• _extra/cjk.ts: Codes for CJK typesetting.

Mechanisms

There are roughly 2 ways to drive site generation: (1) generate from a set of Markdown files with metadata; (2) generate from a JSON/YAML file representing all the entities (located at */_data directory), which can be accessed by a Nunjucks template or a dynamic JavaScript page (*.page.js). Besides, */_data.yml files often contain important information for the corresponding section such as categories and tags.

Unless explicitly specified in the template/page file, the URL of a page is derived from the original directory structure.