···

       
1
       
1
       
 
       
SITENAME=fixAO3

     

       
2
       
2
       
-
       
DESCRIPTION=Unofficial AO3 embed prettifier for social media

     

       
2
       
2
       
+
       
DESCRIPTION="Unofficial AO3 embed prettifier for social media"

     

       
3
       
3
       
 
       
DOMAIN=localhost:3000

     

       
4
       
4
       
+
       
ARCHIVE=archiveofourown.org

     

       
4
       
5
       
 
       
DEFAULT_THEME=ao3

     

       
5
       
6
       
 
       
DEFAULT_BASE_FONT=bricolagegrotesque

     

       
6
       
7
       
 
       
DEFAULT_TITLE_FONT=stacksansnotch
     

···

       
12
       
12
       
 
       


     

       
13
       
13
       
 
       
you too can self-host if you want to change the visuals or just have a different redirection url or something. the main things you need installed are:

     

       
14
       
14
       
 
       


     

       
15
       
15
       
-
       
- ImageMagick (at least 6.9), built from source with pkg-config, pangocairo, libpng-dev, libwebp-dev. this is kind of a pain in the ass but it is in fact essential

     

       
16
       
15
       
 
       
- Bun

     

       
17
       
16
       
 
       
- Probably some process manager like PM2 (you will also need Node.js for PM2)

     

       
18
       
17
       
 
       
- A web server that allows reverse proxying (I use Caddy)

     

       
19
       
18
       
 
       


     

       
20
       
19
       
 
       
How to run:

     

       
21
       
20
       
 
       


     

       
22
       
22
       
-
       
- `bun main.jsx` will run the application. if you're running it through pm2, do `pm2 start --name=fixao3 bun -- main.jsx`

     

       
21
       
21
       
+
       
- copy .env.example to .env, and update the variables in there to be whatever you want them to be. the lists of existing themes and fonts can be found in the src/lib folder, for setting defaults

     

       
22
       
22
       
+
       
- `bun --bun next start` will run the application. if you're running it through pm2, do `pm2 start --name=fixao3 bun -- --bun next start`

     

       
23
       
23
       
 
       
- set up a reverse proxy on your domain or subdomain to localhost:3000

     

       
24
       
24
       
-
       
- it should, theoretically work (installing imagemagick from source is the hard part. wheeze)
     

       
24
       
24
       
+
       
- it should, theoretically work (installing imagemagick from source is the hard part. wheeze)

     

       
25
       
25
       
+
       


     

       
26
       
26
       
+
       
How to customize: 

     

       
27
       
27
       
+
       


     

       
28
       
28
       
+
       
- stuff like site name, meta description, etc. are set in site variables. right now the ARCHIVE var is only used for what to display on the bottom of cards because I'm not sure how AO3.js supports other archives apart from that it does.

     

       
29
       
29
       
+
       
- basically all the styles are in src/app/globals.css

     

       
30
       
30
       
+
       
- add fonts to src/lib/baseFonts.js and src/lib/titleFonts.js, and themes to src/lib/themes.js (titleFonts already grabs all the baseFonts as long as you don't remove `...baseFonts` from the array)

     

       
31
       
31
       
+
       
- icons are svg components stored in src/icons if you don't like my icon choices

     

       
32
       
32
       
+
       
- add font files to the fonts folder. they have to be either ttf or otf (sorry, no woff/woff2, next/og hates those as it turns out)
     

···

       
217
       
217
       
 
       
              color: theme.accent2

     

       
218
       
218
       
 
       
            }}

     

       
219
       
219
       
 
       
          >

     

       
220
       
220
       
-
       
            {image.props.get("wordcount") === 'true' && `${image.words} words • `}{(image.props.get("chapters") === 'true' && image.chapterCount !== null) && `${image.chapterCount}  chapters • `}{image.props.get("postedAt") === 'true' && `posted on ${image.postedAt} • `}{image.props.get("updatedAt") === 'true' && `updated on ${image.updatedAt} • `}https://archiveofourown.org/{addr}

     

       
220
       
220
       
+
       
            {image.props.get("wordcount") === 'true' && `${image.words} words • `}{(image.props.get("chapters") === 'true' && image.chapterCount !== null) && `${image.chapterCount}  chapters • `}{image.props.get("postedAt") === 'true' && `posted on ${image.postedAt} • `}{image.props.get("updatedAt") === 'true' && `updated on ${image.updatedAt} • `}{process.env.ARCHIVE}/{addr}

     

       
221
       
221
       
 
       
          </div>

     

       
222
       
222
       
 
       
        </div>

     

       
223
       
223
       
 
       
      </div>