Skip to main content
Blog articles are stored as JavaScript modules under src/constants/articles/ and registered in a central index file at src/constants/articles.js. The index exports a metadata list and a lookup function used by the blog route.

​
File structure

src/constants
articles.js
articles
netflix.js

​
How it works

src/constants/articles.js is the single source of truth for all published articles. It:
  1. Imports each article module from src/constants/articles/.
  2. Maintains an articles array of metadata objects (title, date, id) used to build the blog listing.
  3. Maintains an idsAndArticles map from article id to article body content.
  4. Exports a getArticle(id) helper that returns the content for a given article id.
import netflix from './articles/netflix';

const articles = [
  { title: netflix.title, date: netflix.date, id: 'netflix' }
];

const idsAndArticles = {
  'netflix': netflix.content,
};

const getArticle = (id) => {
  return idsAndArticles[id];
};

export { articles, getArticle };

​
Type definitions

// Entry in the articles metadata array
interface ArticleMeta {
  title: string;  // Display title shown in the blog listing
  date: string;   // Publication date (e.g. "January 2024")
  id: string;     // URL-safe slug used as the route parameter
}

// Shape of each individual article module (e.g. netflix.js)
interface Article {
  title: string;         // Same title used in ArticleMeta
  date: string;          // Same date used in ArticleMeta
  content: JSX.Element;  // Article body as a JSX element (see netflix.js for the pattern)
}

​
Current articles

There is currently one published article.
IDTitleFile
netflixFrom `Hello World` to Netflix in 24 monthssrc/constants/articles/netflix.js
The netflix article is titled “From Hello World to Netflix in 24 months” and is dated December 2023. It exports { title, date, content }. It is accessible at the route /blog/netflix.
The netflix.js source file has a bug: the date field is set to the title string (netflixTitle) instead of the date string (netflixDate). This means the date metadata for this article is incorrectly duplicated as the title.

​
Adding a new article

1

Create the article module

Create a new file at src/constants/articles/my-topic.js. Export an object with title, date, and content.
const myTopic = {
  title: 'My Article Title',
  date: 'March 2026',
  content: `
    The full body text of the article goes here.
    You can use a template literal for multi-line content,
    or export JSX if the routing component supports it.
  `,
};

export default myTopic;
2

Import the module in articles.js

Open src/constants/articles.js and add an import at the top.
import netflix from './articles/netflix';
import myTopic from './articles/my-topic'; // add this line
3

Add metadata to the articles array

Append a new entry to the articles array.
const articles = [
  { title: netflix.title, date: netflix.date, id: 'netflix' },
  { title: myTopic.title, date: myTopic.date, id: 'my-topic' }, // add this
];
4

Register the content in idsAndArticles

Add a key-value pair to the idsAndArticles map.
const idsAndArticles = {
  'netflix': netflix.content,
  'my-topic': myTopic.content, // add this
};
5

Access the article

The article is now accessible via getArticle('my-topic') and will be served at the route /blog/my-topic.

​
Blog listing page

The blog listing page at /blog is currently a stub — it renders an empty <main> element with no content. New articles registered in articles.js will be accessible directly by URL (e.g. /blog/my-topic) but will not automatically appear in a listing until the blog index component is implemented.