styling and seo

index.ts

@@ -1,18 +1,18 @@
 import { readdir } from "node:fs/promises";
 import { YAML } from "bun";
 import metadata from "./metadata.json";
-
-const templateRaw = await Bun.file("./template.html").text();
-const template = templateRaw
-  .replace("[[NAME]]", metadata.name)
-  .replace("[[YEAR]]", new Date().getFullYear().toString());
+import templateRaw from "./template.html" with { type: "text" };
+const templateStr = templateRaw as unknown as string;
+const template = templateStr
+  .replaceAll("[[NAME]]", metadata.name)
+  .replaceAll("[[YEAR]]", new Date().getFullYear().toString());
 const posts = await readdir("./posts");
 
 const defaultFrontmatter = {
   thumb: "",
   title: "Untitled",
   desc: "",
-  date: "00-00-0000", // DD-MM-YYYY
+  date: "0000-00-00", // YYYY-MM-DD
   tags: [] as never[],
   draft: true,
 };
@@ -20,10 +20,11 @@ const defaultFrontmatter = {
 function fetchFrontmatter(raw?: string) {
   try {
     if (!raw) throw new Error("No frontmatter found.");
-    return { ...defaultFrontmatter, ...(YAML.parse(raw) as typeof defaultFrontmatter) };
+    const parsed = { ...defaultFrontmatter, ...(YAML.parse(raw) as typeof defaultFrontmatter) };
+    return { ...parsed, date: new Date(parsed.date) };
   } catch {
     console.warn("Failed to parse frontmatter. Using default values.");
-    return { ...defaultFrontmatter };
+    return { ...defaultFrontmatter, date: new Date(NaN) };
   }
 }
 
@@ -36,24 +37,19 @@ posts.forEach(async (post) => {
   const frontmatter = fetchFrontmatter(raw.at(0));
   
   const html = Bun.markdown.html(content, {
-    tables: true,
-    strikethrough: true,
-    tasklists: true,
     autolinks: true,
     headings: true,
-    hardSoftBreaks: true,
-    wikiLinks: true,
     underline: true,
     latexMath: true,
-    collapseWhitespace: true,
-    permissiveAtxHeaders: true,
-    noIndentedCodeBlocks: true,
-    noHtmlBlocks: true,
-    noHtmlSpans: true,
     tagFilter: true,
   });
   const render = template
     .replaceAll("[[TITLE]]", `${metadata.title} - ${frontmatter.title}`)
+    .replaceAll("[[POST_TITLE]]", frontmatter.title)
+    .replaceAll("[[DATE]]", frontmatter.date.toDateString())
+    .replaceAll("[[REVISIONS]]", `https://git.satr14.my.id/satr14/ssg.md/commits/branch/main/posts/${post}`)
+    .replaceAll("[[DESC]]", frontmatter.desc)
+    .replaceAll("[[THUMB]]", frontmatter.thumb)
     .replace("[[CONTENT]]", html);
   
   await Bun.write(`./dist/posts/${post.replace(".md", ".html")}`, render);

package.json

@@ -3,6 +3,11 @@
   "module": "index.ts",
   "type": "module",
   "private": true,
+  "scripts": {
+    "tw-dev": "bunx tailwindcss -i style.css -o dist/style.css --watch",
+    "prev": "bunx serve dist",
+    "bun-dev": "bun --watch index.ts"
+  },
   "devDependencies": {
     "@types/bun": "latest"
   },

posts/test.md

@@ -1,9 +1,9 @@
-thumb: https://raw.githubusercontent.com/satr14/ssg/master/assets/markdown.png
+thumb: https://picsum.photos/id/237/200/300
 title: Comprehensive Markdown & GFM Syntax Reference
 desc: A detailed guide to Markdown and GitHub Flavored Markdown (GFM) syntax, covering text formatting, lists, tables, code blocks, links, and footnotes.
-date: 25-05-2026
+date: 2026-05-27
 tags: [markdown, gfm, syntax, reference, guide]
-draft: false
+draft: true
 ^---
 
 ## 1. Text Formatting & Structure

style.css

@@ -1,4 +1,35 @@
+@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap");
+
 @import "tailwindcss";
 @import "@catppuccin/tailwindcss/mocha.css";
 
-body { @apply bg-ctp-base text-ctp-text; }
+@theme { --font-custom: "Lora", serif; }
+body { @apply bg-ctp-base text-ctp-text; }
+
+h1 { @apply text-3xl; }
+h2 { @apply text-2xl; }
+h3 { @apply text-xl; }
+h4 { @apply text-lg; }
+h5 { @apply text-base; }
+h6 { @apply text-sm; }
+h1, h2, h3, h4, h5, h6 { @apply font-semibold my-2; }
+h1 { @apply text-ctp-blue; }
+h2, h3, h4, h5, h6 { @apply text-ctp-lavender; }
+a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a) { @apply decoration-ctp-blue underline hover:no-underline; }
+
+p { @apply text-base; }
+hr { @apply border-t border-ctp-surface1 my-6; }
+
+ul, ol { @apply list-inside my-4 pl-2; }
+ol { @apply list-decimal; }
+ul { @apply list-disc; }
+ul ul, ul ol, ol ul, ol ol { @apply my-0 pl-6; }
+input[type="checkbox"] { @apply mr-2 align-middle cursor-default accent-ctp-blue; }
+
+table { @apply block border-collapse overflow-x-auto my-4; }
+table th, table td { @apply border border-ctp-surface1 px-4 py-2; }
+table th { @apply bg-ctp-surface0 font-semibold; }
+
+blockquote { @apply border-l-4 border-ctp-surface1 pl-4 italic my-4; }
+code { @apply bg-ctp-surface0 text-ctp-text rounded px-1; }
+pre { @apply bg-ctp-surface0 text-ctp-text rounded p-4 overflow-x-auto; }

template.html

@@ -3,14 +3,28 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>[[TITLE]]</title>
     <link rel="stylesheet" href="../style.css">
+    <title>[[TITLE]]</title>
+
+    <meta name="description" content="[[DESC]]">
+    <meta name="author" content="[[NAME]]">
+
+    <meta property="og:type" content="article">
+    <meta property="og:title" content="[[TITLE]]">
+    <meta property="og:description" content="[[DESC]]">
+    <meta property="og:image" content="[[THUMB]]">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="[[TITLE]]">
+    <meta name="twitter:description" content="[[DESC]]">
+    <meta name="twitter:image" content="[[THUMB]]">
 </head>
-<body>
+<body class="max-w-4xl mx-auto p-4 font-custom">
     <header>
-        <h1>[[TITLE]]</h1>
+      <h1 class="text-4xl font-bold">[[POST_TITLE]]</h1>
+      <span class="text-ctp-subtext0 italic">[[DATE]] - <a href="[[REVISIONS]]">view revisions</a></span>
     </header>
-    <main>
+    <main class="my-10">
         [[CONTENT]]
     </main>
     <footer>