bin/views/pages/pages.templ

171 lines
4.4 KiB
Plaintext
Raw Normal View History

2023-09-11 23:26:50 +02:00
package pages
2023-09-10 23:40:19 +02:00
2023-09-11 23:26:50 +02:00
import (
"fmt"
"git.myrkvi.com/myrkvi/bin/models"
"git.myrkvi.com/myrkvi/bin/views/components"
"git.myrkvi.com/myrkvi/bin/views/partials"
)
2023-09-10 23:40:19 +02:00
2023-09-11 23:26:50 +02:00
templ page(inner templ.Component, menu []models.MenuItem, currentMenu int, title string) {
2023-09-10 23:40:19 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/static/htmx.min.js"></script>
<script src="/static/_hyperscript.min.js"></script>
<link rel="stylesheet" href="/static/tailwind.css" />
2023-09-11 23:26:50 +02:00
if title == "" {
<title id="title">bin</title>
} else {
<title id="title">{ title } - bin</title>
}
2023-09-10 23:40:19 +02:00
</head>
2023-09-11 23:26:50 +02:00
<body class="mt-4 sm:mt-12 mx-16 xl:mx-72 lg:mx-64 md:mx-32 sm:mx-24 bg-amber-50">
2023-09-10 23:40:19 +02:00
<header class="flex flex-row justify-between my-16">
<h1 class="text-5xl">bin</h1>
2023-09-11 23:26:50 +02:00
@components.NavMenu(menu, currentMenu, false)
2023-09-10 23:40:19 +02:00
</header>
<main id="main-content">
{! inner }
</main>
<div class="fixed left-0 bottom-1 flex flex-row justify-center w-screen pointer-events-none">
<div id="toast" class="w-fit pointer-events-auto">
</div>
</div>
</body>
</html>
}
2023-09-11 23:26:50 +02:00
templ IndexFull() {
2023-09-10 23:40:19 +02:00
@page(
2023-09-11 23:26:50 +02:00
IndexPartial(),
models.DefaultMenu,
2023-09-10 23:40:19 +02:00
0,
2023-09-11 23:26:50 +02:00
"",
2023-09-10 23:40:19 +02:00
)
}
2023-09-11 23:26:50 +02:00
templ IndexPartial() {
2023-09-10 23:40:19 +02:00
<h2 class="text-xl">Welcome to <i>bin</i></h2>
<p>bin is a simple paste bin.</p>
<br />
2023-09-11 23:26:50 +02:00
@components.BoostButton("new", "/new")
2023-09-10 23:40:19 +02:00
}
2023-09-11 23:26:50 +02:00
templ NewFull(wantsText bool) {
2023-09-10 23:40:19 +02:00
@page(
2023-09-11 23:26:50 +02:00
NewPartial(wantsText),
models.DefaultMenu,
2023-09-10 23:40:19 +02:00
1,
2023-09-11 23:26:50 +02:00
"upload",
2023-09-10 23:40:19 +02:00
)
}
const placeholderCode string = `#include <stdio.h>
int main(int argc, char *argv[]) {
printf("Hello, world!\n");
return 0;
}`
2023-09-11 23:26:50 +02:00
templ NewPartial(wantsText bool) {
2023-09-10 23:40:19 +02:00
<h2 class="text-xl">submit a new file</h2>
<form
hx-post="/new"
hx-encoding="multipart/form-data"
method="POST"
hx-target="#main-content"
>
<div class="my-2 grid grid-cols-1 sm:grid-cols-3 md:grid-cols-5 gap-4 max-w-sm md:max-w-lg">
<label class="col-span-1" for="name">
file name:
</label>
<input
class="col-span-2 md:col-span-4 justify-self-start
outline-2 bg-amber-50
hover:outline-slate-400 hover:outline-dotted
focus:outline-slate-600 focus:outline-dashed
active:outline-green-600"
type="text"
name="name"
id="name"
placeholder="foo.txt"
_="on change set #description's @placeholder to `some stuff about ${my value} ...`"
/>
<label for="lang" class="col-span-1">language:</label>
2023-09-11 23:26:50 +02:00
<div class="col-span-2 md:col-span-4">@components.ChooseSyntax("lang")</div>
2023-09-10 23:40:19 +02:00
<label class="col-span-1" for="description">description:</label>
<textarea
class="col-span-2 md:col-span-4 resize-none hover:resize justify-self-start
w-full outline-2 bg-amber-50
hover:outline-slate-400 hover:outline-dotted
focus:outline-slate-600 focus:outline-dashed
active:outline-green-600"
name="description"
id="description"
rows="3"
placeholder="some stuff about foo.txt ..."
/>
</div>
if wantsText {
2023-09-11 23:26:50 +02:00
@partials.NewTextSubmit()
2023-09-10 23:40:19 +02:00
<input type="text" name="wantsText" hidden value="true" />
} else {
2023-09-11 23:26:50 +02:00
@partials.NewFileUpload()
2023-09-10 23:40:19 +02:00
}
2023-09-11 23:26:50 +02:00
@components.SubmitFormButton("submit")
2023-09-10 23:40:19 +02:00
</form>
}
2023-09-11 23:26:50 +02:00
templ BinFull(file models.File) {
2023-09-10 23:40:19 +02:00
@page(
2023-09-11 23:26:50 +02:00
BinPartial(file),
models.DefaultMenu,
2023-09-10 23:40:19 +02:00
-1,
2023-09-11 23:26:50 +02:00
file.Filename,
2023-09-10 23:40:19 +02:00
)
}
2023-09-11 23:26:50 +02:00
templ BinPartial(file models.File) {
2023-09-10 23:40:19 +02:00
<div>
<h1 class="text-xl my-2 inline-block">{ file.Filename }
if file.Language != "" {
<sup class="text-base mx-4">({ file.Language })</sup>
}
</h1>
<p class="italic mx-1 my-2">{ file.Description }</p>
<pre class="my-4">{ file.Data }</pre>
<div class="relative h-full">
<form
class="absolute -bottom-32"
hx-post={ "/b/" + file.PageKey + "/delete" }
hx-confirm="Are you sure you want to delete this?"
2023-09-11 23:26:50 +02:00
hx-target="#main-content"
2023-09-10 23:40:19 +02:00
>
<input
name="adminKey"
id="adminKey"
type="text"
class="mr-4 w-24 bg-amber-50
hover:outline-slate-400 hover:outline-dotted
focus:outline-slate-600 focus:outline-dashed
active:outline-green-600"
placeholder="deletion key"
value={ file.AdminKey }
/>
2023-09-11 23:26:50 +02:00
@components.SubmitFormButton("delete")
2023-09-10 23:40:19 +02:00
if file.AdminKey != "" {
<a class="text-blue-500 mx-4" href={ templ.URL(fmt.Sprintf("/b/%s?delcode=%s", file.PageKey, file.AdminKey))}><sup>permalink with deletion key</sup></a>
}
<p class="opacity-0 my-1 max-w-md" _="init if #adminKey's value is not '' log then show me with *opacity">
this is your deletion key! <br /> you will need to store it if you want to delete the file.
</p>
</form>
</div>
</div>
}