diff --git a/index.ts b/index.ts index e556774..c12e449 100644 --- a/index.ts +++ b/index.ts @@ -2,19 +2,28 @@ import { readdir } from "node:fs/promises"; import { YAML } from "bun"; import metadata from "./metadata.json"; import templateRaw from "./templates/post.html" with { type: "text" }; -const templateStr = templateRaw as unknown as string; -const template = templateStr +import homeRaw from "./templates/home.html" with { type: "text" }; + +const year = new Date().getFullYear().toString(); +const applyVars = (raw: unknown) => (raw as string) .replaceAll("[[SITE]]", metadata.title) .replaceAll("[[NAME]]", metadata.name) .replaceAll("[[TIMEZONE]]", metadata.timezone) - .replaceAll("[[YEAR]]", new Date().getFullYear().toString()); -const posts = await readdir("./posts"); + .replaceAll("[[YEAR]]", year); +const template = applyVars(templateRaw); +const home = applyVars(homeRaw); + +const posts = await readdir("./posts"); +const postLinks: { + title: string; + date: Date; + link: string; +}[] = []; const defaultFrontmatter = { title: "Untitled", desc: "", date: "0000-00-00", // YYYY-MM-DD - tags: [] as never[], draft: true, }; @@ -29,28 +38,45 @@ function fetchFrontmatter(raw?: string) { } } -posts.forEach(async (post) => { - console.log(`Processing ${post}...`); +await Promise.all(posts.map(async (post) => { const raw = (await Bun.file(`./posts/${post}`).text()).split("^---"); - const content = raw.at(-1) || "No content"; - + const content = raw.at(-1) || "_No content_"; const frontmatter = fetchFrontmatter(raw.at(0)); const html = Bun.markdown.html(content, { autolinks: true, headings: true, underline: true, - latexMath: 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("[[REVISIONS]]", `${metadata.revisions}/${post}`) .replaceAll("[[DESC]]", frontmatter.desc) .replace("[[CONTENT]]", html); await Bun.write(`./dist/posts/${post.replace(".md", ".html")}`, render); -}); \ No newline at end of file + + if (!frontmatter.draft) postLinks.push({ + title: frontmatter.title, + date: frontmatter.date, + link: `/posts/${post.replace(".md", ".html")}`, + }); + + console.log(`Built page for ${frontmatter.draft ? 'draft' : 'post'}: ${frontmatter.title}`); + // TODO: table of contents generation +})); + +const parsedPosts = postLinks + .sort((a, b) => b.date.getTime() - a.date.getTime()) + .map((post) => `
  • ${post.title} - ${post.date.toDateString()}
    • `) + .join("\n"); +const render = home + .replace("[[ABOUT]]", Bun.markdown.html(metadata.description)) + .replace("[[MAIN]]", metadata.main) + .replace("[[POSTS]]", parsedPosts); + +await Bun.write("./dist/index.html", render); diff --git a/metadata.json b/metadata.json index a2ebbbc..eb8462a 100644 --- a/metadata.json +++ b/metadata.json @@ -1,52 +1,7 @@ { - "title": "satr14's blog", - "quote": "sometimes you just gotta implement it yourself", + "title": "satr14's mind", "name": "satr14", - "roles": ["Web Dev", "Sys Admin", "Hobbyist", "Student"], - "description": "Welcome to my over-engineered corner of the Internet! I'm Satria, Im a self-taught hobbyist web developer and homelaber sysadmin from Indonesia. I've been programming since 2021 and spend my free time working on personal projects and experimenting with new technologies.", - "skills": [ - "Tailwind", - "SvelteKit", - "TypeScript", - "Bun", - "Express", - "PocketBase", - "Linux", - "Nginx", - "Docker", - "Git", - "Bash", - "Proxmox", - "Nix" - ], + "description": "Welcome to my 2nd over-engineered corner of the Interwebs! I'm Satria, Im a self-taught hobbyist web developer and homelaber sysadmin from Indonesia. I've been programming since 2021 and spend my free time working on personal projects.\n\nThis blog is where I share my thoughts, projects, experiences, tutorials, and just about anything I feel like sharing. Have any corrections, suggestions, or just wanna chat? Feel free to send an [email](mailto:admin@satr14.my.id) or contact me on other [platforms](https://satr14.my.id).", "timezone": "Asia/Jakarta", - "location": "Indonesia", - "links": { - "forgejo.git": "https://git.satr14.my.id", - "fetch.sh": "https://fetch.satr14.my.id", - "flake.nix": "https://flake.satr14.my.id" - }, - "communities": { - "part-of.my.id": { - "icon": "https://avatars.githubusercontent.com/u/184933425?s=200&v=4", - "role": "Founder", - "url": "https://part-of.my.id/" - }, - "is-a.dev": { - "icon": "https://avatars.githubusercontent.com/u/72358814?s=200&v=4", - "role": "Maintainer", - "url": "https://is-a.dev/" - }, - "Hack Club": { - "icon": "https://assets.hackclub.com/icon-square.png", - "role": "Former Event Organizer", - "url": "https://hackclub.com/" - } - }, - "socials": { - "protonmail": "mailto:admin@satr14.my.id", - "github": "https://github.com/satr14washere", - "discord": "https://discord.com/users/882595027132493864", - "namemc": "https://namemc.com/profile/satr14.1" - } + "revisions": "https://git.satr14.my.id/satr14/ssg.md/commits/branch/main/posts" } diff --git a/posts/test.md b/posts/test.md index 7fe722e..5e70d45 100644 --- a/posts/test.md +++ b/posts/test.md @@ -1,11 +1,42 @@ 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: 2026-05-27 -tags: [markdown, gfm, syntax, reference, guide] draft: true ^--- -## 1. Text Formatting & Structure + + +This document serves as a comprehensive reference for Markdown and GitHub Flavored Markdown (GFM) syntax. It covers various formatting options, list types, table creation, code block usage, link formatting, and footnote implementation. + +The purpose is to test and demonstrate the full range of Markdown features, ensuring that all syntax is correctly rendered and supported in the target environment. This includes both standard Markdown elements and GFM-specific extensions. + +_This post was generated by AI for testing purposes_ + +--- + +## Images + +![Alt text](https://picsum.photos/150) + +--- + +## HTML in Markdown + +
    + Click to expand HTML content +

    This is a block of HTML content embedded within Markdown. It can include any valid HTML elements, such as this bold text and this italic text.

    + +
    + + +
    ^^ This **shouldn't** render as an iframe but should show the raw HTML code + +--- + +## Text Formatting & Structure * **Bold:** **This text is bold** or __this is bold__. * **Italic:** *This text is italic* or _this is italic_. @@ -21,7 +52,7 @@ draft: true --- -## 2. Lists +## Lists ### Unordered (Bulleted) * Item 1 @@ -43,7 +74,15 @@ draft: true --- -## 3. Tables (GFM) +## Links and Autolinks + +* **Standard Link:** [Search Engine](https://www.google.com) +* **Link with Tooltip:** [GitHub](https://github.com "Go to GitHub") +* **Autolink (GFM):** https://nixos.org + +--- + +## Tables (GFM) | Feature | Standard Markdown | GFM Extension | Status | | :--- | :---: | :---: | ---: | @@ -54,7 +93,7 @@ draft: true --- -## 4. Code Blocks with Syntax Highlighting +## Code Blocks with Syntax Highlighting ```bash #!/usr/bin/env bash @@ -144,11 +183,3 @@ echo "${GREETING/Hello/Hey}" echo "${FILE##*/}" # basename echo "${FILE%/*}" # dirname ``` - ---- - -## 5. Links and Autolinks - -* **Standard Link:** [Search Engine](https://www.google.com) -* **Link with Tooltip:** [GitHub](https://github.com "Go to GitHub") -* **Autolink (GFM):** https://nixos.org diff --git a/style.css b/style.css index 3499a84..7875daf 100644 --- a/style.css +++ b/style.css @@ -17,12 +17,13 @@ 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; } +p { @apply text-lg my-6; } 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; } +li { @apply my-1; } 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; } @@ -31,75 +32,13 @@ 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 text-ctp-text rounded px-1; } +code { @apply bg-ctp-base text-ctp-text rounded p-1; } pre { @apply bg-ctp-base text-ctp-text rounded p-4 overflow-x-auto; } +details { @apply my-4 border border-ctp-surface1 rounded p-3; } +details summary { @apply cursor-pointer font-semibold; } +details[open] { @apply border-ctp-blue; } +details[open] summary { @apply text-ctp-blue mb-3; } -/*pre code.hljs { - display: block; - overflow-x: auto; -} -.hljs-comment { - color: #697070; -} -.hljs-punctuation, -.hljs-tag { - color: #444a; -} -.hljs-tag .hljs-attr, -.hljs-tag .hljs-name { - color: #444; -} -.hljs-attribute, -.hljs-doctag, -.hljs-keyword, -.hljs-meta .hljs-keyword, -.hljs-name, -.hljs-selector-tag { - font-weight: 700; -} -.hljs-deletion, -.hljs-number, -.hljs-quote, -.hljs-selector-class, -.hljs-selector-id, -.hljs-string, -.hljs-template-tag, -.hljs-type { - color: #800; -} -.hljs-section, -.hljs-title { - color: #800; - font-weight: 700; -} -.hljs-link, -.hljs-operator, -.hljs-regexp, -.hljs-selector-attr, -.hljs-selector-pseudo, -.hljs-symbol, -.hljs-template-variable, -.hljs-variable { - color: #ab5656; -} -.hljs-literal { - color: #695; -} -.hljs-addition, -.hljs-built_in, -.hljs-bullet, -.hljs-code { - color: #397300; -} -.hljs-meta { - color: #1f7199; -} -.hljs-meta .hljs-string { - color: #38a; -} -.hljs-emphasis { - font-style: italic; -} -.hljs-strong { - font-weight: 700; -}*/ +ol.homepage-posts li { @apply my-2 text-lg marker:content-['>_'] marker:font-extrabold marker:text-ctp-lavender; } +ol.homepage-posts li a { @apply font-bold; } +ol.homepage-posts li i { @apply text-ctp-subtext1; } \ No newline at end of file diff --git a/templates/home.html b/templates/home.html index dc02520..3673d0c 100644 --- a/templates/home.html +++ b/templates/home.html @@ -3,41 +3,37 @@ - [[TITLE]] + [[SITE]] - + - -
    [[SITE]] -
    +
    --:-- --
    -

    [[POST_TITLE]]

    - [[DATE]] - view revisions - [[CONTENT]] + [[ABOUT]] +
      [[POSTS]]
    \ No newline at end of file diff --git a/templates/post.html b/templates/post.html index dc02520..44ca813 100644 --- a/templates/post.html +++ b/templates/post.html @@ -26,7 +26,7 @@
    [[SITE]] -
    +
    --:-- --
    @@ -37,7 +37,7 @@ [[CONTENT]] \ No newline at end of file