minor tweaks to post page
This commit is contained in:
parent
f3d6366c83
commit
550ce3dabc
6 changed files with 162 additions and 49 deletions
6
index.ts
6
index.ts
|
|
@ -1,15 +1,16 @@
|
|||
import { readdir } from "node:fs/promises";
|
||||
import { YAML } from "bun";
|
||||
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 template = templateStr
|
||||
.replaceAll("[[SITE]]", metadata.title)
|
||||
.replaceAll("[[NAME]]", metadata.name)
|
||||
.replaceAll("[[TIMEZONE]]", metadata.timezone)
|
||||
.replaceAll("[[YEAR]]", new Date().getFullYear().toString());
|
||||
const posts = await readdir("./posts");
|
||||
|
||||
const defaultFrontmatter = {
|
||||
thumb: "",
|
||||
title: "Untitled",
|
||||
desc: "",
|
||||
date: "0000-00-00", // YYYY-MM-DD
|
||||
|
|
@ -49,7 +50,6 @@ posts.forEach(async (post) => {
|
|||
.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);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
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: 2026-05-27
|
||||
|
|
@ -153,11 +152,3 @@ echo "${FILE%/*}" # dirname
|
|||
* **Standard Link:** [Search Engine](https://www.google.com)
|
||||
* **Link with Tooltip:** [GitHub](https://github.com "Go to GitHub")
|
||||
* **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
76
style.css
|
|
@ -4,7 +4,7 @@
|
|||
@import "@catppuccin/tailwindcss/mocha.css";
|
||||
|
||||
@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; }
|
||||
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; }
|
||||
|
||||
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; }
|
||||
code { @apply text-ctp-text rounded px-1; }
|
||||
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;
|
||||
}*/
|
||||
|
|
|
|||
|
|
@ -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>© [[YEAR]] [[NAME]]. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
43
templates/home.html
Normal file
43
templates/home.html
Normal 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">© [[YEAR]] [[NAME]]. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
43
templates/post.html
Normal file
43
templates/post.html
Normal 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">© [[YEAR]] [[NAME]]. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue