From c1ad1593b6a5a5613731b37e66883ee01ec2c140 Mon Sep 17 00:00:00 2001 From: satr14 Date: Wed, 27 May 2026 20:48:03 +0700 Subject: [PATCH 1/3] styling and seo --- index.ts | 32 ++++++++++++++------------------ package.json | 5 +++++ posts/test.md | 6 +++--- style.css | 33 ++++++++++++++++++++++++++++++++- template.html | 22 ++++++++++++++++++---- 5 files changed, 72 insertions(+), 26 deletions(-) diff --git a/index.ts b/index.ts index 5c1493e..fd2a350 100644 --- a/index.ts +++ b/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); diff --git a/package.json b/package.json index 24bf659..90aca3f 100644 --- a/package.json +++ b/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" }, diff --git a/posts/test.md b/posts/test.md index 7dc584a..078594d 100644 --- a/posts/test.md +++ b/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 diff --git a/style.css b/style.css index 899e500..c903032 100644 --- a/style.css +++ b/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; } \ No newline at end of file +@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; } diff --git a/template.html b/template.html index 16309f1..5658196 100644 --- a/template.html +++ b/template.html @@ -3,14 +3,28 @@ - [[TITLE]] + [[TITLE]] + + + + + + + + + + + + + - +
-

[[TITLE]]

+

[[POST_TITLE]]

+ [[DATE]] - view revisions
-
+
[[CONTENT]]