fossbook 0.0.16 → 0.1.1

package/README.md

@@ -10,6 +10,7 @@ It was originally part of the [F/OSS Comics blog](https://fosscomics.com) and is
 - **Tags** — Tag-based categorization with tag index and per-tag listing pages
 - **Theming** — Bundled Archie theme with support for custom themes
 - **SEO** — Open Graph and Twitter Card meta tags out of the box
+- **Multilingual sites** — Generate language-specific pages with translation links and `hreflang` metadata
 - **GitHub Pages** — Built-in CNAME support for custom domains
 - **Dev server** — Local preview server with Express
 - **Syntax highlighting** — Code block highlighting via highlight.js
@@ -51,6 +52,14 @@ fossbook new "My First Post"
 
 This creates `content/posts/My First Post/index.md` with pre-filled front-matter and an `images/` directory.
 
+To create the default article and one or more configured translations together:
+
+```bash
+fossbook new "My First Post" --lang ko,ja
+```
+
+This also creates `index.ko.md` and `index.ja.md` in the same post directory. Running the command again preserves existing files and creates only missing translations.
+
 ### Build the site
 
 ```bash
@@ -91,6 +100,19 @@ module.exports = {
   // Set to "" to serve posts at the site root, /<slug>/.
   postsPath: "posts",
 
+  // Optional multilingual configuration
+  defaultLanguage: "en",
+  defaultLanguageInSubdir: false,
+  languages: {
+    en: { languageName: "English", locale: "en-US" },
+    ko: {
+      languageName: "한국어",
+      locale: "ko-KR",
+      blogName: "나의 블로그",
+      blogDescription: "한국어 블로그",
+    },
+  },
+
   // Optional comments (see "Comments" below)
   comments: {
     provider: "utterances",
@@ -148,6 +170,125 @@ This affects the generated output directory, the post URL, post links on the
 home/all-posts/tag pages, and image paths. The on-disk source layout under
 `content/posts/` does not change.
 
+## Multilingual Sites
+
+Fossbook generates a separate static page for each available language. The
+browser loads only the selected language page; changing languages follows a
+normal link and does not require JavaScript.
+
+### Configuration
+
+Add the languages supported by the site to `fossbook.config.js`:
+
+```js
+module.exports = {
+  defaultLanguage: "en",
+  defaultLanguageInSubdir: false,
+  languages: {
+    en: {
+      languageName: "English",
+      locale: "en-US",
+    },
+    ko: {
+      languageName: "한국어",
+      locale: "ko-KR",
+      blogName: "나의 블로그",
+      blogDescription: "한국어 블로그",
+    },
+    ja: {
+      languageName: "日本語",
+      locale: "ja-JP",
+    },
+  },
+};
+```
+
+- `defaultLanguage` identifies the language represented by `index.md` and
+  `about.md`.
+- `defaultLanguageInSubdir: false` keeps the default language at the site root.
+  Other languages are generated below their language code, such as `/ko/`.
+- Set `defaultLanguageInSubdir: true` to generate the default language below
+  its code as well, such as `/en/`.
+- Each language can override site values such as `blogName` and
+  `blogDescription`.
+- `locale` controls language-specific date formatting.
+- Language keys should use standard language tags such as `en`, `ko`, `ja`, or
+  `zh-Hant`.
+
+If `languages` is omitted, Fossbook keeps its existing single-language
+behavior and URLs.
+
+### Create translated posts
+
+Create only the default-language article:
+
+```bash
+fossbook new "Charles Babbage and Ada Lovelace"
+```
+
+Create the default article and multiple translations together:
+
+```bash
+fossbook new "Charles Babbage and Ada Lovelace" --lang ko,ja
+```
+
+The languages passed to `--lang` must be present in the `languages`
+configuration. The command always ensures that the default `index.md` exists,
+then creates the requested translation files. Existing Markdown files and
+images are never overwritten, so the command can be run later to add another
+translation:
+
+```bash
+fossbook new "Charles Babbage and Ada Lovelace" --lang ja
+```
+
+### Source structure
+
+Translations live in the same post bundle and share its `images/` directory:
+
+```text
+content/
+├── about.md
+├── about.ko.md
+└── posts/
+    └── Charles Babbage and Ada Lovelace/
+        ├── index.md
+        ├── index.ko.md
+        ├── index.ja.md
+        └── images/
+            └── feature.png
+```
+
+- `index.md` is the default-language article.
+- `index.<language>.md` is a translated article.
+- `about.md` is the default About page.
+- `about.<language>.md` is a translated About page.
+- A translation is generated only when its Markdown source exists. Fossbook
+  does not substitute default-language content for a missing translation.
+
+### Generated output
+
+With `defaultLanguage: "en"` and `defaultLanguageInSubdir: false`, the example
+above generates:
+
+```text
+public/
+├── index.html
+├── about/index.html
+├── posts/Charles Babbage and Ada Lovelace/index.html
+├── ko/
+│   ├── index.html
+│   ├── about/index.html
+│   └── posts/Charles Babbage and Ada Lovelace/index.html
+└── ja/
+    ├── index.html
+    └── posts/Charles Babbage and Ada Lovelace/index.html
+```
+
+Translated article and About pages display ISO language links such as `EN`,
+`KO`, and `JA`. Only translations that exist are shown. These pages also emit
+canonical URLs and `hreflang` alternate links for search engines.
+
 ### Mermaid diagrams
 
 Fenced code blocks tagged `mermaid` are rendered as diagrams instead of code.
@@ -177,6 +318,7 @@ Options:
   -c, --config   Path to config file (default: ./fossbook.config.js)
   -o, --output   Output directory (default: ./public)
   -p, --port     Dev server port (default: 3000)
+  --lang         (new) Comma-separated translation languages, e.g. ko,ja
   -v, --version  Show version number
   -h, --help     Show help
 ```

package/bin/fossbook.js

@@ -23,6 +23,7 @@ Options:
   -p, --port     Dev server port (default: 3000)
   --clean        Remove output directory before build (default: true)
   --github       (init) Also create a GitHub repo and push
+  --lang         (new) Comma-separated translation languages, e.g. ko,ja
   -m, --message  (deploy) Custom commit message
   --no-wait      (deploy) Push without waiting for CI status
   --draft        (deploy) Commit locally without pushing
@@ -89,9 +90,18 @@ switch (command) {
       console.error('Error: Please provide a post title. Usage: fossbook new "My Post Title"');
       process.exit(1);
     }
+    if (hasFlag("--lang") && !getOption("--lang")) {
+      console.error("Error: Please provide at least one language after --lang");
+      process.exit(1);
+    }
     const config = loadConfig(configPath);
     const { createPost } = require("../lib/new");
-    createPost(config, title);
+    try {
+      createPost(config, title, getOption("--lang"));
+    } catch (error) {
+      console.error(`Error: ${error.message}`);
+      process.exit(1);
+    }
     break;
   }
 

