commit 6eb74d2ddd448000fcae9c47ef77779b1b58372d · veryroundbird.house/fanfic-atproto

+28 -12

README.md

···

       5
        
       - [Infrastructure](#infrastructure)

     

       6
        
         - [Notes](#notes)

     

       7
        
         - [Structure](#structure)

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       8
        
       

     

       9
        
       ## Background

     

       10
        
       

     
···

       27
        
       

     

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

     

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

     

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

     

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

     

       32
        
       

     

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

     
···

       37
        
       Currently, I'm using these technologies:

     

       38
        
       

     

       39
        
       - Astro

     

       40
       -
       - Drizzle ORM

     

       41
       -
       - Turso

     

       42
       -
       - Unstorage

     

       43
        
       

     

       44
        
       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
        
       

     

       46
        
       ### Structure

     

       47
        
       

     

       48
       -
       #### `src/actions`

     

       49
        
       

     

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

     

       0
        
       
     

       0
        
       
     

       51
        
       

     

       52
       -
       #### `src/assets`

     

       0
        
       
     

       0
        
       
     

       53
        
       

     

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

     

       55
        
       

     

       56
       -
       #### `src/components`

     

       57
        
       

     

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

     

       59
        
       

     

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

     

       61
        
       

     

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

     

       63
        
       

     

       64
       -
       #### `src/pages`

     

       65
        
       

     

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

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0

···

       5
        
       - [Infrastructure](#infrastructure)

     

       6
        
         - [Notes](#notes)

     

       7
        
         - [Structure](#structure)

     

       8
       +
       - [Contributing](#contributing)

     

       9
       +
       

     

       10
       +
       > [!WARNING]

     

       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.

     

       12
        
       

     

       13
        
       ## Background

     

       14
        
       

     
···

       31
        
       

     

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

     

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

     

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

     

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

     

       36
        
       

     

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

     
···

       41
        
       Currently, I'm using these technologies:

     

       42
        
       

     

       43
        
       - Astro

     

       44
       +
       - Drizzle ORM (via Astro DB)

     

       45
       +
         - Turso (LibSQL under the hood)

     

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

     

       47
        
       

     

       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.

     

       49
        
       

     

       50
        
       ### Structure

     

       51
        
       

     

       52
       +
       #### Database: `db` 

     

       53
        
       

     

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

     

       55
       +
       

     

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

     

       57
        
       

     

       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
       +
       

     

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

     

       61
        
       

     

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

     

       63
        
       

     

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

     

       65
        
       

     

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

     

       67
        
       

     

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

     

       69
        
       

     

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

     

       71
        
       

     

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

     

       73
        
       

     

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

     

       75
       +
       

     

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

     

       77
       +
       

     

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

     

       79
       +
       

     

       80
       +
       ## Contributing

     

       81
       +
       

     

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

+49 -1

astro.config.mjs

···

       25
        
             {

     

       26
        
               provider: fontProviders.fontsource(),

     

       27
        
               name: "IBM Plex Serif",

     

       28
       -
               cssVariable: "--junicode",

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       30
        
             },

     

       31
        
             {

     

       32
        
               provider: fontProviders.fontsource(),

     

       33
        
               name: "Atkinson Hyperlegible",

     

       34
        
               cssVariable: "--atkinson",

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       35
        
             }

     

       36
        
           ],

     

       37
        
         },

···

       25
        
             {

     

       26
        
               provider: fontProviders.fontsource(),

     

       27
        
               name: "IBM Plex Serif",

     

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

     

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

     

       30
       +
             },

     

       31
       +
             {

     

       32
       +
               provider: fontProviders.fontsource(),

     

       33
       +
               name: "IBM Plex Mono",

     

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

     

       35
        
             },

     

       36
        
             {

     

       37
        
               provider: fontProviders.fontsource(),

     

       38
        
               name: "Atkinson Hyperlegible",

     

       39
        
               cssVariable: "--atkinson",

     

       40
       +
             },

     

       41
       +
             {

     

       42
       +
               provider: "local",

     

       43
       +
               name: "OpenDyslexic",

     

       44
       +
               cssVariable: "--dyslexic",

     

       45
       +
               variants: [

     

       46
       +
                 {

     

       47
       +
                   src: [

     

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

     

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

     

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

     

       51
       +
                   ],

     

       52
       +
                   weight: 400,

     

       53
       +
                   style: "normal"

     

       54
       +
                 },

     

       55
       +
                 {

     

       56
       +
                   src: [

     

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

     

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

     

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

     

       60
       +
                   ],

     

       61
       +
                   weight: 400,

     

       62
       +
                   style: "italic",

     

       63
       +
                 },

     

       64
       +
                 {

     

       65
       +
                   src: [

     

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

     

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

     

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

     

       69
       +
                   ],

     

       70
       +
                   weight: 700,

     

       71
       +
                   style: "normal",

     

       72
       +
                 },

     

       73
       +
                 {

     

       74
       +
                   src: [

     

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

     

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

     

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

     

       78
       +
                   ],

     

       79
       +
                   weight: 700,

     

       80
       +
                   style: "italic",

     

       81
       +
                 },

     

       82
       +
               ],

     

       83
        
             }

     

       84
        
           ],

     

       85
        
         },

+1

bun.lock

···

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

     

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

     

       10
        
               "astro": "^5.13.5",

     

       0
        
       
     

       11
        
             },

     

       12
        
           },

     

       13
        
         },

