feat: multilangauge and weekly digest (#2)

* chore: use `deno.jsonc` * ci: allow empty tests * fix: rendering style * fix: date not being sorted properly * chore: organize pages * feat: nav bar * feat: multilangauge and weekly digest
cataclysmbnteam · Feb 11, 2024 · d60f352 · d60f352
1 parent e2c1135
commit d60f352
Show file tree

Hide file tree

Showing 27 changed files with 1,299 additions and 466 deletions.
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -34,4 +34,4 @@ jobs:
         with:
           deno-version: ${{ matrix.deno }}
       - name: Run unit tests on Deno
-        run: deno test
+        run: deno test --allow-none
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 _site
+pr.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,7 +2,7 @@
 	"deno.enable": true,
 	"deno.lint": true,
 	"deno.unstable": true,
-	"deno.config": "./deno.json",
+	"deno.config": "./deno.jsonc",
 	"[json][jsonc][markdown][typescript][typescriptreact]": {
 		"editor.defaultFormatter": "denoland.vscode-deno"
 	}

diff --git a/_config.ts b/_config.ts
@@ -1,16 +1,33 @@
 import { lume } from "./lume_core.ts"
+import type { Processor } from "lume/core/processors.ts"
+
+import multilanguage from "lume/plugins/multilanguage.ts"
 import relativeUrls from "lume/plugins/relative_urls.ts"
 import inline from "lume/plugins/inline.ts"
 import minifyHTML from "lume/plugins/minify_html.ts"
 
 const site = lume()
 
-site.copy([".css"])
-site.ignore("./README.md")
-site.data("layout", "_includes/base.ts")
-site.use(relativeUrls())
+site
+	.copy([".css"])
+	.ignore("./README.md", "./CONTRIBUTING.md")
+	.data("layout", "_includes/base.ts")
+
+const addMeta: Processor = (pages) =>
+	pages.forEach((page) => {
+		page.data.date = new Date(page.data.basename)
+		page.data.title = page.data.title ?? page.data.basename
+	})
+
+site
+	.preprocess([".md"], addMeta)
+	.use(relativeUrls())
+	.use(multilanguage({ languages: ["ko"] }))
+
 if (Deno.env.get("MINIFY")) {
-	site.use(inline())
-	site.use(minifyHTML())
+	site
+		.use(inline())
+		.use(minifyHTML())
 }
+
 export default site
diff --git a/_includes/base.ts b/_includes/base.ts
@@ -1,5 +1,17 @@
 export const repo = "https://github.com/scarf005/bn-blog"
 
+const header = /*html*/ `
+    <header>
+        <h1>
+            <a href="/">카타클리즘: 밝은 밤 블로그</a>
+        </h1>
+        <nav aria-labelledby="recent-changes-navigation">
+            <a href="/ko/">최근 내역</a>
+            <a href="/ko/pages">전체 내역</a>
+        </nav>
+    </header>
+`
+
 const footer = /*html*/ `
     <footer>
         © 2023 <a href="https://github.com/scarf005">scarf</a>
@@ -10,19 +22,18 @@ const footer = /*html*/ `
 
 const render = (title: string, { content, head = "" }: Lume.Data): string => /*html*/ `
     <!DOCTYPE html>
-    <html lang="en">
+    <html lang="ko">
         <head>
             <meta charset="UTF-8" />
             <meta name="viewport" content="width=device-width, initial-scale=1" />
             <title>${title}</title>
-            <link rel="stylesheet" href="/assets/style.css" inline />
+            <link rel="stylesheet" href="/assets/global.css" inline />
             ${head}
         </head>
         <body>
-            <main>
-                <h1>${title}</h1>
-                ${content}
-            </main>
+            ${header}
+            <hr />
+            ${content}
             ${footer}
         </body>
     </html>

diff --git a/_includes/pages.ts b/_includes/pages.ts
@@ -0,0 +1,8 @@
+export const layout = "base.ts"
+export const head = /*html*/ `
+    <link rel="stylesheet" href="/assets/pages.css" inline />
+`
+
+export default ({ children }: Lume.Data) => /*html*/ `
+    ${children}
+`
diff --git a/assets/global.css b/assets/global.css
@@ -0,0 +1,67 @@
+:root {
+    --width: 800px;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100dvh;
+
+    --margin: calc(100vw - var(--width));
+    margin: auto max(0vw, calc(var(--margin) / 2));
+}
+
+main {
+    max-width: var(--width);
+
+    display: flex;
+    flex-direction: column;
+    line-height: 1.6;
+    color: #444;
+}
+
+main>header {
+    & {
+        display: flex;
+        align-items: flex-end;
+        margin: 1em 0;
+        gap: 1em;
+    }
+
+    h1 {
+        margin: 0;
+    }
+}
+
+main,
+nav {
+    margin-bottom: auto;
+}
+
+footer {
+    margin: 1em auto;
+}
+
+hr {
+    width: 100%;
+}
+
+img {
+    max-width: min(100%, var(--width));
+    height: auto;
+    object-fit: contain;
+}
+
+a {
+    text-decoration-line: underline;
+}
+
+li code {
+    font-size: 1rem;
+}
+
+h1,
+h2,
+h3 {
+    line-height: 1.2;
+}
diff --git a/assets/list.css b/assets/list.css
diff --git a/assets/pages.css b/assets/pages.css
@@ -0,0 +1,12 @@
+nav {
+
+    h1,
+    h2,
+    h3 {
+        margin: 0.5em auto;
+    }
+}
+
+ul {
+    padding-left: 1em;
+}
diff --git a/assets/style.css b/assets/style.css
diff --git a/deno.json → deno.jsonc b/deno.json → deno.jsonc
@@ -16,9 +16,9 @@
 		"exactOptionalPropertyTypes": true,
 		"noErrorTruncation": true
 	},
-	"unstable": ["ffi", "http"],
+	"unstable": ["temporal"],
 	"nodeModulesDir": false,
 	"imports": {
-		"lume/": "https://deno.land/x/lume@v2.0.1/"
+		"lume/": "https://raw.githubusercontent.com/lumeland/lume/9cf2345745ec575e11c15684c4157166d500d2e4/"
 	}
 }