refactor: simplify logic for rendering pages

src/build.ts

@@ -1,10 +1,10 @@
 import fs from 'node:fs';
-import { createAtomFeed } from './generator/feeds/create-atom-feed';
-import { createRssFeed } from './generator/feeds/create-rss-feed';
-import { createSitemap } from './generator/feeds/create-sitemap';
-import { optimize } from './generator/optimize/optimize';
-import { getPosts } from './generator/posts/get-posts';
-import { renderPages } from './generator/render-pages/render-pages';
+import { createAtomFeed } from './build/feeds/create-atom-feed';
+import { createRssFeed } from './build/feeds/create-rss-feed';
+import { createSitemap } from './build/feeds/create-sitemap';
+import { optimize } from './build/optimize';
+import { getPosts } from './build/posts/get-posts';
+import { renderPages } from './build/render-pages';
 import { copySourceToTarget } from './utils/node';
 import { DIR_DIST, DIR_SRC_STATIC } from './constants';
 

src/generator/feeds/create-sitemap.ts → src/build/feeds/create-sitemap.ts

@@ -1,21 +1,21 @@
-import type { ImportedPageData, RenderedPages } from '@types';
+import type { PageData, RenderedPages } from '@types';
 import path from 'node:path';
 import { formatDateIso } from '../../utils/date';
 import { html, map } from '../../utils/html';
 import { createFile } from '../../utils/node';
 import { BUILD } from '../../config';
 import { DIR_DIST } from '../../constants';
 