package/lib/home.js

@@ -9,7 +9,7 @@ module.exports = class Pagination extends PageBase {
 
   generateContent(posts) {
     const postsPerPage = 5;
-    const numPages = Math.ceil(posts.length / postsPerPage);
+    const numPages = Math.max(1, Math.ceil(posts.length / postsPerPage));
 
     const pageDir = path.join(this.config.dev.outdir, "page");
     if (fs.existsSync(pageDir))
@@ -47,14 +47,11 @@ module.exports = class Pagination extends PageBase {
       const data = { posts: pagePosts, prev: prev, next: next };
 
       const templatePath = path.join(this.config.themePath, "layouts", "home.html");
-      fs.writeFile(
+      fs.writeFileSync(
         `${filePath}`,
         this.generateHTML(templatePath, data),
-        (e) => {
-          if (e) throw e;
-          console.log(`page/${i + 1}.html was created successfully`);
-        },
       );
+      console.log(`page/${i + 1}.html was created successfully`);
     }
   }
 };

package/lib/index.js

@@ -23,11 +23,60 @@ function copyDirectoryRecursive(src, dest) {
   }
 }
 
-function build(config) {
-  // Remove the output directory
-  if (fs.existsSync(config.dev.outdir))
-    fs.rmSync(config.dev.outdir, { recursive: true });
-  fs.mkdirSync(config.dev.outdir);
+function createPostTranslationIndex(languageConfigs) {
+  const translationIndex = new Map();
+  if (languageConfigs.length === 0) return translationIndex;
+
+  const postsDir = languageConfigs[0].dev.postsdir;
+  if (!fs.existsSync(postsDir)) return translationIndex;
+
+  for (const entry of fs.readdirSync(postsDir, { withFileTypes: true })) {
+    if (!entry.isDirectory()) continue;
+
+    const translations = [];
+    for (const config of languageConfigs) {
+      const sourceFile = config.language === config.defaultLanguage
+        ? "index.md"
+        : `index.${config.language}.md`;
+      if (!fs.existsSync(path.join(postsDir, entry.name, sourceFile))) continue;
+
+      const prefix = config.postsPath ? `${config.postsPath}/` : "";
+      translations.push({
+        language: config.language,
+        languageName: config.languageName,
+        path: `${config.basePath}${prefix}${entry.name}/`,
+        url: `${config.blogsite}/${prefix}${entry.name}/`,
+        isDefault: config.language === config.defaultLanguage,
+      });
+    }
+    translationIndex.set(entry.name, translations);
+  }
+
+  return translationIndex;
+}
+
+function createAboutTranslations(languageConfigs) {
+  if (languageConfigs.length === 0) return [];
+
+  const contentDir = languageConfigs[0].dev.content;
+  return languageConfigs.flatMap((config) => {
+    const sourceFile = config.language === config.defaultLanguage
+      ? "about.md"
+      : `about.${config.language}.md`;
+    if (!fs.existsSync(path.join(contentDir, sourceFile))) return [];
+
+    return [{
+      language: config.language,
+      languageName: config.languageName,
+      path: `${config.basePath || "/"}about/`,
+      url: `${config.blogsite}/about/`,
+      isDefault: config.language === config.defaultLanguage,
+    }];
+  });
+}
+
+function buildLanguage(config) {
+  fs.mkdirSync(config.dev.outdir, { recursive: true });
 
   // Create post pages in output directory
   const posts = new Posts(config);
@@ -50,10 +99,14 @@ function build(config) {
   tagPages.generateContent(postObjects);
 
   // Create about page in output/about directory
-  const aboutPath = config.dev.about;
+  const aboutFile = config.language === config.defaultLanguage
+    ? "about.md"
+    : `about.${config.language}.md`;
+  const aboutPath = path.resolve(config.dev.content, aboutFile);
   if (fs.existsSync(aboutPath)) {
     const aboutPage = new Page(config);
-    aboutPage.readSource(aboutPath);
+    aboutPage.readSource(aboutPath, "about");
+    aboutPage.translations = config.aboutTranslations || [];
     aboutPage.generateContent("page.html", "about");
   }
 
@@ -68,6 +121,22 @@ function build(config) {
   if (fs.existsSync(themeAssetsDir)) {
     copyDirectoryRecursive(themeAssetsDir, config.dev.outdir);
   }
+}
+
+function build(config) {
+  // Remove the output directory
+  if (fs.existsSync(config.dev.outdir))
+    fs.rmSync(config.dev.outdir, { recursive: true });
+  fs.mkdirSync(config.dev.outdir, { recursive: true });
+
+  const languageConfigs = config.languageConfigs || [config];
+  const postTranslationIndex = createPostTranslationIndex(languageConfigs);
+  const aboutTranslations = createAboutTranslations(languageConfigs);
+  languageConfigs.forEach((languageConfig) => {
+    languageConfig.postTranslationIndex = postTranslationIndex;
+    languageConfig.aboutTranslations = aboutTranslations;
+  });
+  languageConfigs.forEach(buildLanguage);
 
   // Create CNAME file for GitHub Pages
   if (config.githubCNAME)
@@ -76,4 +145,9 @@ function build(config) {
   console.log("Build completed successfully");
 }
 
-module.exports = { build };
+module.exports = {
+  build,
+  buildLanguage,
+  createPostTranslationIndex,
+  createAboutTranslations,
+};

package/lib/init.js

@@ -119,6 +119,14 @@ function initProject(options = {}) {
   image: "",
   theme: "archie",
 
+  // Languages (optional)
+  defaultLanguage: "en",
+  defaultLanguageInSubdir: false,
+  // languages: {
+  //   en: { languageName: "English", locale: "en-US" },
+  //   ko: { languageName: "한국어", locale: "ko-KR", blogName: "나의 블로그" },
+  // },
+
   // Comment system (optional)
   // comments: { provider: "utterances", repo: "user/repo", issueTerm: "pathname", theme: "github-light" },
 

package/lib/mod/config.js

@@ -16,6 +16,9 @@ const defaults = {
   githubRepository: "",
   image: "",
   theme: "archie",
+  defaultLanguage: "en",
+  defaultLanguageInSubdir: false,
+  languages: null,
   basePath: "",  // auto-detected for GitHub Pages project sites, e.g. "/repo-name/"
   postsPath: "posts",  // URL prefix for posts: "posts" serves articles at /posts/<slug>/; set "" for root
   comments: null,  // { provider: "utterances", repo: "user/repo", issueTerm: "pathname", theme: "github-light" }
@@ -95,9 +98,70 @@ function loadConfig(configPath) {
   // Normalize postsPath into a bare segment without surrounding slashes
   merged.postsPath = (merged.postsPath || "").replace(/^\/+|\/+$/g, "");
 
+  merged.languageConfigs = createLanguageConfigs(merged);
+
   return merged;
 }
 
+function createLanguageConfigs(config) {
+  const configuredLanguages = config.languages;
+  const hasMultipleLanguages = configuredLanguages !== null && configuredLanguages !== undefined;
+  const languages = hasMultipleLanguages
+    ? configuredLanguages
+    : { [config.defaultLanguage]: {} };
+
+  if (typeof languages !== "object" || Array.isArray(languages) || Object.keys(languages).length === 0) {
+    throw new Error("languages must be a non-empty object");
+  }
+  if (!Object.prototype.hasOwnProperty.call(languages, config.defaultLanguage)) {
+    throw new Error(`defaultLanguage "${config.defaultLanguage}" is not defined in languages`);
+  }
+
+  return Object.entries(languages).map(([language, overrides]) => {
+    if (!/^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/.test(language)) {
+      throw new Error(`Invalid language key "${language}"`);
+    }
+    if (!overrides || typeof overrides !== "object" || Array.isArray(overrides)) {
+      throw new Error(`languages.${language} must be an object`);
+    }
+
+    const useSubdirectory = config.defaultLanguageInSubdir || language !== config.defaultLanguage;
+    const languagePrefix = useSubdirectory ? language : "";
+    const basePath = appendPathSegment(config.basePath, languagePrefix);
+    const blogsite = appendUrlSegment(config.blogsite, languagePrefix);
+
+    return {
+      ...config,
+      ...overrides,
+      language,
+      languageName: overrides.languageName || language,
+      locale: overrides.locale || language,
+      languagePrefix,
+      basePath,
+      blogsite,
+      dev: {
+        ...config.dev,
+        outdir: languagePrefix
+          ? path.join(config.dev.outdir, languagePrefix)
+          : config.dev.outdir,
+      },
+    };
+  });
+}
+
+function appendPathSegment(basePath, segment) {
+  const normalizedBase = `/${basePath || ""}`.replace(/\/{2,}/g, "/");
+  const withTrailingSlash = normalizedBase.endsWith("/")
+    ? normalizedBase
+    : `${normalizedBase}/`;
+  return segment ? `${withTrailingSlash}${segment}/` : withTrailingSlash;
+}
+
+function appendUrlSegment(url, segment) {
+  const normalizedUrl = (url || "").replace(/\/+$/g, "");
+  return segment ? `${normalizedUrl}/${segment}` : normalizedUrl;
+}
+
 function formatDate(
   date,
   locale = "en-US",
@@ -137,4 +201,9 @@ function detectBasePath(config) {
   return "/";
 }
 
-module.exports = { loadConfig, resolveThemePath, formatDate };
+module.exports = {
+  loadConfig,
+  resolveThemePath,
+  formatDate,
+  createLanguageConfigs,
+};

package/lib/mod/page.js

@@ -12,14 +12,16 @@ module.exports = class Page extends PageBase {
     this.contentPath = config.dev.content;
   }
 
-  readSource(filePath) {
+  readSource(filePath, sourceSlug) {
     if (filePath.indexOf(".md") === -1)
-      this.srcFilePath = filePath + "/index.md";
+      this.srcFilePath = path.join(filePath, "index.md");
     else this.srcFilePath = filePath;
 
     const mdContent = fs.readFileSync(this.srcFilePath, "utf8");
 
-    if (path.extname(filePath) === ".md") {
+    if (sourceSlug) {
+      this.path = sourceSlug;
+    } else if (path.extname(filePath) === ".md") {
       // If the file has a .md extension, extract the file name without the extension
       this.path = path.basename(filePath, ".md");
     } else {

package/lib/mod/page_base.js

@@ -12,11 +12,40 @@ module.exports = class PageBase {
     this.content = "";
     this.url = "";
     this.theme = this.config.theme;
+    this.translations = [];
   }
 
   formatDate(date) {
     const options = { year: "numeric", month: "short", day: "numeric" };
-    return date.toLocaleDateString("en-US", options);
+    return date.toLocaleDateString(this.config.locale || "en-US", options);
+  }
+
+  alternateLanguageLinks() {
+    if (this.translations.length < 2) return "";
+
+    const alternates = this.translations.map((translation) =>
+      `<link rel="alternate" hreflang="${escapeHtml(translation.language)}" href="${escapeHtml(translation.url)}" />`,
+    );
+    const defaultTranslation = this.translations.find((translation) => translation.isDefault);
+    if (defaultTranslation) {
+      alternates.push(
+        `<link rel="alternate" hreflang="x-default" href="${escapeHtml(defaultTranslation.url)}" />`,
+      );
+    }
+    return alternates.join("\n        ");
+  }
+
+  languageSwitcher() {
+    if (this.translations.length < 2) return "";
+
+    const links = this.translations.map((translation) => {
+      const current = translation.language === this.config.language;
+      const language = escapeHtml(translation.language);
+      const label = escapeHtml(translation.languageName);
+      const code = escapeHtml(translation.language.toUpperCase());
+      return `<a href="${escapeHtml(translation.path || translation.url)}" lang="${language}" hreflang="${language}" aria-label="${label}"${current ? ' aria-current="page"' : ""}>${code}</a>`;
+    });
+    return `<nav class="language-switcher" aria-label="Languages">${links.join("")}</nav>`;
   }
 
   googleAnalytics(trackingId) {
@@ -95,3 +124,12 @@ module.exports = class PageBase {
     return postHTML;
   }
 };
+
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}

package/lib/new.js

@@ -1,13 +1,22 @@
 const fs = require("fs");
 const path = require("path");
 
-function createPost(config, title) {
+function createPost(config, title, languageOption) {
   const postsDir = config.dev.postsdir;
   const postDir = path.join(postsDir, title);
-
-  if (fs.existsSync(postDir)) {
-    console.error(`Error: Post "${title}" already exists at ${postDir}`);
-    process.exit(1);
+  const defaultLanguage = config.defaultLanguage || "en";
+  const requestedLanguages = parseLanguages(languageOption);
+  const configuredLanguages = config.languages
+    ? Object.keys(config.languages)
+    : [defaultLanguage];
+  const unsupportedLanguages = requestedLanguages.filter(
+    (language) => !configuredLanguages.includes(language),
+  );
+  if (unsupportedLanguages.length > 0) {
+    throw new Error(
+      `Language${unsupportedLanguages.length > 1 ? "s" : ""} "${unsupportedLanguages.join(", ")}" ` +
+      `not configured. Available languages: ${configuredLanguages.join(", ")}`,
+    );
   }
 
   // Ensure the posts directory exists
@@ -24,7 +33,7 @@ function createPost(config, title) {
   // Copy placeholder image to the post's images directory
   const placeholderSrc = path.join(__dirname, "assets", "placeholder.svg");
   const placeholderDest = path.join(postDir, "images", "placeholder.svg");
-  if (fs.existsSync(placeholderSrc)) {
+  if (fs.existsSync(placeholderSrc) && !fs.existsSync(placeholderDest)) {
     fs.copyFileSync(placeholderSrc, placeholderDest);
   }
 
@@ -38,11 +47,35 @@ tags: ""
 ---
 `;
 
-  fs.writeFileSync(path.join(postDir, "index.md"), frontMatter);
+  const languages = [defaultLanguage, ...requestedLanguages];
+  const uniqueLanguages = [...new Set(languages)];
+  const results = uniqueLanguages.map((language) => {
+    const fileName = language === defaultLanguage
+      ? "index.md"
+      : `index.${language}.md`;
+    const filePath = path.join(postDir, fileName);
+    if (fs.existsSync(filePath)) {
+      console.log(`Skipped existing post: ${filePath}`);
+      return { language, filePath, created: false };
+    }
+
+    fs.writeFileSync(filePath, frontMatter);
+    console.log(`Created new post: ${filePath}`);
+    return { language, filePath, created: true };
+  });
+
+  console.log(`Images: ${path.join(postDir, "images/")}`);
+  return results;
+}
 
-  console.log(`Created new post: ${postDir}`);
-  console.log(`  - ${path.join(postDir, "index.md")}`);
-  console.log(`  - ${path.join(postDir, "images/")}`);
+function parseLanguages(languageOption) {
+  if (!languageOption) return [];
+  return [...new Set(
+    languageOption
+      .split(",")
+      .map((language) => language.trim())
+      .filter(Boolean),
+  )];
 }
 
-module.exports = { createPost };
+module.exports = { createPost, parseLanguages };

package/lib/posts.js

@@ -16,19 +16,23 @@ module.exports = class Posts {
     }
     const postPaths = fs.readdirSync(this.config.dev.postsdir);
     postPaths.forEach((postPath) => {
-      const indexPath = path.join(this.config.dev.postsdir, postPath, "index.md");
+      const sourceFile = this.config.language === this.config.defaultLanguage
+        ? "index.md"
+        : `index.${this.config.language}.md`;
+      const indexPath = path.join(this.config.dev.postsdir, postPath, sourceFile);
       if (!fs.existsSync(indexPath)) {
-        console.warn(`Skipping "${postPath}": no index.md found`);
+        console.warn(`Skipping "${postPath}" for ${this.config.language}: no ${sourceFile} found`);
         return;
       }
       const post = new Page(this.config);
-      post.readSource(path.join(this.config.dev.postsdir, postPath));
+      post.readSource(indexPath, postPath);
       // Optionally nest posts under a URL prefix (e.g. "posts" -> /posts/<slug>/).
       // post.slug stays the source folder name so image lookups remain correct.
       const prefix = this.config.postsPath ? `${this.config.postsPath}/` : "";
       post.path = `${prefix}${post.slug}`;
       post.url = `${this.config.blogsite}/${post.path}/`;
       post.imageURL = `${this.config.blogsite}/${post.path}/images/${post.image}`;
+      post.translations = this.config.postTranslationIndex?.get(post.slug) || [];
       this.posts.push(post);
     });
     // sort by date

package/lib/tag/index.js

@@ -53,14 +53,11 @@ module.exports = class TagList extends PageBase {
     this.title = `${this.config.blogName}: ${data.pageTitle}`;
 
     const templatePath = path.join(this.config.themePath, "layouts", "tag_list.html");
-    fs.writeFile(
+    fs.writeFileSync(
       path.join(tagsDir, "index.html"),
       this.generateHTML(templatePath, data),
-      (e) => {
-        if (e) throw e;
-        console.log(`tags/index.html for tags was created successfully`);
-      },
     );
+    console.log(`tags/index.html for tags was created successfully`);
 
     const tagPage = new TagPage(this.config);
     for (let [tag, posts] of tagMap) {

package/lib/tag/tag.js

@@ -18,13 +18,10 @@ module.exports = class TagPage extends PageBase {
     this.description = `List up all posts including '${data.tag}' tag.`;
 
     const templatePath = path.join(this.config.themePath, "layouts", "tag.html");
-    fs.writeFile(
+    fs.writeFileSync(
       path.join(tagDir, "index.html"),
       this.generateHTML(templatePath, data),
-      (e) => {
-        if (e) throw e;
-        console.log(`/tags/${tagPath}/index.html was created successfully`);
-      },
     );
+    console.log(`/tags/${tagPath}/index.html was created successfully`);
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fossbook",
-  "version": "0.0.16",
+  "version": "0.1.1",
   "description": "A lightweight static blog site generator for GitHub Pages",
   "main": "lib/index.js",
   "scripts": {

package/themes/archie/assets/styles/main.css

@@ -1,3 +1,6 @@
+@import url("https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css");
+@import url("https://hangeul.pstatic.net/hangeul_static/css/NanumHimNaeRaNeunMarBoDan.css");
+
 /* Markdown */
 :root{
   --maincolor: #bcc9fc;
@@ -13,6 +16,10 @@
     line-height: 1.6em;
   }
 
+  html:lang(ko) {
+    font-family: 'NanumSquareNeo', sans-serif;
+  }
+
   /* for iOS */
   @media only screen and (hover: none) and (pointer: coarse){
 
@@ -49,6 +56,64 @@
     width: var(--dialogue-width, 100%);
   }
 
+  .transcript-control {
+    display: flex;
+    justify-content: flex-end;
+    margin: .75rem 0 1.5rem;
+  }
+
+  .transcript-toggle {
+    align-items: center;
+    display: inline-flex;
+    font-size: .85rem;
+    gap: .65rem;
+  }
+
+  .transcript-toggle label {
+    cursor: pointer;
+  }
+
+  .transcript-toggle input {
+    appearance: none;
+    background: #d8dce2;
+    border: 1px solid var(--bordercl);
+    border-radius: 999px;
+    cursor: pointer;
+    height: 1.35rem;
+    margin: 0;
+    position: relative;
+    width: 2.5rem;
+  }
+
+  .transcript-toggle input::before {
+    background: #fff;
+    border-radius: 50%;
+    content: "";
+    height: .95rem;
+    left: .15rem;
+    position: absolute;
+    top: .15rem;
+    transition: transform 160ms ease;
+    width: .95rem;
+  }
+
+  .transcript-toggle input:checked {
+    background: var(--maincolor);
+  }
+
+  .transcript-toggle input:checked::before {
+    transform: translateX(1.1rem);
+  }
+
+  .transcript-toggle input:focus-visible {
+    outline: 2px solid var(--hovercolor);
+    outline-offset: 2px;
+  }
+
+  .transcripts-hidden .image-dialogue {
+    display: none;
+  }
+
 
   blockquote {
     margin: 0;
@@ -58,6 +123,22 @@
     font-style: normal;
     font-size: 1rem;
   }
+
+  html:lang(ko) blockquote {
+    font-family: 'NanumHimNaeRaNeunMarBoDan', 'NanumSquareNeo', sans-serif;
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+
+  @media print {
+    .transcript-control {
+      display: none;
+    }
+
+    .transcripts-hidden .image-dialogue {
+      display: flex;
+    }
+  }
   
   a {
     border-bottom: 3px solid var(--maincolor);
@@ -206,6 +287,19 @@
     letter-spacing: -0.5px;
   }
 
+  .language-switcher {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-top: 0.75rem;
+  }
+
+  .language-switcher a[aria-current="page"] {
+    border-bottom-color: transparent;
+    color: #777;
+    pointer-events: none;
+  }
+
   .description {
     font-size: 1rem;
   }

package/themes/archie/layouts/all_posts.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="${page.config.language || "en"}">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

package/themes/archie/layouts/home.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="${page.config.language || "en"}">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

package/themes/archie/layouts/page.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="${page.config.language || "en"}">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -11,6 +11,8 @@
         ${page.config.googleAnalyticsID ? page.googleAnalytics(page.config.googleAnalyticsID) : ""}
         <title>${page.config.blogName}: ${page.title}</title>
         <meta name="description" content="${page.config.blogDescription}" />
+        <link rel="canonical" href="${page.url}" />
+        ${page.alternateLanguageLinks()}
         ${page.openGraph("website")}
 
         <meta name="twitter:card" content="summary_large_image" />
@@ -36,6 +38,7 @@
               <article class="content">
                   <div class="title">
                     <h1 class="title">${page.title}</h1>
+                    ${page.languageSwitcher()}
                   </div>
                   <section class="body">
                     ${page.body}

package/themes/archie/layouts/post.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="${page.config.language || "en"}">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -14,6 +14,8 @@
         ${page.config.googleAnalyticsID ? page.googleAnalytics(page.config.googleAnalyticsID) : ""}
         <title>${page.title}</title>
         <meta name="description" content="${page.description}" />
+        <link rel="canonical" href="${page.url}" />
+        ${page.alternateLanguageLinks()}
 
         ${page.openGraph(
           "article",
@@ -25,6 +27,13 @@
         )}
 
         ${page.twitterCard("summary")}
+        ${page.body.includes('class="blockquote-container image-dialogue"') ? `<script>
+          try {
+            if (localStorage.getItem("fossbook-comic-transcript") === "hidden") {
+              document.documentElement.classList.add("transcripts-hidden");
+            }
+          } catch (error) {}
+        </script>` : ""}
     </head>
     <body>
         <div class="content">
@@ -44,8 +53,15 @@
                   <div class="title">
                     <h1 class="title">${page.title}</h1>
                     <div class="meta">Posted on ${page.formatDate(new Date(page.date))}</div>
+                    ${page.languageSwitcher()}
                   </div>
-                  <section class="body">
+                  ${page.body.includes('class="blockquote-container image-dialogue"') ? `<div class="transcript-control">
+                    <div class="transcript-toggle">
+                      <label for="comic-transcript-toggle">Comic transcript</label>
+                      <input id="comic-transcript-toggle" type="checkbox" role="switch" aria-controls="comic-transcript" checked>
+                    </div>
+                  </div>` : ""}
+                  <section class="body" id="comic-transcript">
                     ${page.body}
                   </section>
                   <div class="post-tags">
@@ -84,6 +100,21 @@
             mermaid.initialize({ startOnLoad: true });
         </script>` : ""}
         ${page.body.includes('class="blockquote-container image-dialogue"') ? `<script>
+          const transcriptToggle = document.querySelector("#comic-transcript-toggle");
+          const transcriptStorageKey = "fossbook-comic-transcript";
+          const setTranscriptVisibility = (visible) => {
+            document.documentElement.classList.toggle("transcripts-hidden", !visible);
+            transcriptToggle.checked = visible;
+          };
+          setTranscriptVisibility(!document.documentElement.classList.contains("transcripts-hidden"));
+          transcriptToggle.addEventListener("change", () => {
+            const visible = transcriptToggle.checked;
+            setTranscriptVisibility(visible);
+            try {
+              localStorage.setItem(transcriptStorageKey, visible ? "visible" : "hidden");
+            } catch (error) {}
+          });
+
           document.querySelectorAll(".image-container + .image-dialogue").forEach((dialogue) => {
             const image = dialogue.previousElementSibling.querySelector("img");
             const syncDialogueWidth = () => {

package/themes/archie/layouts/tag.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="${page.config.language || "en"}">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

package/themes/archie/layouts/tag_list.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="${page.config.language || "en"}">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />