music page!!! 🎶

This commit is contained in:
ari melody 2023-10-14 23:26:26 +01:00
parent a5ea652f6b
commit 3650f026a2
Signed by: ari
GPG key ID: CF99829C92678188
9 changed files with 442 additions and 66 deletions

View file

@ -11,8 +11,11 @@ server {
client_max_body_size 0; client_max_body_size 0;
add_header Cache-Control "max-age=604800";
location / { location / {
try_files $uri $uri/ $uri.html =404; try_files $uri $uri/ $uri.html =404;
rewrite ^/music/(.*)$ https://mellodoot.com/music/$1 last;
} }
if ($scheme != "https") { if ($scheme != "https") {

Binary file not shown.

View file

@ -9,6 +9,8 @@
<title>ari melody 💫</title> <title>ari melody 💫</title>
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon"> <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:title" content="ari melody">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="www.arimelody.me"> <meta property="og:url" content="www.arimelody.me">
@ -24,7 +26,7 @@
<body> <body>
<header> <header>
<div id="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"> <div id="header-text">
<h1>ari melody</h1> <h1>ari melody</h1>
<h2>your local SPACEGIRL 💫</h2> <h2>your local SPACEGIRL 💫</h2>
@ -41,11 +43,11 @@
</li> </li>
<li> <li>
<!-- coming later! --> <!-- coming later! -->
<a class="inactive" title="coming later!">blog</a> <span title="coming later!">blog</span>
</li> </li>
<li> <li>
<!-- coming later! --> <!-- coming later! -->
<a class="inactive" title="coming later!">art</a> <span title="coming later!">art</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -78,7 +80,7 @@
<p> <p>
if you're looking to support me financially, that's so cool of you!! if you like, you if you're looking to support me financially, that's so cool of you!! if you like, you
can buy 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 troubles. thank
you very much either way!! 💕 you very much either way!! 💕
</p> </p>

View file

@ -25,7 +25,7 @@
<body> <body>
<header> <header>
<div id="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"> <div id="header-text">
<h1>ari melody</h1> <h1>ari melody</h1>
<h2>your local SPACEGIRL 💫</h2> <h2>your local SPACEGIRL 💫</h2>
@ -42,11 +42,11 @@
</li> </li>
<li> <li>
<!-- coming later! --> <!-- coming later! -->
<a class="inactive" title="coming later!">blog</a> <span title="coming later!">blog</span>
</li> </li>
<li> <li>
<!-- coming later! --> <!-- coming later! -->
<a class="inactive" title="coming later!">art</a> <span title="coming later!">art</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -57,7 +57,9 @@
# my music # my music
</h1> </h1>
<p><a class="collapse-toggle">&gt; "can i use your music in my content?"</a></p> <div id="music-container"></div>
<h2 id="usage" class="question">&gt; "can i use your music in my content?"</h2>
<div class="collapse"> <div class="collapse">
<p> <p>
<strong class="big">yes!</strong> well, in most cases... <strong class="big">yes!</strong> well, in most cases...
@ -72,7 +74,7 @@
</p> </p>
<blockquote> <blockquote>
music used: mellodoot - Dream<br> music used: mellodoot - Dream<br>
buy it here: <a href="https://arimelody.me/music/dream" target="_blank">https://arimelody.me/music/dream</a><br> buy it here: <a href="/music/dream">https://arimelody.me/music/dream</a><br>
licensed under CC BY-SA 3.0. licensed under CC BY-SA 3.0.
</blockquote> </blockquote>
<p> <p>
@ -83,7 +85,7 @@
<p> <p>
in the event the song you want to use is released under some other label, their usage rights 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 will more than likely trump whatever i'd otherwise have in mind. i'll try to negotiate some
nice terms, though! ;) nice terms, though! ;3
</p> </p>
<p> <p>
i love the idea of other creators using my songs in their work, so if you do happen to use i love the idea of other creators using my songs in their work, so if you do happen to use
@ -93,40 +95,6 @@
&gt; <a href="mailto:ari@arimelody.me">ari@arimelody.me</a> &gt; <a href="mailto:ari@arimelody.me">ari@arimelody.me</a>
</p> </p>
</div> </div>
<article class="music">
<div class="music-artwork">
<img src="/img/musicart/dream.png" alt="Dream artwork" width=128>
</div>
<div class="music-details">
<h1 class="music-title">Dream <span class="music-year">2022</span></h1>
<h2 class="music-artist">mellodoot</h2>
<ul class="music-links">
<li><a href="#">buy</a></li>
<li><a href="#">spotify</a></li>
<li><a href="#">apple music</a></li>
<li><a href="#">soundcloud</a></li>
<li><a href="#">youtube</a></li>
</ul>
</div>
</article>
<article class="music">
<div class="music-artwork">
<img src="/img/musicart/gomyway.jpg" alt="Go My Way artwork" width=128>
</div>
<div class="music-details">
<h1 class="music-title">Go My Way <span class="music-year">2021</span></h1>
<h2 class="music-artist">mellodoot</h2>
<ul class="music-links">
<li><a href="#">buy</a></li>
<li><a href="#">spotify</a></li>
<li><a href="#">apple music</a></li>
<li><a href="#">soundcloud</a></li>
<li><a href="#">youtube</a></li>
</ul>
</div>
</article>
</main> </main>
<footer> <footer>

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) => { .forEach((e) => {
fill_list(e); fill_list(e);
}); });
setTimeout(() => {
document.querySelector("footer").style.display = "none";
document.querySelector("footer").style.display = null;
}, 1000);
}); });
function type_out(e) { 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,6 +2,7 @@
--primary: #b7fd49; --primary: #b7fd49;
--secondary: #f8e05b; --secondary: #f8e05b;
--tertiary: #f788fe; --tertiary: #f788fe;
--links: #5eb2ff;
} }
body { body {
@ -12,6 +13,7 @@ body {
font-family: monospace; font-family: monospace;
font-size: 18px; font-size: 18px;
text-shadow: 0 0 2em; text-shadow: 0 0 2em;
scroll-behavior: smooth;
} }
header { header {
@ -69,10 +71,11 @@ header ul li {
list-style: none; list-style: none;
} }
header ul li a { header ul li a,
header ul li span {
padding: .2em .5em; padding: .2em .5em;
border: 1px solid #65b4fd; border: 1px solid var(--links);
color: #65b4fd; color: var(--links);
border-radius: 2px; border-radius: 2px;
background-color: transparent; background-color: transparent;
transition-property: color, border-color, background-color; transition-property: color, border-color, background-color;
@ -82,17 +85,17 @@ header ul li a {
opacity: 0; opacity: 0;
} }
header ul li a.inactive { header ul li span {
color: #aaa; color: #aaa;
border-color: #aaa; border-color: #aaa;
cursor: default; cursor: default;
text-decoration: none !important; text-decoration: none !important;
} }
header ul li a:not(.inactive):hover { header ul li a:hover {
color: #eee; color: #eee;
border-color: #eee; border-color: #eee;
background-color: #65b4fd; background-color: var(--links);
text-decoration: none; text-decoration: none;
} }
@ -116,7 +119,7 @@ main h3 {
} }
a { a {
color: #65b4fd; color: var(--links);
text-decoration: none; text-decoration: none;
} }
@ -177,7 +180,8 @@ h4,
h5, h5,
h6, h6,
p, p,
small { small,
blockquote {
transition: background-color 0.1s; transition: background-color 0.1s;
} }
@ -188,10 +192,17 @@ main h4:hover,
main h5:hover, main h5:hover,
main h6:hover, main h6:hover,
main p:hover, main p:hover,
main small:hover { main small:hover,
main blockquote:hover {
background-color: #fff2; background-color: #fff2;
} }
blockquote {
margin: 1rem 0;
padding: 0 2.5rem;
cursor: pointer;
}
hr { hr {
text-align: center; text-align: center;
line-height: 0px; line-height: 0px;
@ -213,8 +224,8 @@ ul.links li {
ul.links li a { ul.links li a {
padding: .2em .5em; padding: .2em .5em;
border: 1px solid #65b4fd; border: 1px solid var(--links);
color: #65b4fd; color: var(--links);
border-radius: 2px; border-radius: 2px;
background-color: transparent; background-color: transparent;
transition-property: color, border-color, background-color; transition-property: color, border-color, background-color;
@ -227,9 +238,9 @@ ul.links li a {
ul.links li a:hover { ul.links li a:hover {
color: #eee; color: #eee;
border-color: #eee; border-color: #eee;
background-color: #65b4fd; background-color: var(--links);
text-decoration: none; text-decoration: none;
box-shadow: 0 0 1em #65b4fd; box-shadow: 0 0 1em var(--links);
} }
@keyframes list-item-fadein { @keyframes list-item-fadein {

View file

@ -1,4 +1,4 @@
article.music { a.music {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 1.5rem; padding: 1.5rem;
display: flex; display: flex;
@ -7,14 +7,16 @@ article.music {
border-radius: 4px; border-radius: 4px;
background-color: #ffffff04; background-color: #ffffff04;
transition: background-color .1s; transition: background-color .1s;
text-decoration: none;
} }
article.music:hover { a.music:hover {
background-color: #fff1; background-color: #fff1;
} }
.music h1:hover, .music h1:hover,
.music h2:hover { .music h2:hover,
.music h3:hover {
background: initial; background: initial;
} }
@ -37,6 +39,32 @@ article.music:hover {
color: #aaa; 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 { .music-links {
margin: .5em 0; margin: .5em 0;
padding: 0; padding: 0;
@ -70,8 +98,16 @@ article.music:hover {
text-decoration: none; text-decoration: none;
} }
h2.question {
margin: 1rem 0;
padding: 1rem 1.5rem;
background-color: #ffffff04;
border-radius: 4px;
cursor: pointer;
}
.collapse { .collapse {
margin-bottom: 1em; margin: -1rem 0 1rem 0;
padding: .5em 1.5em; padding: .5em 1.5em;
background-color: #ffffff04; background-color: #ffffff04;
border-radius: 4px; border-radius: 4px;