decentralized and customizable links page on top of atproto

tweak styles

+2 -1
src/main.py
··· 75 75 # remove the ?reload parameter 76 76 return redirect(request.path) 77 77 78 - return render_template("profile.html", profile=profile, links=links) 78 + athref = f"at://{did}/at.ligo.actor.links/self" 79 + return render_template("profile.html", profile=profile, links=links, athref=athref) 79 80 80 81 81 82 @app.get("/login")
+6
src/static/editor.css
··· 4 4 margin-left: -0.25em; 5 5 margin-right: -0.25em; 6 6 padding: 0.25em; 7 + background: var(--color-background); 7 8 border: 1px solid var(--color-border-secondary); 8 9 border-radius: 2px; 9 10 } ··· 22 23 line-height: 100%; 23 24 font-size: 1.5em; 24 25 align-items: center; 26 + cursor: grab; 27 + } 28 + 29 + link-editor-drag-handle:active { 30 + cursor: grabbing; 25 31 } 26 32 27 33 link-editor-buttons {
src/static/favicon-16.png

This is a binary file and will not be displayed.

src/static/favicon-32.png

This is a binary file and will not be displayed.

src/static/favicon-48.png

This is a binary file and will not be displayed.

+6 -3
src/static/style.css
··· 1 1 :root { 2 - --color-alert: #aa0000; 2 + --color-alert: #ee0000; 3 3 --color-background: #fff; 4 4 --color-background-secondary: #eee; 5 5 --color-border: #bbb; ··· 128 128 } 129 129 130 130 .caption { 131 - font-size: 14px; 132 - line-height: 12px; 131 + font-size: 0.8em; 132 + line-height: 86%; 133 + } 134 + 135 + .faded { 133 136 color: var(--color-text-secondary); 134 137 } 135 138
+11 -8
src/templates/editor.html
··· 38 38 </label> 39 39 {% if profile_from_bluesky %} 40 40 <p> 41 - <span class="caption">Profile was fetched from Bluesky. On save it will use an independent, ligo.at only copy.</span> 41 + <span class="faded caption">Profile was fetched from Bluesky. On save it will use an independent, ligo.at only copy.</span> 42 42 </p> 43 43 {% endif %} 44 44 <label> ··· 47 47 </form> 48 48 <!-- /editor/profile --> 49 49 50 - <h2>links</h2> 51 - <template x-if="linksChanged"> 52 - <p> 50 + <div> 51 + <h2 style="display: inline-block;">links</h2> 52 + <template x-if="linksChanged"> 53 53 <span class="alert">You have unsaved changes!</span> 54 - </p> 55 - </template> 54 + </template> 55 + </div> 56 + 56 57 <noscript> 57 58 JavaScript is needed for a better experience configuring the links. 58 59 </noscript> 60 + 59 61 <form action="/editor/links" method="post" @change="linksChanged = true"> 60 62 <input type="submit" value="save links" /> 61 63 ··· 92 94 <span>Background color</span> 93 95 <input type="color" name="link-background" x-model="link.background" required /> 94 96 </label> 95 - <button type="button" @click="editing = false">ok</button> 97 + <button type="button" @click="editing = false" style="margin-top: 1em;">close</button> 96 98 </div> 97 99 </link-editor-item> 98 100 </template> ··· 100 102 101 103 <label style="display: block; margin-top: 1em;"> 102 104 <button type="button" @click="links.push({ background: '#fa0' })">add link</button> 103 - <span class="caption"> 105 + <span class="faded caption"> 104 106 It will be added to the bottom. You can then drag and drop it to reorder. 105 107 </span> 106 108 </label> ··· 108 110 <input type="submit" value="save links" /> 109 111 </form> 110 112 <!-- /editor/links --> 113 + 111 114 <footer> 112 115 <a href="/">home</a> 113 116 </footer>
+1 -1
src/templates/login.html
··· 21 21 <span>Handle</span> 22 22 <input type="text" name="username" placeholder="username.example.com" autocapitalize="off" spellcheck="false" required /> 23 23 </label> 24 - <span class="caption"> 24 + <span class="faded caption"> 25 25 Use your AT Protocol handle to log in. 26 26 If you're unsure you can <a href="{{ url_for('oauth.oauth_start', authserver='https://bsky.social') }}">log in with Bluesky</a>. 27 27 </span>
+1
src/templates/profile.html
··· 10 10 <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16.png') }}" /> 11 11 <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32.png') }}" /> 12 12 <link rel="icon" type="image/png" sizes="48x48" href="{{ url_for('static', filename='favicon-48.png') }}" /> 13 + <link rel="alternate" href="{{ athref }}" /> 13 14 </head> 14 15 <body> 15 16 <div class="wrapper profile">