final tweaks before deploy
This commit is contained in:
parent
550ce3dabc
commit
a9e4ec8973
6 changed files with 104 additions and 157 deletions
48
index.ts
48
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);
|
||||
|
||||
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) => `<li><a href="${post.link}">${post.title}</a> - <i>${post.date.toDateString()}</i></li>`)
|
||||
.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);
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 IS A COMMENT -->
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## HTML in Markdown
|
||||
|
||||
<details>
|
||||
<summary>Click to expand HTML content</summary>
|
||||
<p>This is a block of HTML content embedded within Markdown. It can include any valid HTML elements, such as this <strong>bold text</strong> and this <em>italic text</em>.</p>
|
||||
<ul>
|
||||
<li>HTML List Item 1</li>
|
||||
<li>HTML List Item 2</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<iframe src="https://google.com" width="300" height="200"></iframe>
|
||||
<br>^^ 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
|
||||
|
|
|
|||
81
style.css
81
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; }
|
||||
|
|
@ -3,41 +3,37 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>[[TITLE]]</title>
|
||||
<title>[[SITE]]</title>
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
|
||||
<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:title" content="[[SITE]]">
|
||||
<meta property="og:description" content="[[DESC]]">
|
||||
|
||||
<link rel="stylesheet" href="//unpkg.com/@catppuccin/highlightjs@1.0.1/css/catppuccin-mocha.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
|
||||
<script>
|
||||
setInterval(() => {
|
||||
const now = new Date();
|
||||
document.querySelector('#localtime').textContent = now.toLocaleTimeString("en-US", { timeZone: "[[TIMEZONE]]", hour: "numeric", minute: "2-digit" });
|
||||
}, 1000);
|
||||
hljs.highlightAll();
|
||||
</script>
|
||||
</head>
|
||||
<body class="max-w-4xl mx-auto p-4 font-custom">
|
||||
<header class="py-4 flex gap-2 justify-between">
|
||||
<a href="/" class="font-bold text-base font-mono">[[SITE]]</a>
|
||||
<div class="group flex gap-2 font-mono text-ctp-subtext1">
|
||||
<div class="group flex gap-2 font-mono text-ctp-subtext0">
|
||||
<span class="hidden group-hover:block">[[TIMEZONE]]</span>
|
||||
<span id="localtime" class="block group-hover:hidden">--:-- --</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="my-6">
|
||||
<h1 class="text-4xl font-bold">[[POST_TITLE]]</h1>
|
||||
<span class="text-ctp-subtext0 italic block mb-10">[[DATE]] - <a href="[[REVISIONS]]">view revisions</a></span>
|
||||
[[CONTENT]]
|
||||
[[ABOUT]]
|
||||
<ol class="homepage-posts">[[POSTS]]</ol>
|
||||
</main>
|
||||
<footer>
|
||||
<p class="text-center italic text-shadow-ctp-subtext1">© [[YEAR]] [[NAME]]. All rights reserved.</p>
|
||||
<p class="text-center italic text-ctp-subtext0">© [[YEAR]] [[NAME]]. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<body class="max-w-4xl mx-auto p-4 font-custom">
|
||||
<header class="py-4 flex gap-2 justify-between">
|
||||
<a href="/" class="font-bold text-base font-mono">[[SITE]]</a>
|
||||
<div class="group flex gap-2 font-mono text-ctp-subtext1">
|
||||
<div class="group flex gap-2 font-mono text-ctp-subtext0">
|
||||
<span class="hidden group-hover:block">[[TIMEZONE]]</span>
|
||||
<span id="localtime" class="block group-hover:hidden">--:-- --</span>
|
||||
</div>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
[[CONTENT]]
|
||||
</main>
|
||||
<footer>
|
||||
<p class="text-center italic text-shadow-ctp-subtext1">© [[YEAR]] [[NAME]]. All rights reserved.</p>
|
||||
<p class="text-center italic text-ctp-subtext0">© [[YEAR]] [[NAME]]. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue