b234b71bb7
Related issue: https://codeberg.org/Codeberg/Documentation/issues/330 This is my attempt at adding admonition-like boxes to the documentation. The goal is to make important stuff stand out more (especially warnings and alike). The system uses a custom `<admonition>` box which allows classes for further customization. I.e. `<admonition class="warning">` to display a warning box. I first wanted to make individual boxes (`<warning>`, `<note>`, ...) but decided against it, as it would've created a lot of duplicate CSS. The CSS is designed in such a way that the first paragraph of the box is made bold (font-weight 700) while any subsequent ones are not. The following forms of admonitions are included: - Info (default) - Note - Tip - Warning Reviewed-on: https://codeberg.org/Codeberg/Documentation/pulls/337 Co-authored-by: Andre601 <github@andre601.ch> Co-committed-by: Andre601 <github@andre601.ch>
67 lines
2.1 KiB
JavaScript
67 lines
2.1 KiB
JavaScript
const navigationPlugin = require("@11ty/eleventy-navigation")
|
|
const syntaxHighlightingPlugin = require("@11ty/eleventy-plugin-syntaxhighlight")
|
|
const markdownIt = require('markdown-it');
|
|
const markdownItClass = require('@toycode/markdown-it-class');
|
|
const markdownItAnchor = require('markdown-it-anchor')
|
|
const library = require('@fortawesome/fontawesome-svg-core').library;
|
|
const icon = require('@fortawesome/fontawesome-svg-core').icon;
|
|
const fas = require('@fortawesome/free-solid-svg-icons').fas;
|
|
|
|
module.exports = function(eleventyConfig) {
|
|
eleventyConfig.addPlugin(navigationPlugin)
|
|
eleventyConfig.addPlugin(syntaxHighlightingPlugin)
|
|
|
|
eleventyConfig.addPassthroughCopy("assets")
|
|
eleventyConfig.addPassthroughCopy("fonts")
|
|
|
|
// Font Awesome Icons
|
|
library.add(fas)
|
|
eleventyConfig.addShortcode("fas_icon", function(args) {
|
|
var fas_svg = icon({ prefix: 'fas', iconName: args });
|
|
return `${fas_svg.html}`;
|
|
});
|
|
|
|
const mapping = {
|
|
h2: 'content-title',h3: 'content-title',h4: 'content-title',h5: 'content-title',h6: 'content-title',
|
|
table: 'table',
|
|
blockquote: 'alert'
|
|
};
|
|
|
|
const mdOptions = { linkify: false, html: true };
|
|
const mdAnchorOpts = {
|
|
permalink: markdownItAnchor.permalink.headerLink(),
|
|
permalinkClass: 'ml-5', permalinkSymbol: '#', level: [1, 2, 3, 4]
|
|
}
|
|
|
|
eleventyConfig.setLibrary(
|
|
'md',
|
|
markdownIt(mdOptions)
|
|
.use(markdownItClass, mapping)
|
|
.use(markdownItAnchor, mdAnchorOpts)
|
|
)
|
|
|
|
eleventyConfig.addPairedShortcode("admonition", function(content, type, title) {
|
|
let titleStr = "";
|
|
if(title) {
|
|
titleStr = title;
|
|
} else if(type) {
|
|
titleStr = type.substring(0, 1).toUpperCase() + type.substring(1).toLowerCase();
|
|
} else {
|
|
titleStr = "Info";
|
|
}
|
|
|
|
return `<div class="admonition${type ? ` ${type.toLowerCase()}` : ""}">
|
|
<div class="admonition-title">
|
|
<span class="admonition-icon${type ? ` ${type.toLowerCase()}` : ""}"></span>
|
|
${titleStr}
|
|
</div>
|
|
<div class="admonition-content">${content}</div>
|
|
</div>`
|
|
});
|
|
|
|
return {
|
|
dir: {
|
|
input: "content"
|
|
}
|
|
}
|
|
}
|