fossbook 0.1.4 → 0.2.1

package/README.md

@@ -105,12 +105,7 @@ module.exports = {
   defaultLanguageInSubdir: false,
   languages: {
     en: { languageName: "English", locale: "en-US" },
-    ko: {
-      languageName: "한국어",
-      locale: "ko-KR",
-      blogName: "나의 블로그",
-      blogDescription: "한국어 블로그",
-    },
+    ko: { languageName: "한국어", locale: "ko-KR" },
   },
 
   // Optional comments (see "Comments" below)
@@ -132,6 +127,11 @@ module.exports = {
 
 ## Content Format
 
+Fossbook supports GitHub Flavored Markdown plus extensions for image sizing
+and alignment, captions, comic dialogue, aligned links, Mermaid diagrams, and
+syntax-highlighted code. See [Fossbook Markdown](fossbook_markdown.md) for
+syntax and examples.
+
 ### Post front-matter
 
 ```markdown
@@ -192,8 +192,6 @@ module.exports = {
     ko: {
       languageName: "한국어",
       locale: "ko-KR",
-      blogName: "나의 블로그",
-      blogDescription: "한국어 블로그",
     },
     ja: {
       languageName: "日本語",
@@ -203,14 +201,43 @@ module.exports = {
 };
 ```
 
+Put localized blog information in a sibling config file for each language. For
+example, `fossbook.config.en.js` contains:
+
+```js
+module.exports = {
+  blogName: "My Blog",
+  authorName: "Jane Doe",
+  authorDescription: "Open source developer and writer",
+  blogDescription: "An English-language blog",
+};
+```
+
+And `fossbook.config.ko.js` contains:
+
+```js
+module.exports = {
+  blogName: "나의 블로그",
+  authorName: "이수현",
+  authorDescription: "오픈 소스 개발자이자 작가",
+  blogDescription: "한국어 블로그",
+  homeLabel: "대문",
+  allPostsLabel: "모든 글",
+  aboutLabel: "소개",
+  tagsLabel: "태그",
+  allTagsLabel: "모든 태그",
+};
+```
+
 - `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`.
+- Language config files use the main config filename with the language code
+  inserted before the extension: `fossbook.config.<language>.js`.
+- Values omitted from a language config fall back to `fossbook.config.js`.
 - `locale` controls language-specific date formatting.
 - Language keys should use standard language tags such as `en`, `ko`, `ja`, or
   `zh-Hant`.

package/lib/all_posts.js

@@ -9,15 +9,15 @@ module.exports = class AllPostsPage extends PageBase {
 
   // posts: array of Page objects
   generateContent(posts) {
-    const pageTitle = "All posts";
+    const pageTitle = this.config.allPostsLabel || "All posts";
     const allPostsDir = path.join(this.config.dev.outdir, "all_posts");
     if (!fs.existsSync(allPostsDir))
       fs.mkdirSync(allPostsDir);
 
     const data = { posts: posts, pageTitle: pageTitle };
-    this.url = `${this.config.blogsite}/posts.html`;
+    this.url = `${this.config.blogsite}/all_posts/`;
     this.title = `${this.config.blogName}: ${data.pageTitle}`;
-    this.description = "All posts";
+    this.description = pageTitle;
     this.imageURL = this.config.image;
 
     const templatePath = path.join(this.config.themePath, "layouts", "all_posts.html");

package/lib/index.js

@@ -75,6 +75,36 @@ function createAboutTranslations(languageConfigs) {
   });
 }
 
+function createHomeTranslations(languageConfigs) {
+  return languageConfigs.map((config) => ({
+    language: config.language,
+    languageName: config.languageName,
+    path: config.basePath || "/",
+    url: `${config.blogsite}/`,
+    isDefault: config.language === config.defaultLanguage,
+  }));
+}
+
+function createAllPostsTranslations(languageConfigs) {
+  return languageConfigs.map((config) => ({
+    language: config.language,
+    languageName: config.languageName,
+    path: `${config.basePath || "/"}all_posts/`,
+    url: `${config.blogsite}/all_posts/`,
+    isDefault: config.language === config.defaultLanguage,
+  }));
+}
+
+function createTagListTranslations(languageConfigs) {
+  return languageConfigs.map((config) => ({
+    language: config.language,
+    languageName: config.languageName,
+    path: `${config.basePath || "/"}tags/`,
+    url: `${config.blogsite}/tags/`,
+    isDefault: config.language === config.defaultLanguage,
+  }));
+}
+
 function buildLanguage(config) {
   fs.mkdirSync(config.dev.outdir, { recursive: true });
 
@@ -88,14 +118,17 @@ function buildLanguage(config) {
 
   // Create home page and pagination in output/page directory
   const homePagination = new HomePagination(config);
+  homePagination.translations = config.homeTranslations || [];
   homePagination.generateContent(postObjects);
 
   // Create all posts page in output/all_posts directory
   const allPostsPage = new AllPostsPage(config);
+  allPostsPage.translations = config.allPostsTranslations || [];
   allPostsPage.generateContent(postObjects);
 
   // Create tag pages in output/tags directory
   const tagPages = new TagPages(config);
+  tagPages.translations = config.tagListTranslations || [];
   tagPages.generateContent(postObjects);
 
   // Create about page in output/about directory
@@ -132,9 +165,15 @@ function build(config) {
   const languageConfigs = config.languageConfigs || [config];
   const postTranslationIndex = createPostTranslationIndex(languageConfigs);
   const aboutTranslations = createAboutTranslations(languageConfigs);
+  const homeTranslations = createHomeTranslations(languageConfigs);
+  const allPostsTranslations = createAllPostsTranslations(languageConfigs);
+  const tagListTranslations = createTagListTranslations(languageConfigs);
   languageConfigs.forEach((languageConfig) => {
     languageConfig.postTranslationIndex = postTranslationIndex;
     languageConfig.aboutTranslations = aboutTranslations;
+    languageConfig.homeTranslations = homeTranslations;
+    languageConfig.allPostsTranslations = allPostsTranslations;
+    languageConfig.tagListTranslations = tagListTranslations;
   });
   languageConfigs.forEach(buildLanguage);
 
@@ -150,4 +189,7 @@ module.exports = {
   buildLanguage,
   createPostTranslationIndex,
   createAboutTranslations,
+  createHomeTranslations,
+  createAllPostsTranslations,
+  createTagListTranslations,
 };

package/lib/init.js

@@ -124,8 +124,11 @@ function initProject(options = {}) {
   defaultLanguageInSubdir: false,
   // languages: {
   //   en: { languageName: "English", locale: "en-US" },
-  //   ko: { languageName: "한국어", locale: "ko-KR", blogName: "나의 블로그" },
+  //   ko: { languageName: "한국어", locale: "ko-KR" },
   // },
+  // Add localized blog information to fossbook.config.en.js,
+  // fossbook.config.ko.js, and so on. Menu labels can also be localized with
+  // homeLabel, allPostsLabel, aboutLabel, tagsLabel, and allTagsLabel.
 
   // Comment system (optional)
   // comments: { provider: "utterances", repo: "user/repo", issueTerm: "pathname", theme: "github-light" },

package/lib/mod/config.js

@@ -98,12 +98,12 @@ function loadConfig(configPath) {
   // Normalize postsPath into a bare segment without surrounding slashes
   merged.postsPath = (merged.postsPath || "").replace(/^\/+|\/+$/g, "");
 
-  merged.languageConfigs = createLanguageConfigs(merged);
+  merged.languageConfigs = createLanguageConfigs(merged, resolvedConfigPath);
 
   return merged;
 }
 
-function createLanguageConfigs(config) {
+function createLanguageConfigs(config, configPath) {
   const configuredLanguages = config.languages;
   const hasMultipleLanguages = configuredLanguages !== null && configuredLanguages !== undefined;
   const languages = hasMultipleLanguages
@@ -125,6 +125,10 @@ function createLanguageConfigs(config) {
       throw new Error(`languages.${language} must be an object`);
     }
 
+    const fileOverrides = configPath
+      ? loadLanguageConfig(configPath, language)
+      : {};
+
     const useSubdirectory = config.defaultLanguageInSubdir || language !== config.defaultLanguage;
     const languagePrefix = useSubdirectory ? language : "";
     const basePath = appendPathSegment(config.basePath, languagePrefix);
@@ -133,9 +137,12 @@ function createLanguageConfigs(config) {
     return {
       ...config,
       ...overrides,
+      ...fileOverrides,
+      defaultLanguage: config.defaultLanguage,
+      defaultLanguageInSubdir: config.defaultLanguageInSubdir,
       language,
-      languageName: overrides.languageName || language,
-      locale: overrides.locale || language,
+      languageName: fileOverrides.languageName || overrides.languageName || language,
+      locale: fileOverrides.locale || overrides.locale || language,
       languagePrefix,
       basePath,
       blogsite,
@@ -149,6 +156,22 @@ function createLanguageConfigs(config) {
   });
 }
 
+function loadLanguageConfig(configPath, language) {
+  const extension = path.extname(configPath) || ".js";
+  const configStem = extension
+    ? configPath.slice(0, -extension.length)
+    : configPath;
+  const languageConfigPath = `${configStem}.${language}${extension}`;
+
+  if (!fs.existsSync(languageConfigPath)) return {};
+
+  const languageConfig = require(languageConfigPath);
+  if (!languageConfig || typeof languageConfig !== "object" || Array.isArray(languageConfig)) {
+    throw new Error(`${path.basename(languageConfigPath)} must export an object`);
+  }
+  return languageConfig;
+}
+
 function appendPathSegment(basePath, segment) {
   const normalizedBase = `/${basePath || ""}`.replace(/\/{2,}/g, "/");
   const withTrailingSlash = normalizedBase.endsWith("/")

package/lib/mod/marked.js

@@ -1,6 +1,71 @@
 const marked = require("marked");
 const hljs = require("highlight.js");
 
+function escapeAttribute(value) {
+  return value
+    .replace(/&/g, "&")
+    .replace(/"/g, """)
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function parsePanelAttributes(source) {
+  const attributes = {};
+  const attributePattern = /([a-z][a-z-]*)="([^"]*)"/gy;
+  let offset = 0;
+
+  while (offset < source.length) {
+    while (source[offset] === " " || source[offset] === "\t") offset += 1;
+    if (offset === source.length) break;
+
+    attributePattern.lastIndex = offset;
+    const match = attributePattern.exec(source);
+    if (!match) throw new Error(`Invalid panels attribute near: ${source.slice(offset)}`);
+    if (match[1] !== "columns" && match[1] !== "label") {
+      throw new Error(`Unsupported panels attribute: ${match[1]}`);
+    }
+    if (Object.hasOwn(attributes, match[1])) {
+      throw new Error(`Duplicate panels attribute: ${match[1]}`);
+    }
+    attributes[match[1]] = match[2];
+    offset = attributePattern.lastIndex;
+  }
+
+  const columns = attributes.columns === undefined ? 2 : Number(attributes.columns);
+  if (!Number.isInteger(columns) || columns < 1 || columns > 6) {
+    throw new Error("Panel columns must be an integer from 1 to 6");
+  }
+
+  return { columns, label: attributes.label };
+}
+
+const panelsExtension = {
+  name: "panels",
+  level: "block",
+  start(source) {
+    return source.match(/^:::panels(?:[ \t]|$)/m)?.index;
+  },
+  tokenizer(source) {
+    const match = /^:::panels([^\n]*)\n([\s\S]*?)\n:::(?:\n|$)/.exec(source);
+    if (!match) return undefined;
+
+    const attributes = parsePanelAttributes(match[1].trim());
+    return {
+      type: "panels",
+      raw: match[0],
+      columns: attributes.columns,
+      label: attributes.label,
+      tokens: this.lexer.blockTokens(match[2]),
+    };
+  },
+  renderer(token) {
+    const label = token.label
+      ? ` role="group" aria-label="${escapeAttribute(token.label)}"`
+      : "";
+    return `<div class="panel-group" style="--panel-columns: ${token.columns};"${label}>\n${this.parser.parse(token.tokens)}</div>\n`;
+  },
+};
+
 marked.setOptions({
   renderer: new marked.Renderer(),
   pedantic: false,
@@ -66,7 +131,7 @@ const renderer = {
     // Construct the image tag with optional size and title
     let imageTag = `<img src="${href}" alt="${text}"`;
     if (size) {
-      imageTag += ` style="width: ${size};"`;
+      imageTag += ` class="sized-image" style="width: ${size};"`;
     }
     imageTag += ">";
 
@@ -114,6 +179,7 @@ const renderer = {
 };
 
 marked.use({
+  extensions: [panelsExtension],
   renderer,
   hooks: {
     postprocess(html) {

package/lib/tag/index.js

@@ -46,10 +46,11 @@ module.exports = class TagList extends PageBase {
     if (!fs.existsSync(tagsDir))
       fs.mkdirSync(tagsDir);
 
+    const pageTitle = this.config.allTagsLabel || "All tags";
     this.imageURL = this.config.image;
-    this.description = "Tag List";
-    const data = { tags: tagArray, pageTitle: "All tags" };
-    this.url = `${this.config.blogsite}/tag_list.html`;
+    this.description = pageTitle;
+    const data = { tags: tagArray, pageTitle };
+    this.url = `${this.config.blogsite}/tags/`;
     this.title = `${this.config.blogName}: ${data.pageTitle}`;
 
     const templatePath = path.join(this.config.themePath, "layouts", "tag_list.html");

package/package.json

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

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

@@ -158,7 +158,7 @@
   }
   
   a {
-    border-bottom: 3px solid var(--maincolor);
+    border-bottom: 2px solid var(--maincolor);
     color: inherit;
     text-decoration: none;
   }
@@ -223,6 +223,46 @@
   figure img {
     max-height: 500px;
   }
+
+  .panel-group {
+    display: grid;
+    grid-template-columns: repeat(var(--panel-columns), minmax(0, 1fr));
+    gap: 1.5rem;
+    align-items: start;
+    margin: 1.5rem 0;
+  }
+
+  .panel-group .image-container,
+  .panel-group figure {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .panel-group figure {
+    display: block;
+    padding: 0;
+  }
+
+  .panel-group img {
+    display: block;
+    height: auto;
+    width: 100%;
+  }
+
+  .panel-group figcaption {
+    margin-top: 0.75rem;
+    text-align: center;
+  }
+
+  @media screen and (max-width: 599px) {
+    .panel-group {
+      grid-template-columns: 1fr;
+    }
+
+    .sized-image {
+      width: 100% !important;
+    }
+  }
   
   @media screen and (min-width: 600px) {
     figure {
@@ -291,16 +331,20 @@
     font-size: 1.5rem;
   }
   h1, h2, h3, h4, h5, h6 {
-    font-size: 1.2rem;
+    line-height: 1.3;
+    margin-bottom: 0.75em;
     margin-top: 2em;
   }
-  
-  h1::before { color: var(--maincolor); content: '# '; }
-  h2::before { color: var(--maincolor); content: '## '; }
-  h3::before { color: var(--maincolor); content: '### '; }
-  h4::before { color: var(--maincolor); content: '#### '; }
-  h5::before { color: var(--maincolor); content: '##### '; }
-  h6::before { color: var(--maincolor); content: '###### '; }
+
+  h1 { font-size: 1.4rem; }
+  h2 { font-size: 1.2rem; }
+  h3 { font-size: 1.1rem; }
+  h4 {
+    font-size: 1rem;
+    font-weight: 700;
+  }
+  h5 { font-size: 0.9rem; }
+  h6 { font-size: 0.8rem; }
   
   .meta {
     color: #999;
@@ -331,6 +375,10 @@
   nav {
     font-family: 'Roboto Mono', monospace;
   }
+  html:lang(ko) header,
+  html:lang(ko) nav {
+    font-family: 'NanumSquareNeo', sans-serif;
+  }
   nav.post-navigation {
     display: flex;
     justify-content: end;
@@ -365,6 +413,7 @@
   
   /* Common */
   .title h1 {
+    font-size: 1.7rem;
     margin-bottom: 0;
   }
   
@@ -394,7 +443,7 @@
   }
   
   .callout a {
-    border-bottom: 3px solid #fff;
+    border-bottom: 2px solid #fff;
   }
   
   .callout a:hover {
@@ -410,7 +459,7 @@
     content: "🏷 ";
   }
   .tags a{
-    border-bottom: 3px solid var(--maincolor); 
+    border-bottom: 2px solid var(--maincolor);
   }
   .tags a:hover{
     color:white;

package/themes/archie/layouts/all_posts.html

@@ -10,6 +10,8 @@
         <!-- Google tag (gtag.js) -->
         ${page.config.googleAnalyticsID ? page.googleAnalytics(page.config.googleAnalyticsID) : ""}
         <title>${page.config.blogName}: ${data.pageTitle}</title>
+        <link rel="canonical" href="${page.url}" />
+        ${page.alternateLanguageLinks()}
         ${page.openGraph("website")}
     </head>
     <body>
@@ -17,13 +19,16 @@
             <header>
                 <div class="main">${page.config.blogName}</div>
                 <nav>
-                  <a href="${page.config.basePath}">Home</a>
+                  <a href="${page.config.basePath}">${page.config.homeLabel || "Home"}</a>
                   ${data.pageTitle}
-                  <a href="${page.config.basePath}about">About</a>
-                  <a href="${page.config.basePath}tags">Tags</a>
+                  <a href="${page.config.basePath}about">${page.config.aboutLabel || "About"}</a>
+                  <a href="${page.config.basePath}tags">${page.config.tagsLabel || "Tags"}</a>
                 </nav>
             </header>
-              <h1 class="page-title">${data.pageTitle}</h1>
+              <div class="title">
+                <h1 class="page-title">${data.pageTitle}</h1>
+                ${page.languageSwitcher()}
+              </div>
               <ul class="posts">
                 ${data.posts
                   .map(

package/themes/archie/layouts/home.html

@@ -10,6 +10,8 @@
         ${page.config.googleAnalyticsID ? page.googleAnalytics(page.config.googleAnalyticsID) : ""}
         <title>${page.config.blogName}</title>
         <meta name="description" content="${page.config.blogDescription}" />
+        <link rel="canonical" href="${page.url}" />
+        ${page.alternateLanguageLinks()}
         ${page.openGraph("website")}
         <!-- Twitter Card -->
         ${page.twitterCard("summary")}
@@ -17,12 +19,15 @@
     <body>
         <div class="content">
             <header>
-                <div class="main">${page.config.blogName}</div>
+                <div>
+                  <div class="main">${page.config.blogName}</div>
+                  ${page.languageSwitcher()}
+                </div>
                 <nav>
-                  Home
-                  <a href="${page.config.basePath}all_posts">All posts</a>
-                  <a href="${page.config.basePath}about">About</a>
-                  <a href="${page.config.basePath}tags">Tags</a>
+                  ${page.config.homeLabel || "Home"}
+                  <a href="${page.config.basePath}all_posts">${page.config.allPostsLabel || "All posts"}</a>
+                  <a href="${page.config.basePath}about">${page.config.aboutLabel || "About"}</a>
+                  <a href="${page.config.basePath}tags">${page.config.tagsLabel || "Tags"}</a>
                 </nav>
             </header>
 

package/themes/archie/layouts/page.html

@@ -28,10 +28,10 @@
                   ${page.config.blogName}
                 </div>
                 <nav class="site-navigation">
-                  <a href="${page.config.basePath}">Home</a>
-                  <a href="${page.config.basePath}all_posts">All posts</a>
-                  About
-                  <a href="${page.config.basePath}tags">Tags</a>
+                  <a href="${page.config.basePath}">${page.config.homeLabel || "Home"}</a>
+                  <a href="${page.config.basePath}all_posts">${page.config.allPostsLabel || "All posts"}</a>
+                  ${page.config.aboutLabel || "About"}
+                  <a href="${page.config.basePath}tags">${page.config.tagsLabel || "Tags"}</a>
                 </nav>
             </header>
             <main>

package/themes/archie/layouts/post.html

@@ -42,10 +42,10 @@
                   ${page.config.blogName}
                 </div>
                 <nav class="site-navigation">
-                  <a href="${page.config.basePath}">Home</a>
-                  <a href="${page.config.basePath}all_posts">All posts</a>
-                  <a href="${page.config.basePath}about">About</a>
-                  <a href="${page.config.basePath}tags">Tags</a>
+                  <a href="${page.config.basePath}">${page.config.homeLabel || "Home"}</a>
+                  <a href="${page.config.basePath}all_posts">${page.config.allPostsLabel || "All posts"}</a>
+                  <a href="${page.config.basePath}about">${page.config.aboutLabel || "About"}</a>
+                  <a href="${page.config.basePath}tags">${page.config.tagsLabel || "Tags"}</a>
                 </nav>
             </header>
             <main>

package/themes/archie/layouts/tag.html

@@ -17,10 +17,10 @@
             <header>
                 <div class="main">${page.config.blogName}</div>
                 <nav>
-                  <a href="${page.config.basePath}">Home</a>
-                  <a href="${page.config.basePath}all_posts">All posts</a>
-                  <a href="${page.config.basePath}about">About</a>
-                  <a href="${page.config.basePath}tags">Tags</a>
+                  <a href="${page.config.basePath}">${page.config.homeLabel || "Home"}</a>
+                  <a href="${page.config.basePath}all_posts">${page.config.allPostsLabel || "All posts"}</a>
+                  <a href="${page.config.basePath}about">${page.config.aboutLabel || "About"}</a>
+                  <a href="${page.config.basePath}tags">${page.config.tagsLabel || "Tags"}</a>
                 </nav>
             </header>
               <h1 class="page-title">Entries tagged - "${data.tag}"</h1>

package/themes/archie/layouts/tag_list.html

@@ -11,6 +11,8 @@
         <!-- Google tag (gtag.js) -->
         ${page.config.googleAnalyticsID ? page.googleAnalytics(page.config.googleAnalyticsID) : ""}
         <title>${page.config.blogName}: ${data.pageTitle}</title>
+        <link rel="canonical" href="${page.url}" />
+        ${page.alternateLanguageLinks()}
         ${page.openGraph("website")}
     </head>
     <body>
@@ -18,13 +20,16 @@
             <header>
                 <div class="main">${page.config.blogName}</div>
                 <nav>
-                  <a href="${page.config.basePath}">Home</a>
-                  <a href="${page.config.basePath}all_posts">All posts</a>
-                  <a href="${page.config.basePath}about">About</a>
-                  Tags
+                  <a href="${page.config.basePath}">${page.config.homeLabel || "Home"}</a>
+                  <a href="${page.config.basePath}all_posts">${page.config.allPostsLabel || "All posts"}</a>
+                  <a href="${page.config.basePath}about">${page.config.aboutLabel || "About"}</a>
+                  ${page.config.tagsLabel || "Tags"}
                 </nav>
             </header>
-              <h1 class="page-title">${data.pageTitle}</h1>
+              <div class="title">
+                <h1 class="page-title">${data.pageTitle}</h1>
+                ${page.languageSwitcher()}
+              </div>
               <div class="tag-cloud">
               <ul class="tags">
                 ${data.tags