fossbook 0.2.0 → 0.2.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fossbook",
-  "version": "0.2.0",
+  "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

@@ -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 {