···

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

     

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

     

       10
        
               "astro": "^5.13.5",

     

       11
       +
               "nanoid": "^5.1.5",

     

       12
        
             },

     

       13
        
           },

     

       14
        
         },

+4

db/config.ts

···

       14
        
       const Works = defineTable({

     

       15
        
         columns: {

     

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

     

       0
        
       
     

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

     

       18
        
           // recordkey

     

       19
        
           title: column.text(),

     
···

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

     

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

     

       24
        
         },

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       25
        
       });

     

       26
        
       

     

       27
        
       export default defineDb({

···

       14
        
       const Works = defineTable({

     

       15
        
         columns: {

     

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

     

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

     

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

     

       19
        
           // recordkey

     

       20
        
           title: column.text(),

     
···

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

     

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

     

       25
        
         },

     

       26
       +
         indexes: [

     

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

     

       28
       +
         ],

     

       29
        
       });

     

       30
        
       

     

       31
        
       export default defineDb({

+2 -1

package.json

···

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

     

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

     

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

     

       8
       -
           "astro": "^5.13.5"

     

       0
        
       
     

       9
        
         },

     

       10
        
         "scripts": {

     

       11
        
           "dev": "astro dev",

···

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

     

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

     

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

     

       8
       +
           "astro": "^5.13.5",

     

       9
       +
           "nanoid": "^5.1.5"

     

       10
        
         },

     

       11
        
         "scripts": {

     

       12
        
           "dev": "astro dev",

+29

src/actions/users.ts

···

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

     

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

     

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

     

       4
       +
       

     

       5
       +
       export const usersActions = {

     

       6
       +
         addUser: defineAction({

     

       7
       +
           accept: "form",

     

       8
       +
           input: z.object({

     

       9
       +
             did: z.string(),

     

       10
       +
           }),

     

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

     

       12
       +
             const loggedInUser = context.locals.loggedInUser;

     

       13
       +
             

     

       14
       +
             if (!loggedInUser) {

     

       15
       +
               throw new ActionError({

     

       16
       +
                 code: "UNAUTHORIZED",

     

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

     

       18
       +
               });

     

       19
       +
             }

     

       20
       +
       

     

       21
       +
             const user = await db

     

       22
       +
               .insert(Users)

     

       23
       +
               .values({ userDid: did })

     

       24
       +
               .returning();

     

       25
       +
             

     

       26
       +
             return user;

     

       27
       +
           },

     

       28
       +
         })

     

       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
        
         --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545cqi, 7.5rem);

     

       36
        
         

     

       37
        
         /* font tokens */

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       39
        
       }

     

       40
        
       

     

       41
        
       body {

···

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

     

       36
        
         

     

       37
        
         /* font tokens */

     

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

     

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

     

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

     

       41
       +
       

     

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

     

       43
        
       }

     

       44
        
       

     

       45
        
       body {

+7 -4

src/components/Settings.astro

···

       1
       -
       <div id="settings">

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       2
        
         <form id="user-settings">

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

       10
        
           </select>

     

       11
        
       

     

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

     
···

       27
        
       

     

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

     

       29
        
         </form>

     

       30
       -
       </div>

     

       31
        
       

     

       32
        
       <style>

     

       33
        
         #test-area {

···

       1
       +
       ---

     

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

     

       3
       +
       ---

     

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

     

       5
        
         <form id="user-settings">

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

       13
        
           </select>

     

       14
        
       

     

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

     
···

       30
        
       

     

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

     

       32
        
         </form>

     

       33
       +
       </Dialog>

     

       34
        
       

     

       35
        
       <style>

     

       36
        
         #test-area {

+4 -1

src/layouts/Layout.astro

···

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

     

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

     

       12
        
       		<title>{title}</title>

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       14
        
       		<slot name="head" />

     

       15
        
       	</head>

     

       16
        
       	<body>

···

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

     

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

     

       12
        
       		<title>{title}</title>

     

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

     

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

     

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

     

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

     

       17
        
       		<slot name="head" />

     

       18
        
       	</head>

     

       19
        
       	<body>

+18 -19

src/pages/works/[id].astro

···

       1
        
       ---

     

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

     

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

     

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

     

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

     

       6
        
       

     

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

     

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

     

       9
       -
         return works.map(work => {

     

       10
       -
           return {

     

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

     

       12
       -
             props: { work },

     

       13
       -
           };

     

       14
       -
         });

     

       15
       -
       }) satisfies GetStaticPaths;

     

       16
        
       

     

       17
       -
       const { work } = Astro.props;

     

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

     

       19
        
       ---

     

       20
        
       <Layout>

     

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

     

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

     

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

     

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

     

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

     

       26
       -
         ))}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       27
        
       

     

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

     

       0
        
       
     

       29
        
       </Layout>

···

       1
        
       ---

     

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

     

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

     

       0
        
       
     

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

     

       5
        
       

     

       6
       +
       const { id } = Astro.params;

     

       7
       +
       

     

       8
       +
       const works = await db.select()

     

       9
       +
         .from(Works)

     

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

     

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

     

       12
       +
         .limit(1);

     

       0
        
       
     

       0
        
       
     

       13
        
       

     

       0
        
       
     

       0
        
       
     

       14
        
       ---

     

       15
        
       <Layout>

     

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

     

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

     

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

     

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

     

       20
       +
           <ul>

     

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

     

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

     

       23
       +
             ))}

     

       24
       +
           </ul>

     

       25
        
       

     

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

     

       27
       +
         ))}

     

       28
        
       </Layout>