-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (84 loc) · 6.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pocketbase X htmx Chat</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.7.3/dist/full.css" rel="stylesheet" type="text/css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmx.org"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
<script src="https://cdn.jsdelivr.net/npm/nunjucks@3.2.4/browser/nunjucks.min.js"></script>
<!-- Include SSE extension for real-time updates -->
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
</head>
<body>
<div class="min-h-screen flex flex-col justify-center items-center">
<!-- New Section for Icons -->
<div class="flex justify-center gap-10 my-8">
<a href="https://github.com/valiantlynx/htmx-chat" target="_blank" class="text-6xl">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<g fill-rule="evenodd" clip-rule="evenodd">
<path
d="M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24Z" />
<path
d="M19.1833 45.4716C18.9898 45.2219 18.9898 42.9973 19.1833 38.798C17.1114 38.8696 15.8024 38.7258 15.2563 38.3667C14.437 37.828 13.6169 36.1667 12.8891 34.9959C12.1614 33.8251 10.5463 33.64 9.89405 33.3783C9.24182 33.1165 9.07809 32.0496 11.6913 32.8565C14.3044 33.6634 14.4319 35.8607 15.2563 36.3745C16.0806 36.8883 18.0515 36.6635 18.9448 36.2519C19.8382 35.8403 19.7724 34.3078 19.9317 33.7007C20.1331 33.134 19.4233 33.0083 19.4077 33.0037C18.5355 33.0037 13.9539 32.0073 12.6955 27.5706C11.437 23.134 13.0581 20.2341 13.9229 18.9875C14.4995 18.1564 14.4485 16.3852 13.7699 13.6737C16.2335 13.3589 18.1347 14.1343 19.4734 16.0001C19.4747 16.0108 21.2285 14.9572 24.0003 14.9572C26.772 14.9572 27.7553 15.8154 28.5142 16.0001C29.2731 16.1848 29.88 12.7341 34.5668 13.6737C33.5883 15.5969 32.7689 18.0001 33.3943 18.9875C34.0198 19.9749 36.4745 23.1147 34.9666 27.5706C33.9614 30.5413 31.9853 32.3523 29.0384 33.0037C28.7005 33.1115 28.5315 33.2855 28.5315 33.5255C28.5315 33.8856 28.9884 33.9249 29.6465 35.6117C30.0853 36.7362 30.117 39.948 29.7416 45.247C28.7906 45.4891 28.0508 45.6516 27.5221 45.7347C26.5847 45.882 25.5669 45.9646 24.5669 45.9965C23.5669 46.0284 23.2196 46.0248 21.837 45.8961C20.9154 45.8103 20.0308 45.6688 19.1833 45.4716Z" />
</g>
</svg>
</a>
<a href="https://www.valiantlynx.com" target="_blank" class="text-6xl">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 2048 2048">
<path fill="currentColor"
d="M1024 0q141 0 272 36t245 103t207 160t160 208t103 245t37 272q0 141-36 272t-103 245t-160 207t-208 160t-245 103t-272 37q-141 0-272-36t-245-103t-207-160t-160-208t-103-244t-37-273q0-141 36-272t103-245t160-207t208-160T751 37t273-37m0 1920q123 0 237-32t214-90t182-141t140-181t91-214t32-238q0-123-32-237t-90-214t-141-182t-181-140t-214-91t-238-32q-123 0-237 32t-214 90t-182 141t-140 181t-91 214t-32 238q0 123 32 237t90 214t141 182t181 140t214 91t238 32m597-880l48-144h75l-85 256h-75l-48-144l-48 144h-75l-85-256h75l48 144l48-144h74zm-464-144h75l-85 256h-75l-48-144l-48 144h-75l-85-256h75l48 144l48-144h74l48 144zm-512 0h75l-85 256h-75l-48-144l-48 144h-75l-85-256h75l48 144l48-144h74l48 144z" />
</svg>
</a>
</div>
<h1 class="text-3xl font-bold mb-8">Pocketbase X htmx Chat</h1>
<h3 class="text-xl font-bold mb-4">Powered by htmx and Pocketbase.</h3>
<p class="text-lg mb-1">This is a simple chat app that uses htmx to send and receive messages. This one html
file is all there is to it.</p>
<p class="text-lg mb-1">The chat messages are sent and received using htmx and stored in a Pocketbase
collection. The chat messages are rendered using Nunjucks templates.</p>
<h6 class="text-xl font-bold mb-4">When it comes to realtime. the simplest i know is <a href="https://gun-chat.valiantlynx.com" target="_blank" class="link link-primary text-6xl">gunDB</a></h6>
<!-- Chat Form -->
<div class="bg-base-300 rounded-lg p-4 shadow-md w-full sm:w-2/3" hx-ext="client-side-templates">
<form id="chat-form" hx-post="https://pb.valiantlynx.com/api/collections/chat_htmx/records" hx-target="#chat-container" hx-encoding="multipart/form-data">
<div class="flex flex-wrap">
<input type="text" name="message" id="message-input" placeholder="Type your message" class="flex-grow input px-2 py-1 border rounded-l-lg" minlength="2">
<button type="submit" class="px-4 py-2 btn rounded-r-lg border border-secondary">Send</button>
</div>
</form>
<!-- Chat Container with Real-Time Updates -->
<div id="chat-container" class="mb-4" hx-get="https://pb.valiantlynx.com/api/collections/chat_htmx/records?page=1&perPage=1&sort=-created" hx-trigger="load" nunjucks-template="chat"></div>
</div>
<!-- Nunjucks Template for Chat Messages -->
<template id="chat">
{% if page == 1 %}
<i>Found {{ totalItems }} chats.</i>
{% endif %}
{% for chat in items %}
<div class="chat chat-start">
<div class="chat-image avatar">
<div class="w-10 rounded-full">
<img alt="Tailwind CSS chat bubble component" src="https://api.dicebear.com/7.x/adventurer/svg?seed={{ chat.message }}">
</div>
</div>
<div class="chat-header">
Someone
<time class="text-xs opacity-50">{{ chat.created | truncate(10, true, "") }}</time>
</div>
<div class="chat-bubble">{{ chat.message }}</div>
<div class="chat-footer opacity-50">
Delivered
</div>
</div>
{% endfor %}
{% if page %}
<button hx-get="https://pb.valiantlynx.com/api/collections/chat_htmx/records?page={{ page + 1 }}&perPage=3&sort=-created" hx-swap="outerHTML" hx-trigger="revealed" class="invisible" nunjucks-template="chat">
Load More...
</button>
{% endif %}
</template>
</div>
</body>
</html>