bdnugget/boner-htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: bdnugget:fbc95e960a315f49692f9b743e423568f384df7a
Branches Tags
bdnugget:master
...
compare: bdnugget:master
Branches Tags
bdnugget:master

9 Commits
fbc95e960a ... master

Author SHA1 Message Date
bdnugget
58df8350c0 prepend messages instead of append 2024-09-21 10:57:26 +02:00
bdnugget
e336d0955c Update README.md 2024-09-18 21:44:24 +00:00
bdnugget
d8ee53cf7a how does Docker work lol 2024-09-18 22:51:41 +02:00
bdnugget
f88f97bd0c revert 14fd9f55ce 
revert Update Dockerfile
 2024-09-18 20:32:51 +00:00
bdnugget
14fd9f55ce Update Dockerfile 2024-09-18 20:25:02 +00:00
bdnugget
7731b9ae50 YOLO Dockerfile to see if Coolify eats it 2024-09-18 22:17:25 +02:00
bdnugget
9512bd677d Boanerbook title 2024-09-18 21:59:20 +02:00
bdnugget
c68207724c v0 generated some nice Tailwind LOL 2024-09-18 21:48:07 +02:00
bdnugget
a72b8d7538 trash to separate svg 2024-09-18 21:41:18 +02:00
6 changed files with 110 additions and 37 deletions
Expand all files Collapse all files

30
Dockerfile Normal file
View File

@ -0,0 +1,30 @@
# Use the official Go 1.23 image as the build stage
FROM golang:1.23 as build
# Set the working directory to /app
WORKDIR /app
# Copy the Go mod files
COPY go.mod go.sum ./
# Download the dependencies
RUN go mod download
# Copy the application code
COPY . .
# Build the application
RUN go build -o main cmd/main.go
# Use the scratch image as the runtime stage
FROM scratch
# Copy the built application from the build stage
WORKDIR /app
COPY --from=build /app/main /app/
# Expose the port
EXPOSE 1337
# Run the command to start the application
CMD ["./main"]

2
README.md
View File

@ -1,6 +1,6 @@
[Boner site and guestbook](https://boner.be)
Implementation of boner.be website and guestbook with the meme stack of Go and HTMX
Implementation of boner.be website and guestbook with the meme stack of Go and HTMX and also Tailwind
`(_)_)::::::::::::::D~~~~`

6
cmd/main.go
View File

@ -59,8 +59,8 @@ func (d *Data) indexOf(id int) int {
func newData() Data {
return Data{
Entries: []Entry{
newEntry("John Smith", "Hello world"),
newEntry("Jane Doe", "This is a great guestbook"),
newEntry("Asshole", "Hey, this is SHIT!"),
newEntry("Not Bd", "Fist my ginger pubes, faghole"),
},
}
}
@ -109,7 +109,7 @@ func main() {
message := c.FormValue("message")
entry := newEntry(name, message)
page.Data.Entries = append(page.Data.Entries, entry)
page.Data.Entries = append([]Entry{entry}, page.Data.Entries...)
c.Render(200, "form", newFormData())
return c.Render(200, "oob-entry", entry)

4
images/trash.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M4 2h16a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1V3a1 1 0 011-1zM3 6h18v16a1 1 0 01-1 1H4a1 1 0 01-1-1V6zm3 3v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 336 B

BIN
tmp/main
View File

Binary file not shown.

89
views/index.html
View File

@ -5,35 +5,73 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/htmx.org/dist/htmx.min.js"></script>
<title></title>
<link href="/css/index.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<title>Boanerbook</title>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
mono: ['IBM Plex Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
},
colors: {
hacker: {
green: '#00ff00',
darkgreen: '#003300',
},
},
},
},
}
</script>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<body class="bg-black text-hacker-green font-mono min-h-screen py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto">
<h1 class="text-3xl font-bold text-center mb-8">
<span class="bg-hacker-green text-black px-2">Boanerbook</span>
</h1>
{{ template "form" .Form }}
<hr />
<hr class="my-8 border-t border-hacker-darkgreen" />
{{ template "display" .Data }}
</div>
</body>
</html>
{{ end }}
{{ block "form" . }}
<form hx-swap="outerHTML" hx-post="/guestbook">
Name: <input
<form hx-swap="outerHTML" hx-post="/guestbook" class="border border-hacker-green p-6 mb-4">
<div class="mb-4">
<label class="block mb-2" for="name">
Name:
</label>
<input
class="w-full py-2 px-3 bg-black border border-hacker-green focus:outline-none focus:ring-2 focus:ring-hacker-green"
{{ if .Values.name }} value="{{ .Values.name }}" {{ end }}
type="text" name="name" />
Message: <input
type="text" name="name" id="name" placeholder="Your handle" />
</div>
<div class="mb-4">
<label class="block mb-2" for="message">
Message:
</label>
<input
class="w-full py-2 px-3 bg-black border border-hacker-green focus:outline-none focus:ring-2 focus:ring-hacker-green"
{{ if .Values.message }} value="{{ .Values.message }}" {{ end }}
type="text" name="message" />
type="text" name="message" id="message" placeholder="Your bonerfied ramblings" />
{{ if .Errors.message }}
<span style="color: red">{{ .Errors.message }}</span>
<p class="text-red-500 text-xs mt-2">{{ .Errors.message }}</p>
{{ end }}
<button>Sign guestbook</button>
</div>
<div class="flex items-center justify-between">
<button class="bg-hacker-green text-black font-bold py-2 px-4 focus:outline-none focus:shadow-outline hover:bg-hacker-darkgreen hover:text-hacker-green" type="submit">
> Sign the great bonerbook
</button>
</div>
</form>
{{ end }}
{{ block "display" . }}
<div id="guestbook" style="display: flex; flex-direction: column">
<div id="guestbook" class="space-y-4">
{{ range .Entries }}
{{ template "entry" . }}
{{ end }}
@ -41,23 +79,25 @@
{{ end }}
{{ block "entry" . }}
<div class="entry" id="entry-{{ .Id }}" style="display: flex;">
<div style="width: 1rem; cursor: pointer;"
<div class="entry border border-hacker-green p-4" id="entry-{{ .Id }}">
<div class="flex justify-between items-center mb-2">
<span class="font-bold text-lg">> {{ .Name }}</span>
<button
class="text-hacker-green hover:text-hacker-darkgreen"
hx-indicator="#entry-{{ .Id }}-indicator"
hx-target="#entry-{{ .Id }}"
hx-swap="outerHTML swap:500ms"
hx-delete="/guestbook/{{ .Id }}"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M4 2h16a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1V3a1 1 0 011-1zM3 6h18v16a1 1 0 01-1 1H4a1 1 0 01-1-1V6zm3 3v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0z"/>
</svg>
[DELETE]
</button>
</div>
Name: <span>{{ .Name }}</span>
Message: <span>{{ .Message }}</span>
<div id="entry-{{ .Id }}-indicator" class="htmx-indicator">
<img src="/images/bars.svg" alt="loading" style="width: 1rem;" />
<p class="text-hacker-green">> {{ .Message }}</p>
<div id="entry-{{ .Id }}-indicator" class="htmx-indicator flex justify-center mt-2">
<svg class="animate-spin h-5 w-5 text-hacker-green" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
</div>
{{ end }}
@ -67,4 +107,3 @@
{{ template "entry" . }}
</div>
{{ end }}