mirror of
https://github.com/JonasunderscoreJones/jonasjones.dev.git
synced 2025-10-23 08:59:19 +02:00
code refactor
This commit is contained in:
parent
4bf868de38
commit
04890477b0
16 changed files with 734 additions and 611 deletions
|
|
@ -1,13 +1,88 @@
|
|||
<script>
|
||||
let showMenu = false;
|
||||
|
||||
function toggleMenu() {
|
||||
showMenu = !showMenu;
|
||||
}
|
||||
|
||||
import TooSmallDimsOverlay from "./TooSmallDimsOverlay.svelte";
|
||||
|
||||
let navLinks = [
|
||||
{ name: "Home", url: "/" },
|
||||
{ name: "Projects", url: "/projects" },
|
||||
// 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) {
|
||||
if (str.length > 30) {
|
||||
return str.slice(0, 30) + "...";
|
||||
} else {
|
||||
return str;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchLastFmData() {
|
||||
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) {}
|
||||
}
|
||||
}
|
||||
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>
|
||||
<div class="hamburger-line line-2"></div>
|
||||
<div class="hamburger-line line-3"></div>
|
||||
<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">
|
||||
<img src="/icon_80x80.webp" alt="Logo" class="logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
|
|
@ -21,23 +96,26 @@
|
|||
</div>
|
||||
<div class="lastfm">
|
||||
<a href="https://fm.jonasjones.dev">
|
||||
<span class="link"></span>
|
||||
<span class="link" />
|
||||
</a>
|
||||
<div class="lastfmlogoclass" id="lastfm_logo">
|
||||
<img src="" alt=" " class="lastfmlogooverlay" id="lastfm_logo_overlay">
|
||||
<img src="" alt=" " class="lastfmlogooverlay" id="lastfm_logo_overlay" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="lastfm-text">
|
||||
<p id="lastfm_title"></p>
|
||||
<p id="lastfm_artist"></p>
|
||||
<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>
|
||||
<div class="hamburger-line line-2"></div>
|
||||
<div class="hamburger-line line-3"></div>
|
||||
<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}
|
||||
|
|
@ -45,89 +123,13 @@
|
|||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="unsupported">
|
||||
<TooSmallDimsOverlay />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let showMenu = false;
|
||||
|
||||
function toggleMenu() {
|
||||
showMenu = !showMenu;
|
||||
}
|
||||
|
||||
import TooSmallDimsOverlay from './TooSmallDimsOverlay.svelte';
|
||||
|
||||
let navLinks = [
|
||||
{ name: 'Home', url: '/' },
|
||||
{ name: 'Projects', url: '/projects'},
|
||||
// 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) {
|
||||
if (str.length > 30) {
|
||||
return str.slice(0, 30) + "...";
|
||||
} else {
|
||||
return str;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function fetchLastFmData() {
|
||||
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) {}
|
||||
}
|
||||
}
|
||||
fetchLastFmData();
|
||||
setInterval(fetchLastFmData, 15000);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.hamburger-menu {
|
||||
<style>
|
||||
.hamburger-menu {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 21.5px;
|
||||
|
|
@ -215,204 +217,205 @@
|
|||
font-size: 18px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #2023247c;
|
||||
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;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #2023247c;
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 58px;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 45px;
|
||||
border-radius: 10px;
|
||||
margin-top: 3.5px;
|
||||
}
|
||||
.nav-links {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
nav {
|
||||
padding: 10px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.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: #ffffff;
|
||||
padding: 5px;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.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: #202324;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.link {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
padding: 5px;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.unsupported {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
a:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.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: #202324;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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 #lastfm_title, .lastfm #lastfm_artist {
|
||||
display: none;
|
||||
}
|
||||
.lastfm {
|
||||
width: 50px;
|
||||
}
|
||||
.navigation-menu {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-width: 900px) and (min-width: 650px) {
|
||||
.lastfm #lastfm_title,
|
||||
.lastfm #lastfm_artist {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) and (min-width: 375px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
.lastfm #lastfm_title, .lastfm #lastfm_artist {
|
||||
display: flex;
|
||||
}
|
||||
.hamburger-menu {
|
||||
display: block;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
.lastfm {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 375px) and (min-width: 300px) {
|
||||
.lastfm #lastfm_title, .lastfm #lastfm_artist {
|
||||
display: none;
|
||||
}
|
||||
.lastfm {
|
||||
width: 50px;
|
||||
}
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
.hamburger-menu {
|
||||
display: block;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
.navigation-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 300px) and (min-width: 0px) {
|
||||
.lastfm #lastfm_title, .lastfm #lastfm_artist {
|
||||
display: none;
|
||||
}
|
||||
.lastfm {
|
||||
width: 50px;
|
||||
}
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
.hamburger-menu {
|
||||
display: block;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-width: 650px) and (min-width: 375px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
.lastfm #lastfm_title,
|
||||
.lastfm #lastfm_artist {
|
||||
display: flex;
|
||||
}
|
||||
.hamburger-menu {
|
||||
display: block;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@media only screen and (max-width: 375px) and (min-width: 300px) {
|
||||
.lastfm #lastfm_title,
|
||||
.lastfm #lastfm_artist {
|
||||
display: none;
|
||||
}
|
||||
.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 #lastfm_title,
|
||||
.lastfm #lastfm_artist {
|
||||
display: none;
|
||||
}
|
||||
.lastfm {
|
||||
width: 50px;
|
||||
}
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
.hamburger-menu {
|
||||
display: block;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue