embed html template and static files
This commit is contained in:
parent
b150fa491c
commit
e5dcc4b884
GPG key ID:
CF99829C92678188
44 changed files with 316 additions and 255 deletions
21
templates/html/404.html
Normal file
21
templates/html/404.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{{define "head"}}
|
||||
<title>404 - ari melody 💫</title>
|
||||
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/style/error.css">
|
||||
{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<main>
|
||||
<h1>
|
||||
# 404 - not found!
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
the page you're looking for does not exist.
|
||||
<br>
|
||||
if you like, you can head back <a href="/">home</a> or <a href="{{.Target}}">try again!</a>
|
||||
</p>
|
||||
|
||||
<p><small>status: ERR_NOT_FOUND</small></p>
|
||||
</main>
|
||||
{{end}}
|
||||
14
templates/html/footer.html
Normal file
14
templates/html/footer.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{{define "footer"}}
|
||||
|
||||
<footer>
|
||||
<div id="footer">
|
||||
<small>
|
||||
<em>
|
||||
*made with <span aria-label="love">♥</span> by ari, 2025*
|
||||
<a href="https://forge.arimelody.space/ari/arimelody-web" target="_blank">source</a>
|
||||
</em>
|
||||
</small>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{{end}}
|
||||
41
templates/html/header.html
Normal file
41
templates/html/header.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
{{define "header"}}
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<div id="header-home">
|
||||
<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>
|
||||
</div>
|
||||
<a id="header-links-toggle">
|
||||
<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="/" preload="mouseover">home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/music" preload="mouseover">music</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}}
|
||||
277
templates/html/index.html
Normal file
277
templates/html/index.html
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
{{define "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.space">
|
||||
<meta property="og:image" content="https://www.arimelody.space/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">
|
||||
<link rel="stylesheet" href="/style/index.css">
|
||||
|
||||
<link rel="me" href="https://fedi.arimelody.space/@ari">
|
||||
|
||||
<script type="module" src="/script/index.js" defer></script>
|
||||
{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<main>
|
||||
{{if .TwitchStatus}}
|
||||
<div id="live-banner">
|
||||
<div class="live-preview">
|
||||
<div>
|
||||
<img src="{{.TwitchStatus.Thumbnail 144 81}}" alt="livestream thumbnail" class="live-thumbnail">
|
||||
<a href="https://twitch.tv/{{.TwitchStatus.UserName}}" class="live-button">join in!</a>
|
||||
</div>
|
||||
<div class="live-info">
|
||||
<h2>ari melody <span class="live-highlight">LIVE</span> <i class="live-pinger"></i></h2>
|
||||
<p class="live-game"><span class="live-game-prefix">streaming:</span> {{.TwitchStatus.GameName}}</p>
|
||||
<p class="live-title">{{.TwitchStatus.Title}}</p>
|
||||
<p class="live-viewers">{{.TwitchStatus.ViewerCount}} viewers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<h1 class="typeout">
|
||||
# hello, world!
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<strong>i'm ari!</strong>
|
||||
<br>
|
||||
<small>she/her 🏳️⚧️🏳️🌈💫🦆🇮🇪</small>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
i'm a <a href="/music">musician</a>, <a href="https://codeberg.org/arimelody?tab=repositories">developer</a>,
|
||||
<a href="https://twitch.tv/arispacegirl">streamer</a>, <a href="https://youtube.com/@arispacegirl">youtuber</a>,
|
||||
and probably a bunch of other things i forgot to mention!
|
||||
</p>
|
||||
<p>
|
||||
you're very welcome to take a look around my little space on the internet here,
|
||||
or explore any of the other parts i inhabit!
|
||||
</p>
|
||||
<p>
|
||||
if you're looking to support me financially, that's so cool of you!!
|
||||
if you like, you can buy some of my music over on
|
||||
<a href="https://arimelody.bandcamp.com">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.space">ari@arimelody.space</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 class="typeout">
|
||||
## metadata
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
<strong>my colours 🌈</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>primary: <span class="col-primary" id="hex-primary">#b7fd49</span></li>
|
||||
<li>secondary: <span class="col-secondary" id="hex-secondary">#f8e05b</span></li>
|
||||
<li>tertiary: <span class="col-tertiary" id="hex-tertiary">#f788fe</span></li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<strong>my keys 🔑</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>pgp: <a href="/keys/ari@arimelody.space_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="platform-links">
|
||||
<li>
|
||||
<a href="https://youtube.com/@arispacegirl" title="youtube">
|
||||
<img src="/img/brand/youtube.svg" alt="youtube" width="32" height="32"/>
|
||||
youtube
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitch.tv/arispacegirl" title="twitch">
|
||||
<img src="/img/brand/twitch.svg" alt="twitch" width="32" height="32"/>
|
||||
twitch
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://arimelody.bandcamp.com" title="bandcamp">
|
||||
<img src="/img/brand/bandcamp.svg" alt="bandcamp" width="32" height="32"/>
|
||||
bandcamp
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://codeberg.org/arimelody" title="codeberg">
|
||||
<img src="/img/brand/codeberg.svg" alt="codeberg" width="32" height="32"/>
|
||||
codeberg
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/arimelody.space" title="bluesky">
|
||||
<img src="/img/brand/bluesky.svg" alt="bluesky" width="32" height="32"/>
|
||||
bluesky
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://arimelody.space/discord" title="discord">
|
||||
<img src="/img/brand/discord.svg" alt="discord" width="32" height="32"/>
|
||||
discord
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<strong>projects i've worked on 🛠️</strong>
|
||||
</p>
|
||||
<ul id="projects">
|
||||
<li class="project-item">
|
||||
<span aria-hidden=true class="project-icon">⛏️</span>
|
||||
<div class="project-info">
|
||||
<a href="https://mcq.bliss.town">McStatusFace</a>
|
||||
<p>minecraft server query utility</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="project-item">
|
||||
<img src="https://catdance.arimelody.space/img/favicon.png" alt="catdance icon" aria-hidden=true class="project-icon" width="64" height="64">
|
||||
<div class="project-info">
|
||||
<a href="https://catdance.arimelody.space">catdance</a>
|
||||
<p>watch the cat dance 🐱</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="project-item">
|
||||
<img src="https://forge.arimelody.space/repo-avatars/6b0a1ffb78cbc6f906f83152ea42a710220174e8f48a3e44f159ae58dacd7a2f" alt="pride flag icon" aria-hidden=true class="project-icon" width="64" height="64">
|
||||
<div class="project-info">
|
||||
<a href="https://forge.arimelody.space/ari/prideflag">pride flag</a>
|
||||
<p>progressive pride flag widget for websites</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="project-item">
|
||||
<span aria-hidden=true class="project-icon">👩💻</span>
|
||||
<div class="project-info">
|
||||
<a href="https://github.com/arimelody/ipaddrgen">ipaddrgen</a>
|
||||
<p>silly hackerman IP address generator</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="project-item">
|
||||
<img src="https://impact.arimelody.space/favicon.png" alt="impact meme icon" aria-hidden=true class="project-icon" width="64" height="64">
|
||||
<div class="project-info">
|
||||
<a href="https://impact.arimelody.space/">impact meme</a>
|
||||
<p>impact meme generator</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="project-item">
|
||||
<img src="https://codeberg.org/repo-avatars/e67303eeda4fa6d268948e71b7b0837357d8c519772701ffc36b84ae7975319f" alt="OpenTerminal icon" aria-hidden=true class="project-icon" width="64" height="64">
|
||||
<div class="project-info">
|
||||
<a href="https://term.arimelody.space/">OpenTerminal</a>
|
||||
<p>communal online text buffer</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="project-item">
|
||||
<span aria-hidden=true class="project-icon">📜</span>
|
||||
<div class="project-info">
|
||||
<a href="https://silver.bliss.town/">Silver.js</a>
|
||||
<p>lightweight reactive state library</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2 class="typeout">
|
||||
## cool critters
|
||||
</h2>
|
||||
|
||||
<div id="web-buttons">
|
||||
<a href="https://arimelody.space">
|
||||
<img src="/img/buttons/ari melody.gif" alt="ari melody web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://supitszaire.com">
|
||||
<img src="/img/buttons/zaire.gif" alt="zaire web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://mae.wtf">
|
||||
<img src="/img/buttons/mae.png" alt="vimae web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://girlthi.ng/~thermia/">
|
||||
<img src="/img/buttons/thermia.gif" alt="thermia web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://wangleline.com">
|
||||
<img src="/img/buttons/wangleline.png" alt="WangleLine button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://elke.cafe">
|
||||
<img src="/img/buttons/elke.gif" alt="elke web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://invoxiplaygames.uk/">
|
||||
<img src="/img/buttons/ipg.png" alt="InvoxiPlayGames web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://ioletsgo.gay">
|
||||
<img src="/img/buttons/ioletsgo.gif" alt="ioletsgo web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://notnite.com/">
|
||||
<img src="/img/buttons/notnite.png" alt="notnite web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://www.da.vidbuchanan.co.uk/">
|
||||
<img src="/img/buttons/retr0id_now.gif" alt="retr0id web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://aikoyori.xyz">
|
||||
<img src="/img/buttons/aikoyori.gif" alt="aikoyori web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://xenia.blahaj.land/">
|
||||
<img src="/img/buttons/xenia.png" alt="xenia web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://stardust.elysium.gay/">
|
||||
<img src="/img/buttons/stardust.png" alt="stardust web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://isabelroses.com/">
|
||||
<img src="/img/buttons/isabelroses.gif" alt="isabel roses web button" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://bubblegum.girlonthemoon.xyz/">
|
||||
<img src="/img/buttons/girlonthemoon.png" alt="sweet like bubblegum web button" width="88" height="31">
|
||||
</a>
|
||||
|
||||
<hr>
|
||||
|
||||
<img src="/img/buttons/misc/debian.gif" alt="powered by debian" width="88" height="31">
|
||||
<img src="/img/buttons/misc/girls4notepad.gif" alt="girls 4 notepad" width="88" height="31">
|
||||
<img src="/img/buttons/misc/gaywebring.gif" alt="this website is GAY" width="88" height="31">
|
||||
<img src="/img/buttons/misc/graphicdesign.gif" alt="graphic design is my passion" width="88" height="31">
|
||||
<img src="/img/buttons/misc/gplv3.gif" alt="GPLv3 free software" width="88" height="31">
|
||||
<img src="/img/buttons/misc/hl.gif" alt="half-life" width="88" height="31">
|
||||
<img src="/img/buttons/misc/h-free-anim.gif" alt="dis site is hentai FREE" width="88" height="31">
|
||||
<img src="/img/buttons/misc/sprunk.gif" alt="sprunk" width="88" height="31">
|
||||
<img src="/img/buttons/misc/tohell.gif" alt="go straight to hell" width="88" height="31">
|
||||
<img src="/img/buttons/misc/virusalert.gif" alt="virus alert! click here" onclick="alert('meow :3')" width="88" height="31">
|
||||
<a href="http://wiishopchannel.net/">
|
||||
<img src="/img/buttons/misc/wii.gif" alt="wii" width="88" height="31">
|
||||
</a>
|
||||
<img src="/img/buttons/misc/www2.gif" alt="www" width="88" height="31">
|
||||
<img src="/img/buttons/misc/iemandatory.gif" alt="get mandatory internet explorer" width="88" height="31">
|
||||
<img src="/img/buttons/misc/learn_html.gif" alt="HTML - learn it today!" width="88" height="31">
|
||||
<a href="https://smokepowered.com">
|
||||
<img src="/img/buttons/misc/smokepowered.gif" alt="high on SMOKE" width="88" height="31">
|
||||
</a>
|
||||
<a href="https://epicblazed.com">
|
||||
<img src="/img/buttons/misc/epicblazed.png" alt="epic blazed" width="88" height="31">
|
||||
</a>
|
||||
<img src="/img/buttons/misc/blink.gif" alt="closeup anime blink" width="88" height="31">
|
||||
</div>
|
||||
</main>
|
||||
{{end}}
|
||||
34
templates/html/layout.html
Normal file
34
templates/html/layout.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!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" .}}{{end}}
|
||||
|
||||
<script type="module", src="/script/main.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>
|
||||
{{template "prideflag"}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
179
templates/html/music-gateway.html
Normal file
179
templates/html/music-gateway.html
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
{{define "head"}}
|
||||
<title>{{.Title}} - {{.PrintArtists true true}}</title>
|
||||
<link rel="shortcut icon" href="{{.GetArtwork}}" type="image/x-icon">
|
||||
|
||||
<meta name="description" content="Stream "{{.Title}}" by {{.PrintArtists true true}} on all platforms!">
|
||||
<meta name="author" content="{{.PrintArtists true true}}">
|
||||
<meta name="keywords" content="{{.PrintArtists true false}}, music, {{.Title}}, {{.ID}}, {{.ReleaseDate.Year}}">
|
||||
|
||||
<meta property="og:url" content="https://arimelody.space/music/{{.ID}}">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:locale" content="en_IE">
|
||||
<meta property="og:site_name" content="ari melody 💫">
|
||||
<meta property="og:title" content="{{.PrintArtists true true}} - {{.Title}}">
|
||||
<meta property="og:description" content="Stream "{{.Title}}" by {{.PrintArtists true true}} on all platforms!">
|
||||
<meta property="og:image" content="https://arimelody.space{{.GetArtwork}}">
|
||||
|
||||
<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.space">
|
||||
<meta property="twitter:url" content="https://arimelody.space/music/{{.ID}}">
|
||||
<meta name="twitter:title" content="{{.PrintArtists true true}} - {{.Title}}">
|
||||
<meta name="twitter:description" content="Stream "{{.Title}}" by {{.PrintArtists true true}} on all platforms!">
|
||||
<meta name="twitter:image" content="https://arimelody.space{{.GetArtwork}}">
|
||||
<meta name="twitter:image:alt" content="Cover art for "{{.Title}}"">
|
||||
|
||||
<link rel="stylesheet" href="/style/main.css">
|
||||
<link rel="stylesheet" href="/style/music-gateway.css">
|
||||
{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<main >
|
||||
<script type="module" src="/script/music-gateway.js"></script>
|
||||
|
||||
<div id="background" style="background-image: url({{.GetArtwork}})"></div>
|
||||
|
||||
<a href="/music" id="go-back" title="back to arimelody.space"><</a>
|
||||
<br><br>
|
||||
|
||||
<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="{{.GetArtwork}}" 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}}">{{.ReleaseDate.Year}}</span>
|
||||
</div>
|
||||
<p id="artist">{{.PrintArtists true true}}</p>
|
||||
{{if .IsReleased}}
|
||||
<p id="type" class="{{.ReleaseType}}">{{.ReleaseType}}</p>
|
||||
{{else}}
|
||||
<p id="type" class="upcoming">upcoming</p>
|
||||
<p id="upcoming-release">Releases: {{.PrintReleaseDate}}</p>
|
||||
{{end}}
|
||||
|
||||
{{if .IsReleased}}
|
||||
{{if .Buylink}}
|
||||
<a href="{{.Buylink}}" id="buylink">{{or .Buyname "buy"}}</a>
|
||||
{{end}}
|
||||
<ul id="links">
|
||||
{{range .Links}}
|
||||
<li>
|
||||
<a class="{{.NormaliseName}}" href="{{.URL}}">{{.Name}}</a>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
|
||||
{{if .Description}}
|
||||
|
||||
<p id="description">{{.GetDescriptionHTML}}</p>
|
||||
|
||||
{{else if .IsSingle}}
|
||||
|
||||
{{$Track := index .Tracks 0}}
|
||||
{{if $Track.Description}}
|
||||
<p id="description">{{$Track.Description}}</p>
|
||||
{{end}}
|
||||
|
||||
{{end}}
|
||||
|
||||
{{if and .Copyright .CopyrightURL}}
|
||||
<p id="copyright">{{.Title}} © {{.ReleaseDate.Year}} by {{.PrintArtists true true}} is licensed under <a href="{{.CopyrightURL}}" target="_blank">{{.Copyright}}</a></p>
|
||||
{{end}}
|
||||
|
||||
<button id="share">share</button>
|
||||
</div>
|
||||
|
||||
{{if .IsReleased}}
|
||||
|
||||
{{if .Credits}}
|
||||
<div id="credits">
|
||||
<h2>CREDITS</h2>
|
||||
<ul>
|
||||
{{range .Credits}}
|
||||
{{$Artist := .Artist}}
|
||||
{{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 .IsSingle}}
|
||||
|
||||
{{$Track := index .Tracks 0}}
|
||||
{{if $Track.Lyrics}}
|
||||
<div id="lyrics">
|
||||
<p class="album-track-subheading">LYRICS</p>
|
||||
{{if $Track.Lyrics}}
|
||||
{{$Track.GetLyricsHTML}}
|
||||
{{else}}
|
||||
<span class="empty">No lyrics.</span>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{else if .Tracks}}
|
||||
<div id="tracks">
|
||||
<h2>TRACKS</h2>
|
||||
{{range $i, $track := .Tracks}}
|
||||
<details>
|
||||
<summary class="album-track-title">{{$track.Add $i 1}}. {{$track.Title}}</summary>
|
||||
|
||||
{{if $track.Description}}
|
||||
<p class="album-track-subheading">DESCRIPTION</p>
|
||||
{{$track.Description}}
|
||||
{{end}}
|
||||
|
||||
<p class="album-track-subheading">LYRICS</p>
|
||||
{{if $track.Lyrics}}
|
||||
{{$track.GetLyricsHTML}}
|
||||
{{else}}
|
||||
<span class="empty">No lyrics.</span>
|
||||
{{end}}
|
||||
</details>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
{{if .IsReleased}}
|
||||
<div id="extras">
|
||||
<ul>
|
||||
<li><a href="#overview">overview</a></li>
|
||||
{{if .Credits}}
|
||||
<li><a href="#credits">credits</a></li>
|
||||
{{end}}
|
||||
|
||||
{{if .IsSingle}}
|
||||
{{$Track := index .Tracks 0}}
|
||||
{{if $Track.Lyrics}}
|
||||
<li><a href="#lyrics">lyrics</a></li>
|
||||
{{end}}
|
||||
{{else if .Tracks}}
|
||||
<li><a href="#tracks">tracks</a></li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</main>
|
||||
{{end}}
|
||||
91
templates/html/music.html
Normal file
91
templates/html/music.html
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
{{define "head"}}
|
||||
<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.space/music">
|
||||
<meta property="og:image" content="https://www.arimelody.space/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/index.css">
|
||||
<link rel="stylesheet" href="/style/music.css">
|
||||
{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<main>
|
||||
<script type="module" src="/script/music.js"></script>
|
||||
|
||||
<h1 class="typeout">
|
||||
# my music
|
||||
</h1>
|
||||
|
||||
<div id="music-container">
|
||||
{{range $Release := .}}
|
||||
<div class="music" id="{{$Release.ID}}">
|
||||
<div class="music-artwork">
|
||||
<img src="{{$Release.GetArtwork}}" alt="{{$Release.Title}} artwork" width="128" loading="lazy">
|
||||
</div>
|
||||
<div class="music-details">
|
||||
<h1 class="music-title">
|
||||
<a href="/music/{{$Release.ID}}">
|
||||
{{$Release.Title}}
|
||||
</a>
|
||||
</h1>
|
||||
<h2 class="music-artist">{{$Release.PrintArtists true true}}</h2>
|
||||
<h3 class="music-type-{{$Release.ReleaseType}}">{{$Release.ReleaseType}}</h3>
|
||||
{{if $Release.IsReleased}}
|
||||
<ul class="music-links">
|
||||
{{range $Link := $Release.Links}}
|
||||
<li>
|
||||
<a href="{{$Link.URL}}" class="link-button">{{$Link.Name}}</a>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<h2 id="usage" class="question typeout">
|
||||
<a href="#usage">
|
||||
> "can i use your music in my content?"
|
||||
</a>
|
||||
</h2>
|
||||
<div class="answer">
|
||||
<p>
|
||||
<strong class="big">yes!*</strong> <em>in most cases...</em>
|
||||
</p>
|
||||
<p>
|
||||
all of my <em>self-released</em> songs are licensed under
|
||||
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative Commons Attribution-ShareAlike 4.0</a>.
|
||||
anyone may use and remix these songs freely, so long as they provide credit back to me and link back to this license!
|
||||
please note that all derivative works must inherit this license.
|
||||
</p>
|
||||
<p>
|
||||
a great example of some credit text would be as follows:
|
||||
</p>
|
||||
<blockquote>
|
||||
music used: ari melody - free2play<br>
|
||||
<a href="/music/free2play">https://arimelody.space/music/free2play</a><br>
|
||||
licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>.
|
||||
</blockquote>
|
||||
<p>
|
||||
if the song you want to use is <em>not</em> released by me (i.e. under a record label), their usage rights
|
||||
will likely trump whatever i'd otherwise have in mind. i'll try to negotiate some nice terms, though!
|
||||
</p>
|
||||
<p>
|
||||
i believe that encouraging creative use of artistic works is better than stifling any use at all.
|
||||
if you do happen to use my work in something you're particularly proud of, feel free to send it my way!
|
||||
</p>
|
||||
<p>
|
||||
> <a href="mailto:ari@arimelody.space">ari@arimelody.space</a>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
{{end}}
|
||||
21
templates/html/prideflag.html
Normal file
21
templates/html/prideflag.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{{define "prideflag"}}
|
||||
<a href="https://github.com/arimelody/prideflag" target="_blank" id="prideflag">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120" hx-preserve="true">
|
||||
<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>
|
||||
</a>
|
||||
{{end}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue