···

       
1
       
 
       
SITENAME=fixAO3

     

       
2
       
-
       
DESCRIPTION=Unofficial AO3 embed prettifier for social media

     

       
3
       
 
       
DOMAIN=localhost:3000

     

       
0
       
 
       

     

       
4
       
 
       
DEFAULT_THEME=ao3

     

       
5
       
 
       
DEFAULT_BASE_FONT=bricolagegrotesque

     

       
6
       
 
       
DEFAULT_TITLE_FONT=stacksansnotch
     

···

       
1
       
 
       
SITENAME=fixAO3

     

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

     

       
3
       
 
       
DOMAIN=localhost:3000

     

       
4
       
+
       
ARCHIVE=archiveofourown.org

     

       
5
       
 
       
DEFAULT_THEME=ao3

     

       
6
       
 
       
DEFAULT_BASE_FONT=bricolagegrotesque

     

       
7
       
 
       
DEFAULT_TITLE_FONT=stacksansnotch
     

···

       
12
       
 
       


     

       
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
       
 
       


     

       
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
       
 
       
- Bun

     

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

     

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

     

       
19
       
 
       


     

       
20
       
 
       
How to run:

     

       
21
       
 
       


     

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

     

       
0
       
 
       

     

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

     

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

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

···

       
12
       
 
       


     

       
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
       
 
       


     

       
0
       
 
       

     

       
15
       
 
       
- Bun

     

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

     

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

     

       
18
       
 
       


     

       
19
       
 
       
How to run:

     

       
20
       
 
       


     

       
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
       
+
       
- `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
       
 
       
- set up a reverse proxy on your domain or subdomain to localhost:3000

     

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

     

       
25
       
+
       


     

       
26
       
+
       
How to customize: 

     

       
27
       
+
       


     

       
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
       
+
       
- basically all the styles are in src/app/globals.css

     

       
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
       
+
       
- icons are svg components stored in src/icons if you don't like my icon choices

     

       
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
       
 
       
              color: theme.accent2

     

       
218
       
 
       
            }}

     

       
219
       
 
       
          >

     

       
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}

     

       
221
       
 
       
          </div>

     

       
222
       
 
       
        </div>

     

       
223
       
 
       
      </div>

     

···

       
217
       
 
       
              color: theme.accent2

     

       
218
       
 
       
            }}

     

       
219
       
 
       
          >

     

       
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
       
 
       
          </div>

     

       
222
       
 
       
        </div>

     

       
223
       
 
       
      </div>