fossbook 0.2.1 → 0.2.3

package/README.md

@@ -176,6 +176,12 @@ 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.
 
+When a reader uses the language switcher, Fossbook remembers that choice in
+the browser. A later visit to the default-language homepage redirects to the
+remembered language's homepage. Direct links to posts and other pages are
+never redirected, and language links continue to work when browser storage is
+unavailable.
+
 ### Configuration
 
 Add the languages supported by the site to `fossbook.config.js`:

package/lib/init.js

@@ -128,7 +128,7 @@ function initProject(options = {}) {
   // },
   // 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.
+  // homeLabel, allPostsLabel, aboutLabel, tagsLabel, allTagsLabel, and transcriptLabel.
 
   // Comment system (optional)
   // comments: { provider: "utterances", repo: "user/repo", issueTerm: "pathname", theme: "github-light" },

package/lib/mod/marked.js

@@ -9,6 +9,52 @@ function escapeAttribute(value) {
     .replace(/>/g, ">");
 }
 
+const panelStyleProperties = new Map([
+  ["background", "--panel-background"],
+  ["background-color", "--panel-background-color"],
+  ["border", "--panel-border"],
+  ["border-color", "--panel-border-color"],
+  ["border-radius", "--panel-border-radius"],
+  ["border-style", "--panel-border-style"],
+  ["border-width", "--panel-border-width"],
+  ["box-shadow", "--panel-box-shadow"],
+  ["gap", "--panel-gap"],
+]);
+
+function parsePanelStyle(source) {
+  const declarations = [];
+  const properties = new Set();
+  const declarationPattern = /([a-z][a-z-]*)\s*:\s*([^;]+)(?:;|$)/gy;
+  let offset = 0;
+
+  while (offset < source.length) {
+    while (/\s/.test(source[offset])) offset += 1;
+    if (offset === source.length) break;
+
+    declarationPattern.lastIndex = offset;
+    const match = declarationPattern.exec(source);
+    if (!match) throw new Error(`Invalid panel style near: ${source.slice(offset)}`);
+
+    const property = match[1];
+    const value = match[2].trim();
+    if (!panelStyleProperties.has(property)) {
+      throw new Error(`Unsupported panel style property: ${property}`);
+    }
+    if (properties.has(property)) {
+      throw new Error(`Duplicate panel style property: ${property}`);
+    }
+    if (!value || /[{}]|url\s*\(|expression\s*\(|@import|javascript\s*:/i.test(value)) {
+      throw new Error(`Invalid value for panel style property: ${property}`);
+    }
+
+    properties.add(property);
+    declarations.push(`${panelStyleProperties.get(property)}: ${value};`);
+    offset = declarationPattern.lastIndex;
+  }
+
+  return declarations;
+}
+
 function parsePanelAttributes(source) {
   const attributes = {};
   const attributePattern = /([a-z][a-z-]*)="([^"]*)"/gy;
@@ -21,7 +67,7 @@ function parsePanelAttributes(source) {
     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") {
+    if (!["columns", "label", "boxed", "style"].includes(match[1])) {
       throw new Error(`Unsupported panels attribute: ${match[1]}`);
     }
     if (Object.hasOwn(attributes, match[1])) {
@@ -36,7 +82,20 @@ function parsePanelAttributes(source) {
     throw new Error("Panel columns must be an integer from 1 to 6");
   }
 
-  return { columns, label: attributes.label };
+  if (attributes.boxed !== undefined && attributes.boxed !== "true") {
+    throw new Error('Panel boxed must be "true"');
+  }
+
+  if (attributes.style !== undefined && attributes.boxed !== "true") {
+    throw new Error('Panel style requires boxed="true"');
+  }
+
+  return {
+    columns,
+    label: attributes.label,
+    boxed: attributes.boxed === "true",
+    style: parsePanelStyle(attributes.style || ""),
+  };
 }
 
 const panelsExtension = {
@@ -55,6 +114,8 @@ const panelsExtension = {
       raw: match[0],
       columns: attributes.columns,
       label: attributes.label,
+      boxed: attributes.boxed,
+      style: attributes.style,
       tokens: this.lexer.blockTokens(match[2]),
     };
   },
@@ -62,7 +123,34 @@ const panelsExtension = {
     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`;
+    const className = token.boxed ? "panel-group panel-group-boxed" : "panel-group";
+    const style = [`--panel-columns: ${token.columns};`, ...token.style].join(" ");
+    return `<div class="${className}" style="${escapeAttribute(style)}"${label}>\n${this.parser.parse(token.tokens)}</div>\n`;
+  },
+};
+
+const comicBoxExtension = {
+  name: "comicBox",
+  level: "block",
+  start(source) {
+    return source.match(/^:::comic-box(?:[ \t]|$)/m)?.index;
+  },
+  tokenizer(source) {
+    const match = /^:::comic-box(?:[ \t]+label="([^"]*)")?[ \t]*\n([\s\S]*?)\n:::(?:\n|$)/.exec(source);
+    if (!match) return undefined;
+
+    return {
+      type: "comicBox",
+      raw: match[0],
+      label: match[1],
+      tokens: this.lexer.blockTokens(match[2]),
+    };
+  },
+  renderer(token) {
+    const label = token.label
+      ? ` aria-label="${escapeAttribute(token.label)}"`
+      : "";
+    return `<section class="comic-box"${label}>\n${this.parser.parse(token.tokens)}</section>\n`;
   },
 };
 
@@ -179,7 +267,7 @@ const renderer = {
 };
 
 marked.use({
-  extensions: [panelsExtension],
+  extensions: [panelsExtension, comicBoxExtension],
   renderer,
   hooks: {
     postprocess(html) {

package/lib/mod/page_base.js

@@ -48,6 +48,47 @@ module.exports = class PageBase {
     return `<nav class="language-switcher" aria-label="Languages">${links.join("")}</nav>`;
   }
 
+  languagePreference(redirectFromDefaultHome = false) {
+    if (this.translations.length < 2) return "";
+
+    const supportedLanguages = this.translations.map((translation) => translation.language);
+    const languagePaths = Object.fromEntries(
+      this.translations.map((translation) => [
+        translation.language,
+        translation.path || translation.url,
+      ]),
+    );
+    const shouldRedirect =
+      redirectFromDefaultHome && this.config.language === this.config.defaultLanguage;
+
+    return `<script>
+          (() => {
+            const storageKey = "fossbook-language";
+            const supportedLanguages = ${JSON.stringify(supportedLanguages).replace(/</g, "\\u003c")};
+            const languagePaths = ${JSON.stringify(languagePaths).replace(/</g, "\\u003c")};
+            try {
+              ${shouldRedirect ? `const preferredLanguage = localStorage.getItem(storageKey);
+              if (preferredLanguage && preferredLanguage !== ${JSON.stringify(this.config.language)} && supportedLanguages.includes(preferredLanguage)) {
+                location.replace(languagePaths[preferredLanguage]);
+                return;
+              }` : ""}
+              document.addEventListener("DOMContentLoaded", () => {
+                document.querySelectorAll('.language-switcher a[hreflang]').forEach((link) => {
+                  link.addEventListener("click", () => {
+                    const language = link.getAttribute("hreflang");
+                    if (supportedLanguages.includes(language)) {
+                      try {
+                        localStorage.setItem(storageKey, language);
+                      } catch (error) {}
+                    }
+                  });
+                });
+              });
+            } catch (error) {}
+          })();
+        </script>`;
+  }
+
   googleAnalytics(trackingId) {
     return `<script async src="https://www.googletagmanager.com/gtag/js?id=${trackingId}"></script>
         <script>

package/package.json

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

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

@@ -254,6 +254,81 @@
     text-align: center;
   }
 
+  .panel-group-boxed {
+    align-items: stretch;
+    grid-auto-rows: 1fr;
+    gap: var(--panel-gap, 0.75rem);
+  }
+
+  .panel-group-boxed .image-container {
+    height: 100%;
+  }
+
+  .panel-group-boxed figure {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border: var(--panel-border, 1px solid #575752);
+    border-radius: var(--panel-border-radius, 0);
+    background: var(--panel-background, #fff);
+    box-shadow: var(--panel-box-shadow, none);
+  }
+
+  .panel-group-boxed[style*="--panel-border-color:"] figure {
+    border-color: var(--panel-border-color);
+  }
+
+  .panel-group-boxed[style*="--panel-border-style:"] figure {
+    border-style: var(--panel-border-style);
+  }
+
+  .panel-group-boxed[style*="--panel-border-width:"] figure {
+    border-width: var(--panel-border-width);
+  }
+
+  .panel-group-boxed[style*="--panel-background-color:"] figure {
+    background-color: var(--panel-background-color);
+  }
+
+  .panel-group-boxed figcaption {
+    flex: 1;
+    margin-top: 0;
+    padding: 0.75rem;
+    font-size: 0.9rem;
+  }
+
+  .comic-box {
+    margin: 2rem 0;
+    padding: 1rem;
+    border: 2px solid #575752;
+    background: #fff;
+    box-shadow: 4px 4px 0 rgba(70, 70, 66, 0.14);
+  }
+
+  .comic-box > :first-child {
+    margin-top: 0;
+  }
+
+  .comic-box > :last-child {
+    margin-bottom: 0;
+  }
+
+  .comic-box .image-container,
+  .comic-box figure {
+    display: block;
+    width: 100%;
+  }
+
+  .comic-box figure {
+    padding: 0;
+  }
+
+  .comic-box .image-dialogue {
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #575752;
+  }
+
   @media screen and (max-width: 599px) {
     .panel-group {
       grid-template-columns: 1fr;
@@ -262,6 +337,13 @@
     .sized-image {
       width: 100% !important;
     }
+
+    .comic-box {
+      margin: 1.5rem 0;
+      padding: 0.75rem;
+      border-width: 1px;
+      box-shadow: 2px 2px 0 rgba(70, 70, 66, 0.14);
+    }
   }
   
   @media screen and (min-width: 600px) {

package/themes/archie/layouts/all_posts.html

@@ -12,6 +12,7 @@
         <title>${page.config.blogName}: ${data.pageTitle}</title>
         <link rel="canonical" href="${page.url}" />
         ${page.alternateLanguageLinks()}
+        ${page.languagePreference()}
         ${page.openGraph("website")}
     </head>
     <body>

package/themes/archie/layouts/home.html

@@ -12,6 +12,7 @@
         <meta name="description" content="${page.config.blogDescription}" />
         <link rel="canonical" href="${page.url}" />
         ${page.alternateLanguageLinks()}
+        ${page.languagePreference(data.prev === null)}
         ${page.openGraph("website")}
         <!-- Twitter Card -->
         ${page.twitterCard("summary")}

package/themes/archie/layouts/page.html

@@ -13,6 +13,7 @@
         <meta name="description" content="${page.config.blogDescription}" />
         <link rel="canonical" href="${page.url}" />
         ${page.alternateLanguageLinks()}
+        ${page.languagePreference()}
         ${page.openGraph("website")}
 
         <meta name="twitter:card" content="summary_large_image" />

package/themes/archie/layouts/post.html

@@ -16,6 +16,7 @@
         <meta name="description" content="${page.description}" />
         <link rel="canonical" href="${page.url}" />
         ${page.alternateLanguageLinks()}
+        ${page.languagePreference()}
 
         ${page.openGraph(
           "article",
@@ -57,7 +58,7 @@
                   </div>
                   ${page.body.includes('class="blockquote-container image-dialogue"') ? `<div class="transcript-control">
                     <div class="transcript-toggle">
-                      <label for="comic-transcript-toggle">Comic transcript</label>
+                      <label for="comic-transcript-toggle">${page.config.transcriptLabel || "Display dialogue text"}</label>
                       <input id="comic-transcript-toggle" type="checkbox" role="switch" aria-controls="comic-transcript" checked>
                     </div>
                   </div>` : ""}

package/themes/archie/layouts/tag.html

@@ -10,6 +10,7 @@
         <!-- Google tag (gtag.js) -->
         ${page.config.googleAnalyticsID ? page.googleAnalytics(page.config.googleAnalyticsID) : ""}
         <title>${page.config.blogName}: Entries tagged - ${data.tag}</title>
+        ${page.languagePreference()}
         ${page.openGraph("website")}
     </head>
     <body>

package/themes/archie/layouts/tag_list.html

@@ -13,6 +13,7 @@
         <title>${page.config.blogName}: ${data.pageTitle}</title>
         <link rel="canonical" href="${page.url}" />
         ${page.alternateLanguageLinks()}
+        ${page.languagePreference()}
         ${page.openGraph("website")}
     </head>
     <body>