fossbook 0.2.3 → 0.2.4

package/lib/mod/marked.js

@@ -9,6 +9,24 @@ function escapeAttribute(value) {
     .replace(/>/g, ">");
 }
 
+function matchFencedContainer(source, name) {
+  const opening = new RegExp(`^(:{3,})${name}(?=[ \\t]|\\n)([^\\n]*)\\n`).exec(source);
+  if (!opening) return undefined;
+
+  const contentStart = opening[0].length;
+  const closing = new RegExp(`^${opening[1]}[ \\t]*(?:\\n|$)`, "m")
+    .exec(source.slice(contentStart));
+  if (!closing) return undefined;
+
+  const contentEnd = contentStart + closing.index;
+  const rawEnd = contentEnd + closing[0].length;
+  return {
+    attributes: opening[2].trim(),
+    content: source.slice(contentStart, contentEnd),
+    raw: source.slice(0, rawEnd),
+  };
+}
+
 const panelStyleProperties = new Map([
   ["background", "--panel-background"],
   ["background-color", "--panel-background-color"],
@@ -21,7 +39,18 @@ const panelStyleProperties = new Map([
   ["gap", "--panel-gap"],
 ]);
 
-function parsePanelStyle(source) {
+const comicPanelStyleProperties = new Map([
+  ["background", "--comic-panel-background"],
+  ["background-color", "--comic-panel-background-color"],
+  ["border", "--comic-panel-border"],
+  ["border-color", "--comic-panel-border-color"],
+  ["border-radius", "--comic-panel-border-radius"],
+  ["border-style", "--comic-panel-border-style"],
+  ["border-width", "--comic-panel-border-width"],
+  ["box-shadow", "--comic-panel-shadow"],
+]);
+
+function parseStyle(source, styleProperties, context) {
   const declarations = [];
   const properties = new Set();
   const declarationPattern = /([a-z][a-z-]*)\s*:\s*([^;]+)(?:;|$)/gy;
@@ -33,22 +62,22 @@ function parsePanelStyle(source) {
 
     declarationPattern.lastIndex = offset;
     const match = declarationPattern.exec(source);
-    if (!match) throw new Error(`Invalid panel style near: ${source.slice(offset)}`);
+    if (!match) throw new Error(`Invalid ${context} 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 (!styleProperties.has(property)) {
+      throw new Error(`Unsupported ${context} style property: ${property}`);
     }
     if (properties.has(property)) {
-      throw new Error(`Duplicate panel style property: ${property}`);
+      throw new Error(`Duplicate ${context} 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}`);
+      throw new Error(`Invalid value for ${context} style property: ${property}`);
     }
 
     properties.add(property);
-    declarations.push(`${panelStyleProperties.get(property)}: ${value};`);
+    declarations.push(`${styleProperties.get(property)}: ${value};`);
     offset = declarationPattern.lastIndex;
   }
 
@@ -86,15 +115,49 @@ function parsePanelAttributes(source) {
     throw new Error('Panel boxed must be "true"');
   }
 
-  if (attributes.style !== undefined && attributes.boxed !== "true") {
-    throw new Error('Panel style requires boxed="true"');
+  const style = parseStyle(attributes.style || "", panelStyleProperties, "panel");
+  if (attributes.boxed !== "true" && style.some((declaration) => !declaration.startsWith("--panel-gap:"))) {
+    throw new Error('Panel card styles require boxed="true"');
   }
 
   return {
     columns,
     label: attributes.label,
     boxed: attributes.boxed === "true",
-    style: parsePanelStyle(attributes.style || ""),
+    style,
+  };
+}
+
+function parseComicPanelAttributes(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 panel attribute near: ${source.slice(offset)}`);
+    if (!["label", "divider", "style"].includes(match[1])) {
+      throw new Error(`Unsupported panel attribute: ${match[1]}`);
+    }
+    if (Object.hasOwn(attributes, match[1])) {
+      throw new Error(`Duplicate panel attribute: ${match[1]}`);
+    }
+    attributes[match[1]] = match[2];
+    offset = attributePattern.lastIndex;
+  }
+
+  if (attributes.divider !== undefined && attributes.divider !== "true") {
+    throw new Error('Panel divider must be "true"');
+  }
+
+  return {
+    label: attributes.label,
+    divider: attributes.divider === "true",
+    style: parseStyle(attributes.style || "", comicPanelStyleProperties, "panel"),
   };
 }
 
@@ -102,57 +165,77 @@ const panelsExtension = {
   name: "panels",
   level: "block",
   start(source) {
-    return source.match(/^:::panels(?:[ \t]|$)/m)?.index;
+    return source.match(/^:{3,}panels(?:[ \t]|$)/m)?.index;
   },
   tokenizer(source) {
-    const match = /^:::panels([^\n]*)\n([\s\S]*?)\n:::(?:\n|$)/.exec(source);
-    if (!match) return undefined;
+    const container = matchFencedContainer(source, "panels");
+    if (!container) return undefined;
 
-    const attributes = parsePanelAttributes(match[1].trim());
+    const attributes = parsePanelAttributes(container.attributes);
+    const tokens = this.lexer.blockTokens(container.content);
     return {
       type: "panels",
-      raw: match[0],
+      raw: container.raw,
       columns: attributes.columns,
       label: attributes.label,
       boxed: attributes.boxed,
       style: attributes.style,
-      tokens: this.lexer.blockTokens(match[2]),
+      nested: tokens.some((token) => token.type === "panel"),
+      tokens,
     };
   },
   renderer(token) {
     const label = token.label
       ? ` role="group" aria-label="${escapeAttribute(token.label)}"`
       : "";
-    const className = token.boxed ? "panel-group panel-group-boxed" : "panel-group";
+    const className = [
+      "panel-group",
+      token.boxed ? "panel-group-boxed" : "",
+      token.nested ? "panel-group-nested" : "",
+    ].filter(Boolean).join(" ");
     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;
-  },
+function createComicPanelExtension(name, type) {
+  return {
+    name: type,
+    level: "block",
+    start(source) {
+      return source.match(new RegExp(`^:{3,}${name}(?:[ \\t]|$)`, "m"))?.index;
+    },
   tokenizer(source) {
-    const match = /^:::comic-box(?:[ \t]+label="([^"]*)")?[ \t]*\n([\s\S]*?)\n:::(?:\n|$)/.exec(source);
-    if (!match) return undefined;
+      const container = matchFencedContainer(source, name);
+      if (!container) 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`;
-  },
-};
+      const attributes = parseComicPanelAttributes(container.attributes);
+
+      return {
+        type,
+        raw: container.raw,
+        label: attributes.label,
+        divider: attributes.divider,
+        style: attributes.style,
+        tokens: this.lexer.blockTokens(container.content),
+      };
+    },
+    renderer(token) {
+      const label = token.label
+        ? ` aria-label="${escapeAttribute(token.label)}"`
+        : "";
+      const style = token.style.length
+        ? ` style="${escapeAttribute(token.style.join(" "))}"`
+        : "";
+      const className = token.divider
+        ? "comic-panel comic-panel-divider"
+        : "comic-panel";
+      return `<section class="${className}"${style}${label}>\n${this.parser.parse(token.tokens)}</section>\n`;
+    },
+  };
+}
+
+const panelExtension = createComicPanelExtension("panel", "panel");
 
 marked.setOptions({
   renderer: new marked.Renderer(),
@@ -267,7 +350,7 @@ const renderer = {
 };
 
 marked.use({
-  extensions: [panelsExtension, comicBoxExtension],
+  extensions: [panelsExtension, panelExtension],
   renderer,
   hooks: {
     postprocess(html) {

package/package.json

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

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

@@ -227,11 +227,23 @@
   .panel-group {
     display: grid;
     grid-template-columns: repeat(var(--panel-columns), minmax(0, 1fr));
-    gap: 1.5rem;
+    gap: var(--panel-gap, 1.5rem);
     align-items: start;
     margin: 1.5rem 0;
   }
 
+  .panel-group-nested {
+    align-items: stretch;
+    grid-auto-rows: 1fr;
+  }
+
+  .panel-group-nested > .comic-panel {
+    box-sizing: border-box;
+    min-width: 0;
+    height: 100%;
+    margin: 0;
+  }
+
   .panel-group .image-container,
   .panel-group figure {
     min-width: 0;
@@ -260,11 +272,11 @@
     gap: var(--panel-gap, 0.75rem);
   }
 
-  .panel-group-boxed .image-container {
+  .panel-group-boxed > .image-container {
     height: 100%;
   }
 
-  .panel-group-boxed figure {
+  .panel-group-boxed > .image-container > figure {
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -274,57 +286,77 @@
     box-shadow: var(--panel-box-shadow, none);
   }
 
-  .panel-group-boxed[style*="--panel-border-color:"] figure {
+  .panel-group-boxed[style*="--panel-border-color:"] > .image-container > figure {
     border-color: var(--panel-border-color);
   }
 
-  .panel-group-boxed[style*="--panel-border-style:"] figure {
+  .panel-group-boxed[style*="--panel-border-style:"] > .image-container > figure {
     border-style: var(--panel-border-style);
   }
 
-  .panel-group-boxed[style*="--panel-border-width:"] figure {
+  .panel-group-boxed[style*="--panel-border-width:"] > .image-container > figure {
     border-width: var(--panel-border-width);
   }
 
-  .panel-group-boxed[style*="--panel-background-color:"] figure {
+  .panel-group-boxed[style*="--panel-background-color:"] > .image-container > figure {
     background-color: var(--panel-background-color);
   }
 
-  .panel-group-boxed figcaption {
+  .panel-group-boxed > .image-container > figure > figcaption {
     flex: 1;
     margin-top: 0;
     padding: 0.75rem;
     font-size: 0.9rem;
   }
 
-  .comic-box {
+  .comic-panel {
     margin: 2rem 0;
     padding: 1rem;
-    border: 2px solid #575752;
-    background: #fff;
-    box-shadow: 4px 4px 0 rgba(70, 70, 66, 0.14);
+    border: var(--comic-panel-border, 2px solid #575752);
+    border-radius: var(--comic-panel-border-radius, 0);
+    background: var(--comic-panel-background, #fff);
+    box-shadow: var(--comic-panel-shadow, 4px 4px 0 rgba(70, 70, 66, 0.14));
+  }
+
+  .comic-panel[style*="--comic-panel-border-color:"] {
+    border-color: var(--comic-panel-border-color);
   }
 
-  .comic-box > :first-child {
+  .comic-panel[style*="--comic-panel-border-style:"] {
+    border-style: var(--comic-panel-border-style);
+  }
+
+  .comic-panel[style*="--comic-panel-border-width:"] {
+    border-width: var(--comic-panel-border-width);
+  }
+
+  .comic-panel[style*="--comic-panel-background-color:"] {
+    background-color: var(--comic-panel-background-color);
+  }
+
+  .comic-panel > :first-child {
     margin-top: 0;
   }
 
-  .comic-box > :last-child {
+  .comic-panel > :last-child {
     margin-bottom: 0;
   }
 
-  .comic-box .image-container,
-  .comic-box figure {
+  .comic-panel .image-container,
+  .comic-panel figure {
     display: block;
     width: 100%;
   }
 
-  .comic-box figure {
+  .comic-panel figure {
     padding: 0;
   }
 
-  .comic-box .image-dialogue {
+  .comic-panel .image-dialogue {
     margin-bottom: 1rem;
+  }
+
+  .comic-panel-divider .image-dialogue {
     padding-bottom: 1rem;
     border-bottom: 1px solid #575752;
   }
@@ -338,13 +370,21 @@
       width: 100% !important;
     }
 
-    .comic-box {
+    .comic-panel {
       margin: 1.5rem 0;
       padding: 0.75rem;
       border-width: 1px;
       box-shadow: 2px 2px 0 rgba(70, 70, 66, 0.14);
     }
   }
+
+  .comic-panel[style*="--comic-panel-border:"] {
+    border: var(--comic-panel-border);
+  }
+
+  .comic-panel[style*="--comic-panel-shadow:"] {
+    box-shadow: var(--comic-panel-shadow);
+  }
   
   @media screen and (min-width: 600px) {
     figure {