minoplhy/hugo-bearblog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hugo-bearblog : loading javascript,stylesheet out of HTML page (no unsafe CSP)

Browse Source
This commit is contained in:
minoplhy 2024-03-10 11:47:53 +07:00
parent f2052084ea
commit b46dab5ba6
Signed by: minoplhy
GPG Key ID: 41D406044E2434BF
9 changed files with 157 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
layouts/partials/style.html → assets/css/style.css
View File

@ -1,4 +1,3 @@
<style>
body {
font-family: Verdana, sans-serif;
margin: auto;
@ -171,5 +170,3 @@
.dark-mode .helptext {
color: #aaa;
}
</style>

23
assets/js/darkmode.js Normal file
View File

@ -0,0 +1,23 @@
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('dark-mode') === null) {
localStorage.setItem('dark-mode', 'true');
}
function darkmode() {
if (localStorage.getItem('dark-mode') === 'false') {
darkmode_enable();
} else if (localStorage.getItem('dark-mode') === null) {
darkmode_enable();
} else {
darkmode_disable();
}
}
function darkmode_enable() {
document.body.classList.add("dark-mode");
localStorage.setItem('dark-mode', 'true');
}
function darkmode_disable() {
document.body.classList.remove("dark-mode");
localStorage.setItem('dark-mode', 'false');
}

5
assets/js/darkmode_load.js Normal file
View File

@ -0,0 +1,5 @@
/* darkmode_enable is defined in darkmode.js(should be in the same directory as this file) */
/* Must be executed after document.body is finished, else there would be error :) */
if (localStorage.getItem('dark-mode') === 'true') {
darkmode_enable()
}

25
assets/js/random_color.js Normal file
View File

@ -0,0 +1,25 @@
const links = document.querySelectorAll('.random-color');
// To avoid too bright and too dark color being generated
function getRandomColor(minBrightness = 100, maxBrightness = 230) {
// Generate random color components within a specific brightness range
let red = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
let green = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
let blue = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
// Convert components to hexadecimal string format
red = red.toString(16).padStart(2, '0');
green = green.toString(16).padStart(2, '0');
blue = blue.toString(16).padStart(2, '0');
return `#${red}${green}${blue}`;
}
function setRandomColors() {
links.forEach(link => {
link.style.color = getRandomColor();
});
}
window.onload = setRandomColors;

14
layouts/_default/baseof.html
View File

@ -15,8 +15,13 @@
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
{{ end -}}
{{- partial "style.html" . -}}
{{- partial "script.html" . -}}
{{- /* CSS stylesheet */}}
{{- $stylesheet := (resources.Get "css/style.css") | resources.Minify | fingerprint }}
<link crossorigin="anonymous" href="{{ $stylesheet.RelPermalink }}" integrity="{{ $stylesheet.Data.Integrity }}" rel="preload stylesheet" as="style">
{{- /* Javascript */}}
{{- $darkmode_script := (resources.Get "js/darkmode.js") | resources.Minify | fingerprint}}
<script defer crossorigin="anonymous" src="{{ $darkmode_script.RelPermalink }}" integrity="{{ $darkmode_script.Data.Integrity }}" async></script>
<!-- A partial to be overwritten by the user.
Simply place a custom_head.html into
@ -35,10 +40,13 @@
{{- partial "footer.html" . -}}
</footer>
{{- /* Bottom Javascript */}}
{{- $darkmode_load_script := (resources.Get "js/darkmode_load.js") | resources.Minify | fingerprint}}
<script defer crossorigin="anonymous" src="{{ $darkmode_load_script.RelPermalink }}" integrity="{{ $darkmode_load_script.Data.Integrity }}"></script>
<!-- A partial to be overwritten by the user.
Simply place a custom_body.html into
your local /layouts/partials-directory -->
{{- partial "script_bottom.html" -}}
{{- partial "custom_body.html" . -}}
</body>

5
layouts/_default/list.html
View File

@ -27,7 +27,10 @@
{{ end }}
</ul>
{{- partial "random_color.html" -}}
{{- /* Random Color Script */}}
{{- $random_color_script := (resources.Get "js/random_color.js") | resources.Minify | fingerprint}}
<script defer crossorigin="anonymous" src="{{ $random_color_script.RelPermalink }}" integrity="{{ $random_color_script.Data.Integrity }}" async></script>
{{ if .Data.Singular }}
{{else}}

27
layouts/partials/random_color.html
View File

@ -1,27 +0,0 @@
<script>
const links = document.querySelectorAll('.random-color');
// To avoid too bright and too dark color being generated
function getRandomColor(minBrightness = 100, maxBrightness = 230) {
// Generate random color components within a specific brightness range
let red = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
let green = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
let blue = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
// Convert components to hexadecimal string format
red = red.toString(16).padStart(2, '0');
green = green.toString(16).padStart(2, '0');
blue = blue.toString(16).padStart(2, '0');
return `#${red}${green}${blue}`;
}
function setRandomColors() {
links.forEach(link => {
link.style.color = getRandomColor();
});
}
window.onload = setRandomColors;
</script>

25
layouts/partials/script.html
View File

@ -1,25 +0,0 @@
<script>
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('dark-mode') === null) {
localStorage.setItem('dark-mode', 'true');
}
function darkmode() {
if (localStorage.getItem('dark-mode') === 'false') {
darkmode_enable();
} else if (localStorage.getItem('dark-mode') === null) {
darkmode_enable();
} else {
darkmode_disable();
}
}
function darkmode_enable() {
document.body.classList.add("dark-mode");
localStorage.setItem('dark-mode', 'true');
}
function darkmode_disable() {
document.body.classList.remove("dark-mode");
localStorage.setItem('dark-mode', 'false');
}
</script>

5
layouts/partials/script_bottom.html
View File

@ -1,5 +0,0 @@
<script>
if (localStorage.getItem('dark-mode') === 'true') {
darkmode_enable()
}
</script>