commit 6eb74d2ddd448000fcae9c47ef77779b1b58372d · veryroundbird.house/fanfic-atproto

+28 -12

README.md

···

       5
       5
        
       - [Infrastructure](#infrastructure)

     

       6
       6
        
         - [Notes](#notes)

     

       7
       7
        
         - [Structure](#structure)

     

       8
       8
       +
       - [Contributing](#contributing)

     

       9
       9
       +
       

     

       10
       10
       +
       > [!WARNING]

     

       11
       11
       +
       > This is alpha software, there's no guarantee that this will work on your system. But if you'd like to try hacking at this, take a look at the [Contributing](#contributing) section once instructions are written up.

     

       8
       12
        
       

     

       9
       13
        
       ## Background

     

       10
       14
        
       

     
···

       27
       31
        
       

     

       28
       32
        
       1. The client (the actual site that displays data)

     

       29
       33
        
       2. The PDS (the server that stores user's data)

     

       30
       30
       -
       3. The AppView (the thing that grabs only relevant data)

     

       34
       34
       +
       3. The AppView (the thing that grabs only relevant data and serves as an API)

     

       31
       35
        
       4. The Lexicon (the blueprint for data to be used in AppViews and clients)

     

       32
       36
        
       

     

       33
       37
        
       ... And probably more, and there's a lot of discussion around how user data ownership / censorship / etc gets handled on those layers.

     
···

       37
       41
        
       Currently, I'm using these technologies:

     

       38
       42
        
       

     

       39
       43
        
       - Astro

     

       40
       40
       -
       - Drizzle ORM

     

       41
       41
       -
       - Turso

     

       42
       42
       -
       - Unstorage

     

       44
       44
       +
       - Drizzle ORM (via Astro DB)

     

       45
       45
       +
         - Turso (LibSQL under the hood)

     

       46
       46
       +
       - Unstorage (via [@fujocoded/authproto](https://github.com/FujoWebDev/fujocoded-plugins/tree/main/astro-authproto))

     

       43
       47
        
       

     

       44
       48
        
       Mainly because: 1, Astro is a really well-documented web framework that's pretty approachable as someone who used to handwrite HTML pages; 2, SQLite / LibSQL are (to my knowledge) fairly cheap databases to run; and 3, Unstorage is pretty dead simple for setting up auth sessions from scratch.

     

       45
       49
        
       

     

       46
       50
        
       ### Structure

     

       47
       51
        
       

     

       48
       48
       -
       #### `src/actions`

     

       52
       52
       +
       #### Database: `db` 

     

       49
       53
        
       

     

       50
       50
       -
       These hold actions that run every time a user wants to publish a new work or signs up for the archive.

     

       54
       54
       +
       This holds all the relevant database code. This also contains the structure and types for database tables.

     

       55
       55
       +
       

     

       56
       56
       +
       #### Actions: `src/actions`

     

       51
       57
        
       

     

       52
       52
       -
       #### `src/assets`

     

       58
       58
       +
       These hold actions that run every time a user wants to publish a new work or signs up for the archive. Basically the backend functionality for this project.

     

       59
       59
       +
       

     

       60
       60
       +
       #### Assets: `src/assets` 

     

       53
       61
        
       

     

       54
       62
        
       This has images / libre font / `.css` files to be used stylistically throughout the site.

     

       55
       63
        
       

     

       56
       56
       -
       #### `src/components`

     

       64
       64
       +
       #### Components: `src/components` 

     

       57
       65
        
       

     

       58
       66
        
       These hold components that are reused throughout `src/pages`. Like PHP includes but in HTML and JavaScript (well, technically it's JSX).

     

       59
       67
        
       

     

       60
       60
       -
       #### `src/lib/db`

     

       68
       68
       +
       #### Pages: `src/pages` 

     

       61
       69
        
       

     

       62
       62
       -
       This holds all the relevant database connecting code. This also contains the types for database tables.

     

       70
       70
       +
       These are the actual routes that are available to end-users. Under the pages are nested pages grouped under folders, namely:

     

       63
       71
        
       

     

       64
       64
       -
       #### `src/pages`

     

       72
       72
       +
       ##### Users: `src/pages/users`

     

       65
       73
        
       

     

       66
       66
       -
       These are the actual pages where data, user interactions, etc happen. So this would be more HTML/CSS/JavaScript-oriented.
     

       74
       74
       +
       These are pages where users can view all user profiles, find a specific user profile, or update their account settings.

     

       75
       75
       +
       

     

       76
       76
       +
       ##### Works: `src/pages/works`

     

       77
       77
       +
       

     

       78
       78
       +
       These only hold pages that are relevant to adding, editing, deleting, or viewing works.

     

       79
       79
       +
       

     

       80
       80
       +
       ## Contributing

     

       81
       81
       +
       

     

       82
       82
       +
       To be added, but feel free to open an issue in the meantime!

+49 -1

astro.config.mjs

···

       25
       25
        
             {

     

       26
       26
        
               provider: fontProviders.fontsource(),

     

       27
       27
        
               name: "IBM Plex Serif",

     

       28
       28
       -
               cssVariable: "--junicode",

     

       28
       28
       +
               cssVariable: "--plex-serif",

     

       29
       29
        
               fallbacks: [ 'Charter', 'Bitstream Charter', 'Sitka Text', 'Cambria', 'Georgia', "serif"],

     

       30
       30
       +
             },

     

       31
       31
       +
             {

     

       32
       32
       +
               provider: fontProviders.fontsource(),

     

       33
       33
       +
               name: "IBM Plex Mono",

     

       34
       34
       +
               cssVariable: "--plex-mono",

     

       30
       35
        
             },

     

       31
       36
        
             {

     

       32
       37
        
               provider: fontProviders.fontsource(),

     

       33
       38
        
               name: "Atkinson Hyperlegible",

     

       34
       39
        
               cssVariable: "--atkinson",

     

       40
       40
       +
             },

     

       41
       41
       +
             {

     

       42
       42
       +
               provider: "local",

     

       43
       43
       +
               name: "OpenDyslexic",

     

       44
       44
       +
               cssVariable: "--dyslexic",

     

       45
       45
       +
               variants: [

     

       46
       46
       +
                 {

     

       47
       47
       +
                   src: [

     

       48
       48
       +
                     "./src/assets/fonts/opendyslexic/OpenDyslexic-Regular.otf",

     

       49
       49
       +
                     "./src/assets/fonts/opendyslexic/OpenDyslexic-Regular.woff",

     

       50
       50
       +
                     "./src/assets/fonts/opendyslexic/OpenDyslexic-Regular.woff2",

     

       51
       51
       +
                   ],

     

       52
       52
       +
                   weight: 400,

     

       53
       53
       +
                   style: "normal"

     

       54
       54
       +
                 },

     

       55
       55
       +
                 {

     

       56
       56
       +
                   src: [

     

       57
       57
       +
                     "./src/assets/fonts/opendyslexic/OpenDyslexic-Italic.otf",

     

       58
       58
       +
                     "./src/assets/fonts/opendyslexic/OpenDyslexic-Italic.woff",

     

       59
       59
       +
                     "./src/assets/fonts/opendyslexic/OpenDyslexic-Italic.woff2",

     

       60
       60
       +
                   ],

     

       61
       61
       +
                   weight: 400,

     

       62
       62
       +
                   style: "italic",

     

       63
       63
       +
                 },

     

       64
       64
       +
                 {

     

       65
       65
       +
                   src: [

     

       66
       66
       +
                     "./src/assets/fonts/opendyslexic/OpenDyslexic-Bold.otf",

     

       67
       67
       +
                     "./src/assets/fonts/opendyslexic/OpenDyslexic-Bold.woff",

     

       68
       68
       +
                     "./src/assets/fonts/opendyslexic/OpenDyslexic-Bold.woff2",

     

       69
       69
       +
                   ],

     

       70
       70
       +
                   weight: 700,

     

       71
       71
       +
                   style: "normal",

     

       72
       72
       +
                 },

     

       73
       73
       +
                 {

     

       74
       74
       +
                   src: [

     

       75
       75
       +
                     "./src/assets/fonts/opendyslexic/OpenDyslexic-Bold-Italic.otf",

     

       76
       76
       +
                     "./src/assets/fonts/opendyslexic/OpenDyslexic-Bold-Italic.woff",

     

       77
       77
       +
                     "./src/assets/fonts/opendyslexic/OpenDyslexic-Bold-Italic.woff2",

     

       78
       78
       +
                   ],

     

       79
       79
       +
                   weight: 700,

     

       80
       80
       +
                   style: "italic",

     

       81
       81
       +
                 },

     

       82
       82
       +
               ],

     

       35
       83
        
             }

     

       36
       84
        
           ],

     

       37
       85
        
         },

+1

bun.lock

···

       8
       8
        
               "@astrojs/node": "^9.4.3",

     

       9
       9
        
               "@fujocoded/authproto": "^0.0.4",

     

       10
       10
        
               "astro": "^5.13.5",

     

       11
       11
       +
               "nanoid": "^5.1.5",

     

       11
       12
        
             },

     

       12
       13
        
           },

     

       13
       14
        
         },

+4

db/config.ts

···

       14
       14
        
       const Works = defineTable({

     

       15
       15
        
         columns: {

     

       16
       16
        
           id: column.number({ primaryKey: true }),

     

       17
       17
       +
           slug: column.text({ unique: true }),

     

       17
       18
        
           author: column.text({ references: () => Users.columns.userDid }),

     

       18
       19
        
           // recordkey

     

       19
       20
        
           title: column.text(),

     
···

       22
       23
        
           createdAt: column.date({ name: "created_at", default: NOW }),

     

       23
       24
        
           updatedAt: column.date({ name: "updated_at", optional: true }),

     

       24
       25
        
         },

     

       26
       26
       +
         indexes: [

     

       27
       27
       +
           { on: ["slug", "createdAt"], unique: true },

     

       28
       28
       +
         ],

     

       25
       29
        
       });

     

       26
       30
        
       

     

       27
       31
        
       export default defineDb({

+2 -1

package.json

···

       5
       5
        
           "@astrojs/db": "^0.17.1",

     

       6
       6
        
           "@astrojs/node": "^9.4.3",

     

       7
       7
        
           "@fujocoded/authproto": "^0.0.4",

     

       8
       8
       -
           "astro": "^5.13.5"

     

       8
       8
       +
           "astro": "^5.13.5",

     

       9
       9
       +
           "nanoid": "^5.1.5"

     

       9
       10
        
         },

     

       10
       11
        
         "scripts": {

     

       11
       12
        
           "dev": "astro dev",

+29

src/actions/users.ts

···

       1
       1
       +
       import { ActionError, defineAction } from "astro:actions";

     

       2
       2
       +
       import { z } from "astro:content";

     

       3
       3
       +
       import { db, Users } from "astro:db";

     

       4
       4
       +
       

     

       5
       5
       +
       export const usersActions = {

     

       6
       6
       +
         addUser: defineAction({

     

       7
       7
       +
           accept: "form",

     

       8
       8
       +
           input: z.object({

     

       9
       9
       +
             did: z.string(),

     

       10
       10
       +
           }),

     

       11
       11
       +
           handler: async ({ did }, context) => {

     

       12
       12
       +
             const loggedInUser = context.locals.loggedInUser;

     

       13
       13
       +
             

     

       14
       14
       +
             if (!loggedInUser) {

     

       15
       15
       +
               throw new ActionError({

     

       16
       16
       +
                 code: "UNAUTHORIZED",

     

       17
       17
       +
                 message: "To connect your PDS, you need to be logged in!",

     

       18
       18
       +
               });

     

       19
       19
       +
             }

     

       20
       20
       +
       

     

       21
       21
       +
             const user = await db

     

       22
       22
       +
               .insert(Users)

     

       23
       23
       +
               .values({ userDid: did })

     

       24
       24
       +
               .returning();

     

       25
       25
       +
             

     

       26
       26
       +
             return user;

     

       27
       27
       +
           },

     

       28
       28
       +
         })

     

       29
       29
       +
       }

src/assets/fonts/opendyslexic/OpenDyslexic-Bold-Italic.otf

This is a binary file and will not be displayed.

src/assets/fonts/opendyslexic/OpenDyslexic-Bold-Italic.woff

This is a binary file and will not be displayed.

src/assets/fonts/opendyslexic/OpenDyslexic-Bold-Italic.woff2

This is a binary file and will not be displayed.

src/assets/fonts/opendyslexic/OpenDyslexic-Bold.otf

This is a binary file and will not be displayed.

src/assets/fonts/opendyslexic/OpenDyslexic-Bold.woff

This is a binary file and will not be displayed.

src/assets/fonts/opendyslexic/OpenDyslexic-Bold.woff2

This is a binary file and will not be displayed.

src/assets/fonts/opendyslexic/OpenDyslexic-Italic.otf

This is a binary file and will not be displayed.

src/assets/fonts/opendyslexic/OpenDyslexic-Italic.woff

This is a binary file and will not be displayed.

src/assets/fonts/opendyslexic/OpenDyslexic-Italic.woff2

This is a binary file and will not be displayed.

src/assets/fonts/opendyslexic/OpenDyslexic-Regular.otf

This is a binary file and will not be displayed.

src/assets/fonts/opendyslexic/OpenDyslexic-Regular.woff

This is a binary file and will not be displayed.

src/assets/fonts/opendyslexic/OpenDyslexic-Regular.woff2

This is a binary file and will not be displayed.

+5 -1

src/assets/styles/base.css

···

       35
       35
        
         --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545cqi, 7.5rem);

     

       36
       36
        
         

     

       37
       37
        
         /* font tokens */

     

       38
       38
       -
         --body: var(--junicode);

     

       38
       38
       +
         --serif: var(--plex-serif);

     

       39
       39
       +
         --sans: var(--atkinson);

     

       40
       40
       +
         --mono: var(--plex-mono);

     

       41
       41
       +
       

     

       42
       42
       +
         --body: var(--serif);

     

       39
       43
        
       }

     

       40
       44
        
       

     

       41
       45
        
       body {

+7 -4

src/components/Settings.astro

···

       1
       1
       -
       <div id="settings">

     

       1
       1
       +
       ---

     

       2
       2
       +
       import Dialog from "./Dialog.astro";

     

       3
       3
       +
       ---

     

       4
       4
       +
       <Dialog id="settings" title="User preferences">

     

       2
       5
        
         <form id="user-settings">

     

       3
       6
        
           <label for="font-family">font family</label>

     

       4
       7
        
           <select name="fontFamily" id="font-family">

     

       5
       8
        
             <option value="default">choose...</option>

     

       6
       9
        
             <option value="--serif">serif</option>

     

       7
       10
        
             <option value="--mono">monospaced</option>

     

       8
       8
       -
             <option value="--sans-serif">sans serif</option>

     

       9
       9
       -
             <option value="--dyslexia">dyslexic</option>

     

       11
       11
       +
             <option value="--sans">sans serif</option>

     

       12
       12
       +
             <option value="--dyslexic">dyslexic</option>

     

       10
       13
        
           </select>

     

       11
       14
        
       

     

       12
       15
        
           <label for="font-size">text size</label>

     
···

       27
       30
        
       

     

       28
       31
        
           <button id="confirm-settings">save</button>

     

       29
       32
        
         </form>

     

       30
       30
       -
       </div>

     

       33
       33
       +
       </Dialog>

     

       31
       34
        
       

     

       32
       35
        
       <style>

     

       33
       36
        
         #test-area {

+4 -1

src/layouts/Layout.astro

···

       10
       10
        
       		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

     

       11
       11
        
       		<meta name="viewport" content="width=device-width" />

     

       12
       12
        
       		<title>{title}</title>

     

       13
       13
       -
       		<Font cssVariable="--junicode" preload />

     

       13
       13
       +
       		<Font cssVariable="--atkinson" preload />

     

       14
       14
       +
       		<Font cssVariable="--dyslexic" preload />

     

       15
       15
       +
       		<Font cssVariable="--plex-mono" preload />

     

       16
       16
       +
       		<Font cssVariable="--plex-serif" preload />

     

       14
       17
        
       		<slot name="head" />

     

       15
       18
        
       	</head>

     

       16
       19
        
       	<body>

+18 -19

src/pages/works/[id].astro

···

       1
       1
        
       ---

     

       2
       2
        
       import Layout from "@/layouts/Layout.astro";

     

       3
       3
        
       import type { Tag } from "@/lib/types";

     

       4
       4
       -
       import type { GetStaticPaths } from "astro";

     

       5
       4
        
       import { db, eq, Users, Works } from "astro:db";

     

       6
       5
        
       

     

       7
       7
       -
       export const getStaticPaths = (async () => {

     

       8
       8
       -
         const works = await db.select().from(Works).all();

     

       9
       9
       -
         return works.map(work => {

     

       10
       10
       -
           return {

     

       11
       11
       -
             params: { id: work.id, },

     

       12
       12
       -
             props: { work },

     

       13
       13
       -
           };

     

       14
       14
       -
         });

     

       15
       15
       -
       }) satisfies GetStaticPaths;

     

       6
       6
       +
       const { id } = Astro.params;

     

       7
       7
       +
       

     

       8
       8
       +
       const works = await db.select()

     

       9
       9
       +
         .from(Works)

     

       10
       10
       +
         .where(eq(Works.id, Number(id)))

     

       11
       11
       +
         .innerJoin(Users, eq(Works.author, Users.userDid))

     

       12
       12
       +
         .limit(1);

     

       16
       13
        
       

     

       17
       17
       -
       const { work } = Astro.props;

     

       18
       18
       -
       // const author = await db.select().from(Users).where(eq(Users.id, Works.author));

     

       19
       14
        
       ---

     

       20
       15
        
       <Layout>

     

       21
       21
       -
         <h1>{work.title}</h1>

     

       22
       22
       -
         <!-- <h2>{author[0].userDid}</h2> -->

     

       23
       23
       -
         <time datetime={work.createdAt.toISOString()}>{work.createdAt}</time>

     

       24
       24
       -
         {(work.tags as Tag[]).map(tag => (

     

       25
       25
       -
           <a href={tag.url}>{tag.label}</a>

     

       26
       26
       -
         ))}

     

       16
       16
       +
         {works.map(({ Works, Users }) => (

     

       17
       17
       +
           <h1>{Works.title}</h1>

     

       18
       18
       +
           <h2>{Users.userDid}</h2>

     

       19
       19
       +
           <time datetime={Works.createdAt.toISOString()}>{Works.createdAt}</time>

     

       20
       20
       +
           <ul>

     

       21
       21
       +
             {(Works.tags as unknown as Tag[]).map(tag => (

     

       22
       22
       +
               <li><a href={tag.url}>{tag.label}</a></li>

     

       23
       23
       +
             ))}

     

       24
       24
       +
           </ul>

     

       27
       25
        
       

     

       28
       28
       -
         <Fragment set:html={work.content} />

     

       26
       26
       +
           <Fragment set:html={Works.content} />

     

       27
       27
       +
         ))}

     

       29
       28
        
       </Layout>