fossbook 0.0.15 → 0.0.17
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,66 @@
|
|
|
45
45
|
.blockquote-container {
|
|
46
46
|
display: flex;
|
|
47
47
|
justify-content: center;
|
|
48
|
+
margin-inline: auto;
|
|
49
|
+
width: var(--dialogue-width, 100%);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.transcript-control {
|
|
53
|
+
display: flex;
|
|
54
|
+
justify-content: flex-end;
|
|
55
|
+
margin: .75rem 0 1.5rem;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.transcript-toggle {
|
|
59
|
+
align-items: center;
|
|
60
|
+
display: inline-flex;
|
|
61
|
+
font-size: .85rem;
|
|
62
|
+
gap: .65rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.transcript-toggle label {
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.transcript-toggle input {
|
|
70
|
+
appearance: none;
|
|
71
|
+
background: #d8dce2;
|
|
72
|
+
border: 1px solid var(--bordercl);
|
|
73
|
+
border-radius: 999px;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
height: 1.35rem;
|
|
76
|
+
margin: 0;
|
|
77
|
+
position: relative;
|
|
78
|
+
width: 2.5rem;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.transcript-toggle input::before {
|
|
82
|
+
background: #fff;
|
|
83
|
+
border-radius: 50%;
|
|
84
|
+
content: "";
|
|
85
|
+
height: .95rem;
|
|
86
|
+
left: .15rem;
|
|
87
|
+
position: absolute;
|
|
88
|
+
top: .15rem;
|
|
89
|
+
transition: transform 160ms ease;
|
|
90
|
+
width: .95rem;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.transcript-toggle input:checked {
|
|
94
|
+
background: var(--maincolor);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.transcript-toggle input:checked::before {
|
|
98
|
+
transform: translateX(1.1rem);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.transcript-toggle input:focus-visible {
|
|
102
|
+
outline: 2px solid var(--hovercolor);
|
|
103
|
+
outline-offset: 2px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.transcripts-hidden .image-dialogue {
|
|
107
|
+
display: none;
|
|
48
108
|
}
|
|
49
109
|
|
|
50
110
|
|
|
@@ -56,6 +116,16 @@
|
|
|
56
116
|
font-style: normal;
|
|
57
117
|
font-size: 1rem;
|
|
58
118
|
}
|
|
119
|
+
|
|
120
|
+
@media print {
|
|
121
|
+
.transcript-control {
|
|
122
|
+
display: none;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.transcripts-hidden .image-dialogue {
|
|
126
|
+
display: flex;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
59
129
|
|
|
60
130
|
a {
|
|
61
131
|
border-bottom: 3px solid var(--maincolor);
|
|
@@ -119,7 +189,7 @@
|
|
|
119
189
|
margin: 0;
|
|
120
190
|
max-width: 100%;
|
|
121
191
|
}
|
|
122
|
-
|
|
192
|
+
|
|
123
193
|
figure img {
|
|
124
194
|
max-height: 500px;
|
|
125
195
|
}
|
|
@@ -128,6 +198,7 @@
|
|
|
128
198
|
figure {
|
|
129
199
|
padding: 0 40px;
|
|
130
200
|
}
|
|
201
|
+
|
|
131
202
|
}
|
|
132
203
|
|
|
133
204
|
figure h4 {
|
|
@@ -25,6 +25,13 @@
|
|
|
25
25
|
)}
|
|
26
26
|
|
|
27
27
|
${page.twitterCard("summary")}
|
|
28
|
+
${page.body.includes('class="blockquote-container image-dialogue"') ? `<script>
|
|
29
|
+
try {
|
|
30
|
+
if (localStorage.getItem("fossbook-comic-transcript") === "hidden") {
|
|
31
|
+
document.documentElement.classList.add("transcripts-hidden");
|
|
32
|
+
}
|
|
33
|
+
} catch (error) {}
|
|
34
|
+
</script>` : ""}
|
|
28
35
|
</head>
|
|
29
36
|
<body>
|
|
30
37
|
<div class="content">
|
|
@@ -45,7 +52,13 @@
|
|
|
45
52
|
<h1 class="title">${page.title}</h1>
|
|
46
53
|
<div class="meta">Posted on ${page.formatDate(new Date(page.date))}</div>
|
|
47
54
|
</div>
|
|
48
|
-
|
|
55
|
+
${page.body.includes('class="blockquote-container image-dialogue"') ? `<div class="transcript-control">
|
|
56
|
+
<div class="transcript-toggle">
|
|
57
|
+
<label for="comic-transcript-toggle">Comic transcript</label>
|
|
58
|
+
<input id="comic-transcript-toggle" type="checkbox" role="switch" aria-controls="comic-transcript" checked>
|
|
59
|
+
</div>
|
|
60
|
+
</div>` : ""}
|
|
61
|
+
<section class="body" id="comic-transcript">
|
|
49
62
|
${page.body}
|
|
50
63
|
</section>
|
|
51
64
|
<div class="post-tags">
|
|
@@ -83,5 +96,31 @@
|
|
|
83
96
|
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
|
|
84
97
|
mermaid.initialize({ startOnLoad: true });
|
|
85
98
|
</script>` : ""}
|
|
99
|
+
${page.body.includes('class="blockquote-container image-dialogue"') ? `<script>
|
|
100
|
+
const transcriptToggle = document.querySelector("#comic-transcript-toggle");
|
|
101
|
+
const transcriptStorageKey = "fossbook-comic-transcript";
|
|
102
|
+
const setTranscriptVisibility = (visible) => {
|
|
103
|
+
document.documentElement.classList.toggle("transcripts-hidden", !visible);
|
|
104
|
+
transcriptToggle.checked = visible;
|
|
105
|
+
};
|
|
106
|
+
setTranscriptVisibility(!document.documentElement.classList.contains("transcripts-hidden"));
|
|
107
|
+
transcriptToggle.addEventListener("change", () => {
|
|
108
|
+
const visible = transcriptToggle.checked;
|
|
109
|
+
setTranscriptVisibility(visible);
|
|
110
|
+
try {
|
|
111
|
+
localStorage.setItem(transcriptStorageKey, visible ? "visible" : "hidden");
|
|
112
|
+
} catch (error) {}
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
document.querySelectorAll(".image-container + .image-dialogue").forEach((dialogue) => {
|
|
116
|
+
const image = dialogue.previousElementSibling.querySelector("img");
|
|
117
|
+
const syncDialogueWidth = () => {
|
|
118
|
+
dialogue.style.setProperty("--dialogue-width", image.getBoundingClientRect().width + "px");
|
|
119
|
+
};
|
|
120
|
+
if (!image.complete) image.addEventListener("load", syncDialogueWidth, { once: true });
|
|
121
|
+
new ResizeObserver(syncDialogueWidth).observe(image);
|
|
122
|
+
syncDialogueWidth();
|
|
123
|
+
});
|
|
124
|
+
</script>` : ""}
|
|
86
125
|
</body>
|
|
87
126
|
</html>
|