mirror of
https://github.com/JonasunderscoreJones/jonasjones.dev.git
synced 2025-10-23 08:59:19 +02:00
Made the following changes: - Added light-mode that changes based on browser theme - Fixed style-related issues concerning the projects page - Refactored code - Fixed an issue where the LastFM music details were hidden when there was enough space to show them -
425 lines
8.8 KiB
Svelte
425 lines
8.8 KiB
Svelte
<script>
|
|
let showMenu = false;
|
|
|
|
function toggleMenu() {
|
|
showMenu = !showMenu;
|
|
}
|
|
|
|
import TooSmallDimsOverlay from "./TooSmallDimsOverlay.svelte";
|
|
|
|
let navLinks = [
|
|
{ name: "Home", url: "/" },
|
|
{ name: "Projects", url: "/projects" },
|
|
{ name: "Wiki", url: "https://wiki.jonasjones.dev" },
|
|
// just removed this cause it bothered me
|
|
//{ name: 'For The Based™', url: '/based'},
|
|
//{ name: 'Status', url: '/status'},
|
|
{ name: "About", url: "/about" },
|
|
];
|
|
|
|
// @ts-ignore
|
|
let miscLinks = [{ name: "For The Based™", url: "/based" }];
|
|
const fetch_url =
|
|
"https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Jonas_Jones&api_key=57c0ca64285c7ca676bb8c2acf320f41&format=json&limit=1";
|
|
|
|
/**
|
|
* @param {string} str
|
|
*/
|
|
function truncateString(str) {
|
|
const max_length = 27;
|
|
if (str.length > max_length) {
|
|
return str.slice(0, max_length) + "...";
|
|
} else {
|
|
return str;
|
|
}
|
|
}
|
|
|
|
async function fetchLastFmData() {
|
|
try {
|
|
let response = await fetch(fetch_url);
|
|
let data = await response.json();
|
|
let album_cover = data.recenttracks.track[0].image[1]["#text"];
|
|
let song_title = truncateString(data.recenttracks.track[0].name);
|
|
//let song_title = truncateString("WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWw");
|
|
let artist = truncateString(data.recenttracks.track[0].artist["#text"]);
|
|
|
|
try {
|
|
// @ts-ignore
|
|
document.getElementById("lastfm_title").innerHTML = song_title;
|
|
// @ts-ignore
|
|
document.getElementById("lastfm_artist").innerHTML = artist;
|
|
// @ts-ignore
|
|
document.getElementById(
|
|
"lastfm_logo"
|
|
).style.backgroundImage = `url(${album_cover})`;
|
|
} catch (error) {}
|
|
|
|
try {
|
|
let is_playing = data.recenttracks.track[0]["@attr"].nowplaying;
|
|
if (is_playing == "true") {
|
|
// @ts-ignore
|
|
document.getElementById("lastfm_logo_overlay").src = "/equalizer.gif";
|
|
} else {
|
|
// @ts-ignore
|
|
document.getElementById("lastfm_logo_overlay").src =
|
|
"/pause-icon-256.png";
|
|
}
|
|
} catch (error) {
|
|
try {
|
|
// @ts-ignore
|
|
document.getElementById("lastfm_logo_overlay").src =
|
|
"/pause-icon-256.png";
|
|
} catch (error) {}
|
|
}
|
|
} catch (error) {}
|
|
}
|
|
fetchLastFmData();
|
|
setInterval(fetchLastFmData, 15000);
|
|
</script>
|
|
|
|
<div class="navbar">
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<div class="hamburger-menu {showMenu ? 'open' : ''}" on:click={toggleMenu}>
|
|
<div class="hamburger-line line-1" />
|
|
<div class="hamburger-line line-2" />
|
|
<div class="hamburger-line line-3" />
|
|
</div>
|
|
<div class="logo">
|
|
<a href="/">
|
|
<img src="/icon_80x80.webp" alt="Logo" class="logo" />
|
|
</a>
|
|
</div>
|
|
<div class="nav-links">
|
|
<nav>
|
|
<ul>
|
|
{#each navLinks as link}
|
|
<li><a href={link.url}>{link.name}</a></li>
|
|
{/each}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="lastfm">
|
|
<a href="https://fm.jonasjones.dev">
|
|
<span class="link" />
|
|
</a>
|
|
<div class="lastfmlogoclass" id="lastfm_logo">
|
|
<img src="" alt=" " class="lastfmlogooverlay" id="lastfm_logo_overlay" />
|
|
</div>
|
|
|
|
<div class="lastfm-text">
|
|
<p id="lastfm_title" />
|
|
<p id="lastfm_artist" />
|
|
</div>
|
|
</div>
|
|
<div class="navigation-menu {showMenu ? 'show' : ''}">
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<div
|
|
class="hamburger-menu close-button {showMenu ? 'open' : ''}"
|
|
on:click={toggleMenu}
|
|
>
|
|
<div class="hamburger-line line-1" />
|
|
<div class="hamburger-line line-2" />
|
|
<div class="hamburger-line line-3" />
|
|
</div>
|
|
<ul class="links">
|
|
{#each navLinks as link}
|
|
<li><a href={link.url} on:click={toggleMenu}>{link.name}</a></li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="unsupported">
|
|
<TooSmallDimsOverlay />
|
|
</div>
|
|
|
|
<style>
|
|
.hamburger-menu {
|
|
position: relative;
|
|
width: 30px;
|
|
height: 21.5px;
|
|
cursor: pointer;
|
|
display: none;
|
|
margin: 16px;
|
|
}
|
|
|
|
.hamburger-line {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 4px;
|
|
background-color: var(--header-font-color);
|
|
border-radius: 4px;
|
|
transition: transform 0.3s, opacity 0.3s;
|
|
}
|
|
|
|
.hamburger-line:nth-child(2) {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.hamburger-line:nth-child(3) {
|
|
bottom: 0;
|
|
}
|
|
|
|
.hamburger-menu.open .line-1 {
|
|
transform: rotate(-45deg) translate(-6px, 6px);
|
|
}
|
|
|
|
.hamburger-menu.open .line-2 {
|
|
opacity: 0;
|
|
}
|
|
|
|
.hamburger-menu.open .line-3 {
|
|
transform: rotate(45deg) translate(-6px, -6px);
|
|
}
|
|
|
|
.navigation-menu {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--nav-menu-background-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.navigation-menu.show {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.close-button {
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 1px;
|
|
font-size: 24px;
|
|
color: var(--header-font-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.links {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.links li {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.links a {
|
|
color: var(--header-font-color);
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.navbar {
|
|
background-color: var(--header-background-color);
|
|
padding: 10px;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 58px;
|
|
display: flex;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.logo {
|
|
height: 45px;
|
|
border-radius: 10px;
|
|
margin-top: 3.5px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.nav-links {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
nav {
|
|
padding: 10px;
|
|
justify-content: center;
|
|
width: 100%;
|
|
display: table;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
display: inline;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--header-font-color);
|
|
padding: 5px;
|
|
font-size: 23px;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--header-font-color-hover);
|
|
}
|
|
|
|
.lastfm {
|
|
padding: 3px;
|
|
padding-right: 10px;
|
|
padding-left: 0;
|
|
margin: 0;
|
|
justify-content: right;
|
|
justify-self: right;
|
|
align-items: right;
|
|
float: right;
|
|
display: flex;
|
|
position: relative;
|
|
right: 3px;
|
|
top: 3.5px;
|
|
border-radius: 5px;
|
|
max-width: 300px;
|
|
height: 43px;
|
|
overflow: hidden;
|
|
}
|
|
.lastfm:hover {
|
|
background-color: var(--header-background-color-hover);
|
|
}
|
|
.lastfm img {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 10%;
|
|
margin-right: 10px;
|
|
}
|
|
.lastfm #lastfm_logo {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 10px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
border-radius: 10%;
|
|
align-items: center;
|
|
}
|
|
.lastfm #lastfm_artist {
|
|
font-size: 13px;
|
|
text-align: left;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
}
|
|
.lastfm #lastfm_title {
|
|
font-size: 19px;
|
|
text-align: left;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
}
|
|
.lastfm #lastfm_logo_overlay {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 10px;
|
|
opacity: 0.5;
|
|
align-self: center;
|
|
}
|
|
.lastfm-text {
|
|
display: none;
|
|
transition: width 0.3s ease-out;
|
|
}
|
|
|
|
.lastfm:hover .lastfm-text {
|
|
display:block
|
|
}
|
|
|
|
.link {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.unsupported {
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 9999;
|
|
}
|
|
|
|
@media only screen and (max-width: 900px) and (min-width: 650px) {
|
|
.lastfm {
|
|
width: 50px;
|
|
}
|
|
.navigation-menu {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 650px) and (min-width: 375px) {
|
|
.lastfm-text {
|
|
display: block;
|
|
}
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
.lastfm #lastfm_title,
|
|
.lastfm #lastfm_artist {
|
|
display: flex;
|
|
}
|
|
.hamburger-menu {
|
|
display: block;
|
|
}
|
|
.logo {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 375px) and (min-width: 300px) {
|
|
.lastfm {
|
|
width: 50px;
|
|
}
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
.hamburger-menu {
|
|
display: block;
|
|
}
|
|
.logo {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 300px) and (min-width: 0px) {
|
|
.lastfm {
|
|
width: 50px;
|
|
}
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
.hamburger-menu {
|
|
display: block;
|
|
}
|
|
.logo {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|