x
3202b6b008
tailored this to suite my personal site theme with additional options to run this on exozyme
139 lines
4 KiB
Text
139 lines
4 KiB
Text
package main
|
|
|
|
import "fmt"
|
|
import "time"
|
|
import "net/url"
|
|
|
|
templ index(ps []Post) {
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<title>x's tinygram</title>
|
|
<link href="/css/gram.css" rel="stylesheet"/>
|
|
</head>
|
|
<body>
|
|
<canvas id="background"></canvas>
|
|
<div class="container">
|
|
<div class="heading">
|
|
<h1>X's TinyGram</h1>
|
|
<p class="subheadings">Here remains all the shitty photos I took and will take. This is my less bloated instagram like thing.</p>
|
|
</div>
|
|
<div class="posts">
|
|
@posts(ps)
|
|
</div>
|
|
<div class="footer">
|
|
<p class="foottext">CC BY-SA 4.0</p>
|
|
<p class="foottext">We Might Be Dead by Tomorrow</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="/htmx.min.js"></script>
|
|
<script src="/sort.js"></script>
|
|
<script src="/matrix.js"></script>
|
|
</html>
|
|
}
|
|
|
|
|
|
templ loginPage(csrfToken string) {
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<title>x's tinygram</title>
|
|
<link href="/css/gram.css" rel="stylesheet"/>
|
|
</head>
|
|
<body>
|
|
<canvas id="background"></canvas>
|
|
<div class="container">
|
|
<div class="heading">
|
|
<h1>X's TinyGram</h1>
|
|
<p class="subheadings">Enter your shitty password to log into this shit.</p>
|
|
</div>
|
|
<div class="posts">
|
|
<form
|
|
class="login"
|
|
hx-encoding="multipart/form-data"
|
|
hx-post="/g/login">
|
|
<input type="password" name="password"/>
|
|
<input type="hidden" name="_csrf" value={ csrfToken }/>
|
|
<button>login</button>
|
|
</form>
|
|
</div>
|
|
<div class="footer">
|
|
<p class="foottext">CC BY-SA 4.0</p>
|
|
<p class="foottext">We Might Be Dead by Tomorrow</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="/htmx.min.js"></script>
|
|
<script src="/sort.js"></script>
|
|
<script src="/matrix.js"></script>
|
|
</html>
|
|
}
|
|
|
|
|
|
templ uploadPage(csrfToken string) {
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<title>x's tinygram</title>
|
|
<link href="/css/gram.css" rel="stylesheet"/>
|
|
</head>
|
|
<body>
|
|
<canvas id="background"></canvas>
|
|
<div class="container">
|
|
<div class="heading">
|
|
<h1>X's TinyGram</h1>
|
|
<p class="subheadings">upload your shitty photos from here</p>
|
|
</div>
|
|
<div class="posts">
|
|
<form
|
|
class="upload"
|
|
hx-encoding="multipart/form-data"
|
|
hx-post="/g/upload"
|
|
_="on htmx:xhr:progress(loaded, total) set #progress.value to (loaded/total)*100"
|
|
>
|
|
<input type="file" name="file"/>
|
|
<input type="hidden" name="_csrf" value={ csrfToken }/>
|
|
<div>
|
|
<span>description:</span>
|
|
<input type="text" name="description"/>
|
|
</div>
|
|
<button>upload</button>
|
|
</form>
|
|
</div>
|
|
<div class="footer">
|
|
<p class="foottext">CC BY-SA 4.0</p>
|
|
<p class="foottext">We Might Be Dead by Tomorrow</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="/htmx.min.js"></script>
|
|
<script src="/sort.js"></script>
|
|
<script src="/matrix.js"></script>
|
|
</html>
|
|
}
|
|
templ posts(posts []Post) {
|
|
for _, post := range posts {
|
|
<section class="post">
|
|
<p class="date">{ post.CreatedAt.Format("2006-01-02 - 15:04") }</p>
|
|
<img loading="lazy" src={ post.ImageID } alt={ post.ImageID }/>
|
|
<p>{ post.Description }</p>
|
|
</section>
|
|
}
|
|
if len(posts) > 0 {
|
|
<div
|
|
style="min-height:1px"
|
|
hx-get={ fmt.Sprintf("/g/pics?after=%v", url.QueryEscape(posts[len(posts)-1].CreatedAt.Format(time.RFC3339))) }
|
|
hx-target=".posts"
|
|
hx-trigger="revealed"
|
|
hx-swap="beforeend"
|
|
></div>
|
|
}
|
|
}
|