fossbook 0.2.5 → 0.2.6

package/lib/mod/marked.js

@@ -9,6 +9,36 @@ function escapeAttribute(value) {
     .replace(/>/g, ">");
 }
 
+function getWikipediaCitation(href) {
+  let url;
+  try {
+    url = new URL(href);
+  } catch {
+    return null;
+  }
+
+  const hostname = url.hostname.toLowerCase();
+  const hostnameMatch = /^([a-z-]+)\.(?:m\.)?wikipedia\.org$/.exec(hostname);
+  if (!hostnameMatch || !url.pathname.startsWith("/wiki/")) return null;
+
+  let articleTitle;
+  try {
+    articleTitle = decodeURIComponent(url.pathname.slice(6)).replace(/_/g, " ");
+  } catch {
+    return null;
+  }
+  if (!articleTitle) return null;
+
+  const source = hostnameMatch[1] === "ko" ? "위키백과" : "Wikipedia";
+  return `${source}, ${articleTitle}`;
+}
+
+function renderWikipediaCitation(href) {
+  const citation = getWikipediaCitation(href);
+  if (!citation) return null;
+  return `<a href="${escapeAttribute(href)}">${escapeAttribute(citation)}</a>`;
+}
+
 function matchFencedContainer(source, name) {
   const opening = new RegExp(`^(:{3,})${name}(?=[ \\t]|\\n)([^\\n]*)\\n`).exec(source);
   if (!opening) return undefined;
@@ -27,15 +57,7 @@ function matchFencedContainer(source, name) {
   };
 }
 
-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"],
+const panelGroupStyleProperties = new Map([
   ["gap", "--panel-gap"],
 ]);
 
