satr14/ssg.md
1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

minor tweaks to post page

Browse source
This commit is contained in:
Satria 2026-05-28 20:35:11 +07:00
commit 550ce3dabc
6 changed files with 162 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

6
index.ts
View file

@ -1,15 +1,16 @@
import { readdir } from "node:fs/promises"; import { readdir } from "node:fs/promises";
import { YAML } from "bun"; import { YAML } from "bun";
import metadata from "./metadata.json"; import metadata from "./metadata.json";
import templateRaw from "./template.html" with { type: "text" }; import templateRaw from "./templates/post.html" with { type: "text" };
const templateStr = templateRaw as unknown as string; const templateStr = templateRaw as unknown as string;
const template = templateStr const template = templateStr
.replaceAll("[[SITE]]", metadata.title)
.replaceAll("[[NAME]]", metadata.name) .replaceAll("[[NAME]]", metadata.name)
.replaceAll("[[TIMEZONE]]", metadata.timezone)
.replaceAll("[[YEAR]]", new Date().getFullYear().toString()); .replaceAll("[[YEAR]]", new Date().getFullYear().toString());
const posts = await readdir("./posts"); const posts = await readdir("./posts");
const defaultFrontmatter = { const defaultFrontmatter = {
thumb: "",
title: "Untitled", title: "Untitled",
desc: "", desc: "",
date: "0000-00-00", // YYYY-MM-DD date: "0000-00-00", // YYYY-MM-DD
@ -49,7 +50,6 @@ posts.forEach(async (post) => {
.replaceAll("[[DATE]]", frontmatter.date.toDateString()) .replaceAll("[[DATE]]", frontmatter.date.toDateString())
.replaceAll("[[REVISIONS]]", `https://git.satr14.my.id/satr14/ssg.md/commits/branch/main/posts/${post}`) .replaceAll("[[REVISIONS]]", `https://git.satr14.my.id/satr14/ssg.md/commits/branch/main/posts/${post}`)
.replaceAll("[[DESC]]", frontmatter.desc) .replaceAll("[[DESC]]", frontmatter.desc)
.replaceAll("[[THUMB]]", frontmatter.thumb)
.replace("[[CONTENT]]", html); .replace("[[CONTENT]]", html);
await Bun.write(`./dist/posts/${post.replace(".md", ".html")}`, render); await Bun.write(`./dist/posts/${post.replace(".md", ".html")}`, render);

9
posts/test.md
View file

@ -1,4 +1,3 @@
thumb: https://picsum.photos/id/237/200/300
title: Comprehensive Markdown & GFM Syntax Reference 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. 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 date: 2026-05-27
@ -153,11 +152,3 @@ echo "${FILE%/*}" # dirname
* **Standard Link:** [Search Engine](https://www.google.com) * **Standard Link:** [Search Engine](https://www.google.com)
* **Link with Tooltip:** [GitHub](https://github.com "Go to GitHub") * **Link with Tooltip:** [GitHub](https://github.com "Go to GitHub")
* **Autolink (GFM):** https://nixos.org * **Autolink (GFM):** https://nixos.org
---
## 6. Footnotes (GFM)
You can reference a footnote at the end of a sentence[^1].
[^1]: This is the text of the footnote, which typically renders at the bottom of the document.

76
style.css
View file

@ -4,7 +4,7 @@
@import "@catppuccin/tailwindcss/mocha.css"; @import "@catppuccin/tailwindcss/mocha.css";
@theme { --font-custom: "Lora", serif; } @theme { --font-custom: "Lora", serif; }
body { @apply bg-ctp-base text-ctp-text; } body { @apply bg-ctp-crust text-ctp-text; }
h1 { @apply text-3xl; } h1 { @apply text-3xl; }
h2 { @apply text-2xl; } h2 { @apply text-2xl; }
@ -31,5 +31,75 @@ table th, table td { @apply border border-ctp-surface1 px-4 py-2; }
table th { @apply bg-ctp-surface0 font-semibold; } table th { @apply bg-ctp-surface0 font-semibold; }
blockquote { @apply border-l-4 border-ctp-surface1 pl-4 italic my-4; } blockquote { @apply border-l-4 border-ctp-surface1 pl-4 italic my-4; }
code { @apply bg-ctp-surface0 text-ctp-text rounded px-1; } code { @apply text-ctp-text rounded px-1; }
pre { @apply bg-ctp-surface0 text-ctp-text rounded p-4 overflow-x-auto; } pre { @apply bg-ctp-base text-ctp-text rounded p-4 overflow-x-auto; }
/*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;
}*/

34
template.html
View file

@ -1,34 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 class="max-w-4xl mx-auto p-4 font-custom">
<header>
<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 class="my-10">
[[CONTENT]]
</main>
<footer>
<p>&copy; [[YEAR]] [[NAME]]. All rights reserved.</p>
</footer>
</body>
</html>

43
templates/home.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<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">
<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]]">
<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">
<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]]
</main>
<footer>
<p class="text-center italic text-shadow-ctp-subtext1">&copy; [[YEAR]] [[NAME]]. All rights reserved.</p>
</footer>
</body>
</html>

43
templates/post.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<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">
<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]]">
<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">
<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]]
</main>
<footer>
<p class="text-center italic text-shadow-ctp-subtext1">&copy; [[YEAR]] [[NAME]]. All rights reserved.</p>
</footer>
</body>
</html>