basic bones for music page- needs db and custom server!

This commit is contained in:
ari melody 2023-10-05 21:13:03 +01:00
parent c6442e3333
commit a5ea652f6b
Signed by: ari
GPG key ID: CF99829C92678188
7 changed files with 523 additions and 25 deletions

1
.gitignore vendored
View file

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

View file

@ -1,20 +1,21 @@
server { server {
listen 443 ssl; listen 443 ssl;
server_name arimelody.me; 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 /etc/nginx/ssl/arimelody.crt;
ssl_certificate_key /etc/nginx/ssl/arimelody.key; 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 / { location / {
} try_files $uri $uri/ $uri.html =404;
}
if ($scheme != "https") { if ($scheme != "https") {
return 301 https://$server_name$request_uri; return 301 https://$server_name$request_uri;
} }
} }

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> <!DOCTYPE html>
<html lang="en"><head> <html lang="en">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -19,7 +20,7 @@
<script src="script/main.js" defer="defer"></script> <script src="script/main.js" defer="defer"></script>
<link rel="me" href="https://wetdry.world/@ari"> <link rel="me" href="https://wetdry.world/@ari">
</head>
<body> <body>
<header> <header>
<div id="header"> <div id="header">
@ -30,10 +31,10 @@
</div> </div>
<ul> <ul>
<li> <li>
<a href="/" target="_blank">home</a> <a href="/">home</a>
</li> </li>
<li> <li>
<a href="https://mellodoot.com/music" target="_blank">music</a> <a href="/music">music</a>
</li> </li>
<li> <li>
<a href="https://github.com/mellodoot/arimelody.me" target="_blank">source</a> <a href="https://github.com/mellodoot/arimelody.me" target="_blank">source</a>
@ -142,15 +143,14 @@
this site is intended to eventually replace this site is intended to eventually replace
<a href="https://mellodoot.com/" target="_blank">mellodoot.com</a>. <a href="https://mellodoot.com/" target="_blank">mellodoot.com</a>.
</p> </p>
<hr>
<small><em>*made with ♥ by ari, 2023*</em></small>
</main> </main>
<footer> <footer>
<div id="footer">
<small><em>*made with ♥ by ari, 2023*</em></small>
</div>
</footer> </footer>
<div id="overlay"></div> <div id="overlay"></div>
</body>
</body></html> </html>

140
public/music.html Normal file
View file

@ -0,0 +1,140 @@
<!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">
<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! -->
<a class="inactive" title="coming later!">blog</a>
</li>
<li>
<!-- coming later! -->
<a class="inactive" title="coming later!">art</a>
</li>
</ul>
</div>
</header>
<main>
<h1>
# my music
</h1>
<p><a class="collapse-toggle">&gt; "can i use your music in my content?"</a></p>
<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="https://arimelody.me/music/dream" target="_blank">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! ;)
</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>
<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>
<footer>
<div id="footer">
<small><em>*made with ♥ by ari, 2023*</em></small>
</div>
</footer>
<div id="overlay"></div>
</body>
</html>

View file

@ -98,6 +98,7 @@ header ul li a:not(.inactive):hover {
main { main {
width: min(calc(100% - 4rem), 720px); width: min(calc(100% - 4rem), 720px);
min-height: calc(100vh - 10.3rem);
margin: auto; margin: auto;
} }
@ -243,7 +244,13 @@ ul.links li a:hover {
} }
footer { footer {
margin: 2rem; border-top: 1px solid #888;
}
#footer {
width: min(calc(100% - 4rem), 720px);
margin: auto;
padding: 2rem 0;
color: #aaa; color: #aaa;
} }

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

@ -0,0 +1,79 @@
article.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;
}
article.music:hover {
background-color: #fff1;
}
.music h1:hover,
.music h2: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;
}
.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;
}
.collapse {
margin-bottom: 1em;
padding: .5em 1.5em;
background-color: #ffffff04;
border-radius: 4px;
}