Browse Source

fixed some issues with the new book styling

master
Ellpeck 2 weeks ago
parent
commit
37138b67f8
  1. 2
      node/blog.js
  2. 60
      node/util.js
  3. 29
      style/book.css

2
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>` : ""}

60
node/util.js

@ -5,27 +5,43 @@ const showdown = require("showdown");
require("./lib/showdown-prettify");
require("./lib/showdown-footnotes");
module.exports = {
extractBookData: function (file, post) {
let html = new JSDOM(file);
let page = html.window.document.getElementById("page");
let header = page.getElementsByTagName("header");
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>` : ""}
${page.outerHTML}
`;
},
replaceRelativeLinks: function (element, tag) {
if (element[tag] && element[tag].startsWith("./"))
element[tag] = `../${element[tag].substring(2)}`;
},
showdown: function (headerLevel) {
return new showdown.Converter({
parseImgDimensions: true,
headerLevelStart: headerLevel,
extensions: ["prettify", "footnotes"]
});
exports.showdown = function (headerLevel) {
return new showdown.Converter({
parseImgDimensions: true,
headerLevelStart: headerLevel,
extensions: ["prettify", "footnotes"]
});
};
exports.extractBookData = function (file, post) {
let html = new JSDOM(file);
let page = html.window.document.getElementById("page");
// remove header section
let header = page.getElementsByTagName("header");
while (header.length > 0)
header[0].parentNode.removeChild(header[0]);
// reduce all headings by 1
for (let h = 5; h >= 1; h--) {
let heading = page.getElementsByTagName(`h${h}`);
while (heading.length > 0)
this.changeTag(heading[0], `h${h+1}`);
}
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);
};

29
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 {
font-size: 2rem;
#page .chapter {
padding-bottom: 2em;
}
p {
#page p {
text-indent: 1.25em;
margin: 0;
hyphens: auto;
}
p.meta-info {
text-indent: 0;
hyphens: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
.list-display h1,
.list-display h2,
.list-display h3,
.list-display h4,
.list-display h5,
.list-display 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;

Loading…
Cancel
Save