commit 73a06444a9b98d726236a8d4c81783d557cd03c1 · veryroundbird.house/fanfic-atproto

+3 -8

astro.config.mjs

···

       3
       3
        
       import node from '@astrojs/node';

     

       4
       4
        
       import db from "@astrojs/db";

     

       5
       5
        
       import fujocodedAuthproto from "@fujocoded/authproto";

     

       6
       6
       -
       

     

       7
       6
        
       import tailwindcss from "@tailwindcss/vite";

     

       8
       7
        
       

     

       9
       8
        
       // https://astro.build/config

     

       10
       9
        
       export default defineConfig({

     

       11
       10
        
         output: "server",

     

       12
       12
       -
       

     

       13
       11
        
         adapter: node({

     

       14
       12
        
           mode: 'standalone',

     

       15
       13
        
         }),

     

       16
       16
       -
       

     

       17
       14
        
         integrations: [

     

       18
       15
        
           db(),

     

       19
       16
        
           fujocodedAuthproto({

     
···

       24
       21
        
             // },

     

       25
       22
        
           })

     

       26
       23
        
         ],

     

       27
       27
       -
       

     

       24
       24
       +
         vite: {

     

       25
       25
       +
           plugins: [tailwindcss()],

     

       26
       26
       +
         },

     

       28
       27
        
         experimental: {

     

       29
       28
        
           fonts: [

     

       30
       29
        
             {

     
···

       87
       86
        
               ],

     

       88
       87
        
             }

     

       89
       88
        
           ],

     

       90
       90
       -
         },

     

       91
       91
       -
       

     

       92
       92
       -
         vite: {

     

       93
       93
       -
           plugins: [tailwindcss()],

     

       94
       89
        
         },

     

       95
       90
        
       });

+13

bun.lock

···

       14
       14
        
               "tailwindcss": "^4.1.13",

     

       15
       15
        
             },

     

       16
       16
        
             "devDependencies": {

     

       17
       17
       +
               "@tailwindcss/typography": "^0.5.16",

     

       17
       18
        
               "daisyui": "^5.1.7",

     

       18
       19
        
             },

     

       19
       20
        
           },

     