-function pagesToSitemapEntries(pages: ImportedPageData[]): string {
-  return map(pages, ({ url, config }) => {
-    const date = config?.updated || config?.date || BUILD.date;
-    return html`
+function pagesToSitemapEntries(pages: PageData[]): string {
+  return map(
+    pages,
+    ({ url, updated, date }) => html`
       <url>
         <loc>${url}</loc>
-        <lastmod>${formatDateIso(date)}</lastmod>
+        <lastmod>${formatDateIso(updated || date || BUILD.date)}</lastmod>
       </url>
-    `;
-  });
+    `,
+  );
 }
 
 export function createSitemap(pages: RenderedPages): void {
@@ -25,7 +25,7 @@ export function createSitemap(pages: RenderedPages): void {
   const contents = html`<?xml version="1.0" encoding="UTF-8"?>
     <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
       ${pagesToSitemapEntries([
-        ...content.filter((page) => !page.config.excludeFromSitemap),
+        ...content.filter((page) => !page.excludeFromSitemap),
         ...posts,
         ...tags,
       ])}

src/generator/optimize/optimize.ts → src/build/optimize.ts

@@ -2,10 +2,10 @@ import { transform } from 'lightningcss';
 import crypto from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
-import { minify as minifyJs } from 'terser';
 import { minify as minifyHtml } from 'html-minifier-terser';
-import { findFilesByExtension } from '../../utils/node';
-import { DIR_DIST } from '../../constants';
+import { minify as minifyJs } from 'terser';
+import { findFilesByExtension } from '../utils/node';
+import { DIR_DIST } from '../constants';
 
 // A map of asset file paths to their hashed file names.
 const fileHashMap: Record<string, string> = {};

src/generator/render-pages/render-pages.ts → src/build/render-pages.ts

@@ -1,17 +1,11 @@
-import type {
-  BasePageData,
-  ImportedPageData,
-  LayoutPostData,
-  LayoutTagData,
-  Post,
-  RenderedPages,
-} from '@types';
+import type { Layout, Page, PageData, Post, RenderedPages } from '@types';
 import path from 'node:path';
-import { findFilesByExtension } from '../../utils/node';
-import { BUILD } from '../../config';
-import { DIR_DIST, DIR_SRC_STATIC } from '../../constants';
-import { createSocialImage } from '../social-image/create-social-image';
-import { getLayoutPath, renderPage } from './render-page';
+import postLayout from '../layouts/post';
+import tagLayout from '../layouts/tag';
+import { createFile, findFilesByExtension } from '../utils/node';
+import { BUILD } from '../config';
+import { DIR_DIST, DIR_SRC_STATIC } from '../constants';
+import { createSocialImage } from './social-image/create-social-image';
 
 export async function renderPages(
   posts: Post[],
@@ -30,20 +24,20 @@ export async function renderContentPage(
   file: string,
   posts: Post[],
   tags: string[],
-): Promise<ImportedPageData> {
+): Promise<PageData> {
+  const layout = (await import(file)).default as Page;
   const target = resolveSrcDirToDistDir(file).replace('.ts', '.html');
-  const data: BasePageData = { url: resolveUrl(target), posts, tags };
-  return renderPage(file, target, data);
+  const data: PageData = { url: resolveUrl(target), posts, tags };
+  return renderPage(target, layout, data);
 }
 
 async function renderPostPage(
   post: Post,
   posts: Post[],
   tags: string[],
-): Promise<ImportedPageData> {
-  const layout = getLayoutPath('post');
+): Promise<PageData> {
   const target = resolveSrcDirToDistDir(post.file).replace('.md', '.html');
-  const data: LayoutPostData = {
+  const data: PageData = {
     url: resolveUrl(target),
     posts,
     tags,
@@ -52,7 +46,7 @@ async function renderPostPage(
   };
 
   const [page] = await Promise.all([
-    renderPage(layout, target, data),
+    renderPage(target, postLayout, data),
     createSocialImage(post, target),
   ]);
 
@@ -63,18 +57,30 @@ async function renderTagPage(
   tag: string,
   posts: Post[],
   tags: string[],
-): Promise<ImportedPageData> {
-  const layout = getLayoutPath('tag');
+): Promise<PageData> {
   const target = path.join(DIR_DIST, `/tags/${tag}/index.html`);
-  const data: LayoutTagData = { url: resolveUrl(target), posts, tags, tag };
-  return renderPage(layout, target, data);
+  const data: PageData = { url: resolveUrl(target), posts, tags, tag };
+  return renderPage(target, tagLayout, data);
+}
+
+function renderPage(
+  target: string,
+  pageOrLayout: Page | Layout,
+  data: PageData,
+): PageData {
+  const result = pageOrLayout(data);
+  if (!result.content) {
+    throw new Error('No content');
+  }
+  createFile(target, result.content);
+  return result;
 }
 
 function resolveSrcDirToDistDir(file: string): string {
   return path.join(DIR_DIST, path.relative(DIR_SRC_STATIC, file));
 }
 
-export function resolveUrl(file: string): string {
+function resolveUrl(file: string): string {
   const relativePath = path.relative(DIR_DIST, file);
   const relativeUrl = path.normalize(path.dirname(relativePath) + '/');
   return new URL(relativeUrl, BUILD.baseUrl).href;

src/constants.ts

@@ -4,7 +4,6 @@ export const BASE_URL_DEV = 'http://localhost:3000/';
 export const BASE_URL_PROD = 'https://tomherni.dev/';
 
 export const DIR_DIST = path.resolve('dist/');
-export const DIR_SRC_LAYOUTS = path.resolve('src/layouts/');
 export const DIR_SRC_STATIC = path.resolve('src/static/');
 
 export const SOCIAL_FILE_NAME = 'social.jpg';

src/includes/site-header.ts

@@ -1,33 +1,33 @@
-import type { PageConfig } from '@types';
+import type { PageData } from '@types';
 import { html } from '../utils/html';
 
-export const siteHeader = (config: PageConfig = {}) => html`
+export const siteHeader = (data: PageData) => html`
   <div class="site-header">
     <nav role="navigation" aria-label="Main navigation">
       <ul aria-label="Main navigation">
         <li>
           <a
             href="/"
             class="logo"
-            aria-current="${String(config.activePage === 'home')}"
+            aria-current="${String(data.activePage === 'home')}"
           >
             tomherni<span>.dev</span>
           </a>
         </li>
         <li>
           <a
             href="/blog/"
-            class="${config.activePage === 'blog' ? 'link active' : 'link'}"
-            aria-current="${String(config.activePage === 'blog')}"
+            class="${data.activePage === 'blog' ? 'link active' : 'link'}"
+            aria-current="${String(data.activePage === 'blog')}"
           >
             Blog
           </a>
         </li>
         <li>
           <a
             href="/tags/"
-            class="${config.activePage === 'tags' ? 'link active' : 'link'}"
-            aria-current="${String(config.activePage === 'tags')}"
+            class="${data.activePage === 'tags' ? 'link active' : 'link'}"
+            aria-current="${String(data.activePage === 'tags')}"
           >
             Tags
           </a>

src/layouts/base.ts

@@ -1,4 +1,4 @@
-import type { Layout, ImportedPageData, Post } from '@types';
+import type { Layout, PageData, Post } from '@types';
 import { siteHeader } from '../includes/site-header';
 import { html, when } from '../utils/html';
 import { BUILD, DESCRIPTION, TITLE } from '../config';
@@ -17,12 +17,12 @@ type PageMetadata = {
   tags?: string[];
 };
 
-function getPageMetadata(data: ImportedPageData): PageMetadata {
+function getPageMetadata(data: PageData): PageMetadata {
   const post = 'post' in data && data.post ? (data.post as Post) : undefined;
 
-  const title = data.config.title ? `${data.config.title} — ${TITLE}` : TITLE;
+  const title = data.title ? `${data.title} — ${TITLE}` : TITLE;
 
-  const description = data.config.description || DESCRIPTION;
+  const description = data.description || DESCRIPTION;
 
   const image = post
     ? post.meta.socialUrl
@@ -32,9 +32,9 @@ function getPageMetadata(data: ImportedPageData): PageMetadata {
     ? `Banner that introduces the blog post by its title: ${post.meta.title}`
     : 'Profile picture of Tom Herni—a front-end engineer passionate about designing and building creative solutions for the web';
 
-  const date = data.config.date?.toISOString();
+  const date = data.date?.toISOString();
   const updated =
-    data.config.updated?.toISOString() || date || BUILD.date.toISOString();
+    data.updated?.toISOString() || date || BUILD.date.toISOString();
 
   return {
     title,
@@ -104,11 +104,12 @@ function addAnalytics(): string {
   `;
 }
 
-const layout: Layout = {
-  content: (data) => {
-    const metadata = getPageMetadata(data);
+const layout: Layout = (data) => {
+  const metadata = getPageMetadata(data);
 
-    return html`
+  return {
+    ...data,
+    content: html`
       <!doctype html>
       <html lang="en-US" dir="ltr">
         <head>
@@ -158,14 +159,14 @@ const layout: Layout = {
         </head>
         <body>
           <div class="wrapper">
-            ${siteHeader(data.config)}
+            ${siteHeader(data)}
             <main>${data.content}</main>
           </div>
           <script src="/assets/js/index.js"></script>
         </body>
       </html>
-    `;
-  },
+    `,
+  };
 };
 
 export default layout;