redirecter for ao3 that adds opengraph metadata
veryroundbird.house
1import { css, Style } from "hono/css";
2
3const Home = () => {
4 const bodyStyles = css`
5 font-family: "Bricolage Grotesque", sans-serif;
6 background-color: #990000;
7 color: white;
8 padding: 1rem;
9 margin: 0;
10 padding: 0;
11
12 a {
13 color: white;
14 text-decoration: underline dashed;
15 }
16
17 h2 {
18 font-family: "Stack Sans Notch", sans-serif;
19 font-size: 1.5em;
20 }
21 `;
22
23 const h1Styles = css`
24 font-family: "Stack Sans Notch", sans-serif;
25 font-size: 2em;
26 border-bottom: 1px white solid;
27 padding: 20px;
28 margin-bottom: 0;
29 `;
30
31 const mainStyles = css`
32 max-width: 800px;
33 padding: 20px;
34 `;
35
36 return (
37 <html lang="en">
38 <head>
39 <title>FixAO3 | Making your AO3 Embeds Nicer</title>
40 <link rel="preconnect" href="https://fonts.googleapis.com" />
41 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
42 <link
43 href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Stack+Sans+Notch:wght@200..700&display=swap"
44 rel="stylesheet"
45 />
46 <link
47 rel="favicon"
48 href="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e1bf3632-3127-4828-0e01-47af78b4c200/public"
49 />
50 <meta
51 name="description"
52 content="Unofficial AO3 embed prettifier for social media"
53 />
54
55 <meta
56 property="og:url"
57 content="https://fixao3.val.run/"
58 />
59 <meta property="og:type" content="website" />
60 <meta property="og:title" content="fixAO3" />
61 <meta
62 property="og:description"
63 content="Unofficial AO3 embed prettifier for social media"
64 />
65
66 <meta name="twitter:card" content="summary_large_image" />
67 <meta
68 property="twitter:domain"
69 content="https://archiveofourown.org/"
70 />
71 <meta
72 property="twitter:url"
73 content="https://fixao3.val.run"
74 />
75 <meta name="twitter:title" content="fixAO3" />
76 <meta
77 name="twitter:description"
78 content="Unofficial AO3 embed prettifier for social media"
79 />
80 <Style />
81 </head>
82 <body class={bodyStyles}>
83 <div id="page">
84 <h1 class={h1Styles}>fixAO3</h1>
85 <main class={mainStyles}>
86 <p>
87 fixAO3 is a tool that provides opengraph card previews for social
88 media and other programs that display expanded embeds, suchas
89 Discord. Similar to services that do the same for Twitter/X and
90 Bluesky, clicking the link will redirect people to the "canonical"
91 link—that is, the page on AO3.
92 </p>
93 <p>
94 As of now, it definitely works for works, individual work
95 chapters, and series; user profiles are a work in progress as are
96 collections. I'm also working on getting image cards working but I
97 think I need to do something arcane with HTML canvas to make it
98 actually go.
99 </p>
100 <h2>How do I use it?</h2>
101 <p>
102 All you have to do is change the "ao3.org" or
103 "archiveofourown.org" part of your fic's URL to "fixao3.val.run".
104 It'll automatically pull in your fic's metadata and set up a
105 redirect. Easy as that!
106 </p>
107 <h2>Support fixAO3</h2>
108 <p>
109 If you found this useful and would like to support further
110 development, you can tip me on{" "}
111 <a href="https://ko-fi.com/veryroundbird" target="_blank">
112 Ko-fi
113 </a>! This work would also be much, much harder and more annoying
114 without being able to build off of Fujocoded's{" "}
115 <a href="https://github.com/fujocoded/ao3.js" target="_blank">
116 AO3.js
117 </a>. For questions, comments, job offers, and other inquiries,
118 I'm{" "}
119 <a
120 href="https://bsky.app/profile/veryroundbird.house"
121 target="_blank"
122 >
123 @veryroundbird.house
124 </a>{" "}
125 on bluesky. ✌️
126 </p>
127 </main>
128 </div>
129 </body>
130 </html>
131 );
132};
133
134export default Home;