cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: now playing loading changes

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-17 20:18:56 -08:00
parent 422ac5fb79
commit cf91650cc6
No known key found for this signature in database
5 changed files with 58 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "5.9.2", "version": "5.9.3",
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
"type": "module", "type": "module",
"scripts": { "scripts": {

7
src/_includes/base.liquid
View file

@ -116,13 +116,14 @@
</noscript> </noscript>
</head> </head>
<body> <body>
{% capture js %} {% capture theme %}
{% render "../assets/scripts/theme.js" %} {% render "../assets/scripts/theme.js" %}
{% endcapture %} {% endcapture %}
<script>{{ js }}</script> <script>{{ theme }}</script>
{{ content }} {{ content }}
{% capture js %} {% capture js %}
{% render "../assets/scripts/index.js" %} {% render "../assets/scripts/now-playing.js" %}
{% render "../assets/scripts/theme-handler.js" %}
{% endcapture %} {% endcapture %}
<script> <script>
{{ js }} {{ js }}

62
src/assets/scripts/index.js
View file

@ -1,62 +0,0 @@
if (window.location.hostname !== 'localhost') {
;(async function() {
const nowPlaying = document.getElementById('now-playing')
if (nowPlaying) {
const content = document.getElementById('now-playing-content')
const loading = document.getElementById('now-playing-loading')
const populateNowPlaying = (data) => {
loading.style.display = 'none'
content.innerHTML = data.content
content.classList.remove('hidden')
}
try {
const cache = JSON.parse(localStorage.getItem('now-playing'))
if (cache) populateNowPlaying(cache)
} catch (e) {
/* quiet catch */
}
const data = await fetch('/api/now-playing', {
type: 'json',
})
.then((data) => data.json())
.catch(() => {
loading.style.display = 'none'
})
try {
localStorage.setItem('now-playing', JSON.stringify(data))
} catch (e) {
/* quiet catch */
}
if (!JSON.parse(localStorage.getItem('now-playing')) && !data) nowPlaying.remove()
populateNowPlaying(data)
}
})()
}
;(async function() {
const btn = document.querySelector('.theme__toggle');
btn.addEventListener('click', () => {
document.body.classList.toggle('theme__light');
document.body.classList.toggle('theme__dark');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const currentTheme = localStorage?.getItem('theme');
let theme;
if (!currentTheme) localStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
if (prefersDarkScheme) {
theme = document.body.classList.contains('theme__light') ? 'light' : 'dark';
} else {
theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light';
}
localStorage?.setItem('theme', theme);
});
})()

33
src/assets/scripts/now-playing.js Normal file
View file

@ -0,0 +1,33 @@
;(async function() {
const nowPlaying = document.getElementById('now-playing')
if (nowPlaying) {
const content = document.getElementById('now-playing-content')
const loading = document.getElementById('now-playing-loading')
const populateNowPlaying = (data) => {
loading.style.display = 'none'
content.innerHTML = data.content
content.classList.remove('hidden')
}
try {
const cache = JSON.parse(localStorage.getItem('now-playing'))
if (cache) populateNowPlaying(cache)
} catch (e) {}
const data = await fetch('/api/now-playing', {
type: 'json',
})
.then((data) => data.json())
.catch(() => {
loading.style.display = 'none'
})
try {
localStorage.setItem('now-playing', JSON.stringify(data))
} catch (e) {}
if (!JSON.parse(localStorage?.getItem('now-playing')) && !data) nowPlaying.remove()
populateNowPlaying(data)
}
})()

20
src/assets/scripts/theme-handler.js Normal file
View file

@ -0,0 +1,20 @@
;(async function() {
const btn = document.querySelector('.theme__toggle');
btn.addEventListener('click', () => {
document.body.classList.toggle('theme__light');
document.body.classList.toggle('theme__dark');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const currentTheme = localStorage?.getItem('theme');
let theme;
if (!currentTheme) localStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
if (prefersDarkScheme) {
theme = document.body.classList.contains('theme__light') ? 'light' : 'dark';
} else {
theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light';
}
localStorage?.setItem('theme', theme);
});
})()