diff --git a/development/docs-template.ejs b/development/docs-template.ejs index d704b5d46f..9f498e2f24 100644 --- a/development/docs-template.ejs +++ b/development/docs-template.ejs @@ -141,6 +141,44 @@ margin: 1rem 0; font-size: small; } + + /* General Alert Styles */ + .alert { + padding-left: 15px; + line-height: 1; + } + + /* Border colors for specific alerts */ + .alert.alert-note { border-left: .25em solid #1f6feb; } + .alert.alert-tip { border-left: .25em solid #238636; } + .alert.alert-important { border-left: .25em solid #8957e5; } + .alert.alert-warning { border-left: .25em solid #9e6a03; } + .alert.alert-caution { border-left: .25em solid #da3633; } + + /* Shared Styling for Alert Text */ + .alert p:first-child { + padding-top: 10px; + font-weight: 500; + font-size: 14px; + display: flex; + } + + .alert p:last-child { + padding-bottom: 10px; + } + + /* Specific Color Overrides for Each Alert */ + .alert.alert-note > p:first-child { color: #4493f8; } + .alert.alert-tip > p:first-child { color: #3fb950; } + .alert.alert-important > p:first-child { color: #ab7df8; } + .alert.alert-warning > p:first-child { color: #d29922; } + .alert.alert-caution > p:first-child { color: #f85149; } + + /* Icon Spacing */ + div.alert svg { + margin-right: 8px; + } +
diff --git a/development/render-docs.js b/development/render-docs.js index 3bdcfab88e..378cc38d63 100644 --- a/development/render-docs.js +++ b/development/render-docs.js @@ -2,6 +2,15 @@ const path = require("path"); const MarkdownIt = require("markdown-it"); const renderTemplate = require("./render-template"); +// From GitHub's markdown alert SVG icons: https://github.com/primer/octicons +const blockIcons = { + note: ``, + tip: ``, + important: ``, + warning: ``, + caution: ``, +}; + const md = new MarkdownIt({ html: true, linkify: true, @@ -25,6 +34,74 @@ md.renderer.rules.fence = function (tokens, idx, options, env, self) { )}">${md.utils.escapeHtml(token.content)}`; }; +md.block.ruler.before( + "blockquote", + "custom_blockquote", + function (state, startLine, endLine, silent) { + const marker = state.src.slice( + state.bMarks[startLine], + state.eMarks[startLine] + ); + + const match = marker.match(/^\s*>\s*\[!([A-Z]+)]\s*(.*)/); + if (!match) return false; + + const type = match[1].toLowerCase(); + if (!blockIcons[type]) { + throw new TypeError(`Invalid alert type: ${match[1]}`); + } + const icon = blockIcons[type]; + + if (silent) return true; + + // Open alert div + const tokenOpen = state.push("html_block", "", 0); + tokenOpen.content = `