commit f5f4d9df7771d17db69fec583a7a758dd48f6c06 · veryroundbird.house/fanfic-atproto

+47 -30

README.md

···

       1
       1
       -
       # Astro Starter Kit: Minimal

     

       1
       1
       +
       # Fanfics on AtProto

     

       2
       2
       +
       

     

       3
       3
       +
       ## Background

     

       4
       4
       +
       

     

       5
       5
       +
       This was an idea that sparked off a great discussion around decentralizing archives for fanfics and fan works. What if we could have archives that:

     

       6
       6
       +
       

     

       7
       7
       +
       1. ... are censorship resistant,

     

       8
       8
       +
       2. ... are easy (and CHEAP) to host,

     

       9
       9
       +
       3. ... are easy to configure and extend,

     

       10
       10
       +
       4. ... have moderation tools built-in,

     

       11
       11
       +
       5. ... give users on both sides (authors AND readers) more ownership over their data,

     

       12
       12
       +
       6. ... AND have a cool sixth thing here!

     

       13
       13
       +
       

     

       14
       14
       +
       I'm setting out to explore these questions by building a prototype of a fanfic archive on Astro and AtProto.

     

       15
       15
       +
       

     

       16
       16
       +
       ## Infrastructure

     

       17
       17
       +
       

     

       18
       18
       +
       ### Notes

     

       19
       19
       +
       

     

       20
       20
       +
       AtProto, to my understanding, is made of multiple layers. There's:

     

       21
       21
       +
       

     

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

     

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

     

       24
       24
       +
       3. The AppView (the thing that grabs only relevant data)

     

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

     

       26
       26
       +
       

     

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

     

       28
       28
       +
       

     

       29
       29
       +
       In our case, we'll only worry about making the client and then get drafts of the lexicons from the community later.

     

       30
       30
       +
       

     

       31
       31
       +
       Currently, I'm using these technologies:

     

       2
       32
        
       

     

       3
       3
       -
       ```sh

     

       4
       4
       -
       bun create astro@latest -- --template minimal

     

       5
       5
       -
       ```

     

       33
       33
       +
       - Astro

     

       34
       34
       +
       - Drizzle ORM

     

       35
       35
       +
       - Turso

     

       36
       36
       +
       - Unstorage

     

       6
       37
        
       

     

       7
       7
       -
       > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!

     

       38
       38
       +
       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.

     

       8
       39
        
       

     

       9
       9
       -
       ## 🚀 Project Structure

     

       40
       40
       +
       ### Structure

     

       10
       41
        
       

     

       11
       11
       -
       Inside of your Astro project, you'll see the following folders and files:

     

       42
       42
       +
       #### `src/actions`

     

       12
       43
        
       

     

       13
       13
       -
       ```text

     

       14
       14
       -
       /

     

       15
       15
       -
       ├── public/

     

       16
       16
       -
       ├── src/

     

       17
       17
       -
       │   └── pages/

     

       18
       18
       -
       │       └── index.astro

     

       19
       19
       -
       └── package.json

     

       20
       20
       -
       ```

     

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

     

       21
       45
        
       

     

       22
       22
       -
       Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.

     

       46
       46
       +
       #### `src/assets`

     

       23
       47
        
       

     

       24
       24
       -
       There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

     

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

     

       25
       49
        
       

     

       26
       26
       -
       Any static assets, like images, can be placed in the `public/` directory.

     

       50
       50
       +
       #### `src/components`

     

       27
       51
        
       

     

       28
       28
       -
       ## 🧞 Commands

     

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

     

       29
       53
        
       

     

       30
       30
       -
       All commands are run from the root of the project, from a terminal:

     

       54
       54
       +
       #### `src/lib/db`

     

       31
       55
        
       

     

       32
       32
       -
       | Command                   | Action                                           |

     

       33
       33
       -
       | :------------------------ | :----------------------------------------------- |

     

       34
       34
       -
       | `bun install`             | Installs dependencies                            |

     

       35
       35
       -
       | `bun dev`             | Starts local dev server at `localhost:4321`      |

     

       36
       36
       -
       | `bun build`           | Build your production site to `./dist/`          |

     

       37
       37
       -
       | `bun preview`         | Preview your build locally, before deploying     |

     

       38
       38
       -
       | `bun astro ...`       | Run CLI commands like `astro add`, `astro check` |

     

       39
       39
       -
       | `bun astro -- --help` | Get help using the Astro CLI                     |

     

       56
       56
       +
       This holds all the relevant database connecting code. This also contains the types for database tables.

     

       40
       57
        
       

     

       41
       41
       -
       ## 👀 Want to learn more?

     

       58
       58
       +
       #### `src/pages`

     

       42
       59
        
       

     

       43
       43
       -
       Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

     

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

-46

src/lib/db.ts

