first commit! 🎉

Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
ari melody 2024-03-18 10:34:43 +00:00
commit 27d6e4f011
97 changed files with 2957 additions and 0 deletions

10
.gitattributes vendored Normal file
View file

@ -0,0 +1,10 @@
*.woff2 filter=lfs diff=lfs merge=lfs -text
*.gif filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text
*.jpg filter=lfs diff=lfs merge=lfs -text
*.webp filter=lfs diff=lfs merge=lfs -text
*.webm filter=lfs diff=lfs merge=lfs -text
*.mp3 filter=lfs diff=lfs merge=lfs -text
*.mp4 filter=lfs diff=lfs merge=lfs -text
. !text !filter !merge !diff
* !text !filter !merge !diff

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
**/.DS_Store

343
api/v1/music/music.go Normal file
View file

@ -0,0 +1,343 @@
package music
var placeholders = []Album{
{
Id: "test",
Title: "test album",
Type: "album",
Year: 2024,
Buyname: "go get it!!",
Buylink: "https://arimelody.me/",
Artists: []string{
"ari melody",
"zaire",
"mae taylor",
"Loudar",
},
Links: []AlbumLink{
AlbumLink{
Name: "youtube",
Url: "https://youtu.be/dQw4w9WgXcQ",
},
},
Description: "she sample on my text 'til i 🚫🚫🚫",
},
{
Id: "free2play",
Title: "free2play",
Type: "upcoming",
Year: 2024,
Buyname: "pre-order",
Buylink: "https://arimelody.me/",
Artists: []string{ "ari melody" },
Description: "hello from your local SPACEGIRL! 💫",
},
{
Id: "dream",
Title: "Dream",
Type: "single",
Year: 2022,
Artists: []string{ "mellodoot" },
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Dream.webp",
Buylink: "https://arimelody.bandcamp.com/track/dream",
Free: false,
Links: []AlbumLink{
AlbumLink{
Name: "spotify",
Url: "https://open.spotify.com/album/5talRpqzjExP1w6j5LFIAh",
},
AlbumLink{
Name: "apple music",
Url: "https://music.apple.com/ie/album/dream-single/1650037132",
},
AlbumLink{
Name: "soundcloud",
Url: "https://soundcloud.com/arimelody/dream2022",
},
AlbumLink{
Name: "youtube",
Url: "https://www.youtube.com/watch?v=nfFgtMuYAx8",
},
},
Description: "living the dream 🌌 ✨",
},
{
Id: "gomyway",
Title: "Go My Way",
Type: "single",
Year: 2021,
Artists: []string{ "mellodoot" },
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Go_My_Way.webp",
Buylink: "https://arimelody.bandcamp.com/track/go-my-way",
Links: []AlbumLink{
AlbumLink{
Name: "spotify",
Url: "https://open.spotify.com/album/35WNtxK12IDHCUoXHDePGE",
},
AlbumLink{
Name: "apple music",
Url: "https://music.apple.com/ie/album/go-my-way-single/1547145699",
},
AlbumLink{
Name: "soundcloud",
Url: "https://soundcloud.com/arimelody/go-my-way",
},
AlbumLink{
Name: "youtube",
Url: "https://www.youtube.com/watch?v=CNptNQdLkl0",
},
},
Description: "hey! go my way! 💥 ✨",
},
{
Id: "rowboat",
Title: "Rowboat",
Type: "single",
Year: 2020,
Artists: []string{ "mellodoot" },
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Rowboat.webp",
Buylink: "https://arimelody.bandcamp.com/track/rowboat",
Links: []AlbumLink{
{
Name: "spotify",
Url: "https://open.spotify.com/album/7jyqJFVKaENCPm58v5O44Y",
},
{
Name: "apple music",
Url: "https://music.apple.com/ie/album/rowboat-single/1502608714",
},
{
Name: "soundcloud",
Url: "https://soundcloud.com/arimelody/rowboat",
},
{
Name: "youtube",
Url: "https://www.youtube.com/watch?v=uOQyILDTzME",
},
},
Description: "let's take a trip. i've got a goddamn boat ⛵️",
},
{
Id: "helloworld",
Title: "Hello World",
Type: "single",
Year: 2019,
Artists: []string{ "mellodoot" },
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Hello_World.webp",
Buylink: "https://arimelody.bandcamp.com/track/hello-world",
Links: []AlbumLink{
{
Name: "spotify",
Url: "https://open.spotify.com/album/3LbElPXD4dsDumttGBuYxx",
},
{
Name: "apple music",
Url: "https://music.apple.com/ie/album/hello-world-single/1491880155",
},
{
Name: "soundcloud",
Url: "https://soundcloud.com/arimelody/helloworld",
},
{
Name: "youtube",
Url: "https://www.youtube.com/watch?v=CQhlRsl0Mjk",
},
},
Description: "we'll dawn a new frontier! 👾",
},
{
Id: "sine",
Title: "Sine",
Type: "single",
Artists: []string{ "zaire", "mellodoot" },
Year: 2019,
Artwork: "https://mellodoot.com/img/music_artwork/zaire_-_Sine_ft._mellodoot.webp",
Links: []AlbumLink{
{
Name: "spotify",
Url: "https://open.spotify.com/album/4WPuaJtTV7z86KubD9Rnmk",
},
{
Name: "apple music",
Url: "https://music.apple.com/us/album/sine-feat-mellodoot/1489163020",
},
{
Name: "youtube",
Url: "https://www.youtube.com/watch?v=z1H1s6VRnyY",
},
},
},
{
Id: "10",
Title: "10",
Type: "single",
Year: 2019,
Artists: []string{ "mellodoot" },
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_10.webp",
Buylink: "https://arimelody.bandcamp.com/track/10",
Links: []AlbumLink{
{
Name: "spotify",
Url: "https://open.spotify.com/album/2x4gbACfDm99unaXpLXyj0",
},
{
Name: "apple music",
Url: "https://music.apple.com/ie/album/ten-single/1483193041",
},
{
Name: "soundcloud",
Url: "https://soundcloud.com/arimelody/ten",
},
{
Name: "youtube",
Url: "https://www.youtube.com/watch?v=C7WP5L2BK4U",
},
},
},
{
Id: "mad",
Title: "MAD",
Type: "single",
Year: 2018,
Artists: []string{ "mellodoot" },
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_MAD.webp",
Buylink: "https://arimelody.bandcamp.com/track/mad",
Links: []AlbumLink{
{
Name: "spotify",
Url: "https://open.spotify.com/album/59nFXw1WNoRhXou7lXqBZd",
},
{
Name: "apple music",
Url: "https://music.apple.com/ie/album/mad/1441233120",
},
{
Name: "soundcloud",
Url: "https://soundcloud.com/arimelody/mad",
},
{
Name: "youtube",
Url: "https://www.youtube.com/watch?v=OB-Pk6p6mfQ",
},
},
},
{
Id: "welcomingparty",
Title: "Welcoming Party",
Type: "album",
Year: 2018,
Artists: []string{ "mellodoot" },
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Welcoming_Party.webp",
Buylink: "https://arimelody.bandcamp.com/album/welcoming-party",
Links: []AlbumLink{
{
Name: "spotify",
Url: "https://open.spotify.com/album/3EPa4HZpkISQVRAks64LfR",
},
{
Name: "apple music",
Url: "https://music.apple.com/ie/album/welcoming-party-ep/1441161424",
},
{
Name: "soundcloud",
Url: "https://soundcloud.com/arimelody/sets/welcoming-party",
},
{
Name: "youtube",
Url: "https://www.youtube.com/playlist?list=PLBG_QJeOHrB5EeniiXBIlHpoQbD6CUJca",
},
},
// "tracks": [
// {
// "title": "Paradigm"
// },
// {
// "title": "Mitrio"
// },
// {
// "title": "Level One"
// },
// {
// "title": "Cubes"
// },
// {
// "title": "Aria"
// }
// ]
},
{
Id: "howtheyknow2018",
Title: "How They Know (2018)",
Type: "single",
Year: 2018,
Artists: []string{ "mellodoot" },
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know_2018.webp",
Buylink: "https://arimelody.bandcamp.com/track/how-they-know-2018-remastered",
Free: true,
Links: []AlbumLink{
{
Name: "soundcloud",
Url: "https://soundcloud.com/arimelody/how-they-know-2018",
},
{
Name: "youtube",
Url: "https://www.youtube.com/watch?v=mbAgSwCzyMw",
},
},
},
{
Id: "howtheyknow",
Title: "How They Know",
Type: "single",
Year: 2017,
Artists: []string{ "mellodoot" },
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know.webp",
Buylink: "https://arimelody.bandcamp.com/track/how-they-know",
Free: true,
Links: []AlbumLink{
{
Name: "soundcloud",
Url: "https://soundcloud.com/arimelody/how-they-know",
},
{
Name: "youtube",
Url: "https://www.youtube.com/watch?v=q6lzKuG1Emo",
},
},
},
{
Id: "traveller",
Title: "Traveller",
Type: "single",
Year: 2017,
Artists: []string{ "mellodoot" },
Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Traveller.webp",
Buylink: "https://arimelody.bandcamp.com/track/traveller",
Free: true,
Links: []AlbumLink{
{
Name: "soundcloud",
Url: "https://soundcloud.com/arimelody/traveller",
},
{
Name: "youtube",
Url: "https://www.youtube.com/watch?v=ZTO7IQZ-yXA",
},
},
Description: "an 8-bit expedition! ⚔️🛡️",
},
}
func GetAlbum(id string) (Album, bool) {
for _, album := range placeholders {
if album.Id == id {
return album, true
}
}
return Album{}, false
}
func QueryAll() ([]Album) {
return placeholders
}

