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