diff --git a/assets/errors/403.html b/assets/errors/403.html
new file mode 100644
index 0000000..400eb09
--- /dev/null
+++ b/assets/errors/403.html
@@ -0,0 +1,179 @@
+
+
+
+ G2's Website | 403 - Forbidden
+
+
+
+
+
+
+
+
+
403
+
+
+ Forbidden. You do not have access to this page.
+
+
+
+
diff --git a/assets/fonts/MapleMono-Italic.woff2 b/assets/fonts/MapleMono-Italic.woff2
index 881a085..2e44b8c 100644
Binary files a/assets/fonts/MapleMono-Italic.woff2 and b/assets/fonts/MapleMono-Italic.woff2 differ
diff --git a/assets/fonts/MapleMono-Regular.woff2 b/assets/fonts/MapleMono-Regular.woff2
index fd0b49c..7f6356d 100644
Binary files a/assets/fonts/MapleMono-Regular.woff2 and b/assets/fonts/MapleMono-Regular.woff2 differ
diff --git a/assets/images/showcase.webp b/assets/images/showcase.webp
index f9e4d57..0940793 100644
Binary files a/assets/images/showcase.webp and b/assets/images/showcase.webp differ
diff --git a/assets/images/showcase_old2.webp b/assets/images/showcase_old2.webp
new file mode 100644
index 0000000..f9e4d57
Binary files /dev/null and b/assets/images/showcase_old2.webp differ
diff --git a/assets/img-style.css b/assets/img-style.css
index f618645..8745f9c 100644
--- a/assets/img-style.css
+++ b/assets/img-style.css
@@ -38,6 +38,25 @@ img.icon {
height: 1em;
}
+.svg-diagram {
+ color: black;
+}
+
+figure {
+ max-width: 100%;
+ margin-bottom: 20px;
+ display: block;
+ overflow: scroll;
+}
+
+figcaption {
+ font-size: 15pt;
+ font-style: italic;
+ margin: auto;
+ width: fit-content;
+ display: block;
+}
+
@media(max-width: 700px) {
section.img_grid {
flex-direction: column;
@@ -48,3 +67,11 @@ img.icon {
height: auto;
}
}
+
+
+@media (prefers-color-scheme: dark) {
+ .svg-diagram {
+ color: #fffde6;
+ filter: invert(1);
+ }
+}
diff --git a/assets/lib/scripts/music_bars.svg b/assets/lib/scripts/music_bars.svg
new file mode 100644
index 0000000..4e2cf6f
--- /dev/null
+++ b/assets/lib/scripts/music_bars.svg
@@ -0,0 +1,74 @@
+
+
+
+
diff --git a/assets/lib/scripts/music_status.css b/assets/lib/scripts/music_status.css
index 7b9a1ea..d9c3b89 100755
--- a/assets/lib/scripts/music_status.css
+++ b/assets/lib/scripts/music_status.css
@@ -5,31 +5,26 @@
flex-direction: column;
max-width: 300px;
margin: auto;
+ perspective: 800px;
.track_name {
font-size: 1.2em;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
}
.artist_name {
font-size: 1em;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
}
.album_name {
font-size: 0.9em;
- color: #c1bfae;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
+ color: #9c9c9c;
}
p {
margin: 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
}
p#musicStatus {
@@ -44,11 +39,44 @@
background-color: grey;
}
- img {
+ img#mainArtwork {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ margin: auto;
+ }
+
+ div.artwork_container {
+ display: flex;
margin: 20px;
border-radius: 10px;
height: 260px;
width: 260px;
- object-fit: contain;
+ }
+
+ .floaty {
+ animation:
+ 2s alternate infinite ease-in-out scale,
+ 3s alternate infinite ease-in-out rotate;
+ }
+
+ div#playingBars {
+ margin: 0;
+ border-radius: 0;
+ mask: url(music_bars.svg) no-repeat center;
+ background-color: #ffffff;
+ height: auto;
+ padding: 0;
+ display: none;
}
}
+
+@keyframes scale {
+ 0% { scale: 1; }
+ 100% { scale: 1.03; }
+}
+
+@keyframes rotate {
+ 0% { transform: rotate3d(-1, 1, -1, 3deg); }
+ 100% { transform: rotate3d(1, 1, 1, 3deg); }
+}
diff --git a/assets/lib/scripts/music_status.js b/assets/lib/scripts/music_status.js
index 7aaae75..0c91d9c 100644
--- a/assets/lib/scripts/music_status.js
+++ b/assets/lib/scripts/music_status.js
@@ -1,35 +1,36 @@
-async function getData(url) {
- try {
- const response = await fetch(url);
- if (!response.ok) {
- throw new Error(`Response status: ${response.status}`);
- }
-
- const json = await response.json();
- return json
- } catch (error) {
- console.error(error.message);
- }
-}
-
const USERNAME = "G2";
const LUCENE_ESCAPE = /([\!\*\+\-\=\<\>\&\|\(\)\[\]\{\}\^\~\?\:\\/"])/g;
-let artworkTile = document.getElementById("mainArtwork");
-let albumTitle = document.getElementById("albumTitle");
-let albumArtist = document.getElementById("albumArtist");
-let track = document.getElementById("track");
-let status = document.getElementById("musicStatus");
-let prev_mbid = null;
+let artworkTile = null;
+let artworkPlaceholder = null;
+let albumTitle = null;
+let albumArtist = null;
+let track = null;
+let status = null;
+let animatedBars = null;
+let prev_mbid = null;
-async function main() {
+function initMusicTile() {
+ artworkTile = document.getElementById("mainArtwork");
+ artworkPlaceholder = document.getElementById("mainArtworkPlaceholder");
+ albumTitle = document.getElementById("albumTitle");
+ albumArtist = document.getElementById("albumArtist");
+ track = document.getElementById("track");
+ status = document.getElementById("musicStatus");
+ animatedBars = document.getElementById("playingBars");
+ prev_mbid = null;
+}
+
+async function startMusicTile() {
// Get my currently playing song!
let statusTmp = "Currently playing:";
+ let playing = true;
let songInfo = await getData("https://api.listenbrainz.org/1/user/" + USERNAME + "/playing-now")
if (songInfo["payload"]["count"] == 0) {
// If no current song, get last played
songInfo = await getData("https://api.listenbrainz.org/1/user/" + USERNAME + "/listens?count=1")
statusTmp = "Last played song:";
+ playing = false;
}
if (prev_mbid != null && prev_mbid == JSON.stringify(songInfo)) {
@@ -49,24 +50,20 @@ async function main() {
let artistSearchName = encodeURIComponent(artistName.replace(LUCENE_ESCAPE, "\\$1"));
let trackSearchName = encodeURIComponent(trackName.replace(LUCENE_ESCAPE, "\\$1"));
- console.log("https://musicbrainz.org/ws/2/recording/?query=" + trackSearchName + " AND artist:%22" + artistSearchName + "%22&fmt=json");
let searchedReleases = await getData(
"https://musicbrainz.org/ws/2/recording/?query=" + trackSearchName + " AND artist:%22" + artistSearchName + "%22&fmt=json"
);
- console.log(searchedReleases);
-
if (searchedReleases["count"] >= 1) {
if (searchedReleases["recordings"][0]["releases"][0]) {
}
releaseMBID = searchedReleases["recordings"][0]["releases"][0]["id"];
- console.log("Found MBID by search " + releaseMBID);
}
}
let albumName = "Unknown Album";
- let artworkSrc = "https://placehold.co/260/2220/FFFDE6?text=?&font=roboto";
+ let artworkSrc = "";
if (releaseMBID != null) {
// Get release information (like album title)
let releaseInfo = await getData("https://musicbrainz.org/ws/2/release/" + releaseMBID + "?fmt=json&inc=release-groups");
@@ -75,26 +72,84 @@ async function main() {
let releaseGroupMBID = releaseInfo["release-group"]["id"];
// Grab the image from the release ID
- let coverArtGroup = await fetch("https://coverartarchive.org/release-group/" + releaseGroupMBID + "/front-500");
- if (coverArtGroup.status == 200) {
+ let coverArtGroup = await getImage("https://coverartarchive.org/release-group/" + releaseGroupMBID + "/front-500");
+ if (coverArtGroup != null && coverArtGroup.status == 200) {
artworkSrc = coverArtGroup.url
} else {
- let coverArtTrack = await fetch("https://coverartarchive.org/release/" + releaseMBID + "/front-500");
- if (coverArtTrack.status == 200) {
+ let coverArtTrack = await getImage("https://coverartarchive.org/release/" + releaseMBID + "/front-500");
+ if (coverArtGroup != null && coverArtTrack.status == 200) {
artworkSrc = coverArtTrack.url;
}
}
}
- console.log("%s %s by %s (%s)", statusTmp, trackName, artistName, albumName);
-
// Fill in the data
status.textContent = statusTmp;
+ if (playing == true) {
+ animatedBars.style.display = "block";
+ animatedBars.style.position = "";
+ } else {
+ animatedBars.style.display = "none";
+ animatedBars.style.position = "absolute";
+ }
+
albumArtist.textContent = artistName;
+
track.textContent = trackName;
+ track.title = trackName;
+
albumTitle.textContent = albumName;
+
artworkTile.src = artworkSrc;
+ if (artworkSrc == "") {
+ artworkPlaceholder.style.display = "block";
+ artworkTile.style.display = "none";
+ } else {
+ artworkPlaceholder.style.display = "none";
+ artworkTile.style.display = "block";
+
+ if (playing == true && artworkSrc != "") {
+ artworkTile.className = "floaty";
+ } else {
+ artworkTile.className = "";
+ }
+ }
}
-main().catch(console.log);
-setInterval(main, 10000);
+async function getData(url) {
+ try {
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(`Response status: ${response.status}`);
+ }
+
+ const json = await response.json();
+ return json
+ } catch (error) {
+ console.error(error.message);
+ }
+}
+
+async function getImage(url) {
+ try {
+ const response = await fetch(url);
+ return response
+ } catch (error) {
+ console.error(error.message);
+ return null
+ }
+}
+
+function hideElement(element) {
+
+}
+
+function startMusicTileInterval() {
+ initMusicTile();
+ startMusicTile().catch(console.log);
+ setInterval(startMusicTile, 10000);
+}
+
+window.addEventListener('load', async function () {
+ startMusicTileInterval();
+})
diff --git a/assets/main-style.css b/assets/main-style.css
index 80f3ead..ac6758b 100644
--- a/assets/main-style.css
+++ b/assets/main-style.css
@@ -272,8 +272,17 @@ main h3 {
}
main h4 {
+ font-family: "Montserrat", sans-serif;
font-size: 1.3em;
font-weight: bold;
+ margin-bottom: 8px;
+}
+
+main h5 {
+ font-family: "Montserrat", sans-serif;
+ font-size: 1.2em;
+ font-weight: normal;
+ margin-bottom: 8px;
}
main p, .type-text p {
@@ -294,18 +303,16 @@ ul, ol {
hyphens: auto;
hyphenate-character: '-';
margin-left: 40px;
-
- /*
- li {
- margin-left: 40px;
- }
- */
}
p + ul, p + ol {
margin-top: -20px;
}
+li > ul {
+ margin-bottom: 0;
+}
+
main .tags {
display: flex;
justify-content: space-between;
@@ -404,6 +411,16 @@ nav.paginator .prev {
left: 10px;
}
+.MathJax {
+ font-size: 14pt;
+}
+
+center .MathJax {
+ margin-bottom: 15px;
+ font-size: 16pt;
+ display: block;
+}
+
/* --- Mobile/Small Screens --- */
@media(max-width: 700px) {
header {
diff --git a/index.html b/index.html
index 09318a3..d7c9662 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@ A place for personal projects and things. Enjoy!">
+
@@ -156,13 +157,20 @@ A place for personal projects and things. Enjoy!">
Currently listening to:
-
???
+
-
+
+
?
+
![]()
+
@@ -177,5 +185,4 @@ A place for personal projects and things. Enjoy!">
-