View file

@ -0,0 +1,55 @@
package music
import (
"regexp"
"strings"
)
type (
Album struct {
Id string;
Title string;
Type string;
Year int;
Artists []string;
Artwork string;
Buyname string;
Buylink string;
Free bool;
Links []AlbumLink;
Description string;
}
AlbumLink struct {
Name string;
Url string;
}
)
func (album Album) PrintArtists() string {
if len(album.Artists) == 1 {
return album.Artists[0]
}
res := strings.Join(album.Artists[:len(album.Artists) - 1], ", ")
res += " & " + album.Artists[len(album.Artists) - 1]
return res
}
func (album Album) PrintCommaArtists() string {
if len(album.Artists) == 1 {
return album.Artists[0]
}
return strings.Join(album.Artists[:len(album.Artists)], ", ")
}
func (album Album) ResolveArtwork() string {
if album.Artwork != "" {
return album.Artwork
}
return "/img/music-artwork/default.png"
}
func (link AlbumLink) NormaliseName() string {
re := regexp.MustCompile(`[^a-z0-9]`)
return strings.ToLower(re.ReplaceAllString(link.Name, ""))
}

5
go.mod Normal file
View file

@ -0,0 +1,5 @@
module arimelody.me/arimelody.me
go 1.22.1
require github.com/gomarkdown/markdown v0.0.0-20231222211730-1d6d20845b47 // indirect

2
go.sum Normal file
View file

@ -0,0 +1,2 @@
github.com/gomarkdown/markdown v0.0.0-20231222211730-1d6d20845b47 h1:k4Tw0nt6lwro3Uin8eqoET7MDA4JnT8YgbCjc/g5E3k=
github.com/gomarkdown/markdown v0.0.0-20231222211730-1d6d20845b47/go.mod h1:JDGcbDT52eL4fju3sZ4TeHGsQwhG9nbDV21aMyhwPoA=

122
main.go Normal file
View file

