diff --git a/config.toml b/config.toml
index 4672d03..d99ee4c 100644
--- a/config.toml
+++ b/config.toml
@@ -162,13 +162,17 @@ show_backlinks = true
# Keep in mind that although this can potentially increase security,
# it can break some stuff, in which case you will need to set custom policy.
csp = [
- { directive = "font-src", domains = ["'self'", "data:"] },
+ { directive = "font-src", domains = ["'self'"] },
{ directive = "img-src", domains = ["'self'", "https:", "data:"] },
- { directive = "media-src", domains = ["'self'", "https:", "data:"] },
+ { directive = "media-src", domains = ["'self'", "https:"] },
{ directive = "script-src", domains = ["'self'"] },
{ directive = "style-src", domains = ["'self'", "'unsafe-inline'"] },
{ directive = "frame-src", domains = ["https://player.vimeo.com", "https://www.youtube-nocookie.com", "https://toot.community"] },
{ directive = "connect-src", domains = ["https://toot.community"] },
+ { directive = "frame-ancestors", domains = ["'none'"] },
+ { directive = "base-uri", domains = ["'none'"] },
+ { directive = "form-action", domains = ["'none'"] },
+ { directive = "require-trusted-types-for", domains = ["'script'"] },
]
# Display outlines around all elements for debugging purposes
# debug_layout = true
diff --git a/content/demo/demo.css b/content/demo/demo.css
new file mode 100644
index 0000000..2235f4d
--- /dev/null
+++ b/content/demo/demo.css
@@ -0,0 +1,40 @@
+#color-picker-container {
+ -webkit-backdrop-filter: var(--blur);
+ position: fixed;
+ transform: translateX(calc(-100% + 1rem));
+ z-index: 1;
+ backdrop-filter: var(--blur);
+ transition: var(--transition);
+ inset-block-end: 1rem;
+ inset-inline-start: 0;
+ box-shadow: var(--edge-highlight), var(--shadow-glass);
+ border-start-end-radius: var(--rounded-corner);
+ border-end-end-radius: var(--rounded-corner);
+ background-color: var(--nav-bg);
+ padding: 0.5rem;
+}
+
+#color-picker-container:hover {
+ transform: none;
+}
+
+#color-picker-container label {
+ margin-inline-end: 0.25rem;
+ color: var(--fg-muted-4);
+ font-weight: bold;
+}
+
+:root[dir*="rtl"] #color-picker-container {
+ transform: translateX(calc(100% - 1rem));
+}
+
+:root[dir*="rtl"] #color-picker-container:hover {
+ transform: none;
+}
+
+#color-picker-light,
+#color-picker-dark,
+#contrast-color-light,
+#contrast-color-dark {
+ margin-inline-end: 0.25rem;
+}
diff --git a/content/demo/demo.js b/content/demo/demo.js
new file mode 100644
index 0000000..cd991ea
--- /dev/null
+++ b/content/demo/demo.js
@@ -0,0 +1,91 @@
+const colorPickerLight = document.querySelector("#color-picker-light");
+const colorPickerDark = document.querySelector("#color-picker-dark");
+const contrastCheckboxLight = document.querySelector("#contrast-color-light");
+const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
+
+let accentColorLight = colorPickerLight.value;
+let accentColorDark = colorPickerDark.value;
+
+colorPickerLight.addEventListener("input", updateAccentColorLight);
+colorPickerDark.addEventListener("input", updateAccentColorDark);
+contrastCheckboxLight.addEventListener("change", updateStyles);
+contrastCheckboxDark.addEventListener("change", updateStyles);
+
+function updateAccentColorLight() {
+ accentColorLight = colorPickerLight.value;
+ updateStyles();
+}
+
+function updateAccentColorDark() {
+ accentColorDark = colorPickerDark.value;
+ updateStyles();
+}
+
+function updateStyles() {
+ const contrastColorLight = contrastCheckboxLight.checked;
+ const contrastColorDark = contrastCheckboxDark.checked;
+
+ let styleElement = document.getElementById("dynamic-styles");
+
+ if (!styleElement) {
+ styleElement = document.createElement("style");
+ styleElement.id = "dynamic-styles";
+ document.head.appendChild(styleElement);
+ }
+
+ let styles = `
+ :root {
+ --accent-color: ${accentColorLight};
+ }
+ [data-theme="dark"] {
+ --accent-color: ${accentColorDark};
+ }
+ @media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ --accent-color: ${accentColorDark};
+ }
+ }
+ `;
+
+ if (contrastColorLight) {
+ styles += `
+ :root {
+ --contrast-color: rgb(0 0 0 / 0.8);
+ }
+ `;
+ } else {
+ styles += `
+ :root {
+ --contrast-color: #fff;
+ }
+ `;
+ }
+
+ if (contrastColorDark) {
+ styles += `
+ [data-theme="dark"] {
+ --contrast-color: rgb(0 0 0 / 0.8);
+ }
+ @media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ --contrast-color: rgb(0 0 0 / 0.8);
+ }
+ }
+ `;
+ } else {
+ styles += `
+ [data-theme="dark"] {
+ --contrast-color: #fff;
+ }
+ @media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ --contrast-color: #fff;
+ }
+ }
+ `;
+ }
+
+ styleElement.textContent = styles;
+}
+
+updateStyles();
diff --git a/content/demo/index.md b/content/demo/index.md
index 7d34710..0c361cd 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -1,6 +1,8 @@
+++
title = "Demo Page"
[extra]
+styles = ["demo/demo.css"]
+scripts = ["demo/demo.js"]
katex = true
archive = "This page is in fact not archived. It is only here to demonstrate the archival statement."
trigger = "This page contains blackjack and hookers, and bad jokes such as this one."
@@ -678,141 +680,4 @@ You know, Duckquill is a pretty dumb name. I
-
-
-
-
diff --git a/static/katex-init.js b/static/katex-init.js
new file mode 100644
index 0000000..00d02dc
--- /dev/null
+++ b/static/katex-init.js
@@ -0,0 +1,8 @@
+document.addEventListener("DOMContentLoaded", function () {
+ renderMathInElement(document.body, {
+ delimiters: [
+ { left: "$$", right: "$$", display: true },
+ { left: "$", right: "$", display: false },
+ ],
+ });
+});
diff --git a/templates/partials/csp.html b/templates/partials/csp.html
index ac61faf..dc7ce6c 100644
--- a/templates/partials/csp.html
+++ b/templates/partials/csp.html
@@ -1,7 +1,7 @@
{#- Based on https://github.com/welpo/tabi/blob/7b00ed1d9dca5c529d2816c5b6679bfe600d63fc/templates/partials/content_security_policy.html -#}
-
+{%- endif -%}" />
diff --git a/templates/partials/head.html b/templates/partials/head.html
index 0c55aae..259d593 100644
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@@ -78,17 +78,7 @@
{%- endif %}
{%- if page.extra.katex or section.extra.katex or config.extra.katex %}
- {%- set scripts = scripts | concat(with=["katex.min.js", "auto-render.min.js"]) %}
-
+ {%- set scripts = scripts | concat(with=["katex.min.js", "auto-render.min.js", "katex-init.js"]) %}
{%- endif %}
{%- if config.build_search_index %}