commit 01cc18048e93d0051181ef05a69d77920e768c05 · veryroundbird.house/fanfic-atproto

bun.lock

···

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

     

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

     

       9
       9
        
               "@atproto/api": "^0.16.7",

     

       10
       10
       +
               "@floating-ui/dom": "^1.7.4",

     

       10
       11
        
               "@fujocoded/authproto": "^0.0.4",

     

       11
       12
        
               "@lucide/astro": "^0.542.0",

     

       12
       13
        
               "@tailwindcss/vite": "^4.1.13",

     
···

       147
       148
        
           "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.9", "", { "os": "win32", "cpu": "ia32" }, "sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww=="],

     

       148
       149
        
       

     

       149
       150
        
           "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.9", "", { "os": "win32", "cpu": "x64" }, "sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ=="],

     

       151
       151
       +
       

     

       152
       152
       +
           "@floating-ui/core": ["@floating-ui/core@1.7.3", "", { "dependencies": { "@floating-ui/utils": "^0.2.10" } }, "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w=="],

     

       153
       153
       +
       

     

       154
       154
       +
           "@floating-ui/dom": ["@floating-ui/dom@1.7.4", "", { "dependencies": { "@floating-ui/core": "^1.7.3", "@floating-ui/utils": "^0.2.10" } }, "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA=="],

     

       155
       155
       +
       

     

       156
       156
       +
           "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],

     

       150
       157
        
       

     

       151
       158
        
           "@fujocoded/authproto": ["@fujocoded/authproto@0.0.4", "", { "dependencies": { "@astrojs/db": "^0.17.1", "@atproto/identity": "^0.4.8", "@atproto/oauth-client-node": "^0.3.3", "astro-integration-kit": "^0.19.0", "unstorage": "^1.16.1" }, "peerDependencies": { "astro": "^5.13.0" } }, "sha512-VoKfScLMaGLAOB6WKFsU7lEsCNvy98KW7MaPfqLKIbjg0MqWrbeyvCak4mGDjQUe96jm8DBMkd6b2W+T369PNA=="],

     

       152
       159

package.json

···

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

     

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

     

       7
       7
        
           "@atproto/api": "^0.16.7",

     

       8
       8
       +
           "@floating-ui/dom": "^1.7.4",

     

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

     

       9
       10
        
           "@lucide/astro": "^0.542.0",

     

       10
       11
        
           "@tailwindcss/vite": "^4.1.13",

+22 -2

src/assets/styles/global.css

···

       1
       1
        
       @import "tailwindcss";

     

       2
       2
       -
       @plugin "daisyui";

     

       2
       2
       +
       @plugin "daisyui" {

     

       3
       3
       +
         themes: all;

     

       4
       4
       +
         /* add new themes here */

     

       5
       5
       +
       }

     

       3
       6
        
       @plugin "@tailwindcss/typography";

     

       4
       7
        
       

     

       8
       8
       +
       /* default theme */

     

       5
       9
        
       @theme {

     

       6
       10
        
         /* font tokens */

     

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

     
···

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

     

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

     

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

     

       29
       29
       -
       }
     

       33
       33
       +
       }

     

       34
       34
       +
       

     

       35
       35
       +
       @custom-variant dark (&:where(

     

       36
       36
       +
         [data-theme=dark],

     

       37
       37
       +
         [data-theme=dracula], 

     

       38
       38
       +
         [data-theme=synthwave], 

     

       39
       39
       +
         [data-theme=halloween], 

     

       40
       40
       +
         [data-theme=forest], 

     

       41
       41
       +
         [data-theme=aqua],

     

       42
       42
       +
         [data-theme=black],

     

       43
       43
       +
         [data-theme=luxury],

     

       44
       44
       +
         [data-theme=business],

     

       45
       45
       +
         [data-theme=night],

     

       46
       46
       +
         [data-theme=coffee],

     

       47
       47
       +
         [data-theme=sunset],

     

       48
       48
       +
         [data-theme=abyss]

     

       49
       49
       +
       ));

