Add pared shortcode for content warning component
This commit is contained in:
parent
9f3b12eedc
commit
bda9ac14d4
|
@ -121,6 +121,16 @@ module.exports = function (eleventyConfig) {
|
|||
</details>`;
|
||||
});
|
||||
|
||||
// Paired shorcode: Content warning accordion
|
||||
eleventyConfig.addPairedShortcode('contentWarning', (content, warning) => {
|
||||
const warningMarkup = markdownLibrary.renderInline(warning);
|
||||
const contentMarkup = markdownLibrary.render(content);
|
||||
return `<details class="contnet-warning">
|
||||
<summary class="contnet-warning__warning"><strong>⚠️ Content Warning:</strong> ${warningMarkup}</summary>
|
||||
<div class="contnet-warning__content">${contentMarkup}</div>
|
||||
</details>`;
|
||||
});
|
||||
|
||||
/* This is the part that tells 11ty to swap to our custom config */
|
||||
eleventyConfig.setLibrary("md", markdownLibrary);
|
||||
}
|
||||
|
|
|
@ -85,6 +85,37 @@
|
|||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/* Content warning accordion */
|
||||
* + .contnet-warning {
|
||||
margin-top: var(--sz-paragraph-margin);
|
||||
}
|
||||
|
||||
.contnet-warning {
|
||||
border: 0.1em solid var(--clr-title-border);
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
.contnet-warning__warning {
|
||||
padding: 0.8em;
|
||||
--stripe-color: rgb(0 0 0 / 0.1);
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 0.5em,
|
||||
var(--stripe-color) 0.5em,
|
||||
var(--stripe-color) 1em
|
||||
);
|
||||
}
|
||||
|
||||
.contnet-warning__warning:hover,
|
||||
.contnet-warning__warning:focus {
|
||||
--stripe-color: rgb(150 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.contnet-warning__content {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
/* Web button lists */
|
||||
.web-btn-wrapper {
|
||||
display: flex;
|
||||
|
|
Loading…
Reference in New Issue