optimised templates, broke tracks, improved music gateway UX. we ball
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
parent
6ec813dd58
commit
18c13699af
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,2 +1,3 @@
|
|||
**/.DS_Store
|
||||
.idea/
|
||||
tmp/
|
||||
|
|
|
|||
|
|
@ -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
77
main.go
|
|
@ -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
1
public/script/lib/htmx.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,9 @@ body {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
main {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--links);
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -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
50
views/base.html
Normal 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>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{{define "footer"}}
|
||||
|
||||
<footer>
|
||||
<footer hx-preserve="true">
|
||||
<div id="footer">
|
||||
<small><em>*made with ♥ by ari, 2024*</em></small>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
28
views/htmx-base.html
Normal 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}}
|
||||
339
views/index.html
339
views/index.html
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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 "{{.Title}}" by {{.PrintPrimaryArtists}} on all platforms!">
|
||||
<meta name="author" content="{{.PrintPrimaryArtists}}">
|
||||
<meta name="keywords" content="{{.PrintCommaPrimaryArtists}}, music, {{.Title}}, {{.Id}}, {{.GetReleaseYear}}">
|
||||
|
||||
<meta name="description" content="Stream "{{.Title}}" 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 "{{.Title}}" 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 "{{.Title}}" 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 "{{.Title}}" by mellodoot on all platforms!">
|
||||
<meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
|
||||
<meta name="twitter:image:alt" content="Cover art for "{{.Title}}"">
|
||||
|
||||
<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 "{{.Title}}" by mellodoot on all platforms!">
|
||||
<meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
|
||||
<meta name="twitter:image:alt" content="Cover art for "{{.Title}}"">
|
||||
<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"><</a>
|
||||
<a id="go-back" title="back to arimelody.me" href="/music"><</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}}
|
||||
|
|
|
|||
175
views/music.html
175
views/music.html
|
|
@ -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">
|
||||
> "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>
|
||||
> <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">
|
||||
> "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>
|
||||
> <a href="mailto:ari@arimelody.me">ari@arimelody.me</a>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
{{end}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue