Merge branch 'preview'

assets/css/prism/prism-command-line.css

@@ -0,0 +1,43 @@
+.command-line-prompt {
+	border-right: 1px solid #aaa6;
+	display: block;
+	float: left;
+	font-size: 100%;
+	letter-spacing: -1px;
+	margin-right: 1em;
+	pointer-events: none;
+	text-align: right;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.command-line-prompt > span:before {
+	opacity: 0.7;
+	content: ' ';
+	display: block;
+	padding-right: 0.8em;
+}
+
+.command-line-prompt > span[data-user]:before {
+	content: "[" attr(data-user) "@" attr(data-host) "] $";
+}
+
+.command-line-prompt > span[data-user="root"]:before {
+	content: "[" attr(data-user) "@" attr(data-host) "] #";
+}
+
+.command-line-prompt > span[data-prompt]:before {
+	content: attr(data-prompt);
+}
+
+.command-line-prompt > span[data-continuation-prompt]:before {
+	content: attr(data-continuation-prompt);
+}
+
+.command-line span.token.output {
+	/* Make shell output lines a bit lighter to distinguish them from shell commands */
+	opacity: 0.7;
+}

assets/css/prism/prism-custom.css

@@ -0,0 +1,19 @@
+:root {
+    --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
+    --icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
+}
+
+.copy-to-clipboard-button {
+    border: none;
+    width: 30px;
+    height: 30px;
+    background-image: var(--icon-copy);
+    background-position: 50%;
+    background-size: 18px;
+    background-repeat: no-repeat; 
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > span.lang {
+    -webkit-user-select: none;
+	user-select: none;
+}

assets/css/third-party/prism-diff.css → assets/css/prism/prism-diff.css

@@ -43,3 +43,8 @@ pre[class*="language-diff-"] {
 	text-decoration: none; /* override del, ins, mark defaults */
 	color: inherit; /* override del, ins, mark defaults */
 }
+
+/* More whitespace between +/- and start of line. */
+.token.prefix {
+	margin-right: 3px;
+}

assets/css/prism/prism-line-numbers.css

@@ -0,0 +1,54 @@
+
+pre[class*="language-"].line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+}
+
+/* More space for diff highlights. */
+pre[class*="language-diff-"].line-numbers {
+    padding-left: 4.8em;
+}
+
+pre[class*="language-"].line-numbers>code {
+    position: relative;
+    white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 1.1rem;
+    font-size: 100%;
+    /* left: -3.8em; */
+    left: 0;
+    width: 3em;
+    /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #aaa6;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+}
+
+.line-numbers-rows>span {
+    display: block;
+    /* counter-increment: linenumber; */
+}
+
+.line-numbers-rows>span:before {
+    counter-increment: linenumber;
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+}
+
+.line-numbers-rows>span.ln-skip:before {
+    counter-increment: none;
+    content: " ";
+}

assets/css/prism/prism-toolbar.css

@@ -0,0 +1,45 @@
+div.code-toolbar {
+	position: relative;
+}
+
+div.code-toolbar > .toolbar {
+	display: flex;
+	align-items: start;
+	gap: 2px;
+	position: absolute;
+	z-index: 10;
+	top: -0.8em;
+	right: 0.5em;
+	transition: opacity 0.3s ease-in-out;
+	opacity: 1;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item {
+	display: flex;
+	flex-direction: column;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a {
+	cursor: pointer;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a,
+div.code-toolbar > .toolbar > .toolbar-item > button,
+div.code-toolbar > .toolbar > .toolbar-item > span {
+	color: #bbb;
+	font-size: .7em;
+	padding: 0 .5em;
+	background-color: var(--medium-background-color);
+	/* box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); */
+	border-radius: 5px;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a:hover,
+div.code-toolbar > .toolbar > .toolbar-item > a:focus,
+/* div.code-toolbar > .toolbar > .toolbar-item > button:hover,
+div.code-toolbar > .toolbar > .toolbar-item > button:focus, */
+div.code-toolbar > .toolbar > .toolbar-item > span:hover,
+div.code-toolbar > .toolbar > .toolbar-item > span:focus {
+	color: inherit;
+	text-decoration: none;
+}

assets/js.bundle/common/misc.js

@@ -1,2 +1,2 @@
 // Mobile ToC: Add a special class for dropdown items.
-$('#btn-mobile-toc nav.toc a').addClass('dropdown-item');
+$('#btn-mobile-toc nav.toc a').addClass('dropdown-item');

assets/js.bundle/common/prism-copy-to-clipboard.js

@@ -0,0 +1,162 @@
+/**
+	 * When the given elements is clicked by the user, the given text will be copied to clipboard.
+	 *
+	 * @param {HTMLElement} element
+	 * @param {CopyInfo} copyInfo
+	 *
+	 * @typedef CopyInfo
+	 * @property {() => string} getText
+	 * @property {() => void} success
+	 * @property {(reason: unknown) => void} error
+	 */
+function registerClipboard(element, copyInfo) {
+    element.addEventListener('click', function () {
+        copyTextToClipboard(copyInfo);
+    });
+}
+
+// https://stackoverflow.com/a/30810322/7595472
+
+/** @param {CopyInfo} copyInfo */
+function fallbackCopyTextToClipboard(copyInfo) {
+    var text = copyInfo.getText();
+    if (!text) {
+        copyInfo.error();
+        return;
+    }
+    var textArea = document.createElement('textarea');
+    textArea.value = text;
+
+    // Avoid scrolling to bottom
+    textArea.style.top = '0';
+    textArea.style.left = '0';
+    textArea.style.position = 'fixed';
+
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    try {
+        var successful = document.execCommand('copy');
+        setTimeout(function () {
+            if (successful) {
+                copyInfo.success();
+            } else {
+                copyInfo.error();
+            }
+        }, 1);
+    } catch (err) {
+        setTimeout(function () {
+            copyInfo.error(err);
+        }, 1);
+    }
+
+    document.body.removeChild(textArea);
+}
+/** @param {CopyInfo} copyInfo */
+function copyTextToClipboard(copyInfo) {
+    if (navigator.clipboard) {
+        navigator.clipboard.writeText(copyInfo.getText()).then(copyInfo.success, function () {
+            // try the fallback in case `writeText` didn't work
+            fallbackCopyTextToClipboard(copyInfo);
+        });
+    } else {
+        fallbackCopyTextToClipboard(copyInfo);
+    }
+}
+
+/**
+ * Selects the text content of the given element.
+ *
+ * @param {Element} element
+ */
+function selectElementText(element) {
+    // https://stackoverflow.com/a/20079910/7595472
+    window.getSelection().selectAllChildren(element);
+}
+
+var clipboardSettings = {
+    'copy': 'var(--icon-copy)',
+    // 'copy-error': '',
+    'copy-success': 'var(--icon-copied)',
+    'copy-timeout': 5000
+};
+
+document.querySelectorAll('.copy-to-clipboard-button').forEach(el => {
+    function setState(state) {
+        el.style.backgroundImage = clipboardSettings[state];
+        el.setAttribute('data-copy-state', state);
+    }
+
+    function resetText() {
+        setTimeout(function () { setState('copy'); }, clipboardSettings['copy-timeout']);
+    }
+
+    registerClipboard(el, {
+        getText: function () {
+            const children = el.parentElement.parentElement.parentElement.children;
+            for (let i = 0; i < children.length; i++) {
+                if (children[i].tagName.toLowerCase() === 'pre') {
+                    return filterTextToCopy(children[i], children[i].textContent);
+                }
+            }
+            return undefined;
+        },
+        success: function () {
+            setState('copy-success');
+
+            resetText();
+        },
+        error: function () {
+            // setState('copy-error');
+
+            setTimeout(function () {
+                selectElementText(el);
+            }, 1);
+
+            resetText();
+        }
+    })
+});
+
+var NEW_LINE_EXP = /\n(?!$)/g;
+
+function filterTextToCopy(preElement, code) {
+    // Filter out output lines.
+    // This may arise from the command-line or line-number plugins.
+    var lineNumbersToSkip = preElement.getAttribute('data-output');
+    if (lineNumbersToSkip !== null) {
+        var lines = code.split(NEW_LINE_EXP);
+        var linesNum = lines.length;
+
+        lineNumbersToSkip.split(',').forEach(function (section) {
+            var range = section.split('-');
+            var lineStart = parseInt(range[0], 10);
+            var lineEnd = range.length === 2 ? parseInt(range[1], 10) : lineStart;
+
+            if (!isNaN(lineStart) && !isNaN(lineEnd)) {
+                if (lineStart < 1) {
+                    lineStart = 1;
+                }
+                if (lineEnd > linesNum) {
+                    lineEnd = linesNum;
+                }
+                lineStart--;
+                lineEnd--;
+
+                for (var j = lineStart; j <= lineEnd; j++) {
+                    lines[j] = undefined;
+                }
+            }
+        });
+
+        code = lines.filter(s => s !== undefined).join('\n');
+    } else if (preElement.classList.contains('command-line')) {
+        var nonOutputLines = preElement.querySelectorAll('.token.command');
+        code = Array.prototype.slice.call(nonOutputLines)
+            .map(e => e.textContent)
+            .join('\n')
+    }
+
+    return code;
+}

assets/scss/_alerts.scss

@@ -1,5 +1,5 @@
 // Bootstrap alerts.
-html[data-theme="dark"] {
+html[data-theme=dark] {
 
     // Generate contextual modifier classes for colorizing the alert.
     @each $state,
@@ -26,12 +26,12 @@ html[data-theme="dark"] {
                 color: var(--#{$prefix}alert-link-color);
             }
 
-            code {
+            :not(pre) > code {
                 color: color-mix(in srgb, var(--bs-code-color) 75%, #{shift-color($alert-color, -60%)} 25%);
             }
 
             strong {
-                color: color-mix(in srgb, #{$alert-color} 80%, #fff 20%);
+                --bold-color: color-mix(in srgb, #{$alert-color} 80%, #fff 20%);
             }
         }
     }
@@ -41,6 +41,13 @@ html[data-theme="dark"] {
     }
 }
 
+html[data-theme=light] {
+    strong {
+        // color: color-mix(in srgb, #{$alert-color} 80%, #fff 20%);
+        --bold-color: var(--bs-alert-color);
+    }
+}
+
 
 @include media-breakpoint-down(sm) {
     .alert i.fa {