+13 -11

src/components/Dialog.astro

···

       13
       13
        
       <dialog

     

       14
       14
        
         {id}

     

       15
       15
        
         class:list={[

     

       16
       16
       -
           "m-auto", 

     

       17
       17
       -
           "rounded-box",

     

       18
       18
       -
           "shadow"

     

       19
       19
       -
           , className,

     

       16
       16
       +
           "modal modal-bottom sm:modal-middle",

     

       17
       17
       +
           className,

     

       20
       18
        
         ]}

     

       21
       19
        
         role={alert ? "alertdialog" : undefined}

     

       22
       20
        
         closedby="any"

     

       23
       21
        
       >

     

       24
       24
       -
         <div class="card">

     

       25
       25
       -
           <header class="flex items-center justify-between">

     

       26
       26
       -
             <h1 class="card-title">{title}</h1>

     

       22
       22
       +
         <div class="modal-box">

     

       23
       23
       +
           <header class="modal-header">

     

       24
       24
       +
             <h1 class="text-lg leading-none flex-1 pl-2">{title}</h1>

     

       27
       25
        
             <form method="dialog">

     

       28
       28
       -
               <button aria-label="close" class="close">

     

       26
       26
       +
               <button aria-label="close" class="btn btn-error">

     

       29
       27
        
                 <X />

     

       30
       28
        
               </button>

     

       31
       29
        
             </form>

     

       32
       30
        
           </header>

     

       33
       33
       -
       

     

       34
       34
       -
           <div class="card-body">

     

       31
       31
       +
           

     

       32
       32
       +
           <div class="mt-14">

     

       35
       33
        
             <slot />

     

       36
       34
        
           </div>

     

       37
       35
        
         </div>

     

       38
       36
        
       </dialog>

     

       39
       37
        
       

     

       40
       38
        
       <style>

     

       41
       41
       -
       

     

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

     

       40
       40
       +
         

     

       41
       41
       +
         .modal-header {

     

       42
       42
       +
           @apply absolute top-0 left-0 flex items-center justify-between p-2 container bg-accent text-accent-content;

     

       43
       43
       +
         }

     

       42
       44
        
       </style>

+62 -24

src/components/Popover.astro

