fixed some issues with the new book styling

node/blog.js

@@ -59,7 +59,7 @@ fs.readFile(`${folder}index.html`, function (_, html) {
                     <div class="list-display rounded">
                         <div class="blog-isolated">
                             <h1>${post.name}</h1>
-                            ${post.archived ? /*html*/ `<p class="meta-info"><i>This post has been archived.</i></p>` : ""}
+                            ${post.archived ? /*html*/ `<p><i>This post has been archived.</i></p>` : ""}
                             ${content}
                             <span class="text-muted project-status blog-isolated-status">${post.date}</span>
                             ${post.discuss ? /*html*/ `<a href="${post.discuss}" class="blog-discuss" id="blog-discuss-${post.id}">Discuss this post</a>` : ""}

node/util.js

@@ -5,27 +5,43 @@ const showdown = require("showdown");
 require("./lib/showdown-prettify");
 require("./lib/showdown-footnotes");
 
-module.exports = {
+exports.showdown = function (headerLevel) {
-    extractBookData: function (file, post) {
+    return new showdown.Converter({
-        let html = new JSDOM(file);
+        parseImgDimensions: true,
-        let page = html.window.document.getElementById("page");
+        headerLevelStart: headerLevel,
-        let header = page.getElementsByTagName("header");
+        extensions: ["prettify", "footnotes"]
-        while (header.length > 0)
+    });
-            header[0].parentNode.removeChild(header[0]);
+};
-        return /*html*/ `
+
-            ${post.prompt ? /*html*/ `<p class="meta-info"><i>This story was inspired by a Reedsy Prompt and submitted to their competition. As such, it has also been published on <a href="${post.prompt}">their website</a>.</i></p>` : ""}
+exports.extractBookData = function (file, post) {
-            ${page.outerHTML}
+    let html = new JSDOM(file);
-        `;
+    let page = html.window.document.getElementById("page");
-    },
+    // remove header section
-    replaceRelativeLinks: function (element, tag) {
+    let header = page.getElementsByTagName("header");
-        if (element[tag] && element[tag].startsWith("./"))
+    while (header.length > 0)
-            element[tag] = `../${element[tag].substring(2)}`;
+        header[0].parentNode.removeChild(header[0]);
-    },
+    // reduce all headings by 1
-    showdown: function (headerLevel) {
+    for (let h = 5; h >= 1; h--) {
-        return new showdown.Converter({
+        let heading = page.getElementsByTagName(`h${h}`);
-            parseImgDimensions: true,
+        while (heading.length > 0)
-            headerLevelStart: headerLevel,
+            this.changeTag(heading[0], `h${h+1}`);
-            extensions: ["prettify", "footnotes"]
+    }
-        });
+
-    }
+    return /*html*/ `
+        ${post.prompt ? /*html*/ `<p><i>This story was inspired by a Reedsy Prompt and submitted to their competition. As such, it has also been published on <a href="${post.prompt}">their website</a>.</i></p>` : ""}
+        ${page.outerHTML}
+    `;
+};
+
+exports.replaceRelativeLinks = function (element, tag) {
+    if (element[tag] && element[tag].startsWith("./"))
+        element[tag] = `../${element[tag].substring(2)}`;
+};
+
+exports.changeTag = function (element, newTag) {
+    const newElement = element.ownerDocument.createElement(newTag);
+    newElement.innerHTML = element.innerHTML;
+    for (let a of element.attributes)
+        newElement.setAttribute(a.nodeName, a.nodeValue);
+    element.parentNode.replaceChild(newElement, element);
 };

style/book.css

@@ -2,42 +2,33 @@
     max-width: 40.5em;
 }
 
-.chapter {
-    padding-bottom: 2em;
-}
-
 #page {
     font-family: "Georgia", serif;
     text-align: justify;
 }
 
-span.chapter-header {
+#page .chapter {
-    font-size: 2rem;
+    padding-bottom: 2em;
 }
 
-p {
+#page p {
     text-indent: 1.25em;
     margin: 0;
     hyphens: auto;
 }
 
-p.meta-info {
+.list-display h1,
-    text-indent: 0;
+.list-display h2,
-    hyphens: none;
+.list-display h3,
-}
+.list-display h4,
-
+.list-display h5,
-h1,
+.list-display h6 {
-h2,
-h3,
-h4,
-h5,
-h6 {
     text-align: left;
     font-family: sans-serif;
     font-variant: small-caps;
 }
 
-.rule {
+#page .rule {
     text-align: center !important;
     margin-top: 1em;
     margin-bottom: 1em;