Skip to content

Commit 8a42913

Browse files
isabelrosesisabelroses
committed
refactor(treewide): change how script tags work
1 parent 2d2a19e commit 8a42913

File tree

6 files changed

+46
-42
lines changed

6 files changed

+46
-42
lines changed

‎templates/layouts/base.tera

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -33,38 +33,7 @@
3333

3434
<link rel="stylesheet" href="/static/styles.css" />
3535

36-
<script>
37-
const runColorMode = (fn) => {
38-
let theme = localStorage.getItem("theme");
39-
if (theme) {
40-
document.documentElement.className = theme;
41-
document.getElementById("themes").value = theme;
42-
return;
43-
}
44-
45-
<!-- if media queries are not ussported use this as the default theme -->
46-
if (!window.matchMedia) {
47-
document.documentElement.className = "theme-dark";
48-
}
49-
50-
const query = window.matchMedia("(prefers-color-scheme: dark)");
51-
52-
fn(query.matches);
53-
54-
query.addEventListener("change", (event) => fn(event.matches));
55-
localStorage.setItem("theme", document.documentElement.className);
56-
};
57-
58-
const isDarkMode = () =>
59-
window.matchMedia &&
60-
window.matchMedia("(prefers-color-scheme: dark)").matches;
61-
62-
runColorMode((isDarkMode) => {
63-
document.documentElement.className = isDarkMode
64-
? "theme-dark"
65-
: "theme-light";
66-
});
67-
</script>
36+
<script>{%include "partials/script.js" %}</script>
6837

6938
{% block additionalhead %} {% endblock %}
7039
</head>

‎templates/pages/badges.tera

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,13 @@
3737
<button id="copybtn">Copy</button>
3838
</div>
3939
</div>
40+
{% endblock %}
4041

42+
{% block additionalfoot %}
4143
<script>
42-
document.getElementById("copybtn").addEventListener("click", () => {
43-
const codeToCopy = document.getElementById("copy").value;
44-
navigator.clipboard.writeText(codeToCopy);
45-
});
44+
document.getElementById("copybtn").addEventListener("click", () => {
45+
const codeToCopy = document.getElementById("copy").value;
46+
navigator.clipboard.writeText(codeToCopy);
47+
});
4648
</script>
4749
{% endblock %}

‎templates/pages/post.tera

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,7 @@
9696
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/nix.min.js"></script>
9797
<script>
9898
hljs.highlightAll();
99-
</script>
10099

101-
<script>
102100
const codeblocks = document.querySelectorAll('div.codeblock');
103101

104102
codeblocks.forEach((block) => {

‎templates/partials/footer.tera

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<footer>
22
<span class="align-footer">
3-
<a href="https://ctp-webr.ing/isabelroses/previous"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg></a>
4-
<a href="https://ctp-webr.ing/"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M418.4 157.9c35.3-8.3 61.6-40 61.6-77.9c0-44.2-35.8-80-80-80c-43.4 0-78.7 34.5-80 77.5L136.2 151.1C121.7 136.8 101.9 128 80 128c-44.2 0-80 35.8-80 80s35.8 80 80 80c12.2 0 23.8-2.7 34.1-7.6L259.7 407.8c-2.4 7.6-3.7 15.8-3.7 24.2c0 44.2 35.8 80 80 80s80-35.8 80-80c0-27.7-14-52.1-35.4-66.4l37.8-207.7zM156.3 232.2c2.2-6.9 3.5-14.2 3.7-21.7l183.8-73.5c3.6 3.5 7.4 6.7 11.6 9.5L317.6 354.1c-5.5 1.3-10.8 3.1-15.8 5.5L156.3 232.2z"/></svg></a>
5-
<a href="https://ctp-webr.ing/isabelroses/next"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg></a>
3+
<a href="https://ctp-webr.ing/isabelroses/previous" aria-label="previous catppuccin webring"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg></a>
4+
<a href="https://ctp-webr.ing/" aria-label="catppuccin webring"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M418.4 157.9c35.3-8.3 61.6-40 61.6-77.9c0-44.2-35.8-80-80-80c-43.4 0-78.7 34.5-80 77.5L136.2 151.1C121.7 136.8 101.9 128 80 128c-44.2 0-80 35.8-80 80s35.8 80 80 80c12.2 0 23.8-2.7 34.1-7.6L259.7 407.8c-2.4 7.6-3.7 15.8-3.7 24.2c0 44.2 35.8 80 80 80s80-35.8 80-80c0-27.7-14-52.1-35.4-66.4l37.8-207.7zM156.3 232.2c2.2-6.9 3.5-14.2 3.7-21.7l183.8-73.5c3.6 3.5 7.4 6.7 11.6 9.5L317.6 354.1c-5.5 1.3-10.8 3.1-15.8 5.5L156.3 232.2z"/></svg></a>
5+
<a href="https://ctp-webr.ing/isabelroses/next" aria-label="license-text catppuccin webring"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg></a>
66
</span>
77

88
<ul class="align-footer">

‎templates/partials/header.tera

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
name="themes"
1717
id="themes"
1818
aria-label="Change theme"
19-
onchange="document.documentElement.className = this.value; localStorage.setItem('theme', this.value);"
2019
>
2120
<option value="theme-dark">Dark</option>
2221
<option value="theme-light">Light</option>

‎templates/partials/script.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// set theme on intial load
2+
setTheme(getTheme());
3+
4+
document.addEventListener("DOMContentLoaded", () => {
5+
const themes = document.getElementById("themes");
6+
7+
setTheme(getTheme());
8+
9+
themes.addEventListener("change", (event) => {
10+
setTheme(event.target.value);
11+
});
12+
});
13+
14+
function setTheme(theme) {
15+
localStorage.setItem("theme", theme);
16+
document.documentElement.className = theme;
17+
18+
const themes = document.getElementById("themes");
19+
if (themes) {
20+
themes.value = theme;
21+
}
22+
}
23+
24+
function getTheme() {
25+
const theme = localStorage.getItem("theme");
26+
27+
if (theme) return theme;
28+
29+
if (!window.matchMedia) return "theme-dark";
30+
31+
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
32+
return "theme-dark";
33+
} else {
34+
return "theme-light";
35+
}
36+
}

0 commit comments

Comments
 (0)