···

       4
       4
        
       interface Props {

     

       5
       5
        
         id?: string;

     

       6
       6
        
         label: string;

     

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

     

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

     

       9
       8
        
         title?: string;

     

       10
       9
        
         class?: string;

     

       11
       10
        
       }

     

       12
       11
        
       

     

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

     

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

     

       14
       13
        
       ---

     

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

     

       16
       15
        
       <button

     

       17
       16
        
         type="button" 

     

       18
       17
        
         id={`${id}-trigger`} 

     

       19
       18
        
         class:list={[

     

       20
       20
       -
           "btn",

     

       21
       21
       -
           "btn-xs", 

     

       19
       19
       +
           "btn btn-xs", 

     

       22
       20
        
           icon && ["btn-circle", "btn-ghost"],

     

       23
       21
        
           icon &&

     

       24
       22
        
             (icon === "info") ? "text-info" :

     
···

       47
       45
        
       <div

     

       48
       46
        
         {id} 

     

       49
       47
        
         class:list={[

     

       50
       50
       -
           "dropdown",

     

       51
       51
       -
           "card",

     

       52
       52
       -
           "bg-base-100",

     

       53
       53
       -
           "w-72",

     

       54
       54
       -
           "shadow",

     

       55
       48
        
           "popover-content",

     

       56
       49
        
           className,

     

       57
       50
        
         ]} 

     

       58
       58
       -
         role="tooltip" {...rest} 

     

       59
       59
       -
         popover="auto"

     

       51
       51
       +
         role="tooltip"  

     

       52
       52
       +
         popover="auto" 

     

       53
       53
       +
         {...rest} 

     

       60
       54
        
       >

     

       61
       55
        
         <div class="card-body">

     

       62
       56
        
           {title && (

     
···

       67
       61
        
         </div>

     

       68
       62
        
       </div>

     

       69
       63
        
       

     

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

     

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

     

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

     

       66
       66
       +
       

     

       71
       67
        
         .popover-btn {

     

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

     

       68
       68
       +
           @supports (anchor-name: var(--anchor)) {

     

       69
       69
       +
             anchor-name: var(--anchor);

     

       70
       70
       +
           }

     

       73
       71
        
         }

     

       74
       72
        
       

     

       75
       73
        
         .popover-content {

     

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

     

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

     

       78
       78
       -
           left: anchor(center);

     

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

     

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

     

       74
       74
       +
           @apply dropdown card mx-0 inset-auto bg-base-100 w-72 shadow;

     

       75
       75
       +
       

     

       76
       76
       +
           @supports (position-anchor: var(--anchor)) and (left: anchor(center)) {

     

       77
       77
       +
             position-anchor: var(--anchor);

     

       78
       78
       +
             left: anchor(center);

     

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

     

       80
       80
       +
           }

     

       81
       81
        
         }

     

       82
       82
        
       </style>

     

       83
       83
        
       

     

       84
       84
       -
       <script define:vars={{ id }} is:inline>

     

       85
       85
       -
         const trigger = document.getElementById(`${id}-trigger`);

     

       86
       86
       -
         const popover = document.getElementById(id);

     

       84
       84
       +
       <script>

     

       85
       85
       +
         import { computePosition, autoUpdate, shift, flip } from "@floating-ui/dom";

     

       86
       86
       +
         const triggers = document.querySelectorAll(".popover-btn");

     

       87
       87
       +
         

     

       88
       88
       +
         triggers.forEach(trigger => {

     

       89
       89
       +
           const btn = trigger as HTMLButtonElement;

     

       90
       90
       +
           // triggering button will always end with "-trigger"

     

       91
       91
       +
           // so slice that from the id

     

       92
       92
       +
           const id = btn.id.slice(0, -8);

     

       93
       93
       +
           const popover = document.getElementById(`${id}`) as HTMLElement;

     

       94
       94
       +
           

     

       95
       95
       +
           btn.addEventListener("click", (e) => {

     

       96
       96
       +
             e.preventDefault();

     

       97
       97
       +
             popover.togglePopover();

     

       98
       98
       +
           });

     

       87
       99
        
       

     

       88
       88
       -
         trigger.addEventListener("click", (e) => {

     

       89
       89
       -
           e.preventDefault();

     

       90
       90
       -
           popover.togglePopover();

     

       100
       100
       +
           popover.addEventListener("toggle", (e) => {

     

       101
       101
       +
             const cleanup = autoUpdate(

     

       102
       102
       +
               btn, 

     

       103
       103
       +
               popover, 

     

       104
       104
       +
               () => {

     

       105
       105
       +
                 computePosition(btn, popover, {

     

       106
       106
       +
                   middleware: [

     

       107
       107
       +
                     flip(),

     

       108
       108
       +
                     shift({

     

       109
       109
       +
                       crossAxis: false,

     

       110
       110
       +
                     }),

     

       111
       111
       +
                   ],

     

       112
       112
       +
                 }).then(({ placement, middlewareData }) => {

     

       113
       113
       +
                   Object.assign(popover.style, {

     

       114
       114
       +
                     top: `anchor(${placement})`,

     

       115
       115
       +
                     ...(placement === "top") && {

     

       116
       116
       +
                       transform: (middlewareData.shift?.enabled.x) 

     

       117
       117
       +
                         ? `translate(calc(-50% + ${middlewareData.shift.x}px), -100%)`

     

       118
       118
       +
                         : `translate(-50%, -100%)`,

     

       119
       119
       +
                     },

     

       120
       120
       +
                   });

     

       121
       121
       +
                 });

     

       122
       122
       +
               });

     

       123
       123
       +
             if (e.newState === "open") {

     

       124
       124
       +
               cleanup;

     

       125
       125
       +
             } else {

     

       126
       126
       +
               cleanup();

     

       127
       127
       +
             }

     

       128
       128
       +
           });

     

       91
       129
        
         });

     

       92
       130
        
       </script>

+44 -21

src/components/Settings.astro

···

       3
       3
        
       ---

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

       13
       13
       -
           </select>

     

       6
       6
       +
           <fieldset class="fieldset">

     

       7
       7
       +
             <label for="font-family">font family</label>

     

       8
       8
       +
             <select class="select" name="fontFamily" id="font-family">

     

       9
       9
       +
               <option value="default">choose...</option>

     

       10
       10
       +
               <option value="--font-serif">serif</option>

     

       11
       11
       +
               <option value="--font-mono">monospaced</option>

     

       12
       12
       +
               <option value="--font-sans">sans serif</option>

     

       13
       13
       +
               <option value="--font-dyslexic">dyslexic</option>

     

       14
       14
       +
             </select>

     

       15
       15
       +
           </fieldset>

     

       14
       16
        
       

     

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

     

       16
       16
       -
           <input type="range" name="fontSize" id="font-size" min="-1" max="2" step="1" />

     

       17
       17
       +
           <fieldset class="fieldset">

     

       18
       18
       +
             <label for="font-size">text size</label>

     

       19
       19
       +
             <input class="range" type="range" name="fontSize" id="font-size" min="-1" max="2" step="1" />

     

       20
       20
       +
           </fieldset>

     

       17
       21
        
       

     

       18
       18
       -
           <label for="line-height">line height</label>

     

       19
       19
       -
           <input type="range" name="lineHeight" id="line-height" min="1" max="2" step="0.05" />

     

       22
       22
       +
           <fieldset class="fieldset">

     

       23
       23
       +
             <label for="line-height">line height</label>

     

       24
       24
       +
             <input class="range" type="range" name="lineHeight" id="line-height" min="1" max="2" step="0.05" />

     

       25
       25
       +
           </fieldset>

     

       26
       26
       +
           

     

       27
       27
       +
           <fieldset class="fieldset">

     

       28
       28
       +
             <label for="letter-spacing">letter spacing</label>

     

       29
       29
       +
             <input class="range" type="range" name="letterSpacing" id="letter-spacing" min="0" max="0.1" step="0.01" />

     

       30
       30
       +
           </fieldset>

     

       20
       31
        
       

     

       21
       21
       -
           <label for="letter-spacing">letter spacing</label>

     

       22
       22
       -
           <input type="range" name="letterSpacing" id="letter-spacing" min="0" max="0.1" step="0.01" />

     

       23
       23
       -
       

     

       24
       24
       -
           <label for="word-spacing">word spacing</label>

     

       25
       25
       -
           <input type="range" name="wordSpacing" id="word-spacing" min="0" max="0.5" step="0.01" />

     

       32
       32
       +
           <fieldset class="fieldset">

     

       33
       33
       +
             <label for="word-spacing">word spacing</label>

     

       34
       34
       +
             <input class="range" type="range" name="wordSpacing" id="word-spacing" min="0" max="0.5" step="0.01" />

     

       35
       35
       +
           </fieldset>

     

       26
       36
        
       

     

       27
       27
       -
           <div id="test-area">

     

       37
       37
       +
           <div id="test-area" class="mt-4 text-(length:--size) leading-(--line-height) tracking-(--letter-spacing) line-clamp-4">

     

       28
       38
        
             <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores quae dolorum debitis vero nostrum nobis aspernatur ipsam sunt dolorem, eum ut corrupti unde commodi soluta natus repellendus totam animi adipisci.</p>

     

       29
       39
        
           </div>

     

       30
       40
        
       

     

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

     

       41
       41
       +
           <div class="modal-action">

     

       42
       42
       +
             <button formmethod="dialog" value="default" class="btn btn-neutral">Cancel</button>

     

       43
       43
       +
             <button id="confirm-settings" class="btn btn-primary">Save</button>

     

       44
       44
       +
           </div>

     

       32
       45
        
         </form>

     

       33
       46
        
       </Dialog>

     

       34
       47
        
       

     

       35
       48
        
       <style>

     

       36
       49
        
         #test-area {

     

       37
       37
       -
           --font: var(--body);

     

       50
       50
       +
           --step--1: clamp(0.6953rem, 0.5707rem + 0.554vw, 1rem);

     

       51
       51
       +
           --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);

     

       52
       52
       +
           --step-1: clamp(1.5625rem, 1.9257rem + -0.4686vw, 1.8203rem);

     

       53
       53
       +
           --step-2: clamp(1.9531rem, 3.351rem + -1.8037vw, 2.9452rem);

     

       54
       54
       +
       

     

       55
       55
       +
           --font: var(--font-sans);

     

       38
       56
        
           --size: var(--step-0);

     

       39
       57
        
           --letter-spacing: 0em;

     

       40
       58
        
           --word-spacing: 0em;

     
···

       55
       73
        
         const test = document.getElementById("test-area");

     

       56
       74
        
       

     

       57
       75
        
         form?.addEventListener("submit", (e) => {

     

       58
       58
       -
           e.preventDefault();

     

       76
       76
       +
           const target = e.target as HTMLFormElement;

     

       77
       77
       +
           if (target.nodeValue === null) {

     

       78
       78
       +
             return;

     

       79
       79
       +
           } else {

     

       80
       80
       +
             e.preventDefault();

     

       81
       81
       +
           }

     

       59
       82
        
         });

     

       60
       83
        
       

     

       61
       84
        
         inputs.forEach((input) => {

+30 -17

src/layouts/WorkPage.astro

···

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

     

       3
       3
        
       

     

       4
       4
        
       interface Props {

     

       5
       5
       +
         slug: string;

     

       5
       6
        
         title: string;

     

       6
       6
       -
         has_previous: boolean;

     

       7
       7
       -
         has_next: boolean;

     

       7
       7
       +
         author: string;

     

       8
       8
       +
         // tags: Tag[];

     

       9
       9
       +
         tags: any;

     

       10
       10
       +
         createdAt: Date;

     

       11
       11
       +
         updatedAt?: Date | null;

     

       12
       12
       +
         comments?: boolean;

     

       13
       13
       +
         previous?: boolean;

     

       14
       14
       +
         next?: boolean;

     

       8
       15
        
       }

     

       9
       16
        
       

     

       10
       10
       -
       const { title, has_previous, has_next } = Astro.props;

     

       17
       17
       +
       const { slug, title, author, tags, createdAt, updatedAt, comments, previous, next } = Astro.props;

     

       11
       18
        
       ---

     

       12
       12
       -
       <Layout title={title}>

     

       13
       13
       -
         <a href="#workname-content">to content</a>

     

       14
       14
       -
       

     

       19
       19
       +
       <Layout title={title} skipLink="work-body">

     

       15
       20
        
         <nav id="work-menu">

     

       16
       16
       -
           {has_previous && (

     

       21
       21
       +
           {previous && (

     

       17
       22
        
             // chapterid - 1?

     

       18
       23
        
             <a href="">previous chaptertitle</a>

     

       19
       24
        
           )}

     

       20
       25
        
           <!-- if theres more than one chapter, render this box -->

     

       21
       21
       -
           <select name="workname-chapters" id="workname-chapters">

     

       26
       26
       +
           <select name="chapterSelect" id={`${slug}-chapters`}>

     

       22
       27
        
             <option value="default" selected>Choose chapter...</option>

     

       23
       28
        
             <!-- map each chapter here -->

     

       24
       29
        
           </select>

     

       25
       30
        
       

     

       26
       26
       -
           {has_next && (

     

       31
       31
       +
           {next && (

     

       27
       32
        
             // chapterid + 1 ?

     

       28
       33
        
             <a href="">next chaptertitle</a>

     

       29
       34
        
           )}

     

       30
       35
        
         </nav>

     

       31
       36
        
       

     

       32
       32
       -
         <main>

     

       37
       37
       +
         <main id="work-body">

     

       33
       38
        
           <header>

     

       34
       39
        
             <h1>{title}</h1>

     

       35
       35
       -
             <h2>author name</h2>

     

       40
       40
       +
             <h2>{author}</h2>

     

       41
       41
       +
             <!-- replace this at some point -->

     

       42
       42
       +
             {JSON.stringify(tags)}

     

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

     

       44
       44
       +
             {updatedAt && (

     

       45
       45
       +
               <time datetime={updatedAt.toISOString()}>{updatedAt}</time>

     

       46
       46
       +
             )}

     

       36
       47
        
       

     

       37
       48
        
             <div id="summary">

     

       38
       49
        
               summary

     

       39
       50
        
             </div>

     

       40
       51
        
           </header>

     

       41
       52
        
       

     

       42
       42
       -
           <section id="workname-content">

     

       53
       53
       +
           <section id={`${slug}-content`} class="prose lg:prose-xl">

     

       43
       54
        
             <!-- if work has its own style, render it here somehow -->

     

       44
       55
        
             <details>

     

       45
       56
        
               <summary>Author's notes</summary>

     

       46
       57
        
               this should include author's notes

     

       47
       58
        
             </details>

     

       48
       48
       -
       

     

       59
       59
       +
             

     

       49
       60
        
             <slot />

     

       50
       61
        
           </section>

     

       51
       62
        
       

     

       52
       52
       -
           <aside id="workname-comments">

     

       53
       53
       -
             <!-- use bsky api to render comments here -->

     

       54
       54
       -
             <!-- paginate this -->

     

       55
       55
       -
           </aside>

     

       63
       63
       +
           {comments && (

     

       64
       64
       +
             <aside id={`${slug}-comments`}>

     

       65
       65
       +
               <!-- use bsky api to render comments here -->

     

       66
       66
       +
               <!-- paginate this -->

     

       67
       67
       +
             </aside>

     

       68
       68
       +
           )}

     

       56
       69
        
         </main>

     

       57
       70
        
       </Layout>

+1 -1

src/pages/login.astro

···

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

     

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

     

       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>

+84 -61

src/pages/user/index.astro

···

       1
       1
        
       ---

     

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

     

       3
       3
       +
       import { Info } from "@lucide/astro";

     

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

     

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

     

       5
       6
        
       import Dialog from "~/Dialog.astro";

     

       6
       7
        
       import Popover from "~/Popover.astro";

     

       8
       8
       +
       import Settings from "~/Settings.astro";

     

       7
       9
        
       

     

       8
       10
        
       const loggedInUser = Astro.locals.loggedInUser;

     

       9
       11
        
       

     
···

       21
       23
        
         .from(Works)

     

       22
       24
        
         .where(eq(Works.author, user?.userDid ?? loggedInUser.did));

     

       23
       25
        
       ---

     

       24
       24
       -
       <Layout>

     

       25
       25
       -
         <h1>User Settings</h1>

     

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

     

       27
       27
       -
         

     

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

     

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

     

       30
       30
       -
           <>

     

       31
       31
       -
             <h2>Connect account</h2>

     

       32
       32
       -
             <div class="info">

     

       33
       33
       -
               <p>Right now, you aren't connected to the site. You can connect your BlueSky / self-hosted PDS account to this website to post a work.</p>

     

       34
       34
       -
               <p>Please check out the Terms of Service, Privacy Policy, and Code of Conduct before connecting your account.</p>

     

       35
       35
       -
             </div>

     

       36
       36
       -
             <button id="trigger-confirm">Connect your PDS Account</button>

     

       37
       37
       -
             

     

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

     

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

     

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

     

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

     

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

     

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

     

       44
       44
       -
                   <h3>Important</h3>

     

       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>

     

       46
       46
       -
                 </Popover>

     

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

     

       26
       26
       +
       <Layout skipLink="user-profile">

     

       27
       27
       +
         <main id="user-profile">

     

       28
       28
       +
           <h1 class="text-xl">User Settings</h1>

     

       29
       29
       +
           <p>{loggedInUser?.handle}</p>

     

       30
       30
       +
           

     

       31
       31
       +
           <!-- registration will only happen in the below form! -->

     

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

     

       33
       33
       +
             <>

     

       34
       34
       +
               <h2 class="text-lg">Connect account</h2>

     

       35
       35
       +
               <div class="info">

     

       36
       36
       +
                 <p>Right now, you aren't connected to the site. You can connect your BlueSky / self-hosted PDS account to this website to post a work.</p>

     

       37
       37
       +
                 <p>Please check out the Terms of Service, Privacy Policy, and Code of Conduct before connecting your account.</p>

     

       38
       38
       +
               </div>

     

       39
       39
       +
               <button id="trigger-confirm" class="btn btn-accent">Connect your PDS Account</button>

     

       40
       40
       +
               

     

       41
       41
       +
               <Dialog id="connect-account" title="Are you sure?">

     

       42
       42
       +
                 <form action={actions.usersActions.addUser} method="post">

     

       43
       43
       +
                   <fieldset class="fieldset">

     

       44
       44
       +
                     <div class="flex gap-1">

     

       45
       45
       +
                       <label for="nickname" class="label">Nickname</label>

     

       46
       46
       +
                       <Popover id="nickname-note" label="info" icon="warning" title="Important">

     

       47
       47
       +
                         <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>

     

       48
       48
       +
                       </Popover>

     

       49
       49
       +
                     </div>

     

       50
       50
       +
                     <input class="input w-full" type="text" name="nickname" id="nickname" aria-describedby="nickname-info" />

     

       51
       51
       +
                     <div id="nickname-info" class="alert">

     

       52
       52
       +
                       <Info class="text-info" />

     

       53
       53
       +
                       <div>

     

       54
       54
       +
                         <p>You can optionally set your nickname for this site.</p>

     

       55
       55
       +
                         <p>This is separate from your handle and acts similarly to a penname.</p>

     

       56
       56
       +
                       </div>

     

       57
       57
       +
                     </div>

     

       58
       58
       +
                   </fieldset>

     

       48
       59
        
       

     

       49
       49
       -
                 <button formmethod="dialog">Cancel</button>

     

       50
       50
       -
                 <button>Confirm</button>

     

       51
       51
       -
               </form>

     

       52
       52
       -
             </Dialog>

     

       53
       53
       -
           </>

     

       54
       54
       -
         )}

     

       55
       55
       -
         

     

       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>

     

       60
       60
       +
                   <div class="modal-action">

     

       61
       61
       +
                     <button class="btn btn-neutral" formmethod="dialog">Cancel</button>

     

       62
       62
       +
                     <button class="btn btn-primary">Confirm</button>

     

       63
       63
       +
                   </div>

     

       64
       64
       +
                 </form>

     

       65
       65
       +
               </Dialog>

     

       66
       66
       +
             </>

     

       67
       67
       +
           )}

     

       68
       68
       +
           

     

       69
       69
       +
           {user && (

     

       70
       70
       +
             <>

     

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

     

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

     

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

     

       61
       74
        
       

     

       62
       62
       -
             {works && (

     

       63
       63
       -
               <section>

     

       64
       64
       -
                 <ul>

     

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

     

       66
       66
       -
                     <article>

     

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

     

       75
       75
       +
               {works && (

     

       76
       76
       +
                 <section>

     

       77
       77
       +
                   <ul>

     

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

     

       79
       79
       +
                       <article>

     

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

     

       68
       81
        
       

     

       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}

     

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

     

       83
       83
       +
                           {work.createdAt}

     

       75
       84
        
                         </time>

     

       76
       76
       -
                       )}

     

       85
       85
       +
                         {work.updatedAt && (

     

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

     

       87
       87
       +
                             {work.updatedAt}

     

       88
       88
       +
                           </time>

     

       89
       89
       +
                         )}

     

       77
       90
        
       

     

       78
       78
       -
                       <ul>

     

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

     

       80
       80
       -
                       </ul>

     

       81
       81
       -
                       

     

       82
       82
       -
                       summary here

     

       83
       83
       -
                     </article>

     

       84
       84
       -
                   ))}

     

       85
       85
       -
                 </ul>

     

       86
       86
       -
               </section>

     

       87
       87
       -
             )}

     

       88
       88
       -
           </>

     

       89
       89
       -
         )}

     

       91
       91
       +
                         <ul>

     

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

     

       93
       93
       +
                         </ul>

     

       94
       94
       +
                         

     

       95
       95
       +
                         summary here

     

       96
       96
       +
                       </article>

     

       97
       97
       +
                     ))}

     

       98
       98
       +
                   </ul>

     

       99
       99
       +
                 </section>

     

       100
       100
       +
               )}

     

       101
       101
       +
             </>

     

       102
       102
       +
           )}

     

       103
       103
       +
       

     

       104
       104
       +
           <button class="btn btn-primary" id="trigger-settings">Set preferences</button>

     

       105
       105
       +
           <Settings />

     

       106
       106
       +
         </main>

     

       90
       107
        
       </Layout>

     

       91
       108
        
       

     

       92
       109
        
       <script>

     

       93
       110
        
         const trigger = document.getElementById("trigger-confirm");

     

       111
       111
       +
         const trigger2 = document.getElementById("trigger-settings");

     

       94
       112
        
         const confirmDialog = document.getElementById("connect-account") as HTMLDialogElement;

     

       113
       113
       +
         const settingsDialog = document.getElementById("settings") as HTMLDialogElement;

     

       95
       114
        
       

     

       96
       115
        
         trigger?.addEventListener("click", (_) => {

     

       97
       116
        
           confirmDialog.showModal();

     

       117
       117
       +
         });

     

       118
       118
       +
       

     

       119
       119
       +
         trigger2?.addEventListener("click", (_) => {

     

       120
       120
       +
           settingsDialog.showModal();

     

       98
       121
        
         });

     

       99
       122
        
       </script>