@ -0,0 +1,122 @@
package main
import (
"arimelody.me/arimelody.me/api/v1/music"
"fmt"
"html/template"
"os"
"net/http"
"log"
"strings"
"github.com/gomarkdown/markdown"
"github.com/gomarkdown/markdown/html"
"github.com/gomarkdown/markdown/parser"
)
var mime_types = map[string]string{
"css": "text/css; charset=utf-8",
"png": "image/png",
"jpg": "image/jpg",
"webp": "image/webp",
"html": "text/html",
"asc": "text/plain",
"pub": "text/plain",
"js": "application/javascript",
}
var templates = template.Must(template.ParseFiles(
"views/header.html",
"views/footer.html",
"views/index.html",
"views/music.html",
"views/music-gateway.html",
))
func web_handler(writer http.ResponseWriter, req *http.Request) {
uri := req.URL.Path
fmt.Printf("%s %s (%s)\n", req.Method, req.URL.Path, req.Header["User-Agent"][0])
if req.URL.Path == "/" {
index_handler(writer, req)
return
}
if uri == "/music" {
music_handler(writer, req)
return
}
if strings.HasPrefix(uri, "/music/") {
music_gateway_handler(writer, req)
return
}
static_handler(writer, req)
}
func index_handler(writer http.ResponseWriter, req *http.Request) {
err := templates.ExecuteTemplate(writer, "index.html", nil)
if err != nil {
http.Error(writer, err.Error(), http.StatusInternalServerError)
}
}
func music_handler(writer http.ResponseWriter, req *http.Request) {
err := templates.ExecuteTemplate(writer, "music.html", music.QueryAll())
if err != nil {
http.Error(writer, err.Error(), http.StatusInternalServerError)
}
}
func music_gateway_handler(writer http.ResponseWriter, req *http.Request) {
if len(req.URL.Path) <= len("/music/") {
http.Error(writer, "400 bad request", http.StatusBadRequest)
return
}
id := req.URL.Path[len("/music/"):]
// http.Redirect(writer, req, "https://mellodoot.com/music/"+title, 302)
// return
album, ok := music.GetAlbum(id)
if !ok {
http.Error(writer, "404 not found", http.StatusNotFound)
return
}
err := templates.ExecuteTemplate(writer, "music-gateway.html", album)
if err != nil {
http.Error(writer, err.Error(), http.StatusInternalServerError)
}
}
func static_handler(writer http.ResponseWriter, req *http.Request) {
filename := "public/" + req.URL.Path[1:]
body, err := os.ReadFile(filename)
if err != nil {
http.Error(writer, "404 not found", http.StatusNotFound)
return
}
filetype := filename[strings.LastIndex(filename, ".") + 1:]
if mime_type, ok := mime_types[filetype]; ok {
writer.Header().Set("Content-Type", mime_type)
} else {
writer.Header().Set("Content-Type", "text/plain; charset=utf-8")
}
writer.Write([]byte(body))
}
func parse_markdown(md []byte) []byte {
extensions := parser.CommonExtensions | parser.AutoHeadingIDs | parser.NoEmptyLineBeforeBlock
p := parser.NewWithExtensions(extensions)
doc := p.Parse(md)
htmlFlags := html.CommonFlags
opts := html.RendererOptions{ Flags: htmlFlags }
renderer := html.NewRenderer(opts)
return markdown.Render(doc, renderer)
}
func main() {
http.HandleFunc("/", web_handler)
log.Fatal(http.ListenAndServe(":8080", nil))
}

View file

@ -0,0 +1 @@
GitHub Next <next@github.com>

View file