@@ -96,7 +118,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 (!["columns", "label", "boxed", "style"].includes(match[1])) {
+    if (!["columns", "label", "style"].includes(match[1])) {
       throw new Error(`Unsupported panels attribute: ${match[1]}`);
     }
     if (Object.hasOwn(attributes, match[1])) {
@@ -111,20 +133,10 @@ function parsePanelAttributes(source) {
     throw new Error("Panel columns must be an integer from 1 to 6");
   }
 
-  if (attributes.boxed !== undefined && attributes.boxed !== "true") {
-    throw new Error('Panel boxed must be "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,
+    style: parseStyle(attributes.style || "", panelGroupStyleProperties, "panel group"),
   };
 }
 
@@ -140,7 +152,7 @@ function parseComicPanelAttributes(source) {
     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])) {
+    if (!["label", "divider", "rounded", "style"].includes(match[1])) {
       throw new Error(`Unsupported panel attribute: ${match[1]}`);
     }
     if (Object.hasOwn(attributes, match[1])) {
@@ -153,10 +165,14 @@ function parseComicPanelAttributes(source) {
   if (attributes.divider !== undefined && attributes.divider !== "true") {
     throw new Error('Panel divider must be "true"');
   }
+  if (attributes.rounded !== undefined && attributes.rounded !== "true") {
+    throw new Error('Panel rounded must be "true"');
+  }
 
   return {
     label: attributes.label,
     divider: attributes.divider === "true",
+    rounded: attributes.rounded === "true",
     style: parseStyle(attributes.style || "", comicPanelStyleProperties, "panel"),
   };
 }
@@ -178,7 +194,6 @@ const panelsExtension = {
       raw: container.raw,
       columns: attributes.columns,
       label: attributes.label,
-      boxed: attributes.boxed,
       style: attributes.style,
       nested: tokens.some((token) => token.type === "panel"),
       tokens,
@@ -190,7 +205,6 @@ const panelsExtension = {
       : "";
     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(" ");
@@ -198,6 +212,26 @@ const panelsExtension = {
   },
 };
 
+const wikipediaUrlExtension = {
+  name: "wikipediaUrl",
+  level: "inline",
+  start(source) {
+    return source.search(/https?:\/\/[a-z-]+\.(?:m\.)?wikipedia\.org\/wiki\//i);
+  },
+  tokenizer(source) {
+    const match = /^https?:\/\/[a-z-]+\.(?:m\.)?wikipedia\.org\/wiki\/[^\s<>"']+/i.exec(source);
+    if (!match) return undefined;
+
+    const raw = match[0].replace(/[.,;:!?]+$/, "");
+    const citation = getWikipediaCitation(raw);
+    if (!citation) return undefined;
+    return { type: "wikipediaUrl", raw, href: raw, citation };
+  },
+  renderer(token) {
+    return renderWikipediaCitation(token.href);
+  },
+};
+
 function createComicPanelExtension(name, type) {
   return {
     name: type,
@@ -216,6 +250,7 @@ function createComicPanelExtension(name, type) {
         raw: container.raw,
         label: attributes.label,
         divider: attributes.divider,
+        rounded: attributes.rounded,
         style: attributes.style,
         tokens: this.lexer.blockTokens(container.content),
       };
@@ -227,9 +262,11 @@ function createComicPanelExtension(name, type) {
       const style = token.style.length
         ? ` style="${escapeAttribute(token.style.join(" "))}"`
         : "";
-      const className = token.divider
-        ? "comic-panel comic-panel-divider"
-        : "comic-panel";
+      const className = [
+        "comic-panel",
+        token.divider ? "comic-panel-divider" : "",
+        token.rounded ? "comic-panel-rounded" : "",
+      ].filter(Boolean).join(" ");
       return `<section class="${className}"${style}${label}>\n${this.parser.parse(token.tokens)}</section>\n`;
     },
   };
@@ -316,6 +353,11 @@ const renderer = {
       `;
   },
   link(href, title, text) {
+    if (!title && text === href) {
+      const citation = renderWikipediaCitation(href);
+      if (citation) return citation;
+    }
+
     let align = null;
     if (title && title.includes("align:")) {
       // align: left, right, center
@@ -350,7 +392,7 @@ const renderer = {
 };
 
 marked.use({
-  extensions: [panelsExtension, panelExtension],
+  extensions: [panelsExtension, panelExtension, wikipediaUrlExtension],
   renderer,
   hooks: {
     postprocess(html) {

package/package.json

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

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

@@ -179,6 +179,10 @@
     font-weight: bold;
   }
 
+  ol > li::marker {
+    font-family: 'Roboto Mono', monospace;
+  }
+
 /*
   ul.pagination {
     display: flex;
@@ -266,60 +270,17 @@
     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 > .image-container > figure {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    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:"] > .image-container > figure {
-    border: var(--panel-border);
-  }
-
-  .panel-group-boxed[style*="--panel-border-color:"] > .image-container > figure {
-    border-color: var(--panel-border-color);
-  }
-
-  .panel-group-boxed[style*="--panel-border-style:"] > .image-container > figure {
-    border-style: var(--panel-border-style);
-  }
-
-  .panel-group-boxed[style*="--panel-border-width:"] > .image-container > figure {
-    border-width: var(--panel-border-width);
-  }
-
-  .panel-group-boxed[style*="--panel-background-color:"] > .image-container > figure {
-    background-color: var(--panel-background-color);
-  }
-
-  .panel-group-boxed > .image-container > figure > figcaption {
-    flex: 1;
-    margin-top: 0;
-    padding: 0.75rem;
-    font-size: 0.9rem;
-  }
-
   .comic-panel {
     margin: 2rem 0;
     padding: 1rem;
-    border: 2px solid #575752;
+    border: 1.5px 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));
+    box-shadow: var(--comic-panel-shadow, 2px 2px 0 rgba(70, 70, 66, 0.14));
+  }
+
+  .comic-panel-rounded {
+    --comic-panel-border-radius: 4px 7px 5px 8px / 7px 4px 8px 5px;
   }
 
   .comic-panel[style*="--comic-panel-border-color:"] {
@@ -378,7 +339,7 @@
       margin: 1.5rem 0;
       padding: 0.75rem;
       border-width: 1px;
-      box-shadow: 2px 2px 0 rgba(70, 70, 66, 0.14);
+      box-shadow: 1px 1px 0 rgba(70, 70, 66, 0.14);
     }
   }
 
@@ -581,6 +542,16 @@
   display: flex;
   justify-content: space-between;
   }
+  .post-tags ul.tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem 0.8rem;
+    margin: 0;
+    padding: 0;
+  }
+  .post-tags ul.tags li {
+    text-indent: 0;
+  }
   .tags li::before{
     content: "🏷 ";
   }