annot.at is a service for syncing static websites, such as blogs, to atproto and standard.site
annot.at
elixir
atproto
standardsite
Add pretty preview images
and added some random meta tags while I was at it, it's nice.
Johanna Larsson
(Jun 19, 2026, 6:33 PM +0100)
07ac9fdf
f0eca18a
+43
-1
+43
-1
lib/annot_at_web/components/layouts/root.html.heex
+43
-1
lib/annot_at_web/components/layouts/root.html.heex
···
4
4
<meta charset="utf-8" />
5
5
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
6
<meta name="csrf-token" content={get_csrf_token()} />
7
-
<.live_title default="annot.at · publish your blog to atproto" suffix=" · annot.at">
7
+
8
+
<.live_title default="publish your blog to atproto" suffix=" · annot.at">
8
9
{assigns[:page_title]}
9
10
</.live_title>
11
+
<!-- All the usual meta stuff -->
12
+
<meta
13
+
name="description"
14
+
content="annot.at watches your RSS feed and publishes every new post to atproto using the standard.site lexicon, so readers across Leaflet, pckt.blog, Offprint, and any other ATmosphere reader can find it."
15
+
/>
16
+
<meta property="og:title" content="annot.at" />
17
+
<meta
18
+
property="og:description"
19
+
content="annot.at watches your RSS feed and publishes every new post to atproto using the standard.site lexicon, so readers across Leaflet, pckt.blog, Offprint, and any other ATmosphere reader can find it."
20
+
/>
21
+
<meta property="og:image" content={~p"/assets/images/og_light.png"} />
22
+
<meta property="og:url" content={Phoenix.Controller.current_url(@conn)} />
23
+
<meta property="og:type" content="website" />
24
+
<meta property="og:site_name" content="annot.at" />
25
+
<!-- Twitter OG is special -->
26
+
<meta name="twitter:card" content="summary_large_image" />
27
+
<meta name="twitter:site" content="@annot_at" />
28
+
<meta name="twitter:creator" content="@annot_at" />
29
+
<meta name="twitter:title" content="annot.at" />
30
+
<meta
31
+
name="twitter:description"
32
+
content="annot.at watches your RSS feed and publishes every new post to atproto using the standard.site lexicon, so readers across Leaflet, pckt.blog, Offprint, and any other ATmosphere reader can find it."
33
+
/>
34
+
<meta name="twitter:image" content={~p"/assets/images/og_light.png"} />
35
+
36
+
<!-- Just a little fun with preloading -->
37
+
<link
38
+
rel="preload"
39
+
href={~p"/fonts/plus-jakarta-sans-latin-wght-normal.woff2"}
40
+
as="font"
41
+
type="font/woff2"
42
+
crossorigin
43
+
/>
44
+
<link
45
+
rel="preload"
46
+
href={~p"/fonts/syne-latin-wght-normal.woff2"}
47
+
as="font"
48
+
type="font/woff2"
49
+
crossorigin
50
+
/>
51
+
10
52
<link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
11
53
<script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
12
54
</script>
priv/static/images/og_dark.png
priv/static/images/og_dark.png
This is a binary file and will not be displayed.
priv/static/images/og_light.png
priv/static/images/og_light.png
This is a binary file and will not be displayed.