Add pared shortcode for content warning component

This commit is contained in:
Helen Chong 2024-05-28 00:55:09 +08:00
parent 9f3b12eedc
commit bda9ac14d4
2 changed files with 41 additions and 0 deletions

View File

@ -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);
}

View File

@ -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;