fossbook 0.2.14 → 0.2.16

package/lib/mod/marked.js

@@ -53,12 +53,15 @@ function renderKoreanBlockquoteQuotes(html) {
 }
 
 function matchFencedContainer(source, name) {
-  const opening = new RegExp(`^(:{3,})${name}(?=[ \\t]|\\n)([^\\n]*)\\n`).exec(source);
+  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));
+  const closing = new RegExp(`^${opening[1]}[ \\t]*(?:\\n|$)`, "m").exec(
+    source.slice(contentStart),
+  );
   if (!closing) return undefined;
 
   const contentEnd = contentStart + closing.index;
@@ -70,9 +73,7 @@ function matchFencedContainer(source, name) {
   };
 }
 
-const panelGroupStyleProperties = new Map([
-  ["gap", "--panel-gap"],
-]);
+const panelGroupStyleProperties = new Map([["gap", "--panel-gap"]]);
 
 const comicPanelStyleProperties = new Map([
   ["background", "--comic-panel-background"],
@@ -97,7 +98,8 @@ function parseStyle(source, styleProperties, context) {
 
     declarationPattern.lastIndex = offset;
     const match = declarationPattern.exec(source);
-    if (!match) throw new Error(`Invalid ${context} 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();
@@ -107,8 +109,13 @@ function parseStyle(source, styleProperties, context) {
     if (properties.has(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 ${context} style property: ${property}`);
+    if (
+      !value ||
+      /[{}]|url\s*\(|expression\s*\(|@import|javascript\s*:/i.test(value)
+    ) {
+      throw new Error(
+        `Invalid value for ${context} style property: ${property}`,
+      );
     }
 
     properties.add(property);
@@ -130,7 +137,8 @@ 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)
+      throw new Error(`Invalid panels attribute near: ${source.slice(offset)}`);
     if (!["columns", "label", "style"].includes(match[1])) {
       throw new Error(`Unsupported panels attribute: ${match[1]}`);
     }
@@ -141,7 +149,8 @@ function parsePanelAttributes(source) {
     offset = attributePattern.lastIndex;
   }
 
-  const columns = attributes.columns === undefined ? 2 : Number(attributes.columns);
+  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");
   }
@@ -149,7 +158,11 @@ function parsePanelAttributes(source) {
   return {
     columns,
     label: attributes.label,
-    style: parseStyle(attributes.style || "", panelGroupStyleProperties, "panel group"),
+    style: parseStyle(
+      attributes.style || "",
+      panelGroupStyleProperties,
+      "panel group",
+    ),
   };
 }
 
@@ -164,7 +177,8 @@ function parseComicPanelAttributes(source) {
 
     attributePattern.lastIndex = offset;
     const match = attributePattern.exec(source);
-    if (!match) throw new Error(`Invalid panel attribute near: ${source.slice(offset)}`);
+    if (!match)
+      throw new Error(`Invalid panel attribute near: ${source.slice(offset)}`);
     if (!["label", "divider", "rounded", "style"].includes(match[1])) {
       throw new Error(`Unsupported panel attribute: ${match[1]}`);
     }
@@ -186,7 +200,11 @@ function parseComicPanelAttributes(source) {
     label: attributes.label,
     divider: attributes.divider === "true",
     rounded: attributes.rounded === "true",
-    style: parseStyle(attributes.style || "", comicPanelStyleProperties, "panel"),
+    style: parseStyle(
+      attributes.style || "",
+      comicPanelStyleProperties,
+      "panel",
+    ),
   };
 }
 
@@ -216,11 +234,12 @@ const panelsExtension = {
     const label = token.label
       ? ` role="group" aria-label="${escapeAttribute(token.label)}"`
       : "";
-    const className = [
-      "panel-group",
-      token.nested ? "panel-group-nested" : "",
-    ].filter(Boolean).join(" ");
-    const style = [`--panel-columns: ${token.columns};`, ...token.style].join(" ");
+    const className = ["panel-group", 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`;
   },
 };
@@ -232,7 +251,10 @@ const wikipediaUrlExtension = {
     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);
+    const match =
+      /^https?:\/\/[a-z-]+\.(?:m\.)?wikipedia\.org\/wiki\/[^\s<>"']+/i.exec(
+        source,
+      );
     if (!match) return undefined;
 
     const raw = match[0].replace(/[.,;:!?]+$/, "");
@@ -252,7 +274,7 @@ function createComicPanelExtension(name, type) {
     start(source) {
       return source.match(new RegExp(`^:{3,}${name}(?:[ \\t]|$)`, "m"))?.index;
     },
-  tokenizer(source) {
+    tokenizer(source) {
       const container = matchFencedContainer(source, name);
       if (!container) return undefined;
 
@@ -279,7 +301,9 @@ function createComicPanelExtension(name, type) {
         "comic-panel",
         token.divider ? "comic-panel-divider" : "",
         token.rounded ? "comic-panel-rounded" : "",
-      ].filter(Boolean).join(" ");
+      ]
+        .filter(Boolean)
+        .join(" ");
       return `<section class="${className}"${style}${label}>\n${this.parser.parse(token.tokens)}</section>\n`;
     },
   };
@@ -328,6 +352,18 @@ const renderer = {
     return `<pre><code class="hljs${cls}">${value}</code></pre>`;
   },
   image(href, title, text) {
+    const basePath = this.options.basePath?.replace(/\/$/, "") || "";
+    if (
+      href.startsWith("/") &&
+      !href.startsWith("//") &&
+      basePath &&
+      basePath !== "/" &&
+      href !== basePath &&
+      !href.startsWith(`${basePath}/`)
+    ) {
+      href = `${basePath}${href}`;
+    }
+
     let size = null;
     // Check if the title contains a size specification
     if (title && title.includes("size:")) {
@@ -348,6 +384,9 @@ const renderer = {
         title = title.replace(/align:(left|right|center)/g, "").trim();
       }
     }
+    if (title && title.includes("publish-width:")) {
+      title = title.replace(/publish-width:\d+/g, "").trim();
+    }
 
     // Construct the image tag with optional size and title
     let imageTag = `<img src="${href}" alt="${text}"`;
@@ -392,9 +431,10 @@ const renderer = {
     }
   },
   blockquote(quote) {
-    const content = this.options.language === "ko"
-      ? renderKoreanBlockquoteQuotes(quote)
-      : quote;
+    const content =
+      this.options.language === "ko"
+        ? renderKoreanBlockquoteQuotes(quote)
+        : quote;
     return `<div class="blockquote-container"><blockquote>${content}</blockquote></div>`;
   },
   paragraph(text) {

package/lib/mod/page.js

@@ -3,6 +3,7 @@ const fs = require("fs");
 const path = require("path");
 const marked = require("./marked");
 const PageBase = require("./page_base");
+const { publishImage } = require("./image");
 
 module.exports = class Page extends PageBase {
   constructor(config) {
@@ -33,12 +34,24 @@ module.exports = class Page extends PageBase {
     this.slug = this.path;
     // parsed content by fields and body
     const content = fm(mdContent);
+    this.imageWidthOverrides = new Map();
+    const imagePattern = /!\[[^\]]*\]\(([^\s)]+)(?:\s+["']([^"']*)["'])?\)/g;
+    for (const match of content.body.matchAll(imagePattern)) {
+      const widthMatch = match[2]?.match(/publish-width:(\d+)/);
+      if (widthMatch) {
+        this.imageWidthOverrides.set(
+          path.basename(match[1]),
+          Number(widthMatch[1]),
+        );
+      }
+    }
 
     this.title = `${content.attributes.title}`;
     this.date = content.attributes.date;
     this.url = `${this.config.blogsite}/${this.path}/`;
     this.image = content.attributes.image;
     this.description = content.attributes.description;
+    this.draft = content.attributes.draft === true;
     // default image if no imageURL is specified
     this.imageURL = this.config.image;
 
@@ -50,7 +63,10 @@ module.exports = class Page extends PageBase {
     }
 
     // generated HTML from markdown
-    this.body = marked.parse(content.body, { language: this.config.language });
+    this.body = marked.parse(content.body, {
+      language: this.config.language,
+      basePath: this.config.basePath,
+    });
     // remove <p></p> and <p> </p> from the beginning and end of the content.body
     this.body = this.body.replace(/<p><\/p>/g, "").replace(/<p> <\/p>/g, "");
 
@@ -60,9 +76,10 @@ module.exports = class Page extends PageBase {
   }
 
   // about/index.html or about/hello.html
-  generateContent(templateFile, outputPath) {
+  async generateContent(templateFile, outputPath) {
     // For a series of posts
-    if (outputPath === undefined) outputPath = path.join(this.path, "index.html");
+    if (outputPath === undefined)
+      outputPath = path.join(this.path, "index.html");
     // if file name is not included in the path
     if (outputPath.indexOf(".htm") === -1) {
       outputPath = path.join(outputPath, "index.html");
@@ -71,8 +88,7 @@ module.exports = class Page extends PageBase {
     const outputDir = path.dirname(outputPath);
     // if a directory path is included in the path
     if (outputDir !== ".") {
-      if (this.path === "")
-        this.path = outputDir;
+      if (this.path === "") this.path = outputDir;
 
       const outPath = path.join(this.config.dev.outdir, this.path);
       if (fs.existsSync(outPath))
@@ -84,11 +100,43 @@ module.exports = class Page extends PageBase {
     } else {
       // remove the outputPath file if it exists
       const outPath = path.join(this.config.dev.outdir, this.path);
-      if (fs.existsSync(outPath))
-        fs.unlinkSync(outPath);
+      if (fs.existsSync(outPath)) fs.unlinkSync(outPath);
+    }
+
+    // if there is the images folder in the output directory.
+    const srcImagesDir = path.join(
+      this.config.dev.postsdir,
+      this.slug,
+      "images",
+    );
+    if (fs.existsSync(srcImagesDir) && this.path !== "") {
+      // Copy images folder from postsdir to outdir
+      const destImagesDir = path.join(
+        this.config.dev.outdir,
+        this.path,
+        "images",
+      );
+      if (!fs.existsSync(destImagesDir))
+        fs.mkdirSync(destImagesDir, { recursive: true });
+
+      const publishedImages = new Map();
+      for (const image of fs.readdirSync(srcImagesDir)) {
+        const publishedImage = await publishImage(
+          path.join(srcImagesDir, image),
+          path.join(destImagesDir, image),
+          this.config,
+          this.imageWidthOverrides.get(image),
+        );
+        if (publishedImage) publishedImages.set(image, publishedImage);
+      }
+      this.body = addWebPPictureSources(this.body, publishedImages);
     }
 
-    const layoutsPath = path.join(this.config.themePath, "layouts", templateFile);
+    const layoutsPath = path.join(
+      this.config.themePath,
+      "layouts",
+      templateFile,
+    );
     const postHTML = this.generateHTML(layoutsPath);
 
     fs.writeFileSync(
@@ -99,26 +147,27 @@ module.exports = class Page extends PageBase {
         console.log(`${outputPath}/index.html was created successfully`);
       },
     );
-
-    // if there is the images folder in the output directory.
-    const srcImagesDir = path.join(this.config.dev.postsdir, this.slug, "images");
-    if (
-      fs.existsSync(srcImagesDir) &&
-      this.path !== ""
-    ) {
-      // Copy images folder from postsdir to outdir
-      const destImagesDir = path.join(this.config.dev.outdir, this.path, "images");
-      if (!fs.existsSync(destImagesDir))
-        fs.mkdirSync(destImagesDir, { recursive: true });
-
-      fs.readdirSync(srcImagesDir).forEach(
-        (image) => {
-          fs.copyFileSync(
-            path.join(srcImagesDir, image),
-            path.join(destImagesDir, image),
-          );
-        },
-      );
-    }
   }
 };
+
+function addWebPPictureSources(html, publishedImages) {
+  return html.replace(/<img src="([^"]+\.png)"([^>]*)>/gi, (imageTag, href) => {
+    const hrefWithoutQuery = href.split(/[?#]/, 1)[0];
+    const fileName = decodeURIComponent(
+      hrefWithoutQuery.replace(/\\/g, "/").split("/").pop(),
+    );
+    const publishedImage = publishedImages.get(fileName);
+    if (!publishedImage || publishedImage.webp.length === 0) return imageTag;
+
+    const lastSlash = hrefWithoutQuery.lastIndexOf("/");
+    const hrefPrefix =
+      lastSlash === -1 ? "" : hrefWithoutQuery.slice(0, lastSlash + 1);
+    const srcset = publishedImage.webp
+      .map(
+        (candidate) =>
+          `${hrefPrefix}${encodeURIComponent(candidate.fileName)} ${candidate.width}w`,
+      )
+      .join(", ");
+    return `<picture><source type="image/webp" srcset="${srcset}" sizes="(max-width: 599px) 100vw, 700px">${imageTag}</picture>`;
+  });
+}

package/lib/posts.js

@@ -26,6 +26,7 @@ module.exports = class Posts {
       }
       const post = new Page(this.config);
       post.readSource(indexPath, postPath);
+      if (post.draft && !this.config.includeDrafts) return;
       // Optionally nest posts under a URL prefix (e.g. "posts" -> /posts/<slug>/).
       // post.slug stays the source folder name so image lookups remain correct.
       const prefix = this.config.postsPath ? `${this.config.postsPath}/` : "";

package/package.json

@@ -1,48 +1,49 @@
-{
-  "name": "fossbook",
-  "version": "0.2.14",
-  "description": "A Markdown-based authoring and web-publishing tool for comics, illustrated stories, and articles",
-  "main": "lib/index.js",
-  "scripts": {
-    "build": "node bin/fossbook.js build",
-    "start": "node bin/fossbook.js serve",
-    "test": "mocha test",
-    "prettier": "prettier --write ."
-  },
-  "keywords": [
-    "comic-authoring",
-    "webcomics",
-    "publishing",
-    "static-site-generator",
-    "github-pages",
-    "markdown"
-  ],
-  "author": "Joone Hur",
-  "license": "BSD-3-Clause",
-  "dependencies": {
-    "express": "^4.19.1",
-    "front-matter": "^4.0.2",
-    "highlight.js": "^11.9.0",
-    "marked": "^12.0.1"
-  },
-  "devDependencies": {
-    "mocha": "^10.2.0",
-    "prettier": "^3.2.5"
-  },
-  "bin": {
-    "fossbook": "bin/fossbook.js"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "files": [
-    "bin/",
-    "docs/images/",
-    "lib/",
-    "themes/"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/joone/fossbook"
-  }
-}
+{
+  "name": "fossbook",
+  "version": "0.2.16",
+  "description": "A Markdown-based authoring and web-publishing tool for comics, illustrated stories, and articles",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "node bin/fossbook.js build",
+    "start": "node bin/fossbook.js serve",
+    "test": "mocha test",
+    "prettier": "prettier --write ."
+  },
+  "keywords": [
+    "comic-authoring",
+    "webcomics",
+    "publishing",
+    "static-site-generator",
+    "github-pages",
+    "markdown"
+  ],
+  "author": "Joone Hur",
+  "license": "BSD-3-Clause",
+  "dependencies": {
+    "express": "^4.19.1",
+    "front-matter": "^4.0.2",
+    "highlight.js": "^11.9.0",
+    "marked": "^12.0.1",
+    "sharp": "^0.35.4"
+  },
+  "devDependencies": {
+    "mocha": "^10.2.0",
+    "prettier": "^3.2.5"
+  },
+  "bin": {
+    "fossbook": "bin/fossbook.js"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "bin/",
+    "docs/images/",
+    "lib/",
+    "themes/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/joone/fossbook"
+  }
+}