+13 -16

src/pages/works/[workId].astro

···

       1
       1
        
       ---

     

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

     

       2
       2
       +
       import WorkPage from "@/layouts/WorkPage.astro";

     

       3
       3
        
       import { didToHandle } from "@/lib/atproto";

     

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

     

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

     

       6
       5
        
       

     

       7
       6
        
       const { workId } = Astro.params;

     
···

       16
       15
        
         return Astro.redirect("/not-found");

     

       17
       16
        
       }

     

       18
       17
        
       ---

     

       19
       19
       -
       <Layout>

     

       20
       20
       -
         {work.map(async ({ Works, Users }) => (

     

       21
       21
       -
           <>

     

       22
       22
       -
             <h1>{Works.title}</h1>

     

       23
       23
       -
             <h2>{await didToHandle(Users.userDid)}</h2>

     

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

     

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

     

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

     

       27
       27
       -
             ))}

     

       28
       28
       -
             

     

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

     

       30
       30
       -
           </>

     

       31
       31
       -
         ))}

     

       32
       32
       -
       </Layout>
     

       18
       18
       +
       {work.map(async ({ Works, Users }) => (

     

       19
       19
       +
         <WorkPage 

     

       20
       20
       +
           slug={Works.slug}

     

       21
       21
       +
           title={Works.title}

     

       22
       22
       +
           author={await didToHandle(Users.userDid)}

     

       23
       23
       +
           createdAt={Works.createdAt}

     

       24
       24
       +
           updatedAt={Works.updatedAt}

     

       25
       25
       +
           tags={Works.tags}

     

       26
       26
       +
         >

     

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

     

       28
       28
       +
         </WorkPage>

     

       29
       29
       +
       ))}