optimised templates, broke tracks, improved music gateway UX. we ball

Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
ari melody 2024-03-21 05:19:18 +00:00
parent 6ec813dd58
commit 18c13699af
17 changed files with 593 additions and 496 deletions

1
.gitignore vendored
View file

@ -1,2 +1,3 @@
**/.DS_Store
.idea/
tmp/

View file

@ -619,7 +619,7 @@ var placeholders = []MusicRelease{
},
}
func GetAlbum(id string) (MusicRelease, bool) {
func GetRelease(id string) (MusicRelease, bool) {
for _, album := range placeholders {
if album.Id == id {
return album, true
@ -628,7 +628,7 @@ func GetAlbum(id string) (MusicRelease, bool) {
return MusicRelease{}, false
}
func QueryAllAlbums() ([]MusicRelease) {
func QueryAllMusic() ([]MusicRelease) {
return placeholders
}

77
main.go
View file

@ -30,13 +30,12 @@ var mime_types = map[string]string{
"js": "application/javascript",
}
var templates = template.Must(template.ParseFiles(
var base_template = template.Must(template.ParseFiles(
"views/base.html",
"views/header.html",
"views/footer.html",
"views/index.html",
"views/music.html",
"views/music-gateway.html",
))
))
var htmx_template = template.Must(template.New("root").Parse(`<head>{{block "head" .}}{{end}}</head>{{block "content" .}}{{end}}`))
func log_request(req *http.Request, code int, start_time time.Time) {
now := time.Now()
@ -56,31 +55,41 @@ func log_request(req *http.Request, code int, start_time time.Time) {
)
}
func web_handler(writer http.ResponseWriter, req *http.Request) {
func handle_request(writer http.ResponseWriter, req *http.Request) {
uri := req.URL.Path
start_time := time.Now()
if req.URL.Path == "/" {
code := index_handler(writer, req)
log_request(req, code, start_time)
return
}
if uri == "/music" {
code := music_handler(writer, req)
log_request(req, code, start_time)
return
}
if strings.HasPrefix(uri, "/music/") {
code := music_gateway_handler(writer, req)
log_request(req, code, start_time)
return
}
code := static_handler(writer, req)
hx_boosted := len(req.Header["Hx-Boosted"]) > 0 && req.Header["Hx-Boosted"][0] == "true"
code := func(writer http.ResponseWriter, req *http.Request) int {
var root *template.Template
if hx_boosted {
root = template.Must(htmx_template.Clone())
} else {
root = template.Must(base_template.Clone())
}
if req.URL.Path == "/" {
return index_handler(writer, root)
}
if uri == "/music" {
return music_directory_handler(writer, root)
}
if strings.HasPrefix(uri, "/music/") {
return music_gateway_handler(writer, req, root)
}
return static_handler(writer, req)
}(writer, req)
log_request(req, code, start_time)
}
func index_handler(writer http.ResponseWriter, req *http.Request) int {
err := templates.ExecuteTemplate(writer, "index.html", nil)
func index_handler(writer http.ResponseWriter, root *template.Template) int {
index_template := template.Must(root.ParseFiles("views/index.html"))
err := index_template.Execute(writer, nil)
if err != nil {
http.Error(writer, err.Error(), http.StatusInternalServerError)
return 500
@ -88,8 +97,10 @@ func index_handler(writer http.ResponseWriter, req *http.Request) int {
return 200
}
func music_handler(writer http.ResponseWriter, req *http.Request) int {
err := templates.ExecuteTemplate(writer, "music.html", music.QueryAllAlbums())
func music_directory_handler(writer http.ResponseWriter, root *template.Template) int {
music_template := template.Must(root.ParseFiles("views/music.html"))
music := music.QueryAllMusic()
err := music_template.Execute(writer, music)
if err != nil {
http.Error(writer, err.Error(), http.StatusInternalServerError)
return 500
@ -97,7 +108,7 @@ func music_handler(writer http.ResponseWriter, req *http.Request) int {
return 200
}
func music_gateway_handler(writer http.ResponseWriter, req *http.Request) int {
func music_gateway_handler(writer http.ResponseWriter, req *http.Request, root *template.Template) int {
if len(req.URL.Path) <= len("/music/") {
http.Error(writer, "400 bad request", http.StatusBadRequest)
return 400
@ -106,12 +117,13 @@ func music_gateway_handler(writer http.ResponseWriter, req *http.Request) int {
id := req.URL.Path[len("/music/"):]
// http.Redirect(writer, req, "https://mellodoot.com/music/"+title, 302)
// return
album, ok := music.GetAlbum(id)
release, ok := music.GetRelease(id)
if !ok {
http.Error(writer, "404 not found", http.StatusNotFound)
return 404
}
err := templates.ExecuteTemplate(writer, "music-gateway.html", album)
gateway_template := template.Must(root.ParseFiles("views/music-gateway.html"))
err := gateway_template.Execute(writer, release)
if err != nil {
http.Error(writer, err.Error(), http.StatusInternalServerError)
return 500
@ -180,22 +192,21 @@ func parse_markdown(md []byte) []byte {
func push_to_db_this_is_a_testing_thing_and_will_be_superfluous_later() {
db := InitDatabase()
defer db.Close()
for _, artist := range music.QueryAllArtists() {
PushArtist(db, artist)
}
for _, album := range music.QueryAllAlbums() {
for _, album := range music.QueryAllMusic() {
PushRelease(db, album)
}
defer db.Close()
}
func main() {
push_to_db_this_is_a_testing_thing_and_will_be_superfluous_later()
http.HandleFunc("/", web_handler)
http.HandleFunc("/", handle_request)
fmt.Printf("now serving at http://127.0.0.1:%d\n", PORT)
log.Fatal(http.ListenAndServe(fmt.Sprintf(":%d", PORT), nil))

1
public/script/lib/htmx.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -55,3 +55,11 @@ function fill_list(list) {
fill_list(e);
});
document.addEventListener("htmx:afterSwap", async event => {
const res = await event.detail.xhr.response;
var new_head = res.substring(res.indexOf("<head>")+1, res.indexOf("</head>"));
if (new_head) {
document.head.innerHTML = new_head;
}
window.scrollY = 0;
});

View file

@ -28,6 +28,34 @@ function apply_funny_bob_to_upcoming_tags() {
}
}
const extras_pairs = Array.from(document.querySelectorAll("div#info > div").values().map(container => {
return {
container,
button: document.getElementById("extras").querySelector(`ul li a[href="#${container.id}"]`)
};
}));
const info_container = document.getElementById("info")
info_container.addEventListener("scroll", update_extras_buttons);
function update_extras_buttons() {
console.clear();
const info_rect = info_container.getBoundingClientRect();
const info_y = info_rect.y;
const font_size = parseFloat(getComputedStyle(document.documentElement).fontSize);
console.log("info_y: " + info_y);
let current = extras_pairs[0];
extras_pairs.forEach(pair => {
pair.button.classList.remove("active");
const scroll_diff = pair.container.getBoundingClientRect().y -
info_rect.y -
info_rect.height / 2 +
4 * font_size;
if (scroll_diff <= 0) current = pair;
console.log(`${pair.container.id}: ${scroll_diff}`);
})
current.button.classList.add("active");
}
update_extras_buttons();
document.querySelectorAll("div#extras ul li a[href]").forEach(link => {
link.addEventListener("click", event => {
event.preventDefault();

View file

@ -63,4 +63,4 @@ function load_pride_flag_style() {
load_pride_flag_style();
pride_flag = create_pride_flag();
document.body.appendChild(pride_flag);
document.querySelector("main").appendChild(pride_flag);

View file

@ -3,7 +3,8 @@
main {
width: min(calc(100% - 4rem), 720px);
min-height: calc(100vh - 10.3rem);
margin: 5rem auto 2rem auto;
margin: 0 auto 2rem auto;
padding-top: 5rem;
}
main h1 {

View file

@ -21,6 +21,9 @@ body {
scroll-behavior: smooth;
}
main {
}
a {
color: var(--links);
text-decoration: none;

View file

@ -70,7 +70,6 @@ main {
gap: 4rem;
font-size: 16px;
animation: card-init .5s forwards;
overflow-y: clip;
padding: 4rem;
}
@ -97,7 +96,6 @@ main {
width: 33.3%;
height: 33.3%;
z-index: 2;
/* pointer-events: none; */
}
#art-container > div.tilt-topleft {
@ -208,10 +206,25 @@ div#vertical-line {
}
div#info {
display: flex;
flex-direction: column;
transition: transform .5s ease;
gap: 6rem;
margin: -4rem;
padding: 4rem;
height: 360px;
overflow: scroll;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: #111;
mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
div#info > div {
min-height: 360px;
padding: 4rem 1rem 4rem 4rem;
margin: -4rem -3.5rem -4rem -4rem;
}
div#info p {
max-width: 500px;
white-space: pre-line;
}
#title-container {
@ -279,18 +292,26 @@ div#info {
display: inline-block;
}
#links {
ul#links {
width: 100%;
margin: 1rem 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: .5rem
gap: .5rem;
list-style: none;
}
#links a {
padding: .5em .8em;
border-radius: 4px;
ul#links li {
flex-grow: 1;
}
ul#links a {
width: calc(100% - 1.6em);
padding: .5em .8em;
display: block;
border-radius: 4px;
font-size: 1em;
color: #111;
background-color: #fff;
@ -299,31 +320,31 @@ div#info {
transition: filter .1s,-webkit-filter .1s
}
#links a.buy {
ul#links a.buy {
background-color: #ff94e9
}
#links a.presave {
ul#links a.presave {
background-color: #ff94e9
}
#links a.spotify {
ul#links a.spotify {
background-color: #8cff83
}
#links a.applemusic {
ul#links a.applemusic {
background-color: #8cd9ff
}
#links a.soundcloud {
ul#links a.soundcloud {
background-color: #fdaa6d
}
#links a.youtube {
ul#links a.youtube {
background-color: #ff6e6e
}
#links a:hover {
ul#links a:hover {
filter: brightness(125%);
-webkit-filter: brightness(125%)
}
@ -357,24 +378,11 @@ div#extras ul li a {
transition: color .1s linear;
}
div#extras ul li a:hover {
div#extras ul li a:hover,
div#extras ul li a.active {
color: #eee;
}
div#info > div {
max-height: 360px;
min-height: 360px;
overflow-y: scroll;
padding: 2rem 1rem 2rem 4rem;
margin: -2rem -3.5rem -2rem -4rem;
mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
div#info p {
max-width: 500px;
white-space: pre-line;
}
a.scrollback {
color: #888;
font-style: italic;
@ -497,6 +505,7 @@ footer a:hover {
text-decoration: underline
}
/*
@media only screen and (min-width: 1105px) {
div#music-container:not(:has(> div#info #credits:target)):not(:has(> div#info #lyrics:target)) {
div#extras ul li:first-of-type a {
@ -505,23 +514,18 @@ footer a:hover {
}
div#music-container:has(> div#info #credits:target) {
div#info {
transform: translateY(calc(-360px + -6rem));
}
div#extras ul li a[href="#credits"] {
color: #eee;
}
}
div#music-container:has(> div#info #lyrics:target) {
div#info {
transform: translateY(calc((-360px + -6rem) * 2));
}
div#extras ul li a[href="#lyrics"] {
color: #eee;
}
}
}
*/
@media only screen and (max-width: 1105px) {
main {
@ -557,11 +561,12 @@ footer a:hover {
div#info {
width: 100%;
gap: 2rem;
height: auto;
overflow-y: auto;
}
div#info > div {
max-height: fit-content;
min-height: fit-content;
min-height: auto;
padding: 0;
margin: 0;
overflow-y: unset;

50
views/base.html Normal file
View file

@ -0,0 +1,50 @@
<!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">
{{block "head" .}}
<!-- <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"> -->
<!-- <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="home to your local SPACEGIRL 💫"> -->
<!---->
<!-- <link rel="stylesheet" href="style/main.css"> -->
<!---->
<!-- <script type="module" src="/script/main.js" defer></script> -->
{{end}}
<!-- <script type="application/javascript" src="/script/lib/htmx.min.js"></script> -->
</head>
<body>
{{template "header"}}
{{block "content" .}}
<main>
<h1>
# hello, world!
</h1>
<p>
this is a default page!
</p>
</main>
{{end}}
{{template "footer"}}
<div id="overlay"></div>
</body>
</html>

View file

@ -1,6 +1,6 @@
{{define "footer"}}
<footer>
<footer hx-preserve="true">
<div id="footer">
<small><em>*made with ♥ by ari, 2024*</em></small>
</div>

View file

@ -1,6 +1,6 @@
{{define "header"}}
<header>
<header hx-preserve="true">
<nav>
<div id="header-home">
<img src="/img/favicon.png" id="header-icon" width="100" height="100" alt="">

28
views/htmx-base.html Normal file
View file

@ -0,0 +1,28 @@
<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">
{{block "head" .}}
<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">
<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="home to your local SPACEGIRL 💫">
<link rel="stylesheet" href="style/main.css">
<script type="module" src="/script/main.js" defer></script>
{{end}}
<script type="application/javascript" src="/script/lib/htmx.min.js"></script>
</head>
{{block "content" .}}{{end}}

View file

@ -1,195 +1,182 @@
<!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">
{{define "head"}}
<title>ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
<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 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">
<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="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">
<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="home to your local SPACEGIRL 💫">
<link rel="stylesheet" href="/style/index.css">
<link rel="stylesheet" href="style/index.css">
<script type="module" src="/script/main.js" defer></script>
<link rel="me" href="https://wetdry.world/@ari">
{{end}}
<script type="module" src="/script/main.js" defer></script>
<link rel="me" href="https://wetdry.world/@ari">
</head>
<body>
{{block "header" .}}{{end}}
<main>
<h1>
# hello, world!
</h1>
{{define "content"}}
<main>
<h1>
# hello, world!
</h1>
<p>
<strong>i'm ari!</strong>
<br>
<small>she/her 🏳️‍⚧️🏳️‍🌈💫🦆🇮🇪</small>
</p>
<p>
<strong>i'm ari!</strong>
<br>
<small>she/her 🏳️‍⚧️🏳️‍🌈💫🦆🇮🇪</small>
</p>
<p>
i like to create things on the internet! namely <a href="/music">music</a>,
<a href="https://youtube.com/mellodoot" target="_blank">videos</a>, art <small><em>(link pending)</em></small>, and the odd
<a href="https://github.com/mellodoot?tab=repositories" target="_blank">code project</a> from time to time!
if it's a thing you can create on a computer, i've probably taken a swing at it.
</p>
<p>
you're very welcome to take a look around my little slice of the internet here,
or explore any of the other corners i inhabit!
</p>
<p>
and 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://arimelody.bandcamp.com" target="_blank">bandcamp</a>,
so you can at least get something for your money.
thank you very much either way!! 💕
</p>
<p>
for anything else, you can reach me for any and all communications through
<a href="mailto:ari@arimelody.me">ari@arimelody.me</a>. if your message
contains anything beyond a silly gag, i strongly recommend encrypting
your message using my public pgp key, listed below!
</p>
<p>
thank you for stopping by- i hope you have a lovely rest of your day! 💫
</p>
<p>
i like to create things on the internet! namely <a href="/music">music</a>,
<a href="https://youtube.com/mellodoot" target="_blank">videos</a>, art <small><em>(link pending)</em></small>, and the odd
<a href="https://github.com/mellodoot?tab=repositories" target="_blank">code project</a> from time to time!
if it's a thing you can create on a computer, i've probably taken a swing at it.
</p>
<p>
you're very welcome to take a look around my little slice of the internet here,
or explore any of the other corners i inhabit!
</p>
<p>
and 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://arimelody.bandcamp.com" target="_blank">bandcamp</a>,
so you can at least get something for your money.
thank you very much either way!! 💕
</p>
<p>
for anything else, you can reach me for any and all communications through
<a href="mailto:ari@arimelody.me">ari@arimelody.me</a>. if your message
contains anything beyond a silly gag, i strongly recommend encrypting
your message using my public pgp key, listed below!
</p>
<p>
thank you for stopping by- i hope you have a lovely rest of your day! 💫
</p>
<hr>
<hr>
<h2>
## metadata
</h2>
<h2>
## metadata
</h2>
<p>
<strong>my colours 🌈</strong>
</p>
<ul>
<li>primary: <span class="col-primary">#b7fd49</span></li>
<li>secondary: <span class="col-secondary">#f8e05b</span></li>
<li>tertiary: <span class="col-tertiary">#f788fe</span></li>
</ul>
<p>
<strong>my colours 🌈</strong>
</p>
<ul>
<li>primary: <span class="col-primary">#b7fd49</span></li>
<li>secondary: <span class="col-secondary">#f8e05b</span></li>
<li>tertiary: <span class="col-tertiary">#f788fe</span></li>
</ul>
<p>
<strong>my keys 🔑</strong>
</p>
<ul>
<li>pgp: <a href="/keys/ari melody_0x92678188_public.asc" target="_blank">[link]</a></li>
<li>ssh (ed25519): <a href="/keys/id_ari_ed25519.pub" target="_blank">[link]</a></li>
</ul>
<p>
<strong>my keys 🔑</strong>
</p>
<ul>
<li>pgp: <a href="/keys/ari melody_0x92678188_public.asc" target="_blank">[link]</a></li>
<li>ssh (ed25519): <a href="/keys/id_ari_ed25519.pub" target="_blank">[link]</a></li>
</ul>
<p>
<strong>where to find me 🛰️</strong>
</p>
<ul class="links">
<li>
<a href="https://youtube.com/@mellodoot" target="_blank">youtube</a>
</li>
<li>
<a href="https://mellodoot.tumblr.com" target="_blank">tumblr</a>
</li>
<li>
<a href="https://twitch.tv/mellodoot" target="_blank">twitch</a>
</li>
<li>
<a href="https://sptfy.com/mellodoot" target="_blank">spotify</a>
</li>
<li>
<a href="https://soundcloud.com/arimelody" target="_blank">soundcloud</a>
</li>
<li>
<a href="https://github.com/mellodoot" target="_blank">github</a>
</li>
</ul>
<p>
<strong>where to find me 🛰️</strong>
</p>
<ul class="links">
<li>
<a href="https://youtube.com/@mellodoot" target="_blank">youtube</a>
</li>
<li>
<a href="https://mellodoot.tumblr.com" target="_blank">tumblr</a>
</li>
<li>
<a href="https://twitch.tv/mellodoot" target="_blank">twitch</a>
</li>
<li>
<a href="https://sptfy.com/mellodoot" target="_blank">spotify</a>
</li>
<li>
<a href="https://soundcloud.com/arimelody" target="_blank">soundcloud</a>
</li>
<li>
<a href="https://github.com/mellodoot" target="_blank">github</a>
</li>
</ul>
<p>
<strong>projects i've worked on 🛠️</strong>
</p>
<ul class="links">
<li>
<a href="https://catdance.xyz" target="_blank">
catdance
</a>
</li>
<li>
<a href="https://github.com/mellodoot/sandblock" target="_blank">
sandblock
</a>
</li>
<li>
<a href="https://github.com/mellodoot/prideflag" target="_blank">
pride flag
</a>
</li>
<li>
<a href="https://github.com/mellodoot/ipaddrgen" target="_blank">
ipaddrgen
</a>
</li>
<li>
<a href="https://impact.arimelody.me/" target="_blank">
impact meme
</a>
</li>
<li>
<a href="https://term.arimelody.me/" target="_blank">
OpenTerminal
</a>
</li>
</ul>
<p>
<strong>projects i've worked on 🛠️</strong>
</p>
<ul class="links">
<li>
<a href="https://catdance.xyz" target="_blank">
catdance
</a>
</li>
<li>
<a href="https://github.com/mellodoot/sandblock" target="_blank">
sandblock
</a>
</li>
<li>
<a href="https://github.com/mellodoot/prideflag" target="_blank">
pride flag
</a>
</li>
<li>
<a href="https://github.com/mellodoot/ipaddrgen" target="_blank">
ipaddrgen
</a>
</li>
<li>
<a href="https://impact.arimelody.me/" target="_blank">
impact meme
</a>
</li>
<li>
<a href="https://term.arimelody.me/" target="_blank">
OpenTerminal
</a>
</li>
</ul>
<hr>
<hr>
<h2>## cool people</h2>
<h2>## cool people</h2>
<div id="web-buttons">
<a href="https://arimelody.me">
<img src="/img/buttons/ari melody.gif" alt="ari melody web button">
</a>
<a href="https://supitszaire.com" target="_blank">
<img src="/img/buttons/zaire.gif" alt="zaire web button">
</a>
<a href="https://mae.wtf" target="_blank">
<img src="/img/buttons/mae.png" alt="vimae web button">
</a>
<div id="web-buttons">
<a href="https://arimelody.me">
<img src="/img/buttons/ari melody.gif" alt="ari melody web button">
</a>
<a href="https://supitszaire.com" target="_blank">
<img src="/img/buttons/zaire.gif" alt="zaire web button">
</a>
<a href="https://mae.wtf" target="_blank">
<img src="/img/buttons/mae.png" alt="vimae web button">
</a>
<hr>
<hr>
<img src="/img/buttons/misc/debian.gif" alt="powered by debian">
<img src="/img/buttons/misc/girls4notepad.gif" alt="girls 4 notepad">
<img src="/img/buttons/misc/gaywebring.gif" alt="this website is GAY">
<img src="/img/buttons/misc/graphicdesign.gif" alt="graphic design is my passion">
<img src="/img/buttons/misc/gplv3.gif" alt="GPLv3 free software">
<img src="/img/buttons/misc/hl.gif" alt="half-life">
<img src="/img/buttons/misc/h-free-anim.gif" alt="dis site is hentai FREE">
<img src="/img/buttons/misc/sprunk.gif" alt="sprunk">
<img src="/img/buttons/misc/tohell.gif" alt="go straight to hell">
<img src="/img/buttons/misc/virusalert.gif" alt="virus alert! click here" onclick="alert('meow :3')">
<img src="/img/buttons/misc/wii.gif" alt="wii">
<img src="/img/buttons/misc/www2.gif" alt="www">
<img src="/img/buttons/misc/iemandatory.gif" alt="get mandatory internet explorer">
<img src="/img/buttons/misc/learn_html.gif" alt="HTML - learn it today!">
<a href="https://smokepowered.com" target="_blank">
<img src="/img/buttons/misc/smokepowered.gif" alt="high on SMOKE">
</a>
<a href="https://epicblazed.com" target="_blank">
<img src="/img/buttons/misc/epicblazed.png" alt="epic blazed">
</a>
</div>
</main>
{{block "footer" .}}{{end}}
<div id="overlay"></div>
</body>
</html>
<img src="/img/buttons/misc/debian.gif" alt="powered by debian">
<img src="/img/buttons/misc/girls4notepad.gif" alt="girls 4 notepad">
<img src="/img/buttons/misc/gaywebring.gif" alt="this website is GAY">
<img src="/img/buttons/misc/graphicdesign.gif" alt="graphic design is my passion">
<img src="/img/buttons/misc/gplv3.gif" alt="GPLv3 free software">
<img src="/img/buttons/misc/hl.gif" alt="half-life">
<img src="/img/buttons/misc/h-free-anim.gif" alt="dis site is hentai FREE">
<img src="/img/buttons/misc/sprunk.gif" alt="sprunk">
<img src="/img/buttons/misc/tohell.gif" alt="go straight to hell">
<img src="/img/buttons/misc/virusalert.gif" alt="virus alert! click here" onclick="alert('meow :3')">
<img src="/img/buttons/misc/wii.gif" alt="wii">
<img src="/img/buttons/misc/www2.gif" alt="www">
<img src="/img/buttons/misc/iemandatory.gif" alt="get mandatory internet explorer">
<img src="/img/buttons/misc/learn_html.gif" alt="HTML - learn it today!">
<a href="https://smokepowered.com" target="_blank">
<img src="/img/buttons/misc/smokepowered.gif" alt="high on SMOKE">
</a>
<a href="https://epicblazed.com" target="_blank">
<img src="/img/buttons/misc/epicblazed.png" alt="epic blazed">
</a>
</div>
</main>
{{end}}

View file

@ -1,160 +1,149 @@
<!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">
{{define "head"}}
<title>{{.PrintPrimaryArtists}} - {{.Title}}</title>
<link rel="icon" href="{{.ResolveArtwork}}">
<title>{{.PrintPrimaryArtists}} - {{.Title}}</title>
<link rel="icon" href="{{.ResolveArtwork}}">
<meta name="description" content="Stream &quot;{{.Title}}&quot; by {{.PrintPrimaryArtists}} on all platforms!">
<meta name="author" content="{{.PrintPrimaryArtists}}">
<meta name="keywords" content="{{.PrintCommaPrimaryArtists}}, music, {{.Title}}, {{.Id}}, {{.GetReleaseYear}}">
<meta name="description" content="Stream &quot;{{.Title}}&quot; by {{.PrintPrimaryArtists}} on all platforms!">
<meta name="author" content="{{.PrintPrimaryArtists}}">
<meta name="keywords" content="{{.PrintCommaPrimaryArtists}}, music, {{.Title}}, {{.Id}}, {{.GetReleaseYear}}">
<meta property="og:url" content="https://arimelody.me/music/{{.Id}}">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_IE">
<meta property="og:site_name" content="ari melody music">
<meta property="og.Title" content="{{.PrintPrimaryArtists}} - {{.Title}}">
<meta property="og:description" content="Stream &quot;{{.Title}}&quot; by {{.PrintPrimaryArtists}} on all platforms!">
<meta property="og:image" content="https://arimelody.me{{.ResolveArtwork}}">
<meta property="og:url" content="https://arimelody.me/music/{{.Id}}">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_IE">
<meta property="og:site_name" content="ari melody music">
<meta property="og.Title" content="{{.PrintPrimaryArtists}} - {{.Title}}">
<meta property="og:description" content="Stream &quot;{{.Title}}&quot; by {{.PrintPrimaryArtists}} on all platforms!">
<meta property="og:image" content="https://arimelody.me{{.ResolveArtwork}}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@funniduck">
<meta name="twitter:creator" content="@funniduck">
<meta property="twitter:domain" content="arimelody.me">
<meta property="twitter:url" content="https://arimelody.me/music/{{.Id}}">
<meta name="twitter.Title" content="{{.PrintPrimaryArtists}} - {{.Title}}">
<meta name="twitter:description" content="Stream &quot;{{.Title}}&quot; by mellodoot on all platforms!">
<meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
<meta name="twitter:image:alt" content="Cover art for &quot;{{.Title}}&quot;">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@funniduck">
<meta name="twitter:creator" content="@funniduck">
<meta property="twitter:domain" content="arimelody.me">
<meta property="twitter:url" content="https://arimelody.me/music/{{.Id}}">
<meta name="twitter.Title" content="{{.PrintPrimaryArtists}} - {{.Title}}">
<meta name="twitter:description" content="Stream &quot;{{.Title}}&quot; by mellodoot on all platforms!">
<meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
<meta name="twitter:image:alt" content="Cover art for &quot;{{.Title}}&quot;">
<script type="module" src="/script/music-gateway.js" defer></script>
<script type="application/javascript" src="/script/prideflag.js" defer></script>
<link rel="stylesheet" href="/style/music-gateway.css">
{{end}}
<script type="module" src="/script/music-gateway.js" defer></script>
<script type="text/javascript" src="/script/prideflag.js" defer></script>
<link rel="stylesheet" href="/style/music-gateway.css">
</head>
<body>
<div id="background" data-url="{{.ResolveArtwork}}"></div>
<div id="overlay"></div>
{{define "content"}}
<main>
<div id="background" data-url="{{.ResolveArtwork}}"></div>
<div id="overlay"></div>
<a id="go-back" title="back to arimelody.me" href="/music">&lt;</a>
<a id="go-back" title="back to arimelody.me" href="/music">&lt;</a>
{{block "header" .}}{{end}}
<main>
<div id="music-container">
<div id="art-container">
<div class="tilt-topleft"></div>
<div class="tilt-top"></div>
<div class="tilt-topright"></div>
<div class="tilt-right"></div>
<div class="tilt-bottomright"></div>
<div class="tilt-bottom"></div>
<div class="tilt-bottomleft"></div>
<div class="tilt-left"></div>
<img id="artwork" src="{{.ResolveArtwork}}" alt="{{.Title}} artwork" width=240 height=240>
<div id="music-container">
<div id="art-container">
<div class="tilt-topleft"></div>
<div class="tilt-top"></div>
<div class="tilt-topright"></div>
<div class="tilt-right"></div>
<div class="tilt-bottomright"></div>
<div class="tilt-bottom"></div>
<div class="tilt-bottomleft"></div>
<div class="tilt-left"></div>
<img id="artwork" src="{{.ResolveArtwork}}" alt="{{.Title}} artwork" width=240 height=240>
</div>
<div id="vertical-line"></div>
<div id="info">
<div id="overview">
<div id="title-container">
<h1 id="title">{{.Title}}</h1>
<span id="year" title="{{.PrintReleaseDate}}">{{.GetReleaseYear}}</span>
</div>
<div id="vertical-line"></div>
<div id="info">
<div id="main">
<div id="title-container">
<h1 id="title">{{.Title}}</h1>
<span id="year" title="{{.PrintReleaseDate}}">{{.GetReleaseYear}}</span>
</div>
<p id="artist">{{.PrintPrimaryArtists}}</p>
<p id="type" class="{{.ResolveType}}">{{.ResolveType}}</p>
<p id="artist">{{.PrintPrimaryArtists}}</p>
<p id="type" class="{{.ResolveType}}">{{.ResolveType}}</p>
<div id="links">
{{if .Buylink}}
<a href="{{.Buylink}}" class="buy">
{{if .Buyname}}{{.Buyname}}{{else}}buy{{end}}
</a>
{{end}}
{{range .Links}}
<a class="{{.NormaliseName}}" href="{{.Url}}">
{{.Name}}
</a>
{{end}}
</div>
{{if .Description}}
<p id="description">
{{.Description}}
</p>
{{end}}
<p id="share">share</p>
</div>
{{if .Credits}}
<div id="credits">
<h2>credits:</h2>
<ul>
{{range .Credits}}
{{$Artist := .ResolveArtist}}
{{if $Artist.Website}}
<li><strong><a href="{{$Artist.Website}}">{{$Artist.Name}}</a></strong>: {{.Role}}</li>
{{else}}
<li><strong>{{$Artist.Name}}</strong>: {{.Role}}</li>
{{end}}
{{end}}
</ul>
</div>
<ul id="links">
{{if .Buylink}}
<li>
<a href="{{.Buylink}}" class="buy">{{or .Buyname "buy"}}</a>
</li>
{{end}}
{{if .Lyrics}}
<div id="lyrics">
<h2>lyrics:</h2>
<p>{{.Lyrics}}</p>
</div>
{{range .Links}}
<li>
<a class="{{.NormaliseName}}" href="{{.Url}}">{{.Name}}</a>
</li>
{{end}}
</div>
</ul>
{{if or .Credits .Lyrics}}
<div id="extras">
<ul>
<li><a href="#">overview</a></li>
{{if .Credits}}
<li><a href="#credits">credits</a></li>
{{end}}
{{if .Lyrics}}
<li><a href="#lyrics">lyrics</a></li>
{{end}}
</ul>
</div>
{{if .Description}}
<p id="description">
{{.Description}}
</p>
{{end}}
<!-- <div id="tracks"> -->
<!-- <% var file = `/audio/preview/${data.id}.webm` %> -->
<!-- <% if (data.tracks && typeof(data.tracks) == typeof([])) { %> -->
<!-- <% for( let i = 0; i < data.tracks.length; i++ ) { %> -->
<!-- <% -->
<!-- songid = data.tracks[i].title.toLowerCase().replace(/[^a-z0-9]/g, ""); -->
<!-- file = `/audio/preview/${data.id}-${songid}.webm`; -->
<!-- %> -->
<!---->
<!-- <div class="track-preview" id="preview-<%= songid %>"> -->
<!-- <i class="fa-solid fa-play play"></i> -->
<!-- <p><%= data.tracks[i].title %></p> -->
<!-- <audio src="<%= file %>"></audio> -->
<!-- </div> -->
<!---->
<!-- <% } %> -->
<!-- <% } else { %> -->
<!-- <div class="track-preview" id="preview-<%= data.id %>"> -->
<!-- <i class="fa-solid fa-play play"></i> -->
<!-- <p>{{.Title}}</p> -->
<!-- <audio src="<%= file %>"></audio> -->
<!-- </div> -->
<!-- <% } %> -->
<!-- </div> -->
</div>
</main>
{{block "footer" .}}{{end}}
</body>
</html>
<p id="share">share</p>
</div>
{{if .Credits}}
<div id="credits">
<h2>credits:</h2>
<ul>
{{range .Credits}}
{{$Artist := .ResolveArtist}}
{{if $Artist.Website}}
<li><strong><a href="{{$Artist.Website}}">{{$Artist.Name}}</a></strong>: {{.Role}}</li>
{{else}}
<li><strong>{{$Artist.Name}}</strong>: {{.Role}}</li>
{{end}}
{{end}}
</ul>
</div>
{{end}}
<!-- {{if .Lyrics}} -->
<!-- <div id="lyrics"> -->
<!-- <h2>lyrics:</h2> -->
<!-- <p>{{.Lyrics}}</p> -->
<!-- </div> -->
<!-- {{end}} -->
</div>
{{if or .Credits .Lyrics}}
<div id="extras">
<ul>
<li><a href="#overview">overview</a></li>
{{if .Credits}}
<li><a href="#credits">credits</a></li>
{{end}}
<!-- {{if .Lyrics}} -->
<!-- <li><a href="#lyrics">lyrics</a></li> -->
<!-- {{end}} -->
</ul>
</div>
{{end}}
<!-- <div id="tracks"> -->
<!-- <% var file = `/audio/preview/${data.id}.webm` %> -->
<!-- <% if (data.tracks && typeof(data.tracks) == typeof([])) { %> -->
<!-- <% for( let i = 0; i < data.tracks.length; i++ ) { %> -->
<!-- <% -->
<!-- songid = data.tracks[i].title.toLowerCase().replace(/[^a-z0-9]/g, ""); -->
<!-- file = `/audio/preview/${data.id}-${songid}.webm`; -->
<!-- %> -->
<!---->
<!-- <div class="track-preview" id="preview-<%= songid %>"> -->
<!-- <i class="fa-solid fa-play play"></i> -->
<!-- <p><%= data.tracks[i].title %></p> -->
<!-- <audio src="<%= file %>"></audio> -->
<!-- </div> -->
<!---->
<!-- <% } %> -->
<!-- <% } else { %> -->
<!-- <div class="track-preview" id="preview-<%= data.id %>"> -->
<!-- <i class="fa-solid fa-play play"></i> -->
<!-- <p>{{.Title}}</p> -->
<!-- <audio src="<%= file %>"></audio> -->
<!-- </div> -->
<!-- <% } %> -->
<!-- </div> -->
</div>
</main>
{{end}}

View file

@ -1,104 +1,89 @@
<!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">
{{define "head"}}
<title>music - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
<title>music - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
<meta name="description" content="music from your local SPACEGIRL 💫">
<meta name="description" content="music from your local SPACEGIRL 💫">
<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 💫">
<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/music.css">
<link rel="stylesheet" href="/style/main.css">
<link rel="stylesheet" href="/style/music.css">
<script type="module" src="/script/main.js" defer></script>
<script type="application/javascript" src="/script/music.js" defer></script>
{{end}}
<script type="module" src="/script/main.js" defer></script>
<script type="application/javascript" src="/script/accessibility.js" defer></script>
<script type="application/javascript" src="/script/music.js" defer></script>
</head>
<body>
{{block "header" .}}{{end}}
{{define "content"}}
<main>
<h1>
# my music
</h1>
<main>
<h1>
# my music
</h1>
<div id="music-container">
{{range $Album := .}}
<div class="music" id="{{$Album.Id}}">
<div class="music-artwork">
<img src="{{$Album.ResolveArtwork}}" alt="{{$Album.Title}} artwork" width="128">
</div>
<div class="music-details">
<a href="/music/{{$Album.Id}}"><h1 class="music-title">{{$Album.Title}}</h1></a>
<h2 class="music-artist">{{$Album.PrintPrimaryArtists}}</h2>
<h3 class="music-type-{{.ResolveType}}">{{$Album.ResolveType}}</h3>
<ul class="music-links">
{{range $Link := $Album.Links}}
<li>
<a href="{{$Link.Url}}">{{$Link.Name}}</a>
</li>
{{end}}
</ul>
</div>
</div>
{{end}}
<div id="music-container">
{{range $Album := .}}
<div class="music" id="{{$Album.Id}}">
<div class="music-artwork">
<img src="{{$Album.ResolveArtwork}}" alt="{{$Album.Title}} artwork" width="128">
</div>
<h2 id="usage" class="question">
<a href="#usage">
&gt; "can i use your music in my content?"
</a>
</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 class="music-details">
<a href="/music/{{$Album.Id}}"><h1 class="music-title">{{$Album.Title}}</h1></a>
<h2 class="music-artist">{{$Album.PrintPrimaryArtists}}</h2>
<h3 class="music-type-{{.ResolveType}}">{{$Album.ResolveType}}</h3>
<ul class="music-links">
{{range $Link := $Album.Links}}
<li>
<a href="{{$Link.Url}}">{{$Link.Name}}</a>
</li>
{{end}}
</ul>
</div>
</main>
</div>
{{end}}
</div>
{{block "footer" .}}{{end}}
<div id="overlay"></div>
</body>
</html>
<h2 id="usage" class="question">
<a href="#usage">
&gt; "can i use your music in my content?"
</a>
</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>
{{end}}