fossbook 0.0.12 → 0.0.16

package/lib/mod/marked.js

@@ -71,7 +71,7 @@ const renderer = {
     imageTag += ">";
 
     return `
-        <div style="text-align: ${align};">
+        <div class="image-container" style="text-align: ${align};">
           <figure style="text-align: ${align};">
             ${imageTag}
             ${title ? `<figcaption>${title}</figcaption>` : ""}
@@ -113,6 +113,16 @@ const renderer = {
   },
 };
 
-marked.use({ renderer });
+marked.use({
+  renderer,
+  hooks: {
+    postprocess(html) {
+      return html.replace(
+        /(<div class="image-container"[^>]*>[\s\S]*?<\/div>\s*)<div class="blockquote-container">/g,
+        '$1<div class="blockquote-container image-dialogue">',
+      );
+    },
+  },
+});
 
 module.exports = marked;

package/lib/posts.js

@@ -12,7 +12,7 @@ module.exports = class Posts {
   createPostObjects() {
     if (!fs.existsSync(this.config.dev.postsdir)) {
       console.warn(`No posts directory found at "${this.config.dev.postsdir}", skipping posts.`);
-      return;
+      return [];
     }
     const postPaths = fs.readdirSync(this.config.dev.postsdir);
     postPaths.forEach((postPath) => {

package/package.json

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

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

@@ -18,13 +18,6 @@
 
   }
 
-  /* for desktop  */
-  @media (min-width: 1025px) and (orientation: landscape) {
-    blockquote {
-        display: none;
-    }
-  }
-
   body{
     display: block;
     margin: 8px;
@@ -52,6 +45,8 @@
   .blockquote-container {
     display: flex;
     justify-content: center;
+    margin-inline: auto;
+    width: var(--dialogue-width, 100%);
   }
 
 
@@ -126,7 +121,7 @@
     margin: 0;
     max-width: 100%;
   }
-  
+
   figure img {
     max-height: 500px;
   }
@@ -135,6 +130,7 @@
     figure {
       padding: 0 40px;
     }
+
   }
   
   figure h4 {

package/themes/archie/layouts/post.html

@@ -83,5 +83,16 @@
             import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
             mermaid.initialize({ startOnLoad: true });
         </script>` : ""}
+        ${page.body.includes('class="blockquote-container image-dialogue"') ? `<script>
+          document.querySelectorAll(".image-container + .image-dialogue").forEach((dialogue) => {
+            const image = dialogue.previousElementSibling.querySelector("img");
+            const syncDialogueWidth = () => {
+              dialogue.style.setProperty("--dialogue-width", image.getBoundingClientRect().width + "px");
+            };
+            if (!image.complete) image.addEventListener("load", syncDialogueWidth, { once: true });
+            new ResizeObserver(syncDialogueWidth).observe(image);
+            syncDialogueWidth();
+          });
+        </script>` : ""}
     </body>
 </html>