@ -0,0 +1,74 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
nationality, personal appearance, race, religion, or sexual identity and
orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at opensource@github.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at [https://contributor-covenant.org/version/1/4][version]
[homepage]: https://contributor-covenant.org
[version]: https://contributor-covenant.org/version/1/4/

View file

@ -0,0 +1,6 @@
Riley Cran <riley@lettermatic.com>
Heather Cran Arrow <heather@lettermatic.com>
Danelle Cheney <danelle@lettermatic.com>
Idan Gazit <idan@github.com>
Cole Bemis <colebemis@github.com>
Amelia Wattenberger <wattenberger@github.com>

View file

@ -0,0 +1,93 @@
Copyright (c) 2023, GitHub https://github.com/githubnext/monaspace
with Reserved Font Name "Monaspace", including subfamilies: "Argon", "Neon", "Xenon", "Radon", and "Krypton"
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting — in part or in whole — any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/img/buttons/mae.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 999 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
public/img/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

1
public/img/mailicon.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

View file

@ -0,0 +1,13 @@
-----BEGIN PGP PUBLIC KEY BLOCK-----
mDMEZNW03RYJKwYBBAHaRw8BAQdAuMUNVjXT7m/YisePPnSYY6lc1Xmm3oS79ZEO
JriRCZy0HWFyaSBtZWxvZHkgPGFyaUBhcmltZWxvZHkubWU+iJMEExYKADsWIQTu
jeuNYocuegkeKt/PmYKckmeBiAUCZNW03QIbAwULCQgHAgIiAgYVCgkICwIEFgID
AQIeBwIXgAAKCRDPmYKckmeBiGCbAP4wTcLCU5ZlfSTJrFtGhQKWA6DxtUO7Cegk
Vu8SgkY3KgEA1/YqjZ1vSaqPDN4137vmhkhfduoYOjN0iptNj39u2wG4OARk1bTd
EgorBgEEAZdVAQUBAQdAnA2drPzQBoXNdwIrFnovuF0CjX+8+8QSugCF4a5ZEXED
AQgHiHgEGBYKACAWIQTujeuNYocuegkeKt/PmYKckmeBiAUCZNW03QIbDAAKCRDP
mYKckmeBiC/xAQD1hu4WcstR40lkUxMqhZ44wmizrDA+eGCdh7Ge3Gy79wEAx385
GnYoNplMTA4BTGs7orV4WSfSkoBx0+px1UOewgs=
=M1Bp
-----END PGP PUBLIC KEY BLOCK-----

View file

@ -0,0 +1 @@
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIBHkNL8tYKlEDX0eAQB9rD1GZ3jYzRXZfKmCEFuYJ9jP ari@aria

313
public/music.json Normal file
View file

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

14
public/robots.txt Normal file
View file

@ -0,0 +1,14 @@
User-agent: *
Disallow: /nobot/
Disallow: /private/
User-agent: GPTBot
Disallow: /
User-agent: ChatGPT-User
Disallow: /
User-agent: Google-Extended
Disallow: /
User-agent: CCBot
Disallow: /

View file

@ -0,0 +1,44 @@
const accessibility = JSON.parse(localStorage.getItem("accessibility")) || {};
function toggle_accessibility_setting(name) {
if (accessibility[name]) {
delete accessibility[name];
update_accessibility();
return true;
}
accessibility[name] = true;
update_accessibility();
return true;
}
function set_accessibility_setting(name, value) {
accessibility[name] = value;
update_accessibility();
return true;
}
function clear_accessibility_setting(name) {
if (!accessibility[name]) return false;
delete accessibility[name];
update_accessibility();
return true;
}
function update_accessibility() {
localStorage.setItem("accessibility", JSON.stringify(accessibility));
}
if (accessibility) {
if (accessibility.disable_crt) {
document.querySelector('div#overlay').setAttribute("hidden", true);
document.body.style.textShadow = "none";
document.getElementById('toggle-crt').classList.add("disabled");
}
}
document.getElementById("toggle-crt").addEventListener("click", () => {
toggle_accessibility_setting("disable_crt");
document.querySelector('div#overlay').toggleAttribute("hidden");
document.getElementById('toggle-crt').className = accessibility.disable_crt ? "disabled" : "";
});

66
public/script/main.js Normal file
View file

@ -0,0 +1,66 @@
const header_links = document.getElementById("header-links");
const hamburger = document.getElementById("header-links-toggle");
function type_out(e) {
const text = e.innerText;
const original = e.innerHTML;
e.innerText = "";
const delay = 25;
let chars = 0;
function insert_char(character, parent) {
const c = document.createElement("span");
c.innerText = character;
parent.appendChild(c);
c.classList.add("newchar");
}
function normalize() {
e.innerHTML = original;
}
function increment_char() {
const newchar = text.substring(chars - 1, chars);
insert_char(newchar, e);
chars++;
if (chars <= text.length) {
setTimeout(increment_char, delay);
} else {
setTimeout(normalize, 250);
}
}
increment_char();
}
function fill_list(list) {
const items = list.querySelectorAll("li a, li span");
items.innerText = "";
const delay = 100;
items.forEach((item, iter) => {
item.style.animationDelay = `${iter * delay}ms`;
item.style.animationPlayState = "playing";
});
}
[...document.querySelectorAll("h1, h2, h3, h4, h5, h6")]
.filter((e) => e.innerText != "")
.forEach((e) => {
type_out(e);
});
[...document.querySelectorAll("ol, ul")]
.filter((e) => e.innerText != "")
.forEach((e) => {
fill_list(e);
});
function toggle_header_links() {
header_links.classList.toggle("open");
}
document.addEventListener("click", event => {
if (!header_links.contains(event.target) && !hamburger.contains(event.target)) {
header_links.classList.remove("open");
}
});

View file

@ -0,0 +1,67 @@
const bg = document.getElementById("background");
bg.style.backgroundImage = `url(${bg.dataset.url})`;
bg.removeAttribute("data-url");
const share_btn = document.getElementById("share");
share_btn.onclick = (e) => {
navigator.clipboard.writeText(window.location.href);
share_btn.classList.remove('active');
void share_btn.offsetWidth;
share_btn.classList.add('active');
}
document.getElementById("go-back").addEventListener("click", () => {
window.history.back();
});
apply_funny_bob_to_upcoming_tags();
function apply_funny_bob_to_upcoming_tags() {
upcomingTags = document.querySelectorAll("#type.upcoming");
for (var i = 0; i < upcomingTags.length; i++) {
const tag = upcomingTags[i];
chars = tag.innerText.split("");
result = chars.map((c, i) => `<span style="animation-delay: -${i * 100}ms;">${c}</span>`);
tag.innerHTML = result.join("");
}
}
const previews = document.querySelectorAll("[id^=preview-]");
for (const preview of previews) {
preview.addEventListener("click", (e) => {
if (e.target.classList.contains('playing')) {
stopPreview(e.target);
} else {
playPreview(e.target);
}
});
preview.querySelector('audio').addEventListener("ended", () => { stopPreview(preview); });
}
var stupidsounds = false;
function stopPreviews() {
for (const preview of previews) stopPreview(preview);
}
function playPreview(preview) {
if (!stupidsounds) stopPreviews();
const btn = preview.querySelector('i');
btn.classList.remove("play", "fa-play");
btn.classList.add("pause", "fa-pause");
const audio = preview.querySelector('audio');
audio.play();
preview.classList.add('playing');
}
function stopPreview(preview) {
const btn = preview.querySelector('i');
btn.classList.remove("pause", "fa-pause");
btn.classList.add("play", "fa-play");
const audio = preview.querySelector('audio');
audio.pause();
audio.currentTime = 0;
preview.classList.remove('playing');
}
stopPreviews();

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

@ -0,0 +1,15 @@
document.querySelectorAll("h2.question").forEach(element => {
element.onclick = (e) => {
const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}#${e.target.id}`;
window.location = url;
};
});
document.querySelectorAll("div.music").forEach(element => {
console.log(element);
element.addEventListener("click", (e) => {
const url = `${window.location.protocol}//${window.location.host}/music/${element.id}`;
window.location = url;
});
});

View file