···

       1
       1
       -
       import { DB_URL, DB_TOKEN } from "astro:env/server";

     

       2
       2
       -
       

     

       3
       3
       -
       import { createDatabase } from "db0";

     

       4
       4
       -
       import { createStorage } from "unstorage";

     

       5
       5
       -
       import dbDriver from "unstorage/drivers/db0";

     

       6
       6
       -
       import libSqlConnector from "db0/connectors/libsql/web";

     

       7
       7
       -
       import { drizzle } from "db0/integrations/drizzle";

     

       8
       8
       -
       import { sqliteTable, int, text } from "drizzle-orm/sqlite-core";

     

       9
       9
       -
       

     

       10
       10
       -
       export const database = createDatabase(

     

       11
       11
       -
         libSqlConnector({

     

       12
       12
       -
           url: DB_URL,

     

       13
       13
       -
           ...import.meta.env.PROD && { authToken: DB_TOKEN },

     

       14
       14
       -
         })

     

       15
       15
       -
       );

     

       16
       16
       -
       

     

       17
       17
       -
       export const driver = drizzle(database);

     

       18
       18
       -
       

     

       19
       19
       -
       export const storage = createStorage({

     

       20
       20
       -
         driver: dbDriver({

     

       21
       21
       -
           database,

     

       22
       22
       -
           tableName: "fanfic_archive",

     

       23
       23
       -
         }),

     

       24
       24
       -
       });

     

       25
       25
       -
       

     

       26
       26
       -
       export const usersTable = sqliteTable("users_table", {

     

       27
       27
       -
         id: int().primaryKey({ autoIncrement: true }),

     

       28
       28
       -
         handle: text().notNull(),

     

       29
       29
       -
         userDid: text().notNull(),

     

       30
       30
       -
       });

     

       31
       31
       -
       

     

       32
       32
       -
       export const worksTable = sqliteTable("works_table", {

     

       33
       33
       -
         id: int().primaryKey({ autoIncrement: true }),

     

       34
       34
       -
         author: text(),

     

       35
       35
       -
         // recordkey

     

       36
       36
       -
         title: text(),

     

       37
       37
       -
         body: text(),

     

       38
       38
       -
       });

     

       39
       39
       -
       

     

       40
       40
       -
       export const tagsTable = sqliteTable("tags_table", {

     

       41
       41
       -
         id: int().primaryKey({ autoIncrement: true }),

     

       42
       42
       -
         label: text(),

     

       43
       43
       -
         // rkey

     

       44
       44
       -
         class: text(),

     

       45
       45
       -
         // classrkey?

     

       46
       46
       -
       });

+12

src/lib/db/drizzle.config.ts

···

       1
       1
       +
       import { DB_URL, DB_TOKEN } from "astro:env/server";

     

       2
       2
       +
       import { defineConfig } from "drizzle-kit";

     

       3
       3
       +
       

     

       4
       4
       +
       export default defineConfig({

     

       5
       5
       +
         dialect: "turso",

     

       6
       6
       +
         schema: "./schema.ts",

     

       7
       7
       +
         out: "./migrations",

     

       8
       8
       +
         dbCredentials: {

     

       9
       9
       +
           url: DB_URL,

     

       10
       10
       +
           authToken: DB_TOKEN,

     

       11
       11
       +
         },

     

       12
       12
       +
       });

+24

src/lib/db/index.ts

···

       1
       1
       +
       import { DB_URL, DB_TOKEN } from "astro:env/server";

     

       2
       2
       +
       

     

       3
       3
       +
       import { createDatabase } from "db0";

     

       4
       4
       +
       import { createStorage } from "unstorage";

     

       5
       5
       +
       import dbDriver from "unstorage/drivers/db0";

     

       6
       6
       +
       import libSqlConnector from "db0/connectors/libsql/node";

     

       7
       7
       +
       import { drizzle } from "db0/integrations/drizzle";

     

       8
       8
       +
       

     

       9
       9
       +
       export const database = createDatabase(

     

       10
       10
       +
         libSqlConnector({

     

       11
       11
       +
           url: DB_URL,

     

       12
       12
       +
           ...import.meta.env.PROD && { authToken: DB_TOKEN },

     

       13
       13
       +
           

     

       14
       14
       +
         })

     

       15
       15
       +
       );

     

       16
       16
       +
       

     

       17
       17
       +
       export const driver = drizzle(database);

     

       18
       18
       +
       

     

       19
       19
       +
       export const storage = createStorage({

     

       20
       20
       +
         driver: dbDriver({

     

       21
       21
       +
           database,

     

       22
       22
       +
           tableName: "fanfic_archive",

     

       23
       23
       +
         }),

     

       24
       24
       +
       });

+23

src/lib/db/schema.ts

···

       1
       1
       +
       import { int, sqliteTable, text } from "drizzle-orm/sqlite-core";

     

       2
       2
       +
       

     

       3
       3
       +
       export const usersTable = sqliteTable("users_table", {

     

       4
       4
       +
         id: int().primaryKey({ autoIncrement: true }),

     

       5
       5
       +
         handle: text().notNull(),

     

       6
       6
       +
         userDid: text().notNull(),

     

       7
       7
       +
       });

     

       8
       8
       +
       

     

       9
       9
       +
       export const worksTable = sqliteTable("works_table", {

     

       10
       10
       +
         id: int().primaryKey({ autoIncrement: true }),

     

       11
       11
       +
         author: text(),

     

       12
       12
       +
         // recordkey

     

       13
       13
       +
         title: text(),

     

       14
       14
       +
         body: text(),

     

       15
       15
       +
       });

     

       16
       16
       +
       

     

       17
       17
       +
       export const tagsTable = sqliteTable("tags_table", {

     

       18
       18
       +
         id: int().primaryKey({ autoIncrement: true }),

     

       19
       19
       +
         label: text(),

     

       20
       20
       +
         // rkey

     

       21
       21
       +
         class: text(),

     

       22
       22
       +
         // classrkey?

     

       23
       23
       +
       });