···

       319
       320
        
       

     

       320
       321
        
           "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.13", "", { "os": "win32", "cpu": "x64" }, "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw=="],

     

       321
       322
        
       

     

       323
       323
       +
           "@tailwindcss/typography": ["@tailwindcss/typography@0.5.16", "", { "dependencies": { "lodash.castarray": "^4.4.0", "lodash.isplainobject": "^4.0.6", "lodash.merge": "^4.6.2", "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA=="],

     

       324
       324
       +
       

     

       322
       325
        
           "@tailwindcss/vite": ["@tailwindcss/vite@4.1.13", "", { "dependencies": { "@tailwindcss/node": "4.1.13", "@tailwindcss/oxide": "4.1.13", "tailwindcss": "4.1.13" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-0PmqLQ010N58SbMTJ7BVJ4I2xopiQn/5i6nlb4JmxzQf8zcS5+m2Cv6tqh+sfDwtIdjoEnOvwsGQ1hkUi8QEHQ=="],

     

       323
       326
        
       

     

       324
       327
        
           "@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],

     
···

       601
       604
        
       

     

       602
       605
        
           "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.1", "", { "os": "win32", "cpu": "x64" }, "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg=="],

     

       603
       606
        
       

     

       607
       607
       +
           "lodash.castarray": ["lodash.castarray@4.4.0", "", {}, "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="],

     

       608
       608
       +
       

     

       609
       609
       +
           "lodash.isplainobject": ["lodash.isplainobject@4.0.6", "", {}, "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="],

     

       610
       610
       +
       

     

       611
       611
       +
           "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],

     

       612
       612
       +
       

     

       604
       613
        
           "longest-streak": ["longest-streak@3.1.0", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],

     

       605
       614
        
       

     

       606
       615
        
           "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],

     
···

       759
       768
        
       

     

       760
       769
        
           "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],

     

       761
       770
        
       

     

       771
       771
       +
           "postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="],

     

       772
       772
       +
       

     

       762
       773
        
           "prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],

     

       763
       774
        
       

     

       764
       775
        
           "promise-limit": ["promise-limit@2.7.0", "", {}, "sha512-7nJ6v5lnJsXwGprnGXga4wx6d1POjvi5Qmf1ivTRxTjH4Z/9Czja/UCMLVmB9N93GeWOU93XaFaEt6jbuoagNw=="],

     
···

       906
       917
        
           "unist-util-visit-parents": ["unist-util-visit-parents@6.0.1", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" } }, "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw=="],

     

       907
       918
        
       

     

       908
       919
        
           "unstorage": ["unstorage@1.17.0", "", { "dependencies": { "anymatch": "^3.1.3", "chokidar": "^4.0.3", "destr": "^2.0.5", "h3": "^1.15.4", "lru-cache": "^10.4.3", "node-fetch-native": "^1.6.7", "ofetch": "^1.4.1", "ufo": "^1.6.1" }, "peerDependencies": { "@azure/app-configuration": "^1.8.0", "@azure/cosmos": "^4.2.0", "@azure/data-tables": "^13.3.0", "@azure/identity": "^4.6.0", "@azure/keyvault-secrets": "^4.9.0", "@azure/storage-blob": "^12.26.0", "@capacitor/preferences": "^6.0.3 || ^7.0.0", "@deno/kv": ">=0.9.0", "@netlify/blobs": "^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0", "@planetscale/database": "^1.19.0", "@upstash/redis": "^1.34.3", "@vercel/blob": ">=0.27.1", "@vercel/functions": "^2.2.12", "@vercel/kv": "^1.0.1", "aws4fetch": "^1.0.20", "db0": ">=0.2.1", "idb-keyval": "^6.2.1", "ioredis": "^5.4.2", "uploadthing": "^7.4.4" }, "optionalPeers": ["@azure/app-configuration", "@azure/cosmos", "@azure/data-tables", "@azure/identity", "@azure/keyvault-secrets", "@azure/storage-blob", "@capacitor/preferences", "@deno/kv", "@netlify/blobs", "@planetscale/database", "@upstash/redis", "@vercel/blob", "@vercel/functions", "@vercel/kv", "aws4fetch", "db0", "idb-keyval", "ioredis", "uploadthing"] }, "sha512-l9Z7lBiwtNp8ZmcoZ/dmPkFXFdtEdZtTZafCSnEIj3YvtkXeGAtL2rN8MQFy/0cs4eOLpuRJMp9ivdug7TCvww=="],

     

       920
       920
       +
       

     

       921
       921
       +
           "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],

     

       909
       922
        
       

     

       910
       923
        
           "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],

     

       911
       924

package.json

···

       19
       19
        
         },

     

       20
       20
        
         "type": "module",

     

       21
       21
        
         "devDependencies": {

     

       22
       22
       +
           "@tailwindcss/typography": "^0.5.16",

     

       22
       23
        
           "daisyui": "^5.1.7"

     

       23
       24
        
         }

     

       24
       25
        
       }

+1 -1

src/actions/users.ts

···

       6
       6
        
         addUser: defineAction({

     

       7
       7
        
           accept: "form",

     

       8
       8
        
           input: z.object({

     

       9
       9
       -
             nickname: z.string(),

     

       9
       9
       +
             nickname: z.string().optional(),

     

       10
       10
        
           }),

     

       11
       11
        
           handler: async (input, context) => {

     

       12
       12
        
             const loggedInUser = context.locals.loggedInUser;

+5 -7

src/actions/works.ts

···

       6
       6
        
       const workSchema = z.object({

     

       7
       7
        
         title: z.string(),

     

       8
       8
        
         content: z.string(),

     

       9
       9
       -
         tags: z.array(

     

       10
       10
       -
           z.object({

     

       11
       11
       -
             label: z.string(),

     

       12
       12
       -
             uri: z.string(),

     

       13
       13
       -
           })

     

       14
       14
       -
         ),

     

       9
       9
       +
         tags: z.string(),

     

       15
       10
        
       });

     

       16
       11
        
       

     

       17
       12
        
       export const worksActions = {

     
···

       44
       39
        
             }

     

       45
       40
        
       

     

       46
       41
        
             const user = query[0];

     

       42
       42
       +
       

     

       47
       43
        
             // check nanoid for collision probability: https://zelark.github.io/nano-id-cc/

     

       48
       44
        
             const alphabet = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';

     

       49
       45
        
             const nanoid = customAlphabet(alphabet, 16);

     

       50
       46
        
             const slug = nanoid();

     

       47
       47
       +
       

     

       48
       48
       +
             // convert the tags into json thru shenaniganery

     

       51
       49
        
             

     

       52
       50
        
             const work = await db.insert(Works).values({

     

       53
       51
        
               slug,

     
···

       56
       54
        
               content: input.content,

     

       57
       55
        
               tags: input.tags,

     

       58
       56
        
             }).returning();

     

       59
       59
       -
       

     

       57
       57
       +
             

     

       60
       58
        
             // depending on whether someone toggled the privacy option, push this into firehouse

     

       61
       59
        
             // const agent = await

     

       62
       60

+28 -1

src/assets/styles/global.css

···

       1
       1
        
       @import "tailwindcss";

     

       2
       2
       -
       @plugin "daisyui";
     

       2
       2
       +
       @plugin "daisyui";

     

       3
       3
       +
       @plugin "@tailwindcss/typography";

     

       4
       4
       +
       

     

       5
       5
       +
       @theme {

     

       6
       6
       +
         /* font tokens */

     

       7
       7
       +
         --font-sans: var(--atkinson);

     

       8
       8
       +
         --font-serif: var(--plex-serif);

     

       9
       9
       +
         --font-mono: var(--plex-mono);

     

       10
       10
       +
         --font-dyslexic: var(--dyslexic);

     

       11
       11
       +
       

     

       12
       12
       +
         /* color tokens */

     

       13
       13
       +
         

     

       14
       14
       +
         /* size tokens */

     

       15
       15
       +
         /* @link https://utopia.fyi/type/calculator?c=360,18,1.618,1240,20,1.25,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

     

       16
       16
       +
         --text-xs: clamp(0.4297rem, 0.2783rem + 0.6732cqi, 0.8rem);

     

       17
       17
       +
         --text-sm: clamp(0.6953rem, 0.5707rem + 0.554cqi, 1rem);

     

       18
       18
       +
         --text-base: clamp(1.125rem, 1.0739rem + 0.2273cqi, 1.25rem);

     

       19
       19
       +
         --text-lg: clamp(1.5625rem, 1.9257rem + -0.4686cqi, 1.8203rem);

     

       20
       20
       +
         --text-xl: clamp(1.9531rem, 3.351rem + -1.8037cqi, 2.9452rem);

     

       21
       21
       +
         --text-2xl: clamp(2.4414rem, 5.716rem + -4.2252cqi, 4.7653rem);

     

       22
       22
       +
         --text-3xl: clamp(3.0518rem, 9.616rem + -8.4699cqi, 7.7102rem);

     

       23
       23
       +
         --text-4xl: clamp(3.8147rem, 16.018rem + -15.7462cqi, 12.4751rem);

     

       24
       24
       +
         --text-5xl: clamp(4.7684rem, 26.4915rem + -28.0298cqi, 20.1848rem);

     

       25
       25
       +
         --text-6xl: clamp(5.9605rem, 43.581rem + -48.5427cqi, 32.6589rem);

     

       26
       26
       +
         --text-7xl: clamp(7.4506rem, 71.4115rem + -82.5302cqi, 52.8422rem);

     

       27
       27
       +
         --text-8xl: clamp(9.3132rem, 116.6654rem + -138.5189cqi, 85.4986rem);

     

       28
       28
       +
         --text-9xl: clamp(11.6415rem, 190.1667rem + -230.355cqi, 138.3368rem);

     

       29
       29
       +
       }

+3 -31

src/components/Dialog.astro

···

       4
       4
        
       interface Props {

     

       5
       5
        
         id: string;

     

       6
       6
        
         title: string;

     

       7
       7
       +
         class?: string;

     

       7
       8
        
         alert?: boolean;

     

       8
       9
        
       }

     

       9
       10
        
       

     

       10
       10
       -
       const { id, title, alert = false } = Astro.props;

     

       11
       11
       +
       const { id, title, class: className, alert = false } = Astro.props;

     

       11
       12
        
       ---

     

       12
       12
       -
       <dialog {id} role={alert ? "alertdialog" : undefined} closedby="any">

     

       13
       13
       +
       <dialog {id} class:list={["card", className]} role={alert ? "alertdialog" : undefined} closedby="any">

     

       13
       14
        
         <header>

     

       14
       15
        
           <h1>{title}</h1>

     

       15
       16
        
           <form method="dialog">

     
···

       25
       26
        
       </dialog>

     

       26
       27
        
       

     

       27
       28
        
       <style>

     

       28
       28
       -
         dialog {

     

       29
       29
       -
           margin: auto;

     

       30
       30
       -
           min-height: 200px;

     

       31
       31
       -
           padding: 0;

     

       32
       32
       -
       

     

       33
       33
       -
           header {

     

       34
       34
       -
             display: flex;

     

       35
       35
       -
             align-items: center;

     

       36
       36
       -
             background-color: aqua;

     

       37
       37
       -
             padding: 0.5rem;

     

       38
       38
       -
             

     

       39
       39
       -
             h1 {

     

       40
       40
       -
               flex: 1;

     

       41
       41
       -
               font-size: var(--step--1);

     

       42
       42
       -
             }

     

       43
       43
       -
       

     

       44
       44
       -
             .close {

     

       45
       45
       -
               cursor: pointer;

     

       46
       46
       -
               min-width: 44px;

     

       47
       47
       -
               min-height: 44px;

     

       48
       48
       -
               display: grid;

     

       49
       49
       -
               place-content: center;

     

       50
       50
       -
             }

     

       51
       51
       -
           }

     

       52
       52
       -
       

     

       53
       53
       -
           .dialog-content {

     

       54
       54
       -
             padding: 1rem;

     

       55
       55
       -
           }

     

       56
       56
       -
         }

     

       57
       29
        
       </style>

+13 -15

src/components/Navbar.astro

···

       1
       1
        
       ---

     

       2
       2
       -
       const LINKS = [

     

       3
       3
       -
         { label: "Home", url: "/" },

     

       4
       4
       -
         { label: "Works", url: "/works" },

     

       5
       5
       -
       ];

     

       6
       6
       -
       

     

       7
       2
        
       const loggedInUser = Astro.locals.loggedInUser;

     

       8
       3
        
       ---

     

       9
       9
       -
       <nav id="main-nav">

     

       10
       10
       -
         <ul>

     

       11
       11
       -
           {LINKS.map(({ label, url }) => (

     

       12
       12
       -
             <li><a href={url}>{label}</a></li>

     

       13
       13
       -
           ))}

     

       14
       14
       -
           {loggedInUser

     

       15
       15
       -
             ? <li><a href="/user">Settings</a></li>

     

       16
       16
       -
             : <li><a href="/login">Login</a></li>

     

       17
       17
       -
           }

     

       18
       18
       -
         </ul>

     

       4
       4
       +
       <nav id="main-nav" class="navbar bg-base-100">

     

       5
       5
       +
         <div class="flex-1">

     

       6
       6
       +
           <a href="/" class="btn btn-ghost text-xl">Home</a>

     

       7
       7
       +
         </div>

     

       8
       8
       +
         <div class="flex-none">

     

       9
       9
       +
           <ul class="menu menu-horizontal px-1">

     

       10
       10
       +
             <li><a href="/works">Works</a></li>

     

       11
       11
       +
             {loggedInUser

     

       12
       12
       +
               ? <li><a href="/user">Settings</a></li>

     

       13
       13
       +
               : <li><a href="/login">Login</a></li>

     

       14
       14
       +
             }

     

       15
       15
       +
           </ul>

     

       16
       16
       +
         </div>

     

       19
       17
        
       </nav>

+7 -5

src/components/Popover.astro

···

       4
       4
        
       interface Props {

     

       5
       5
        
         id?: string;

     

       6
       6
        
         label: string;

     

       7
       7
       +
         direction: "top" | "bottom";

     

       7
       8
        
         icon?: "info" | "warning" | "danger";

     

       8
       9
        
         title?: string;

     

       9
       10
        
         class?: string;

     

       10
       11
        
       }

     

       11
       12
        
       

     

       12
       12
       -
       const { id, label, icon, title, class: className, ...rest } = Astro.props;

     

       13
       13
       +
       const { id, label, direction = "top", icon, title, class: className, ...rest } = Astro.props;

     

       13
       14
        
       ---

     

       14
       15
        
       <!-- type button needs to be set here, otherwise it doesn't work inside forms -->

     

       15
       16
        
       <button

     
···

       24
       25
        
             (icon === "warning") ? "text-warning" :

     

       25
       26
        
             (icon === "danger") ? "text-error" :

     

       26
       27
        
             "text-base-content",

     

       27
       27
       -
           "popover-btn",

     

       28
       28
       -
           className

     

       28
       28
       +
           "popover-btn"

     

       29
       29
        
         ]} 

     

       30
       30
        
         aria-describedby={id}

     

       31
       31
        
         popovertarget={id}

     
···

       67
       67
        
         </div>

     

       68
       68
        
       </div>

     

       69
       69
        
       

     

       70
       70
       -
       <style define:vars={{ anchor: `--${id}-anchor` }}>

     

       70
       70
       +
       <style define:vars={{ anchor: `--${id}-anchor`, direction }}>

     

       71
       71
        
         .popover-btn {

     

       72
       72
        
           anchor-name: var(--anchor);

     

       73
       73
        
         }

     

       74
       74
        
       

     

       75
       75
        
         .popover-content {

     

       76
       76
        
           position-anchor: var(--anchor);

     

       77
       77
       -
           top: calc(anchor(top) - 5em);

     

       77
       77
       +
           top: anchor(var(--direction));

     

       78
       78
       +
           left: anchor(center);

     

       79
       79
       +
           transform: translateX(-50%);

     

       78
       80
        
           position-try-fallbacks: flip-block, flip-inline;

     

       79
       81
        
         }

     

       80
       82
        
       </style>

+14 -10

src/layouts/Layout.astro

···

       6
       6
        
       interface Props {

     

       7
       7
        
       	title?: string;

     

       8
       8
        
       	skipLink?: string;

     

       9
       9
       +
       	class?: string;

     

       9
       10
        
       }

     

       10
       11
        
       

     

       11
       11
       -
       const { title = "fanfics", skipLink } = Astro.props;

     

       12
       12
       +
       const { title = "fanfics", skipLink, class: className, ...rest } = Astro.props;

     

       12
       13
        
       ---

     

       13
       14
        
       <html lang="en">

     

       14
       15
        
       	<head>

     
···

       22
       23
        
       		<Font cssVariable="--plex-serif" preload />

     

       23
       24
        
       		<slot name="head" />

     

       24
       25
        
       	</head>

     

       25
       25
       -
       	<body>

     

       26
       26
       +
       	<body class="flex flex-col min-h-svh">

     

       26
       27
        
       		<header>

     

       27
       28
        
       			{skipLink && (

     

       28
       29
        
       				<a class="skip-link" href={`#${skipLink}`}>Skip to content</a>

     
···

       31
       32
        
       			<Navbar />

     

       32
       33
        
       		</header>

     

       33
       34
        
       

     

       34
       34
       -
       		<slot />

     

       35
       35
       +
       		<div class:list={["min-w-[65ch] max-w-10/12 mx-auto", className]} {...rest}>

     

       36
       36
       +
       			<slot />

     

       37
       37
       +
       		</div>

     

       35
       38
        
       

     

       36
       36
       -
       		<footer>

     

       39
       39
       +
       		<footer class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content mt-auto p-5">

     

       37
       40
        
       			copyright or something ig

     

       38
       41
        
       		</footer>

     

       39
       42
        
       	</body>

     

       40
       43
        
       </html>

     

       41
       44
        
       

     

       42
       45
        
       <style>

     

       43
       43
       -
       	.skip-link {

     

       44
       44
       -
       		position: absolute;

     

       45
       45
       -
       		left: calc(max-content * -1);

     

       46
       46
       -
       	}

     

       46
       46
       +
       	@reference "../assets/styles/global.css";

     

       47
       47
        
       

     

       48
       48
       -
       	footer {

     

       49
       49
       -
       		margin-top: auto;

     

       48
       48
       +
       	.skip-link {

     

       49
       49
       +
       		@apply absolute top-3 -left-full transition-all ease-in-out btn btn-ghost;

     

       50
       50
       +
       		

     

       51
       51
       +
       		&:focus {

     

       52
       52
       +
       			@apply left-3;

     

       53
       53
       +
       		}

     

       50
       54
        
       	}

     

       51
       55
        
       </style>

-11

src/pages/index.astro

···

       1
       1
        
       ---

     

       2
       2
       -
       import Popover from "~/Popover.astro";

     

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

     

       4
       3
        
       

     

       5
       4
        
       const currentUser = Astro.locals.loggedInUser;

     
···

       10
       9
        
       		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium eum est quisquam distinctio magni recusandae quia vero tempore consectetur! Dolore repellat, voluptatem dignissimos sit eaque iste atque facilis in saepe?</p>

     

       11
       10
        
       		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, maxime libero eveniet repellat corporis, architecto voluptate maiores ullam accusamus quasi nostrum nihil placeat cum earum ex voluptatum, harum sunt quam!</p>

     

       12
       11
        
       	</main>

     

       13
       13
       -
       

     

       14
       14
       -
       	<form>

     

       15
       15
       -
       	<Popover id="hey" icon="info" label="test">

     

       16
       16
       -
       		<p>hello?</p>

     

       17
       17
       -
       	</Popover>

     

       18
       18
       -
       	</form>

     

       19
       19
       -
       

     

       20
       20
       -
       	<Popover id="what" label="tell me">

     

       21
       21
       -
       		<p>fdajlkdfsjl?</p>

     

       22
       22
       -
       	</Popover>

     

       23
       12
        
       

     

       24
       13
        
       	{currentUser

     

       25
       14
        
       		? <>

+27 -20

src/pages/login.astro

···

       5
       5
        
       const currentUser = Astro.locals.loggedInUser;

     

       6
       6
        
       ---

     

       7
       7
        
       <Layout>

     

       8
       8
       -
         {

     

       9
       9
       -
           currentUser ? (

     

       10
       10
       -
             // If there's a current user, show the log out button

     

       11
       11
       -
             <form action="/oauth/logout" method="post">

     

       12
       12
       -
               <button type="submit">Logout</button>

     

       13
       13
       -
             </form>

     

       14
       14
       -
           ) : (

     

       15
       15
       -
             // If there's no current user, show the log in button

     

       16
       16
       -
             <form action="/oauth/login" method="post">

     

       17
       17
       -
               <label for="handle">Input your handle</label>

     

       18
       18
       -
               <Popover id="handle-help" label="help">

     

       19
       19
       -
                 <h3>What's my handle?</h3>

     

       20
       20
       -
                 <p>It'll look like a website URL without the <samp>https://</samp> or slashes, so a typical BlueSky handle will look something like: <b>alice.bsky.social</b>.</p>

     

       21
       21
       -
                 <p>What yours will look like depends on whether you made a custom handle!</p>

     

       22
       22
       -
               </Popover>

     

       23
       23
       -
               <input name="atproto-id" id="handle" required />

     

       24
       24
       -
               <button type="submit">Login</button>

     

       25
       25
       -
             </form>

     

       26
       26
       -
           )

     

       27
       27
       -
         }

     

       8
       8
       +
         <main id="content">

     

       9
       9
       +
           <h1 class="text-xl">Log in</h1>

     

       10
       10
       +
           {

     

       11
       11
       +
             currentUser ? (

     

       12
       12
       +
               // If there's a current user, show the log out button

     

       13
       13
       +
               <form action="/oauth/logout" method="post">

     

       14
       14
       +
                 <button type="submit">Logout</button>

     

       15
       15
       +
               </form>

     

       16
       16
       +
             ) : (

     

       17
       17
       +
               // If there's no current user, show the log in button

     

       18
       18
       +
               <form action="/oauth/login" method="post">

     

       19
       19
       +
                 <fieldset class="fieldset mx-auto place-content-center max-w-md">

     

       20
       20
       +
                   <label class="fieldset-label" for="handle">

     

       21
       21
       +
                     Input your handle

     

       22
       22
       +
                     <Popover id="handle-help" icon="info" label="help" direction="bottom">

     

       23
       23
       +
                       <h3>What's my handle?</h3>

     

       24
       24
       +
                       <p>It'll look like a website URL without the <samp>https://</samp> or slashes, so a typical BlueSky handle will look something like: <b>alice.bsky.social</b>.</p>

     

       25
       25
       +
                       <p>What yours will look like depends on whether you made a custom handle!</p>

     

       26
       26
       +
                     </Popover>

     

       27
       27
       +
                   </label>

     

       28
       28
       +
                   <input type="text" class="input w-full" name="atproto-id" id="handle" required />

     

       29
       29
       +
                   <button class="btn btn-primary" type="submit">Login</button>

     

       30
       30
       +
                 </fieldset>

     

       31
       31
       +
               </form>

     

       32
       32
       +
             )

     

       33
       33
       +
           }

     

       34
       34
       +
         </main>

     

       28
       35
        
       </Layout>

+44 -25

src/pages/user/index.astro

···

       7
       7
        
       

     

       8
       8
        
       const loggedInUser = Astro.locals.loggedInUser;

     

       9
       9
        
       

     

       10
       10
       -
       const user = await db.select()

     

       11
       11
       -
         .from(Users)

     

       12
       12
       -
         .where(eq(Users.userDid, loggedInUser?.did ?? ""))

     

       13
       13
       -
         .fullJoin(Works, eq(Users.userDid, Works.author));

     

       14
       14
       -
       

     

       15
       10
        
       if (!loggedInUser) {

     

       16
       11
        
         return Astro.redirect("/login");

     

       17
       12
        
       }

     

       13
       13
       +
       

     

       14
       14
       +
       const query = await db.select()

     

       15
       15
       +
         .from(Users)

     

       16
       16
       +
         .where(eq(Users.userDid, loggedInUser.did))

     

       17
       17
       +
         .limit(1);

     

       18
       18
       +
       const user = query[0];

     

       19
       19
       +
       

     

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

     

       21
       21
       +
         .from(Works)

     

       22
       22
       +
         .where(eq(Works.author, user.userDid));

     

       18
       23
        
       ---

     

       19
       24
        
       <Layout>

     

       20
       25
        
         <h1>User Settings</h1>

     

       21
       26
        
         <p>{loggedInUser?.handle}</p>

     

       22
       27
        
         

     

       23
       28
        
         <!-- registration will only happen in the below form! -->

     

       24
       24
       -
         {(user.length === 0) && (

     

       29
       29
       +
         {(query.length === 0) && (

     

       25
       30
        
           <>

     

       26
       31
        
             <h2>Connect account</h2>

     

       27
       32
        
             <div class="info">

     
···

       33
       38
        
             <Dialog id="connect-account" title="Are you sure?">

     

       34
       39
        
               <form action={actions.usersActions.addUser} method="post">

     

       35
       40
        
                 <label for="nickname">Nickname</label>

     

       36
       36
       -
                 <Popover id="nickname-info" label="info" icon="danger">

     

       41
       41
       +
                 <Popover id="nickname-info" label="info" icon="warning" direction="bottom">

     

       37
       42
        
                   <p>You can optionally set your nickname for this site. This is separate from your handle and acts as your identifier.</p>

     

       38
       43
        
                   <p>Think of your handle as what you use to log in with, and your nickname as the name you want to publish your works under.</p>

     

       39
       44
        
                   <h3>Important</h3>

     

       40
       40
       -
                   <p>If you do set a nickname, </p>

     

       45
       45
       +
                   <p>If you do set a nickname, please make sure it's unique! Having two people with the same nickname would cause confusion, unfortunately.</p>

     

       41
       46
        
                 </Popover>

     

       42
       47
        
                 <input type="text" name="nickname" id="nickname" />

     

       43
       48
        
       

     
···

       48
       53
        
           </>

     

       49
       54
        
         )}

     

       50
       55
        
         

     

       51
       51
       -
         <!-- this is weird but this should ONLY render if the user is registered -->

     

       52
       52
       -
         {user.map(({ Users, Works }) => {

     

       53
       53
       -
           if (Users) {

     

       54
       54
       -
             return (

     

       55
       55
       -
               <>

     

       56
       56
       -
                 <time datetime={Users.joinedAt.toISOString()}>{Users.joinedAt}</time>

     

       57
       57
       -
                 <p>{Users.userDid}</p>

     

       56
       56
       +
         {user && (

     

       57
       57
       +
           <>

     

       58
       58
       +
             <h2>your nickname???</h2>

     

       59
       59
       +
             <time datetime={user.joinedAt.toISOString()}>{user.joinedAt}</time>

     

       60
       60
       +
             <p>{user.userDid}</p>

     

       61
       61
       +
       

     

       62
       62
       +
             {works && (

     

       63
       63
       +
               <section>

     

       64
       64
       +
                 <ul>

     

       65
       65
       +
                   {works.map(work => (

     

       66
       66
       +
                     <article>

     

       67
       67
       +
                       <h3>{work.title}</h3>

     

       68
       68
       +
       

     

       69
       69
       +
                       <time datetime={work.createdAt.toISOString()}>

     

       70
       70
       +
                         {work.createdAt}

     

       71
       71
       +
                       </time>

     

       72
       72
       +
                       {work.updatedAt && (

     

       73
       73
       +
                         <time datetime={work.updatedAt.toISOString()}>

     

       74
       74
       +
                           {work.updatedAt}

     

       75
       75
       +
                         </time>

     

       76
       76
       +
                       )}

     

       58
       77
        
       

     

       59
       59
       -
                 {Works

     

       60
       60
       -
                   ? <section>

     

       61
       78
        
                       <ul>

     

       62
       62
       -
                         {JSON.stringify(Works)}

     

       79
       79
       +
                         {JSON.stringify(work.tags)}

     

       63
       80
        
                       </ul>

     

       64
       64
       -
                     </section>

     

       65
       65
       -
                   : <a href="/works/add">go write! if you want :)</a>

     

       66
       66
       -
                 }

     

       67
       67
       -
               </>

     

       68
       68
       -
             )

     

       69
       69
       -
           }

     

       70
       70
       -
         })}

     

       81
       81
       +
                       

     

       82
       82
       +
                       summary here

     

       83
       83
       +
                     </article>

     

       84
       84
       +
                   ))}

     

       85
       85
       +
                 </ul>

     

       86
       86
       +
               </section>

     

       87
       87
       +
             )}

     

       88
       88
       +
           </>

     

       89
       89
       +
         )}

     

       71
       90
        
       </Layout>

     

       72
       91
        
       

     

       73
       92
        
       <script>

+41 -17

src/pages/works/add.astro

···

       1
       1
        
       ---

     

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

     

       3
       3
       -
       import { actions } from "astro:actions";

     

       3
       3
       +
       import { actions, isInputError } from "astro:actions";

     

       4
       4
        
       

     

       5
       5
        
       const loggedInUser = Astro.locals.loggedInUser;

     

       6
       6
        
       

     
···

       9
       9
        
       }

     

       10
       10
        
       

     

       11
       11
        
       const result = Astro.getActionResult(actions.worksActions.addWork);

     

       12
       12
       +
       const errors = isInputError(result?.error) ? result.error.fields : {};

     

       12
       13
        
       ---

     

       13
       14
        
       <Layout>

     

       14
       14
       -
         <h1>Add a new work</h1>

     

       15
       15
       +
         <main>

     

       16
       16
       +
           <h1>Add a new work</h1>

     

       15
       17
        
       

     

       16
       16
       -
         <form action={actions.worksActions.addWork} method="post">

     

       17
       17
       -
           <label for="title">title</label>

     

       18
       18
       -
           <input type="text" name="title" id="title" required />

     

       18
       18
       +
           <form action={actions.worksActions.addWork} method="post">

     

       19
       19
       +
             <label for="title">title</label>

     

       20
       20
       +
             <input transition:persist type="text" name="title" id="title" aria-describedby="title-error" required />

     

       21
       21
       +
             {errors.title && (

     

       22
       22
       +
               <div id="title-error">

     

       23
       23
       +
                 {errors.title}

     

       24
       24
       +
               </div>

     

       25
       25
       +
             )}

     

       19
       26
        
       

     

       20
       20
       -
           <label for="tags">add tags</label>

     

       21
       21
       -
           <input list="tags-list" name="tags" id="tags" />

     

       22
       22
       -
           <!-- could be cool to fetch tags from a tags server or smth? idk -->

     

       23
       23
       -
           <datalist id="tags-list">

     

       24
       24
       -
             <option value="test">here</option>

     

       25
       25
       -
             <option value="tag2">another</option>

     

       26
       26
       -
             <option value="tag3">try them all!</option>

     

       27
       27
       -
           </datalist>

     

       27
       27
       +
             <label for="tags">add tags</label>

     

       28
       28
       +
             <input transition:persist type="text" list="tags-list" name="tags" id="tags" aria-describedby="tags-error" />

     

       29
       29
       +
             <!-- could be cool to fetch tags from a tags server or smth? idk -->

     

       30
       30
       +
             <datalist id="tags-list">

     

       31
       31
       +
               <option value="test">here</option>

     

       32
       32
       +
               <option value="tag2">another</option>

     

       33
       33
       +
               <option value="tag3">try them all!</option>

     

       34
       34
       +
             </datalist>

     

       35
       35
       +
             {errors.tags && (

     

       36
       36
       +
               <div id="tags-error">

     

       37
       37
       +
                 {errors.tags}

     

       38
       38
       +
               </div>

     

       39
       39
       +
             )}

     

       28
       40
        
       

     

       29
       29
       -
           <label for="content">body</label>

     

       30
       30
       -
           <textarea name="content" id="content"></textarea>

     

       41
       41
       +
             <label for="content">body</label>

     

       42
       42
       +
             <textarea transition:persist name="content" id="content" aria-describedby="content-error"></textarea>

     

       43
       43
       +
             {errors.content && (

     

       44
       44
       +
               <div id="content-error">

     

       45
       45
       +
                 {errors.content}

     

       46
       46
       +
               </div>

     

       47
       47
       +
             )}

     

       31
       48
        
       

     

       32
       32
       -
           <button>submit</button>

     

       33
       33
       -
         </form>

     

       49
       49
       +
             <button>submit</button>

     

       50
       50
       +
           </form>

     

       51
       51
       +
       

     

       52
       52
       +
           {result?.error && (

     

       53
       53
       +
             <div class="error">

     

       54
       54
       +
               {result.error.message}

     

       55
       55
       +
             </div>

     

       56
       56
       +
           )}

     

       57
       57
       +
         </main>

     

       34
       58
        
       </Layout>

+40 -16

src/pages/works/index.astro

···

       11
       11
        
       ---

     

       12
       12
        
       

     

       13
       13
        
       <Layout>

     

       14
       14
       -
         <h1>works</h1>

     

       15
       15
       -
         {loggedInUser && 

     

       16
       16
       -
           <a href="/works/add">wanna write kid?</a>

     

       17
       17
       -
         }

     

       14
       14
       +
         <h1 class="text-5xl">works</h1>

     

       18
       15
        
       

     

       19
       19
       -
         {works.map(({ Works, Users }) => (

     

       20
       20
       -
           <article>

     

       21
       21
       -
             <h2><a href={`/works/${Works.slug}`}>{Works.title}</a></h2>

     

       22
       22
       -
             <h3>{Users.userDid}</h3>

     

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

     

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

     

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

     

       26
       26
       -
             ))}

     

       16
       16
       +
         <main id="content">

     

       17
       17
       +
           {loggedInUser && 

     

       18
       18
       +
             <a href="/works/add">wanna write kid?</a>

     

       19
       19
       +
           }

     

       27
       20
        
       

     

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

     

       29
       29
       -
           </article>

     

       30
       30
       -
         ))}

     

       31
       31
       -
       </Layout>
     

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

     

       22
       22
       +
             <article class="card">

     

       23
       23
       +
               <header>

     

       24
       24
       +
                 <div class="flex items-center justify-between">

     

       25
       25
       +
                   <hgroup class="flex-1">

     

       26
       26
       +
                     <h2 class="card-title">

     

       27
       27
       +
                       <a href={`/works/${Works.slug}`}>{Works.title}</a>

     

       28
       28
       +
                     </h2>

     

       29
       29
       +
                     <h3>{Users.userDid}</h3>

     

       30
       30
       +
                   </hgroup>

     

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

     

       32
       32
       +
                 </div>

     

       33
       33
       +
                 {JSON.stringify(Works.tags)}

     

       34
       34
       +
                 {/* <ul class="flex flex-wrap gap-1.5">

     

       35
       35
       +
                   {(Works.tags as Tag[]).map((tag: Tag) => (

     

       36
       36
       +
                     <li><a class="tag" href={tag.url}>{tag.label}</a></li>

     

       37
       37
       +
                   ))}

     

       38
       38
       +
                 </ul> */}

     

       39
       39
       +
               </header>

     

       40
       40
       +
       

     

       41
       41
       +
               <div class="card-body prose lg:prose-xl">

     

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

     

       43
       43
       +
               </div>

     

       44
       44
       +
             </article>

     

       45
       45
       +
           ))}

     

       46
       46
       +
         </main>

     

       47
       47
       +
       </Layout>

     

       48
       48
       +
       

     

       49
       49
       +
       <style>

     

       50
       50
       +
         @reference "../../assets/styles/global.css";

     

       51
       51
       +
       

     

       52
       52
       +
         .tag {

     

       53
       53
       +
           @apply btn btn-accent;  

     

       54
       54
       +
         }

     

       55
       55
       +
       </style>