ari/arimelody.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

broken but cool htmx! also improved templating

Browse source 
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
ari melody 2024-03-22 07:30:22 +00:00
parent 5c59348362
commit c1ff03c4e5
18 changed files with 297 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

26
views/base.html
View file

@ -7,28 +7,14 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{block "head" .}}
<!-- <title>ari melody 💫</title> -->
<!-- <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon"> -->
<!---->
<!-- <meta name="description" content="home to your local SPACEGIRL 💫"> -->
<!---->
<!-- <meta property="og:title" content="ari melody"> -->
<!-- <meta property="og:type" content="website"> -->
<!-- <meta property="og:url" content="www.arimelody.me"> -->
<!-- <meta property="og:image" content="https://www.arimelody.me/img/favicon.png"> -->
<!-- <meta property="og:site_name" content="ari melody"> -->
<!-- <meta property="og:description" content="home to your local SPACEGIRL 💫"> -->
<!---->
<!-- <link rel="stylesheet" href="style/main.css"> -->
<!---->
<!-- <script type="module" src="/script/main.js" defer></script> -->
{{end}}
{{block "head" .}}{{end}}
<!-- <script type="application/javascript" src="/script/lib/htmx.min.js"></script> -->
<meta name="htmx-config" content='{"htmx.config.scrollIntoViewOnBoost":false}'>
<script type="application/javascript" src="/script/lib/htmx.min.js"></script>
<script type="application/javascript" src="/script/lib/htmx-head-support.js"></script>
</head>
<body>
<body hx-ext="head-support">
{{template "header"}}
{{block "content" .}}
@ -43,8 +29,8 @@
{{end}}
{{template "footer"}}
<div id="overlay"></div>
{{template "prideflag"}}
</body>
</html>

2
views/footer.html
View file

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

6
views/header.html
View file

@ -1,8 +1,8 @@
{{define "header"}}
<header hx-preserve="true">
<header>
<nav>
<div id="header-home">
<div id="header-home" hx-get="/" hx-on="click" hx-target="main" hx-swap="outerHTML show:window:top" hx-push-url="true">
<img src="/img/favicon.png" id="header-icon" width="100" height="100" alt="">
<div id="header-text">
<h1>ari melody</h1>
@ -16,7 +16,7 @@
<rect y="40" width="70" height="10" rx="5" fill="#eee" />
</svg>
</a>
<ul id="header-links">
<ul id="header-links" hx-boost="true" hx-target="main" hx-swap="outerHTML show:window:top">
<li>
<a href="/">home</a>
</li>

33
views/htmx-base.html
View file

@ -1,28 +1,9 @@
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{block "head" .}}
<title>ari melody 💫</title>
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<meta name="description" content="home to your local SPACEGIRL 💫">
<meta property="og:title" content="ari melody">
<meta property="og:type" content="website">
<meta property="og:url" content="www.arimelody.me">
<meta property="og:image" content="https://www.arimelody.me/img/favicon.png">
<meta property="og:site_name" content="ari melody">
<meta property="og:description" content="home to your local SPACEGIRL 💫">
<link rel="stylesheet" href="style/main.css">
<script type="module" src="/script/main.js" defer></script>
{{end}}
<script type="application/javascript" src="/script/lib/htmx.min.js"></script>
</head>
<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="application/javascript" src="/script/lib/htmx.min.js"></script>
<script type="application/javascript" src="/script/lib/htmx-head-support.js"></script>
{{block "content" .}}{{end}}

1
views/index.html
View file

@ -12,7 +12,6 @@
<meta property="og:description" content="home to your local SPACEGIRL 💫">
<link rel="stylesheet" href="/style/index.css">
<script type="module" src="/script/main.js" defer></script>
<link rel="me" href="https://wetdry.world/@ari">
{{end}}

4
views/music-gateway.html
View file

@ -25,7 +25,6 @@
<meta name="twitter:image:alt" content="Cover art for &quot;{{.Title}}&quot;">
<script type="module" src="/script/music-gateway.js" defer></script>
<script type="application/javascript" src="/script/prideflag.js" defer></script>
<link rel="stylesheet" href="/style/music-gateway.css">
{{end}}
@ -33,7 +32,8 @@
<main>
<div id="background" data-url="{{.ResolveArtwork}}"></div>
<a id="go-back" title="back to arimelody.me" href="/music">&lt;</a>
<a href="/music" id="go-back" title="back to arimelody.me">back to arimelody.me</a>
<br><br>
<div id="music-container">
<div id="art-container">

14
views/music.html
View file

@ -12,9 +12,7 @@
<meta property="og:description" content="music from your local SPACEGIRL 💫">
<link rel="stylesheet" href="/style/music.css">
<script type="module" src="/script/main.js" defer></script>
<script type="application/javascript" src="/script/music.js" defer></script>
<script type="module" src="/script/music.js" defer></script>
{{end}}
{{define "content"}}
@ -25,11 +23,11 @@
<div id="music-container">
{{range $Album := .}}
<div class="music" id="{{$Album.Id}}">
<div class="music" id="{{$Album.Id}}" hx-get="/music/{{$Album.Id}}" hx-trigger="click" hx-target="main" hx-swap="outerHTML" hx-push-url="true">
<div class="music-artwork">
<img src="{{$Album.ResolveArtwork}}" alt="{{$Album.Title}} artwork" width="128">
</div>
<div class="music-details">
<div class="music-details" hx-boost="true" hx-target="main" hx-swap="outerHTML">
<a href="/music/{{$Album.Id}}"><h1 class="music-title">{{$Album.Title}}</h1></a>
<h2 class="music-artist">{{$Album.PrintPrimaryArtists}}</h2>
<h3 class="music-type-{{.ResolveType}}">{{$Album.ResolveType}}</h3>
@ -45,12 +43,12 @@
{{end}}
</div>
<h2 id="usage" class="question">
<h2 id="usage" class="question" hx-get="/music#usage" hx-on="click" hx-swap="none" hx-push-url="true">
<a href="#usage">
&gt; "can i use your music in my content?"
</a>
</h2>
<div class="collapse">
<div class="answer">
<p>
<strong class="big">yes!</strong> well, in most cases...
</p>
@ -85,5 +83,7 @@
&gt; <a href="mailto:ari@arimelody.me">ari@arimelody.me</a>
</p>
</div>
<a href="#" id="backtotop">back to top</a>
</main>
{{end}}

21
views/prideflag.html Normal file
View file

@ -0,0 +1,21 @@
{{define "prideflag"}}
<a href="https://github.com/mellodoot/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}}