ligo.at
decentralized and customizable links page on top of atproto
ligo.at
atproto
link-in-bio
python
uv
nauta.one
1<div id="editor-links-container" x-data="{ links: {{ links }}, linksChanged: false }">
2 <div>
3 <h2 style="display: inline-block;">links</h2>
4 <template x-if="linksChanged">
5 <span class="alert">You have unsaved changes!</span>
6 </template>
7 </div>
8
9 <form
10 method="post"
11 action="/editor/links"
12 hx-post="/editor/links"
13 hx-target="#editor-links-container"
14 @change="linksChanged = true"
15 >
16 <input type="submit" value="save links" />
17 {% include "_htmx_indicator.html" %}
18
19 <div x-sort x-sort:config="{ handle: '[x-sort\\:handle]' }">
20 <template x-for="(link, index) in links">
21 <link-editor-item x-data="{ editing: !link.href }" x-sort:item="link.href">
22 <link-editor-header>
23 <div class="static link-item" :style="'color: ' + link.backgroundColor">
24 <span class="link-item-title" x-text="link.title"></span>
25 <span class="link-item-detail" x-show="link.subtitle" x-text="link.subtitle"></span>
26 </div>
27 <link-editor-drag-handle x-sort:handle>⠿</link-editor-drag-handle>
28 </link-editor-header>
29 <div x-show="!editing">
30 <link-editor-buttons>
31 <button type="button" @click="editing = true">edit</button>
32 <button type="button" @click="if (confirm('delete ' + link.title + '?')) links.splice(index, 1)">delete</button>
33 </link-editor-buttons>
34 </div>
35 <div x-show="editing">
36 <editor-label>
37 <label>
38 <span class="label">URL</span>
39 <input type="text" name="link-href" x-model="link.href" required />
40 </label>
41 </editor-label>
42 <editor-label>
43 <label>
44 <span class="label">Title</span>
45 <input type="text" name="link-title" x-model="link.title" required />
46 </label>
47 </editor-label>
48 <editor-label>
49 <label>
50 <span class="label">Subtitle</span>
51 <input type="text" name="link-subtitle" x-model="link.subtitle" />
52 </label>
53 </editor-label>
54 <editor-label>
55 <label>
56 <span class="label">Background color</span>
57 <input type="color" name="link-background-color" x-model="link.backgroundColor" required />
58 </label>
59 </editor-label>
60 <button type="button" class="submit" @click="editing = false">close</button>
61 </div>
62 </link-editor-item>
63 </template>
64 </div>
65
66 <template x-if="links.length === 0">
67 <p>
68 Nothing here! Add your first link, then the second, then...
69 You can always delete and sort them.
70 </p>
71 </template>
72
73 <button type="button" @click="links.push({ backgroundColor: '#A1D87E' })" style="display: block; margin-top: 1em;">
74 add link
75 </button>
76
77 <input type="submit" value="save links" />
78 {% include "_htmx_indicator.html" %}
79 </form>
80 <!-- #editor-links-container -->
81</div>