diff --git a/scripts/build-npa-book.mjs b/scripts/build-npa-book.mjs index a290da2c..ebe801e2 100644 --- a/scripts/build-npa-book.mjs +++ b/scripts/build-npa-book.mjs @@ -88,7 +88,11 @@ async function renderChapter(chapter, markdown) { const flushParagraph = () => { if (!paragraph.length) return; - html.push(`

${formatInline(paragraph.join(" "))}

`); + const text = paragraph.join(" "); + html.push(`
`); + html.push(`

${formatInline(text)}

`); + html.push(``); + html.push(`
`); paragraph = []; }; @@ -155,6 +159,7 @@ async function renderChapter(chapter, markdown) { const alt = image[1].trim(); const source = image[2].trim(); const imagePath = await copyImage(chapter, source); + html.push(`
`); html.push(`
`); html.push( `${escapeAttribute(
@@ -163,6 +168,8 @@ async function renderChapter(chapter, markdown) {
       );
       html.push(`<figcaption>${formatInline(alt)}</figcaption>`);
       html.push(`</figure>`);
+      html.push(`<a class=`); + html.push(`
`); continue; } @@ -273,6 +280,19 @@ ${buildCss()} + `; @@ -536,7 +556,39 @@ footer { .hero { padding-top: 36px; } -}`; + + .bug-link { + display: none; + } +} + +.doc-block { + position: relative; +} + +.bug-link { + position: absolute; + left: -32px; + top: 4px; + width: 20px; + height: 20px; + opacity: 0; + transition: opacity 0.2s; + cursor: pointer; + background-image: url('data:image/svg+xml;utf8,'); + background-size: contain; + background-repeat: no-repeat; +} + +.doc-block:hover .bug-link, +.bug-link:focus { + opacity: 0.4; +} + +.bug-link:hover { + opacity: 1 !important; +} +`; } function formatInline(value) {