@@ -156,7 +156,35 @@ module.exports = function(eleventyConfig) {
156 156
headingTag: "h2" // Heading tag when showing heading above the wrapper element
157 157
});
158 158 159 -
// add IDs to the headers
159 +
/** @typedef {import("markdown-it/lib/token")} MarkdownItToken A MarkdownIt token. */
160 + 161 +
/**
162 +
* Generates HTML markup for an inline alert.
163 +
* @param {"warning"|"tip"|"important"} type The type of alert to create.
164 +
* @param {Array<MarkdownItToken>} tokens Array of MarkdownIt tokens to use.
165 +
* @param {number} index The index of the current token in the tokens array.
166 +
* @returns {string} The markup for the alert.
167 +
*/
168 +
function generateAlertMarkup(type, tokens, index) {
169 +
if (tokens[index].nesting === 1) {
170 +
return `
171 +
<aside role="note" class="alert alert--${type}">
172 +
<svg class="alert__icon" aria-hidden="true" focusable="false" width="19" height="20" viewBox="0 0 19 20" fill="none">
173 +
<path d="M9.49999 6.66667V10M9.49999 13.3333H9.50832M17.8333 10C17.8333 14.6024 14.1024 18.3333 9.49999 18.3333C4.89762 18.3333 1.16666 14.6024 1.16666 10C1.16666 5.39763 4.89762 1.66667 9.49999 1.66667C14.1024 1.66667 17.8333 5.39763 17.8333 10Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
174 +
</svg>
175 +
<div class="alert__content">
176 +
<span class="alert__type">${type[0].toUpperCase()}${type.slice(1)}</span>
177 +
<div class="alert__text">
178 +
`.trim();
179 +
}
180 + 181 +
return `
182 +
</div>
183 +
</div>
184 +
</aside>
185 +
`.trim();
186 +
}
187 + 160 188
const markdownIt = require("markdown-it");
161 189 162 190
eleventyConfig.setLibrary("md",
@@ -166,6 +194,21 @@ module.exports = function(eleventyConfig) {
166 194
})
167 195
.use(markdownItContainer, "correct", {})
168 196
.use(markdownItContainer, "incorrect", {})
197 +
.use(markdownItContainer, "warning", {
198 +
render(tokens, idx) {
199 +
return generateAlertMarkup("warning", tokens, idx);
200 +
}
201 +
})
202 +
.use(markdownItContainer, "tip", {
203 +
render(tokens, idx) {
204 +
return generateAlertMarkup("tip", tokens, idx);
205 +
}
206 +
})
207 +
.use(markdownItContainer, "important", {
208 +
render(tokens, idx) {
209 +
return generateAlertMarkup("important", tokens, idx);
210 +
}
211 +
})
169 212
.disable("code"));
170 213 171 214
//------------------------------------------------------------------------------
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4