fixed some issues with the new book styling
Web/pipeline/head This commit looks good Details

This commit is contained in:
Ell 2021-04-01 00:45:26 +02:00
parent a33d718416
commit 37138b67f8
3 changed files with 49 additions and 42 deletions

View File

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

View File

@ -5,27 +5,43 @@ const showdown = require("showdown");
require("./lib/showdown-prettify"); require("./lib/showdown-prettify");
require("./lib/showdown-footnotes"); 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);
}; };

View File

@ -2,42 +2,33 @@
max-width: 40.5em; max-width: 40.5em;
} }
.chapter {
padding-bottom: 2em;
}
#page { #page {
font-family: "Georgia", serif; font-family: "Georgia", serif;
text-align: justify; text-align: justify;
} }
span.chapter-header { #page .chapter {
font-size: 2rem; padding-bottom: 2em;
} }
p { #page p {
text-indent: 1.25em; text-indent: 1.25em;
margin: 0; margin: 0;
hyphens: auto; 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; text-align: left;
font-family: sans-serif; font-family: sans-serif;
font-variant: small-caps; font-variant: small-caps;
} }
.rule { #page .rule {
text-align: center !important; text-align: center !important;
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;