Merge pull request #2 from mellodoot/dev

implement v1 music page!
This commit is contained in:
ari melody 2023-10-14 23:55:41 +01:00 committed by GitHub
commit ba2f8c3c4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 921 additions and 47 deletions

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
certs/
public/img/musicart/*
docker-compose*.yml
!docker-compose-example.yml

View file

@ -1,20 +1,24 @@
server {
listen 443 ssl;
server_name arimelody.me;
listen 443 ssl;
server_name arimelody.me;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_certificate /etc/nginx/ssl/arimelody.crt;
ssl_certificate_key /etc/nginx/ssl/arimelody.key;
ssl_certificate /etc/nginx/ssl/arimelody.crt;
ssl_certificate_key /etc/nginx/ssl/arimelody.key;
root /usr/share/nginx/arimelody/;
root /usr/share/nginx/arimelody/;
client_max_body_size 0;
client_max_body_size 0;
location / {
}
add_header Cache-Control "max-age=604800";
if ($scheme != "https") {
return 301 https://$server_name$request_uri;
}
}
location / {
try_files $uri $uri/ $uri.html =404;
rewrite ^/music/(.*)$ https://mellodoot.com/music/$1 last;
}
if ($scheme != "https") {
return 301 https://$server_name$request_uri;
}
}

Binary file not shown.

270
public/data/music.xml Normal file
View file

@ -0,0 +1,270 @@
<?xml version="1.0" encoding="UTF-8" ?>
<music>
<row>
<id>dream</id>
<title>Dream</title>
<type>single</type>
<year>2022</year>
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_Dream.webp</artwork>
<buylink>https://mellodoot.bandcamp.com/track/dream</buylink>
<links>
<title>Spotify</title>
<url>https://open.spotify.com/album/5talRpqzjExP1w6j5LFIAh</url>
</links>
<links>
<title>Apple Music</title>
<url>https://music.apple.com/ie/album/dream-single/1650037132</url>
</links>
<links>
<title>Soundcloud</title>
<url>https://soundcloud.com/mellodoot/dream</url>
</links>
<links>
<title>YouTube</title>
<url>https://www.youtube.com/watch?v=nfFgtMuYAx8</url>
</links>
</row>
<row>
<id>gomyway</id>
<title>Go My Way</title>
<type>single</type>
<year>2021</year>
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_Go_My_Way.webp</artwork>
<buylink>https://mellodoot.bandcamp.com/track/go-my-way</buylink>
<links>
<title>Spotify</title>
<url>https://open.spotify.com/album/35WNtxK12IDHCUoXHDePGE</url>
</links>
<links>
<title>Apple Music</title>
<url>https://music.apple.com/ie/album/go-my-way-single/1547145699</url>
</links>
<links>
<title>Soundcloud</title>
<url>https://soundcloud.com/mellodoot/go-my-way</url>
</links>
<links>
<title>YouTube</title>
<url>https://www.youtube.com/watch?v=CNptNQdLkl0</url>
</links>
</row>
<row>
<id>rowboat</id>
<title>Rowboat</title>
<type>single</type>
<year>2020</year>
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_Rowboat.webp</artwork>
<buylink>https://mellodoot.bandcamp.com/track/rowboat</buylink>
<links>
<title>Spotify</title>
<url>https://open.spotify.com/album/7jyqJFVKaENCPm58v5O44Y</url>
</links>
<links>
<title>Apple Music</title>
<url>https://music.apple.com/ie/album/rowboat-single/1502608714</url>
</links>
<links>
<title>Soundcloud</title>
<url>https://soundcloud.com/mellodoot/rowboat</url>
</links>
<links>
<title>YouTube</title>
<url>https://www.youtube.com/watch?v=uOQyILDTzME</url>
</links>
</row>
<row>
<id>helloworld</id>
<title>Hello World</title>
<type>single</type>
<year>2019</year>
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_Hello_World.webp</artwork>
<buylink>https://mellodoot.bandcamp.com/track/hello-world</buylink>
<links>
<title>Spotify</title>
<url>https://open.spotify.com/album/3LbElPXD4dsDumttGBuYxx</url>
</links>
<links>
<title>Apple Music</title>
<url>https://music.apple.com/ie/album/hello-world-single/1491880155</url>
</links>
<links>
<title>Soundcloud</title>
<url>https://soundcloud.com/mellodoot/helloworld</url>
</links>
<links>
<title>YouTube</title>
<url>https://www.youtube.com/watch?v=CQhlRsl0Mjk</url>
</links>
</row>
<row>
<id>sine</id>
<title>Sine</title>
<type>single</type>
<artists>zaire</artists>
<artists>mellodoot</artists>
<year>2019</year>
<artwork>https://mellodoot.com/img/music_artwork/zaire_-_Sine_ft._mellodoot.webp</artwork>
<links>
<title>Spotify</title>
<url>https://open.spotify.com/album/4WPuaJtTV7z86KubD9Rnmk</url>
</links>
<links>
<title>Apple Music</title>
<url>https://music.apple.com/us/album/sine-feat-mellodoot/1489163020</url>
</links>
<links>
<title>YouTube</title>
<url>https://www.youtube.com/watch?v=z1H1s6VRnyY</url>
</links>
</row>
<row>
<id>10</id>
<title>10</title>
<type>single</type>
<year>2019</year>
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_10.webp</artwork>
<buylink>https://mellodoot.bandcamp.com/track/10</buylink>
<links>
<title>Spotify</title>
<url>https://open.spotify.com/album/2x4gbACfDm99unaXpLXyj0</url>
</links>
<links>
<title>Apple Music</title>
<url>https://music.apple.com/ie/album/ten-single/1483193041</url>
</links>
<links>
<title>Soundcloud</title>
<url>https://soundcloud.com/mellodoot/ten</url>
</links>
<links>
<title>YouTube</title>
<url>https://www.youtube.com/watch?v=C7WP5L2BK4U</url>
</links>
</row>
<row>
<id>mad</id>
<title>MAD</title>
<type>single</type>
<year>2018</year>
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_MAD.webp</artwork>
<buylink>https://mellodoot.bandcamp.com/track/mad</buylink>
<links>
<title>Spotify</title>
<url>https://open.spotify.com/album/59nFXw1WNoRhXou7lXqBZd</url>
</links>
<links>
<title>Apple Music</title>
<url>https://music.apple.com/ie/album/mad/1441233120</url>
</links>
<links>
<title>Soundcloud</title>
<url>https://soundcloud.com/mellodoot/mad</url>
</links>
<links>
<title>YouTube</title>
<url>https://www.youtube.com/watch?v=OB-Pk6p6mfQ</url>
</links>
</row>
<row>
<id>welcomingparty</id>
<title>Welcoming Party</title>
<type>album</type>
<year>2018</year>
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_Welcoming_Party.webp</artwork>
<buylink>https://mellodoot.bandcamp.com/album/welcoming-party</buylink>
<links>
<title>Spotify</title>
<url>https://open.spotify.com/album/3EPa4HZpkISQVRAks64LfR</url>
</links>
<links>
<title>Apple Music</title>
<url>https://music.apple.com/ie/album/welcoming-party-ep/1441161424</url>
</links>
<links>
<title>Soundcloud</title>
<url>https://soundcloud.com/mellodoot/sets/welcoming-party</url>
</links>
<links>
<title>YouTube</title>
<url>https://www.youtube.com/playlist?list=PLBG_QJeOHrB5EeniiXBIlHpoQbD6CUJca</url>
</links>
<tracks>
<title>Paradigm</title>
</tracks>
<tracks>
<title>Mitrio</title>
</tracks>
<tracks>
<title>Level One</title>
</tracks>
<tracks>
<title>Cubes</title>
</tracks>
<tracks>
<title>Aria</title>
</tracks>
</row>
<row>
<id>howtheyknow2018</id>
<title>How They Know (2018)</title>
<type>single</type>
<year>2018</year>
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know_2018.webp</artwork>
<buylink>https://mellodoot.bandcamp.com/track/how-they-know-2018-remastered</buylink>
<free>true</free>
<links>
<title>Soundcloud</title>
<url>https://soundcloud.com/mellodoot/how-they-know-2018</url>
</links>
<links>
<title>YouTube</title>
<url>https://www.youtube.com/watch?v=mbAgSwCzyMw</url>
</links>
</row>
<row>
<id>howtheyknow</id>
<title>How They Know</title>
<type>single</type>
<year>2017</year>
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know.webp</artwork>
<buylink>https://mellodoot.bandcamp.com/track/how-they-know</buylink>
<free>true</free>
<links>
<title>Soundcloud</title>
<url>https://soundcloud.com/mellodoot/how-they-know</url>
</links>
<links>
<title>YouTube</title>
<url>https://www.youtube.com/watch?v=q6lzKuG1Emo</url>
</links>
</row>
<row>
<id>traveller</id>
<title>Traveller</title>
<type>single</type>
<year>2017</year>
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_Traveller.webp</artwork>
<buylink>https://mellodoot.bandcamp.com/track/traveller</buylink>
<free>true</free>
<links>
<title>Soundcloud</title>
<url>https://soundcloud.com/mellodoot/traveller</url>
</links>
<links>
<title>YouTube</title>
<url>https://www.youtube.com/watch?v=ZTO7IQZ-yXA</url>
</links>
</row>
</music>

View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -8,6 +9,8 @@
<title>ari melody 💫</title>
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<meta name="description" content="home to your local SPACEGIRL 💫">
<meta property="og:title" content="ari melody">
<meta property="og:type" content="website">
<meta property="og:url" content="www.arimelody.me">
@ -19,32 +22,32 @@
<script src="script/main.js" defer="defer"></script>
<link rel="me" href="https://wetdry.world/@ari">
</head>
<body>
<header>
<div id="header">
<img src="img/favicon.png" id="header-icon" width="100" height="100">
<img src="img/favicon.png" id="header-icon" width="100" height="100" alt="">
<div id="header-text">
<h1>ari melody</h1>
<h2>your local SPACEGIRL 💫</h2>
</div>
<ul>
<li>
<a href="/" target="_blank">home</a>
<a href="/">home</a>
</li>
<li>
<a href="https://mellodoot.com/music" target="_blank">music</a>
<a href="/music">music</a>
</li>
<li>
<a href="https://github.com/mellodoot/arimelody.me" target="_blank">source</a>
</li>
<li>
<!-- coming later! -->
<a class="inactive" title="coming later!">blog</a>
<span title="coming later!">blog</span>
</li>
<li>
<!-- coming later! -->
<a class="inactive" title="coming later!">art</a>
<span title="coming later!">art</span>
</li>
</ul>
</div>
@ -77,7 +80,7 @@
<p>
if you're looking to support me financially, that's so cool of you!! if you like, you
can buy
one or more of my songs over on <a href="https://mellodoot.bandcamp.com" target="_blank">bandcamp</a>, so you can at least get something for your
one or more of my songs over on <a href="https://arimelody.bandcamp.com" target="_blank">bandcamp</a>, so you can at least get something for your
troubles. thank
you very much either way!! 💕
</p>
@ -142,15 +145,14 @@
this site is intended to eventually replace
<a href="https://mellodoot.com/" target="_blank">mellodoot.com</a>.
</p>
<hr>
<small><em>*made with ♥ by ari, 2023*</em></small>
</main>
<footer>
<div id="footer">
<small><em>*made with ♥ by ari, 2023*</em></small>
</div>
</footer>
<div id="overlay"></div>
</body></html>
</body>
</html>

108
public/music.html Normal file
View file

@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>music - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
<meta property="og:title" content="ari melody music">
<meta property="og:type" content="website">
<meta property="og:url" content="www.arimelody.me/music">
<meta property="og:image" content="https://www.arimelody.me/img/favicon.png">
<meta property="og:site_name" content="ari melody">
<meta property="og:description" content="music from your local SPACEGIRL 💫">
<link rel="stylesheet" href="/style/main.css">
<link rel="stylesheet" href="/style/music.css">
<script src="/script/main.js" defer="defer"></script>
<script src="/script/music.js" defer="defer"></script>
</head>
<body>
<header>
<div id="header">
<img src="img/favicon.png" id="header-icon" width="100" height="100" alt="">
<div id="header-text">
<h1>ari melody</h1>
<h2>your local SPACEGIRL 💫</h2>
</div>
<ul>
<li>
<a href="/">home</a>
</li>
<li>
<a href="/music">music</a>
</li>
<li>
<a href="https://github.com/mellodoot/arimelody.me" target="_blank">source</a>
</li>
<li>
<!-- coming later! -->
<span title="coming later!">blog</span>
</li>
<li>
<!-- coming later! -->
<span title="coming later!">art</span>
</li>
</ul>
</div>
</header>
<main>
<h1>
# my music
</h1>
<div id="music-container"></div>
<h2 id="usage" class="question">&gt; "can i use your music in my content?"</h2>
<div class="collapse">
<p>
<strong class="big">yes!</strong> well, in most cases...
</p>
<p>
from <a href="/music/dream">Dream (2022)</a> onward, all of my <em>self-released</em> songs are
licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank">Creative Commons Attribution-ShareAlike 3.0</a>. anyone may use these
songs freely, so long as they provide credit back to me!
</p>
<p>
a great example of some credit text would be as follows:
</p>
<blockquote>
music used: mellodoot - Dream<br>
buy it here: <a href="/music/dream">https://arimelody.me/music/dream</a><br>
licensed under CC BY-SA 3.0.
</blockquote>
<p>
for any songs prior to this, they were all either released by me (in which case, i honestly
don't mind), or in collaboration with chill people who i don't see having an issue with it.
do be sure to ask them about it, though!
</p>
<p>
in the event the song you want to use is released under some other label, their usage rights
will more than likely trump whatever i'd otherwise have in mind. i'll try to negotiate some
nice terms, though! ;3
</p>
<p>
i love the idea of other creators using my songs in their work, so if you do happen to use
my stuff in a work you're particularly proud of, feel free to send it my way!
</p>
<p>
&gt; <a href="mailto:ari@arimelody.me">ari@arimelody.me</a>
</p>
</div>
</main>
<footer>
<div id="footer">
<small><em>*made with ♥ by ari, 2023*</em></small>
</div>
</footer>
<div id="overlay"></div>
</body>
</html>

293
public/music.json Normal file
View file

@ -0,0 +1,293 @@
[
{
"id": "dream",
"title": "Dream",
"type": "single",
"year": 2022,
"artists": [ "mellodoot" ],
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Dream.webp",
"buylink": "https://arimelody.bandcamp.com/track/dream",
"links": [
{
"title": "Spotify",
"url": "https://open.spotify.com/album/5talRpqzjExP1w6j5LFIAh"
},
{
"title": "Apple Music",
"url": "https://music.apple.com/ie/album/dream-single/1650037132"
},
{
"title": "Soundcloud",
"url": "https://soundcloud.com/mellodoot/dream"
},
{
"title": "YouTube",
"url": "https://www.youtube.com/watch?v=nfFgtMuYAx8"
}
]
},
{
"id": "gomyway",
"title": "Go My Way",
"type": "single",
"year": 2021,
"artists": [ "mellodoot" ],
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Go_My_Way.webp",
"buylink": "https://arimelody.bandcamp.com/track/go-my-way",
"links": [
{
"title": "Spotify",
"url": "https://open.spotify.com/album/35WNtxK12IDHCUoXHDePGE"
},
{
"title": "Apple Music",
"url": "https://music.apple.com/ie/album/go-my-way-single/1547145699"
},
{
"title": "Soundcloud",
"url": "https://soundcloud.com/mellodoot/go-my-way"
},
{
"title": "YouTube",
"url": "https://www.youtube.com/watch?v=CNptNQdLkl0"
}
]
},
{
"id": "rowboat",
"title": "Rowboat",
"type": "single",
"year": 2020,
"artists": [ "mellodoot" ],
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Rowboat.webp",
"buylink": "https://arimelody.bandcamp.com/track/rowboat",
"links": [
{
"title": "Spotify",
"url": "https://open.spotify.com/album/7jyqJFVKaENCPm58v5O44Y"
},
{
"title": "Apple Music",
"url": "https://music.apple.com/ie/album/rowboat-single/1502608714"
},
{
"title": "Soundcloud",
"url": "https://soundcloud.com/mellodoot/rowboat"
},
{
"title": "YouTube",
"url": "https://www.youtube.com/watch?v=uOQyILDTzME"
}
]
},
{
"id": "helloworld",
"title": "Hello World",
"type": "single",
"year": 2019,
"artists": [ "mellodoot" ],
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Hello_World.webp",
"buylink": "https://arimelody.bandcamp.com/track/hello-world",
"links": [
{
"title": "Spotify",
"url": "https://open.spotify.com/album/3LbElPXD4dsDumttGBuYxx"
},
{
"title": "Apple Music",
"url": "https://music.apple.com/ie/album/hello-world-single/1491880155"
},
{
"title": "Soundcloud",
"url": "https://soundcloud.com/mellodoot/helloworld"
},
{
"title": "YouTube",
"url": "https://www.youtube.com/watch?v=CQhlRsl0Mjk"
}
]
},
{
"id": "sine",
"title": "Sine",
"type": "single",
"artists": [
"zaire",
"mellodoot"
],
"year": 2019,
"artwork": "https://mellodoot.com/img/music_artwork/zaire_-_Sine_ft._mellodoot.webp",
"links": [
{
"title": "Spotify",
"url": "https://open.spotify.com/album/4WPuaJtTV7z86KubD9Rnmk"
},
{
"title": "Apple Music",
"url": "https://music.apple.com/us/album/sine-feat-mellodoot/1489163020"
},
{
"title": "YouTube",
"url": "https://www.youtube.com/watch?v=z1H1s6VRnyY"
}
]
},
{
"id": "10",
"title": "10",
"type": "single",
"year": 2019,
"artists": [ "mellodoot" ],
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_10.webp",
"buylink": "https://arimelody.bandcamp.com/track/10",
"links": [
{
"title": "Spotify",
"url": "https://open.spotify.com/album/2x4gbACfDm99unaXpLXyj0"
},
{
"title": "Apple Music",
"url": "https://music.apple.com/ie/album/ten-single/1483193041"
},
{
"title": "Soundcloud",
"url": "https://soundcloud.com/mellodoot/ten"
},
{
"title": "YouTube",
"url": "https://www.youtube.com/watch?v=C7WP5L2BK4U"
}
]
},
{
"id": "mad",
"title": "MAD",
"type": "single",
"year": 2018,
"artists": [ "mellodoot" ],
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_MAD.webp",
"buylink": "https://arimelody.bandcamp.com/track/mad",
"links": [
{
"title": "Spotify",
"url": "https://open.spotify.com/album/59nFXw1WNoRhXou7lXqBZd"
},
{
"title": "Apple Music",
"url": "https://music.apple.com/ie/album/mad/1441233120"
},
{
"title": "Soundcloud",
"url": "https://soundcloud.com/mellodoot/mad"
},
{
"title": "YouTube",
"url": "https://www.youtube.com/watch?v=OB-Pk6p6mfQ"
}
]
},
{
"id": "welcomingparty",
"title": "Welcoming Party",
"type": "album",
"year": 2018,
"artists": [ "mellodoot" ],
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Welcoming_Party.webp",
"buylink": "https://arimelody.bandcamp.com/album/welcoming-party",
"links": [
{
"title": "Spotify",
"url": "https://open.spotify.com/album/3EPa4HZpkISQVRAks64LfR"
},
{
"title": "Apple Music",
"url": "https://music.apple.com/ie/album/welcoming-party-ep/1441161424"
},
{
"title": "Soundcloud",
"url": "https://soundcloud.com/mellodoot/sets/welcoming-party"
},
{
"title": "YouTube",
"url": "https://www.youtube.com/playlist?list=PLBG_QJeOHrB5EeniiXBIlHpoQbD6CUJca"
}
],
"tracks": [
{
"title": "Paradigm"
},
{
"title": "Mitrio"
},
{
"title": "Level One"
},
{
"title": "Cubes"
},
{
"title": "Aria"
}
]
},
{
"id": "howtheyknow2018",
"title": "How They Know (2018)",
"type": "single",
"year": 2018,
"artists": [ "mellodoot" ],
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know_2018.webp",
"buylink": "https://arimelody.bandcamp.com/track/how-they-know-2018-remastered",
"free": true,
"links": [
{
"title": "Soundcloud",
"url": "https://soundcloud.com/mellodoot/how-they-know-2018"
},
{
"title": "YouTube",
"url": "https://www.youtube.com/watch?v=mbAgSwCzyMw"
}
]
},
{
"id": "howtheyknow",
"title": "How They Know",
"type": "single",
"year": 2017,
"artists": [ "mellodoot" ],
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know.webp",
"buylink": "https://arimelody.bandcamp.com/track/how-they-know",
"free": true,
"links": [
{
"title": "Soundcloud",
"url": "https://soundcloud.com/mellodoot/how-they-know"
},
{
"title": "YouTube",
"url": "https://www.youtube.com/watch?v=q6lzKuG1Emo"
}
]
},
{
"id": "traveller",
"title": "Traveller",
"type": "single",
"year": 2017,
"artists": [ "mellodoot" ],
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Traveller.webp",
"buylink": "https://arimelody.bandcamp.com/track/traveller",
"free": true,
"links": [
{
"title": "Soundcloud",
"url": "https://soundcloud.com/mellodoot/traveller"
},
{
"title": "YouTube",
"url": "https://www.youtube.com/watch?v=ZTO7IQZ-yXA"
}
]
}
]

View file

@ -9,6 +9,10 @@ document.addEventListener("DOMContentLoaded", () => {
.forEach((e) => {
fill_list(e);
});
setTimeout(() => {
document.querySelector("footer").style.display = "none";
document.querySelector("footer").style.display = null;
}, 1000);
});
function type_out(e) {

59
public/script/music.js Normal file
View file

@ -0,0 +1,59 @@
function create_music_card(item) {
var artist = "ari melody";
if (item.artists) {
artist = item.artists.join(", ");
}
let card = document.createElement('a');
card.href = `/music/${item.id}`;
card.classList.add("music");
card.id = item.id;
card.innerHTML =
`<div class="music-artwork">
<img src=${item.artwork || '/img/music_artwork/placeholder.jpg'} alt="${item.title} artwork" width=128>
</div>
<div class="music-details">
<h1 class="music-title">${item.title}</h1>
<h2 class="music-artist">${artist}</h2>
<h3 class="music-type-${item.type}">${item.type}</h3>
<ul class="music-links">
${ item.links.map(link => {
return `<li><a href="${link.url}">${link.title.toLowerCase()}</a></li>`
}).join("") }
</ul>
</div>`;
return card;
}
document.querySelectorAll("h2.question").forEach(element => {
element.onclick = (e) => {
const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}#${e.target.id}`;
window.location = url;
};
});
document.querySelectorAll('blockquote').forEach(
element => {
element.onclick = (e) => {
navigator.clipboard.writeText(e.target.innerText);
console.log('copied quote contents to clipboard!\n\n' + e.target.innerText);
}
}
);
fetch('/music.json')
.then(res => {
if (!res.ok) {
throw new Error(`Failed to download music data! ${res.status}`);
}
return res.json();
})
.then(music => {
let music_container = document.getElementById('music-container');
for (index in music) {
let item = music[index];
let dom = create_music_card(item);
music_container.append(dom);
};
});

View file

@ -2,16 +2,18 @@
--primary: #b7fd49;
--secondary: #f8e05b;
--tertiary: #f788fe;
--links: #5eb2ff;
}
body {
margin: 0;
margin: 0;
padding: 0;
background: #111;
color: #eee;
font-family: monospace;
font-size: 18px;
background: #111;
color: #eee;
font-family: monospace;
font-size: 18px;
text-shadow: 0 0 2em;
scroll-behavior: smooth;
}
header {
@ -69,10 +71,11 @@ header ul li {
list-style: none;
}
header ul li a {
header ul li a,
header ul li span {
padding: .2em .5em;
border: 1px solid #65b4fd;
color: #65b4fd;
border: 1px solid var(--links);
color: var(--links);
border-radius: 2px;
background-color: transparent;
transition-property: color, border-color, background-color;
@ -82,22 +85,23 @@ header ul li a {
opacity: 0;
}
header ul li a.inactive {
header ul li span {
color: #aaa;
border-color: #aaa;
cursor: default;
text-decoration: none !important;
}
header ul li a:not(.inactive):hover {
header ul li a:hover {
color: #eee;
border-color: #eee;
background-color: #65b4fd;
background-color: var(--links);
text-decoration: none;
}
main {
width: min(calc(100% - 4rem), 720px);
min-height: calc(100vh - 10.3rem);
margin: auto;
}
@ -115,7 +119,7 @@ main h3 {
}
a {
color: #65b4fd;
color: var(--links);
text-decoration: none;
}
@ -176,7 +180,8 @@ h4,
h5,
h6,
p,
small {
small,
blockquote {
transition: background-color 0.1s;
}
@ -187,10 +192,17 @@ main h4:hover,
main h5:hover,
main h6:hover,
main p:hover,
main small:hover {
main small:hover,
main blockquote:hover {
background-color: #fff2;
}
blockquote {
margin: 1rem 0;
padding: 0 2.5rem;
cursor: pointer;
}
hr {
text-align: center;
line-height: 0px;
@ -212,8 +224,8 @@ ul.links li {
ul.links li a {
padding: .2em .5em;
border: 1px solid #65b4fd;
color: #65b4fd;
border: 1px solid var(--links);
color: var(--links);
border-radius: 2px;
background-color: transparent;
transition-property: color, border-color, background-color;
@ -226,9 +238,9 @@ ul.links li a {
ul.links li a:hover {
color: #eee;
border-color: #eee;
background-color: #65b4fd;
background-color: var(--links);
text-decoration: none;
box-shadow: 0 0 1em #65b4fd;
box-shadow: 0 0 1em var(--links);
}
@keyframes list-item-fadein {
@ -243,7 +255,13 @@ ul.links li a:hover {
}
footer {
margin: 2rem;
border-top: 1px solid #888;
}
#footer {
width: min(calc(100% - 4rem), 720px);
margin: auto;
padding: 2rem 0;
color: #aaa;
}

115
public/style/music.css Normal file
View file

@ -0,0 +1,115 @@
a.music {
margin-bottom: 1rem;
padding: 1.5rem;
display: flex;
flex-direction: row;
gap: 1.5em;
border-radius: 4px;
background-color: #ffffff04;
transition: background-color .1s;
text-decoration: none;
}
a.music:hover {
background-color: #fff1;
}
.music h1:hover,
.music h2:hover,
.music h3:hover {
background: initial;
}
.music-artwork img {
border: 1px solid #888;
}
.music-title {
margin: 0;
color: #eee;
}
.music-year {
color: #888;
}
.music-artist {
margin: -.5rem 0 0 0;
font-size: 1em;
color: #aaa;
}
h3[class^=music-type] {
margin: 0 0 1rem 0;
font-size: .8em;
color: #eee;
}
h3.music-type-single {
color: var(--tertiary);
}
h3.music-type-ep {
color: var(--secondary);
}
h3.music-type-album {
color: var(--primary);
}
h3.music-type-comp {
color: var(--secondary);
}
h3.music-type-upcoming {
color: #f47070;
}
.music-links {
margin: .5em 0;
padding: 0;
display: flex;
gap: .5rem;
flex-wrap: wrap;
}
.music-links li {
list-style: none;
}
.music-links li a {
padding: .2em .5em;
border: 1px solid #65b4fd;
color: #65b4fd;
border-radius: 2px;
background-color: transparent;
transition-property: color, border-color, background-color;
transition-duration: .2s;
animation: list-item-fadein .2s forwards;
animation-delay: 0s;
opacity: 0;
}
.music-links li a:hover {
color: #eee;
border-color: #eee;
background-color: #65b4fd;
text-decoration: none;
}
h2.question {
margin: 1rem 0;
padding: 1rem 1.5rem;
background-color: #ffffff04;
border-radius: 4px;
cursor: pointer;
}
.collapse {
margin: -1rem 0 1rem 0;
padding: .5em 1.5em;
background-color: #ffffff04;
border-radius: 4px;
}