@ -0,0 +1,66 @@
/**
* 🏳🌈🏳💖 pride flag 💖🏳🏳🌈
* made with by ari melody, 2023
*
* web: https://arimelody.me
* source: https://github.com/mellodoot/prideflag
*/
const pride_flag_svg =
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
<path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
<path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
<path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
<path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
<path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
<path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
<rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
<rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
<rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
<rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
<rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
<rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
<circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
</svg>`;
const pride_flag_css =
`#pride-flag svg {
position: fixed;
top: 0;
right: 0;
width: 120px;
transform-origin: 100% 0%;
transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
z-index: 8008135;
pointer-events: none;
}
#pride-flag svg:hover {
transform: scale(110%);
}
#pride-flag svg:active {
transform: scale(110%);
}
#pride-flag svg * {
pointer-events: all;
}`;
function create_pride_flag() {
const container = document.createElement("a");
container.id = "pride-flag";
container.href = "https://github.com/mellodoot/prideflag";
container.target = "_blank";
container.innerHTML = pride_flag_svg;
return container;
}
function load_pride_flag_style() {
const pride_stylesheet = document.createElement('style');
pride_stylesheet.textContent = pride_flag_css;
document.head.appendChild(pride_stylesheet);
}
load_pride_flag_style();
pride_flag = create_pride_flag();
document.body.appendChild(pride_flag);

448
public/style/main.css Normal file
View file

@ -0,0 +1,448 @@
@font-face {
font-family: "Monaspace Argon";
src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
font-weight: 125 950;
font-stretch: 75% 125%;
font-style: oblique 0deg 20deg;
}
:root {
--primary: #b7fd49;
--secondary: #f8e05b;
--tertiary: #f788fe;
--links: #5eb2ff;
}
.col-primary {
color: var(--primary);
}
.col-secondary {
color: var(--secondary);
}
.col-tertiary {
color: var(--tertiary);
}
body {
margin: 0;
padding: 0;
background: #080808;
color: #eee;
font-family: "Monaspace Argon", monospace;
font-size: 18px;
text-shadow: 0 0 3em;
scroll-behavior: smooth;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100vw;
border-bottom: 1px solid #888;
background-color: #080808;
z-index: 1;
}
nav {
width: min(calc(100% - 4rem), 720px);
height: 3em;
margin: auto;
padding: 0 1em;
display: flex;
flex-direction: row;
gap: .8em;
align-items: center;
}
img#header-icon {
width: 2em;
height: 2em;
margin: .5em;
display: block;
}
#header-text {
width: 11em;
margin-left: -0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
}
#header-text h1 {
margin: 0;
font-size: 1em;
}
#header-text h2 {
height: 1.2em;
line-height: 1.2em;
margin: 0;
font-size: .7em;
color: #bbb;
}
#header-links-toggle {
width: 3em;
height: 3em;
display: none;
justify-content: center;
align-items: center;
transition: background-color .2s;
}
#header-links-toggle:hover {
background-color: #fff2;
}
header ul#header-links {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
gap: .5em;
align-items: center;
}
header ul li {
list-style: none;
}
header ul li a,
header ul li span {
padding: .2em .5em;
border: 1px solid var(--links);
color: var(--links);
border-radius: 2px;
background-color: transparent;
transition-property: color, border-color, background-color;
transition-duration: .2s;
animation-delay: 0s;
animation: list-item-fadein .2s forwards;
opacity: 0;
}
header ul li span {
color: #aaa;
border-color: #aaa;
cursor: default;
text-decoration: none;
}
header ul li a:hover {
color: #eee;
border-color: #eee;
background-color: var(--links) !important;
text-decoration: none;
}
#toggle-crt a {
color: var(--primary);
border-color: var(--primary);
opacity: 1;
}
#toggle-crt a:hover {
color: #111;
background-color: var(--primary) !important;
}
#toggle-crt.disabled a {
opacity: .5 !important;
}
main {
width: min(calc(100% - 4rem), 720px);
min-height: calc(100vh - 10.3rem);
margin: 5rem auto 2rem auto;
}
main h1 {
line-height: 3rem;
color: var(--primary);
}
main h2 {
color: var(--secondary);
}
main h3 {
color: var(--tertiary);
}
a {
color: var(--links);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
small {
font-size: 1em;
color: #aaa;
}
span.newchar {
animation: newchar 0.25s;
}
@keyframes newchar {
from {
background: #fff8;
}
}
span.hide {
display: none;
}
h1:hover span.hide {
display: initial;
opacity: 0.1;
}
div#me_irl {
width: fit-content;
height: fit-content;
border: 2px solid white;
}
div#me_irl img {
display: block;
}
div#me_irl::before {
content: "";
position: absolute;
width: 104px;
height: 104px;
transform: translate(2px, 2px);
background-image: linear-gradient(to top right,
var(--primary),
var(--secondary));
z-index: -1;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
blockquote {
transition: background-color 0.1s;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
text-decoration: none;
}
main h1:hover,
main h2:hover,
main h3:hover,
main h4:hover,
main h5:hover,
main h6:hover,
main p:hover,
main small:hover,
main blockquote:hover {
background-color: #fff1;
}
blockquote {
margin: 1rem 0;
padding: 0 2.5rem;
}
hr {
text-align: center;
line-height: 0px;
border-width: 1px 0 0 0;
border-color: #888f;
margin: 1.5em 0;
overflow: visible;
}
ul.links {
display: flex;
gap: 1em .5em;
flex-wrap: wrap;
}
ul.links li {
list-style: none;
}
ul.links li a {
padding: .2em .5em;
border: 1px solid var(--links);
color: var(--links);
border-radius: 2px;
background-color: transparent;
transition-property: color, border-color, background-color;
transition-duration: .2s;
animation-delay: 0s;
animation: list-item-fadein .2s forwards;
opacity: 0;
}
ul.links li a:hover {
color: #eee;
border-color: #eee;
background-color: var(--links) !important;
text-decoration: none;
box-shadow: 0 0 1em var(--links);
}
@keyframes list-item-fadein {
from {
opacity: 1;
background: #fff8;
}
to {
opacity: 1;
background: transparent;
}
}
div#web-buttons {
margin: 2rem 0;
}
#web-buttons a {
text-decoration: none;
}
#web-buttons img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
#web-buttons img:hover {
margin: -1px;
border: 1px solid #eee;
transform: translate(-2px, -2px);
box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
}
footer {
border-top: 1px solid #888;
}
#footer {
width: min(calc(100% - 4rem), 720px);
margin: auto;
padding: 2rem 0;
color: #aaa;
}
@keyframes overlay-flicker {
from {
opacity: .5;
}
to {
opacity: .6;
}
}
@keyframes overlay-scroll {
from {
background-position-y: 0;
}
to {
background-position-y: .2em;
}
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0,0,0,0) 85%);
background-size: 100vw .2em;
background-repeat: repeat;
opacity: .5;
pointer-events: none;
/* animation: linear .05s infinite alternate overlay-flicker; */
mix-blend-mode: overlay;
}
@media screen and (max-width: 780px) {
body {
font-size: 14px;
}
nav {
width: calc(100vw - 2rem);
margin: 0;
}
div#header-text {
flex-grow: 1;
}
a#header-links-toggle {
display: flex;
}
header ul#header-links {
position: fixed;
left: 0;
top: 2.7rem;
width: calc(100vw - 2rem);
padding: 1rem;
flex-direction: column;
gap: 1rem;
border-bottom: 1px solid #888;
background: #080808;
display: none;
}
header ul#header-links.open {
display: flex;
}
ul#header-links li {
width: 100%;
}
ul#header-links li a,
ul#header-links li span {
margin: 0;
display: block;
font-size: 1rem;
text-align: center;
}
main {
margin-top: 4rem;
}
}

View file

@ -0,0 +1,550 @@
@font-face {
font-family: "Monaspace Argon";
src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
font-weight: 125 950;
font-stretch: 75% 125%;
font-style: oblique 0deg 20deg;
}
html,
body {
margin: 0;
padding: 0;
color: #fff;
background-color: #111;
font-family: "Monaspace Argon", monospace;
}
#background {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
filter: blur(25px) saturate(25%) brightness(0.5);
-webkit-filter: blur(25px) saturate(25%) brightness(0.5);;
animation: background-init .5s forwards,background-loop 30s ease-in-out infinite
}
#go-back {
position: absolute;
top: 1rem;
left: 1rem;
width: 2.5rem;
height: 2.5rem;
margin: 0;
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: #fff1;
border-radius: 4px;
text-decoration: none;
box-shadow: 0 0 8px #0004;
z-index: 100
}
main {
display: flex;
min-height: calc(100vh - 6rem);
justify-content: center;
align-items: center
}
#music-container {
position: absolute;
width: min(960px, calc(100vw - 4rem));
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 4rem;
animation: card-init .5s forwards
}
#art-container {
display: flex;
align-items: center;
position: relative;
width: 20rem;
transition: transform .5s cubic-bezier(0,0,0,1);
}
#art-container:hover {
transform: scale(1.05) translateY(-5px);
}
#art-container:hover img#artwork {
box-shadow: 0 16px 18px #0003;
}
/* TILT CONTROLS */
#art-container > div {
position: absolute;
width: 33.3%;
height: 33.3%;
z-index: 2;
}
#art-container > div.tilt-topleft {
top: 0;
left: 0;
}
#art-container > div.tilt-topleft:hover ~ #artwork {
transform: rotate3d(-1, 1, 0, 20deg);
filter: brightness(var(--shine));
-webkit-filter: brightness(var(--shine));
}
#art-container > div.tilt-top {
top: 0;
left: 33.3%;
}
#art-container > div.tilt-top:hover ~ #artwork {
transform: rotate3d(-1, 0, 0, 20deg);
filter: brightness(var(--shine));
-webkit-filter: brightness(var(--shine));
}
#art-container > div.tilt-topright {
top: 0;
right: 0;
}
#art-container > div.tilt-topright:hover ~ #artwork {
transform: rotate3d(-1, -1, 0, 20deg);
filter: brightness(var(--shine));
-webkit-filter: brightness(var(--shine));
}
#art-container > div.tilt-right {
top: 33.3%;
right: 0;
}
#art-container > div.tilt-right:hover ~ #artwork {
transform: rotate3d(0, -1, 0, 20deg);
}
#art-container > div.tilt-bottomright {
bottom: 0;
right: 0;
}
#art-container > div.tilt-bottomright:hover ~ #artwork {
transform: rotate3d(1, -1, 0, 20deg);
filter: brightness(var(--shadow));
-webkit-filter: brightness(var(--shadow));
}
#art-container > div.tilt-bottom {
bottom: 0;
left: 33.3%;
}
#art-container > div.tilt-bottom:hover ~ #artwork {
transform: rotate3d(1, 0, 0, 20deg);
filter: brightness(var(--shadow));
-webkit-filter: brightness(var(--shadow));
}
#art-container > div.tilt-bottomleft {
bottom: 0;
left: 0;
}
#art-container > div.tilt-bottomleft:hover ~ #artwork {
transform: rotate3d(1, 1, 0, 20deg);
filter: brightness(var(--shadow));
-webkit-filter: brightness(var(--shadow));
}
#art-container > div.tilt-left {
top: 33.3%;
left: 0;
}
#art-container > div.tilt-left:hover ~ #artwork {
transform: rotate3d(0, 1, 0, 20deg);
}
/* TILT CONTROLS */
#artwork {
--shine: 1.05;
--shadow: 0.8;
width: 100%;
max-width: 512px;
margin: auto;
display: flex;
justify-content: center;
line-height: 15rem;
border-radius: 4px;
color: #888;
background-color: #ccc;
box-shadow: 0 16px 16px #0004;
transition: transform 1s cubic-bezier(0,0,0,1), filter .3s linear, box-shadow .3s linear;
}
div#vertical-line {
width: 1px;
background-color: #fff4;
box-shadow: 0 0 16px #000;
}
#title {
margin: 0;
line-height: 1em;
font-size: 3em;
}
#year {
margin-left: .9em;
font-size: .5em;
color: #eee
}
#artist {
margin: .2em 0 1em 0;
font-size: 1em;
color: #eee
}
#title,
#artist {
text-shadow: 0 .05em 2px #0004
}
#type {
display: inline-block;
margin: 0;
padding: .3em .8em;
color: #fff;
background-color: #111;
text-transform: uppercase;
border-radius: 4px
}
#type.single {
background-color: #3b47f4
}
#type.ep {
background-color: #f419bd
}
#type.album {
background-color: #34c627
}
#type.comp {
background-color: #ee8d46
}
#type.upcoming {
background-color: #ff3e3e
}
#type.upcoming span {
animation: bob 2s ease-in-out infinite;
display: inline-block;
}
#links {
margin: 1rem 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: .5rem
}
#links a {
padding: .5em .8em;
border-radius: 4px;
flex-grow: 1;
font-size: 1em;
color: #111;
background-color: #fff;
text-align: center;
text-decoration: none;
transition: filter .1s,-webkit-filter .1s
}
#links a.buy {
background-color: #ff94e9
}
#links a.presave {
background-color: #ff94e9
}
#links a.spotify {
background-color: #8cff83
}
#links a.applemusic {
background-color: #8cd9ff
}
#links a.soundcloud {
background-color: #fdaa6d
}
#links a.youtube {
background-color: #ff6e6e
}
#links a:hover {
filter: brightness(125%);
-webkit-filter: brightness(125%)
}
#description {
font-size: 1.2em;
}
#share {
margin: 0;
display: inline-block;
text-shadow: 0 .05em 2px #0004;
cursor: pointer;
opacity: .5;
transition: opacity .1s linear;
}
#share:hover {
opacity: 1;
}
#share.active {
animation: share-click .5s forwards
}
#share.active::after {
content: "✓";
font-size: 1.5em;
line-height: .75em;
position: absolute;
transform: translateX(.3em);
animation: share-after 2s cubic-bezier(.5,0,1,.5) forwards
}
#tracks {
flex-basis: 100%;
max-height: 10rem;
margin: auto 8rem;
display: flex;
flex-wrap: wrap;
gap: 0 2rem;
overflow-y: auto;
scrollbar-color: #fff transparent;
scrollbar-width: thin
}
#tracks .track-preview {
width: 100%;
height: 2.5rem;
display: flex;
flex-direction: row;
border-bottom: 1px solid #fff2;
border-radius: 4px;
user-select: none;
transition: background-color .2s,color .2s
}
#tracks .track-preview: last-of-type {
border-bottom: none
}
.track-preview:hover {
background-color: #0002
}
.track-preview.playing {
color: #111;
background-color: #fff
}
.track-preview i {
width: .7em;
margin: auto .8em;
pointer-events: none
}
.track-preview p {
margin: auto 0;
display: inline-block;
line-height: 2em;
font-size: 1em;
pointer-events: none
}
.track-preview audio {
width: 100%
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100vw;
height: 6rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #eee;
background-color: #0008;
backdrop-filter: blur(25px)
}
footer p {
margin: 0
}
footer a {
color: inherit;
text-decoration: none
}
footer a:hover {
text-decoration: underline
}
@media only screen and (max-width: 800px) {
main {
min-height: calc(100vh - 4rem);
}
#music-container {
width: calc(100vw - 8rem);
height: fit-content;
gap: 1rem;
padding: 2rem 0;
flex-direction: column;
text-align: center
}
#art-container {
width: 100%;
margin-bottom: 2rem;
}
#artwork {
max-width: 40vh;
max-height: 40vh;
}
#vertical-line {
display: none;
}
#music-container #info {
width: 100%
}
#year {
display: block;
margin: -.5em 0 .5rem;
}
#links {
margin: 2rem 0;
justify-content: center;
}
#share.active: : after {
transform: translate(calc(-50% - .6em),1.5em);
}
#tracks {
margin: 0;
}
footer {
height: 4rem;
font-size: .8rem;
}
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0,0,0,0) 85%);
background-size: 100vw .2em;
background-repeat: repeat;
opacity: .5;
pointer-events: none;
/* animation: linear .05s infinite alternate overlay-flicker; */
mix-blend-mode: overlay;
}
@keyframes background-init {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes background-loop {
from {
transform: scale(1)
}
50% {
transform: scale(1.05)
}
to {
transform: scale(1)
}
}
@keyframes card-init {
from {
opacity: 0;
transform: scale(.9)
}
to {
opacity: 1;
transform: scale(1)
}
}
@keyframes share-click {
from {
color: #5dfc01
}
to {
color: #eee
}
}
@keyframes share-after {
from {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes bob {
from,
to {
transform: translateY(-10%);
}
50% {
transform: translateY(10%);
}
}

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

@ -0,0 +1,134 @@
div.music {
margin-bottom: 1rem;
padding: 1.5rem;
display: flex;
flex-direction: row;
gap: 1.5em;
border: 1px solid #222;
border-radius: 4px;
background-color: #ffffff08;
transition: background-color .1s;
text-decoration: none;
cursor: pointer;
}
div.music:hover {
background-color: #fff1;
}
div.music a {
text-decoration: none;
}
.music h1:hover,
.music h2:hover,
.music h3:hover {
background: initial;
}
.music-artwork img {
border: 1px solid #888;
}
.music-title {
margin: 0;
color: #eee;
font-size: 1.6em;
line-height: 1.6em;
}
.music-year {
color: #888;
}
.music-artist {
margin: -.5rem 0 0 0;
font-size: 1em;
color: #aaa;
}
h3[class^=music-type] {
margin: 0 0 1rem 0;
font-size: .8em;
color: #eee;
}
h3.music-type-single {
color: var(--tertiary);
}
h3.music-type-compilation {
color: var(--secondary);
}
h3.music-type-album {
color: var(--primary);
}
h3.music-type-upcoming {
color: #f47070;
}
.music-links {
width: fit-content;
margin: .5em 0;
padding: 0;
display: flex;
gap: .5rem;
flex-wrap: wrap;
line-height: 1.7em;
justify-content: center;
}
.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: var(--links) !important;
text-decoration: none;
}
h2.question {
margin: 1rem 0;
padding: 1rem 1.5rem;
border-radius: 4px;
cursor: pointer;
}
.collapse {
margin: -1rem 0 1rem 0;
padding: .5em 1.5em;
border-radius: 4px;
}
@media screen and (max-width: 740px) {
div.music {
flex-direction: column;
}
.music-artwork,
.music-details {
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
}
}

9
views/footer.html Normal file
View file

@ -0,0 +1,9 @@
{{define "footer"}}
<footer>
<div id="footer">
<small><em>*made with ♥ by ari, 2024*</em></small>
</div>
</footer>
{{end}}

42
views/header.html Normal file
View file

@ -0,0 +1,42 @@
{{define "header"}}
<header>
<nav>
<img src="img/favicon.png" id="header-icon" width="100" height="100" alt="">
<div id="header-text">
<h1>ari melody</h1>
<h2>your local SPACEGIRL 💫</h2>
</div>
<a id="header-links-toggle" onclick="toggle_header_links()">
<svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<rect y="00" width="70" height="10" rx="5" fill="#eee" />
<rect y="20" width="70" height="10" rx="5" fill="#eee" />
<rect y="40" width="70" height="10" rx="5" fill="#eee" />
</svg>
</a>
<ul id="header-links">
<li>
<a href="/">home</a>
</li>
<li>
<a href="/music">music</a>
</li>
<li>
<a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
</li>
<li>
<!-- coming later! -->
<span title="coming later!">blog</span>
</li>
<li>
<!-- coming later! -->
<span title="coming later!">art</span>
</li>
<li id="toggle-crt">
<a href="javascript:void(0)">crt</a>
</li>
</ul>
</nav>
</header>
{{end}}

196
views/index.html Normal file
View file

@ -0,0 +1,196 @@
<!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>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 src="/script/main.js" defer></script>
<script src="/script/accessibility.js" defer></script>
<link rel="me" href="https://wetdry.world/@ari">
</head>
<body>
{{block "header" .}}{{end}}
<main>
<h1>
# hello, world!
</h1>
<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>
<hr>
<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 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>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>
<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>
<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>

121
views/music-gateway.html Normal file
View file

@ -0,0 +1,121 @@
<!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>{{.PrintArtists}} - {{.Title}}</title>
<link rel="icon" href="{{.ResolveArtwork}}">
<meta name="description" content="Stream &quot;{{.Title}}&quot; by {{.PrintArtists}} on all platforms!">
<meta name="author" content="{{.PrintArtists}}">
<meta name="keywords" content="{{.PrintCommaArtists}}, music, {{.Title}}, {{.Id}}, {{.Year}}">
<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="{{.PrintArtists}} - {{.Title}}">
<meta property="og:description" content="Stream &quot;{{.Title}}&quot; by {{.PrintArtists}} 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="{{.PrintArtists}} - {{.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="text/javascript" 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>
<a id="go-back" title="back to arimelody.me" href="/music">&lt;</a>
<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">
</div>
<div id="vertical-line"></div>
<div id="info">
<h1 id="title">{{.Title}}<span id="year">{{.Year}}</span></h1>
<p id="artist">{{.PrintArtists}}</p>
<p id="type" class="{{.Type}}">{{.Type}}</p>
<div id="links">
{{if .Buylink}}
<a href="{{.Buylink}}" target="_blank" class="buy">
{{if .Buyname}}
{{.Buyname}}
{{else}}
{{if .Free}}
download
{{else}}
buy
{{end}}
{{end}}</a>
{{end}}
{{range .Links}}
<a class="{{.NormaliseName}}" target="_blank" href="{{.Url}}">
{{.Name}}
</a>
{{end}}
</div>
<p id="description">
{{.Description}}
</p>
<p id="share">share</p>
</div>
<!-- <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>
<footer>
<p>made with &#10084; by <a href="/" target="_blank">ari melody</a>, 2024</p>
</footer>
</body>
</html>

145
views/music.html Normal file
View file

@ -0,0 +1,145 @@
<!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 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 💫">
<link rel="stylesheet" href="/style/main.css">
<link rel="stylesheet" href="/style/music.css">
<script src="/script/main.js" defer></script>
<script src="/script/accessibility.js" defer></script>
<script src="/script/music.js" defer></script>
</head>
<body>
<header>
<nav>
<img src="/img/favicon.png" id="header-icon" width="100" height="100" alt="">
<div id="header-text">
<h1>ari melody</h1>
<h2>your local SPACEGIRL 💫</h2>
</div>
<a id="header-links-toggle" onclick="toggle_header_links()">
<svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<rect y="00" width="70" height="10" rx="5" fill="#eee" />
<rect y="20" width="70" height="10" rx="5" fill="#eee" />
<rect y="40" width="70" height="10" rx="5" fill="#eee" />
</svg>
</a>
<ul id="header-links">
<li>
<a href="/">home</a>
</li>
<li>
<a href="/music">music</a>
</li>
<li>
<a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
</li>
<li>
<!-- coming later! -->
<span title="coming later!">blog</span>
</li>
<li>
<!-- coming later! -->
<span title="coming later!">art</span>
</li>
<li id="toggle-crt">
<a href="javascript:void(0)">crt</a>
</li>
</ul>
</nav>
</header>
<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.PrintArtists}}</h2>
<h3 class="music-type-{{.Type}}">{{$Album.Type}}</h3>
<ul class="music-links">
{{range $Link := $Album.Links}}
<li>
<a href="{{$Link.Url}}">{{$Link.Name}}</a>
</li>
{{end}}
</ul>
</div>
</div>
{{end}}
</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>
</main>
<footer>
<div id="footer">
<small><em>*made with ♥ by ari, 2024*</em></small>
</div>
</footer>
<div id="overlay"></div>
</body>
</html>