redirecter for ao3 that adds opengraph metadata
1import styles from "./page.module.css";
2
3export default function Index() {
4 return (
5 <>
6 <main>
7 <p>
8 fixAO3 is a tool that provides opengraph card previews for social
9 media and other programs that display expanded embeds, suchas
10 Discord. Similar to services that do the same for Twitter/X and
11 Bluesky, clicking the link will redirect people to the "canonical"
12 link—that is, the page on AO3.
13 </p>
14 <p>
15 As of now, it definitely works for works, individual work
16 chapters, and series; user profiles are a work in progress as are
17 collections. I'm also working on getting image cards working but I
18 think I need to do something arcane with HTML canvas to make it
19 actually go.
20 </p>
21 <h2>How do I use it?</h2>
22 <p>
23 All you have to do is change the "ao3.org" or
24 "archiveofourown.org" part of your fic's URL to "{process.env.DOMAIN}".
25 It'll automatically pull in your fic's metadata and set up a
26 redirect. Easy as that!
27 </p>
28 <h2>How is my data used?</h2>
29 <p>No data is stored on my servers; it's all just fetched from AO3 in realtime. If this starts eating all my bandwidth I might look into caching resources but also I don't want to deal with a database. Data is only fetched when requested (either by linking a url somewhere that uses opengraph embeds, or by using the card generator).</p>
30 <p>A limited amount of non-identifying data is collected for statistical purposes so I know, like, how much use the site is getting, where people are hearing about it from, etc. If you don't want your data collected, just block goatcounter.com with your ad/scriptblocker of choice and you will be functionally invisible to me. Spooky...</p>
31 <h2>Support fixAO3</h2>
32 <p>
33 If you found this useful and would like to support further
34 development, you can tip me on{" "}
35 <a href="https://ko-fi.com/veryroundbird" target="_blank">
36 Ko-fi
37 </a>! The server/domain costs are maybe like, $40/yr at the moment which is not much, but also I'm an underemployed freelancer doing this for fun, so I appreciate people chipping in if you find it useful!</p>
38 <p>This work would also be much, much harder and more annoying
39 without being able to build off of Fujocoded's{" "}
40 <a href="https://github.com/fujocoded/ao3.js" target="_blank">
41 AO3.js
42 </a> (give them your support too!). For questions, comments, job offers, and other inquiries,
43 I'm{" "}
44 <a
45 href="https://bsky.app/profile/veryroundbird.house"
46 target="_blank"
47 >
48 @veryroundbird.house
49 </a>{" "}
50 on bluesky. ✌️
51 </p>
52 </main>
53 </>
54 );
55}