fossbook 0.0.15 → 0.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/mod/marked.js
CHANGED
|
@@ -71,7 +71,7 @@ const renderer = {
|
|
|
71
71
|
imageTag += ">";
|
|
72
72
|
|
|
73
73
|
return `
|
|
74
|
-
<div style="text-align: ${align};">
|
|
74
|
+
<div class="image-container" style="text-align: ${align};">
|
|
75
75
|
<figure style="text-align: ${align};">
|
|
76
76
|
${imageTag}
|
|
77
77
|
${title ? `<figcaption>${title}</figcaption>` : ""}
|
|
@@ -113,6 +113,16 @@ const renderer = {
|
|
|
113
113
|
},
|
|
114
114
|
};
|
|
115
115
|
|
|
116
|
-
marked.use({
|
|
116
|
+
marked.use({
|
|
117
|
+
renderer,
|
|
118
|
+
hooks: {
|
|
119
|
+
postprocess(html) {
|
|
120
|
+
return html.replace(
|
|
121
|
+
/(<div class="image-container"[^>]*>[\s\S]*?<\/div>\s*)<div class="blockquote-container">/g,
|
|
122
|
+
'$1<div class="blockquote-container image-dialogue">',
|
|
123
|
+
);
|
|
124
|
+
},
|
|
125
|
+
},
|
|
126
|
+
});
|
|
117
127
|
|
|
118
128
|
module.exports = marked;
|
package/package.json
CHANGED
|
@@ -45,6 +45,8 @@
|
|
|
45
45
|
.blockquote-container {
|
|
46
46
|
display: flex;
|
|
47
47
|
justify-content: center;
|
|
48
|
+
margin-inline: auto;
|
|
49
|
+
width: var(--dialogue-width, 100%);
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
|
|
@@ -119,7 +121,7 @@
|
|
|
119
121
|
margin: 0;
|
|
120
122
|
max-width: 100%;
|
|
121
123
|
}
|
|
122
|
-
|
|
124
|
+
|
|
123
125
|
figure img {
|
|
124
126
|
max-height: 500px;
|
|
125
127
|
}
|
|
@@ -128,6 +130,7 @@
|
|
|
128
130
|
figure {
|
|
129
131
|
padding: 0 40px;
|
|
130
132
|
}
|
|
133
|
+
|
|
131
134
|
}
|
|
132
135
|
|
|
133
136
|
figure h4 {
|
|
@@ -83,5 +83,16 @@
|
|
|
83
83
|
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
|
|
84
84
|
mermaid.initialize({ startOnLoad: true });
|
|
85
85
|
</script>` : ""}
|
|
86
|
+
${page.body.includes('class="blockquote-container image-dialogue"') ? `<script>
|
|
87
|
+
document.querySelectorAll(".image-container + .image-dialogue").forEach((dialogue) => {
|
|
88
|
+
const image = dialogue.previousElementSibling.querySelector("img");
|
|
89
|
+
const syncDialogueWidth = () => {
|
|
90
|
+
dialogue.style.setProperty("--dialogue-width", image.getBoundingClientRect().width + "px");
|
|
91
|
+
};
|
|
92
|
+
if (!image.complete) image.addEventListener("load", syncDialogueWidth, { once: true });
|
|
93
|
+
new ResizeObserver(syncDialogueWidth).observe(image);
|
|
94
|
+
syncDialogueWidth();
|
|
95
|
+
});
|
|
96
|
+
</script>` : ""}
|
|
86
97
|
</body>
|
|
87
98
|
</html>
|