commit d7b7db8be00ff33d1d9c5d97fdae3c1880faafd0 · veryroundbird.house/fanfic-atproto

+10 -21

astro.config.mjs

···

       2
       2
        
       import { defineConfig, fontProviders } from 'astro/config';

     

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

     

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

     

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

     

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

     

       6
       6
        
       

     

       7
       7
        
       // https://astro.build/config

     

       8
       8
        
       export default defineConfig({

     

       9
       9
       +
         output: "server",

     

       9
       10
        
         adapter: node({

     

       10
       11
        
           mode: 'standalone',

     

       11
       12
        
         }),

     

       12
       13
        
         integrations: [

     

       13
       14
        
           db(),

     

       14
       14
       -
           authproto({

     

       15
       15
       +
           fujocodedAuthproto({

     

       15
       16
        
             applicationName: "fan archive",

     

       16
       16
       -
             applicationDomain: "",

     

       17
       17
       -
             driver: { name: "astro:db" },

     

       18
       18
       -
           }),

     

       17
       17
       +
             applicationDomain: "localhost:4321",

     

       18
       18
       +
             // driver: {

     

       19
       19
       +
             //   name: "astro:db",

     

       20
       20
       +
             // },

     

       21
       21
       +
           })

     

       19
       22
        
         ],

     

       20
       23
        
         experimental: {

     

       21
       24
        
           fonts: [

     

       22
       25
        
             {

     

       23
       23
       -
               provider: "local",

     

       24
       24
       -
               name: "Junicode",

     

       26
       26
       +
               provider: fontProviders.fontsource(),

     

       27
       27
       +
               name: "IBM Plex Serif",

     

       25
       28
        
               cssVariable: "--junicode",

     

       26
       26
       -
               variants: [

     

       27
       27
       -
                 {

     

       28
       28
       -
                   weight: "300 700",

     

       29
       29
       -
                   style: "normal",

     

       30
       30
       -
                   variationSettings: "'wdth' 100 125, 'ENLA' 0 1",

     

       31
       31
       -
                   src: ["./src/assets/fonts/JunicodeVF-Roman.woff2"],

     

       32
       32
       -
                 },

     

       33
       33
       -
                 {

     

       34
       34
       -
                   weight: "300 700",

     

       35
       35
       -
                   style: "italic",

     

       36
       36
       -
                   variationSettings: "'wdth' 100 125, 'ENLA' 0 1",

     

       37
       37
       -
                   src: ["./src/assets/fonts/JunicodeVF-Italic.woff2"],

     

       38
       38
       -
                 },

     

       39
       39
       -
               ],

     

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

     

       41
       30
        
             },

     

       42
       31
        
             {

+6 -2

db/config.ts

···

       3
       3
        
       const Users = defineTable({

     

       4
       4
        
         columns: {

     

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

     

       6
       6
       -
           userDid: column.text({ name: "user_did" }),

     

       7
       7
       -
           joinedAt: column.date({ default: NOW }),

     

       6
       6
       +
           userDid: column.text({ name: "user_did", unique: true }),

     

       7
       7
       +
           joinedAt: column.date({ name: "joined_at", default: NOW }),

     

       8
       8
        
         },

     

       9
       9
       +
         indexes: [

     

       10
       10
       +
           { on: ["userDid"], unique: true },

     

       11
       11
       +
         ],

     

       9
       12
        
       });

     

       10
       13
        
       

     

       11
       14
        
       const Works = defineTable({

     

       12
       15
        
         columns: {

     

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

     

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

     

       18
       18
       +
           // recordkey

     

       15
       19
        
           title: column.text(),

     

       16
       20
        
           content: column.text({ multiline: true }),

     

       17
       21
        
           tags: column.json(),

+2 -2

db/seed.ts

···

       11
       11
        
             author: "test", 

     

       12
       12
        
             title: "Hey there title",

     

       13
       13
        
             content: "<p>i have evil html</p>",

     

       14
       14
       -
             tags: { label: "test", url: "#" },

     

       14
       14
       +
             tags: [{ label: "test", url: "#" }],

     

       15
       15
        
           },

     

       16
       16
        
           { 

     

       17
       17
        
             author: "another", 

     

       18
       18
        
             title: "Hello world",

     

       19
       19
        
             content: "<p>whoag i have <b>BOLD</b></p>",

     

       20
       20
       -
             tags: { label: "label", url: "#" },

     

       20
       20
       +
             tags: [{ label: "label", url: "#" }],

     

       21
       21
        
           },

     

       22
       22
        
         ]);

     

       23
       23
        
       }

+35 -15

src/actions/works.ts

···

       1
       1
       -
       import { driver, worksTable } from "@/lib/db";

     

       2
       2
       -
       import { defineAction } from "astro:actions";

     

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

     

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

     

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

     

       4
       4
       +
       

     

       5
       5
       +
       const workSchema = z.object({

     

       6
       6
       +
         title: z.string(),

     

       7
       7
       +
         content: z.string(),

     

       8
       8
       +
         tags: z.array(

     

       9
       9
       +
           z.object({

     

       10
       10
       +
             label: z.string(),

     

       11
       11
       +
             uri: z.string(),

     

       12
       12
       +
           })

     

       13
       13
       +
         ),

     

       14
       14
       +
       });

     

       4
       15
        
       

     

       5
       16
        
       export const worksActions = {

     

       6
       17
        
         addWork: defineAction({

     

       7
       18
        
           accept: "form",

     

       8
       8
       -
           input: z.object({

     

       9
       9
       -
             author: z.union([z.string(), z.array(z.string())]),

     

       10
       10
       -
             title: z.string(),

     

       11
       11
       -
             content: z.string(),

     

       12
       12
       -
           }),

     

       13
       13
       -
           handler: async ({ author, title, content }) => {

     

       19
       19
       +
           input: workSchema,

     

       20
       20
       +
           handler: async (input, context) => {

     

       14
       21
        
             // check against auth

     

       15
       15
       -
       

     

       22
       22
       +
             if (!context.locals.loggedInUser) {

     

       23
       23
       +
               throw new ActionError({

     

       24
       24
       +
                 code: "UNAUTHORIZED",

     

       25
       25
       +
                 message: "You're not logged in!",

     

       26
       26
       +
               });

     

       27
       27
       +
             }

     

       16
       28
        
       

     

       17
       17
       -
             // handle multiple authors

     

       18
       18
       -
             const convertedAuthors = author.toString();

     

       29
       29
       +
             // const agent = await

     

       19
       30
        
       

     

       20
       20
       -
             const work = await driver.insert(worksTable).values({

     

       21
       21
       -
               author: convertedAuthors,

     

       22
       22
       -
               title,

     

       23
       23
       -
               body: content

     

       31
       31
       +
             // find the id of the logged in user

     

       32
       32
       +
             const userId = await db

     

       33
       33
       +
               .select({ did: Users.userDid })

     

       34
       34
       +
               .from(Users)

     

       35
       35
       +
               .where(

     

       36
       36
       +
                 eq(Users.userDid, context.locals.loggedInUser.did)

     

       37
       37
       +
               );

     

       38
       38
       +
             

     

       39
       39
       +
             const work = await db.insert(Works).values({

     

       40
       40
       +
               author: userId[0].did,

     

       41
       41
       +
               title: input.title,

     

       42
       42
       +
               content: input.content,

     

       43
       43
       +
               tags: input.tags,

     

       24
       44
        
             }).returning();

     

       25
       45
        
       

     

       26
       46
        
             return work;

+3

src/assets/styles/base.css

···

       39
       39
        
       }

     

       40
       40
        
       

     

       41
       41
        
       body {

     

       42
       42
       +
         height: 100vh;

     

       42
       43
        
         font-family: var(--body);

     

       44
       44
       +
         font-size: var(--step-0);

     

       45
       45
       +
         line-height: 1.5;

     

       43
       46
        
       }

+40

src/components/Popover.astro

···

       1
       1
       +
       ---

     

       2
       2
       +
       interface Props {

     

       3
       3
       +
         label: string;

     

       4
       4
       +
         icon?: string;

     

       5
       5
       +
         title?: string;

     

       6
       6
       +
         class?: string;

     

       7
       7
       +
       }

     

       8
       8
       +
       

     

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

     

       10
       10
       +
       ---

     

       11
       11
       +
       <details class:list={["popup", className]} {...rest}>

     

       12
       12
       +
         <summary>

     

       13
       13
       +
           {icon

     

       14
       14
       +
             ? <div class="icon" aria-label={label}>x</div>

     

       15
       15
       +
             : <span>{label}</span>

     

       16
       16
       +
           }

     

       17
       17
       +
         </summary>

     

       18
       18
       +
       

     

       19
       19
       +
         {title && 

     

       20
       20
       +
           <h3>{title}</h3>

     

       21
       21
       +
         }

     

       22
       22
       +
         

     

       23
       23
       +
         <slot />

     

       24
       24
       +
       </details>

     

       25
       25
       +
       

     

       26
       26
       +
       <style>

     

       27
       27
       +
         .popup {

     

       28
       28
       +
           display: inline-block;

     

       29
       29
       +
       

     

       30
       30
       +
           summary {

     

       31
       31
       +
             font-size: var(--step--2);

     

       32
       32
       +
             cursor: pointer;

     

       33
       33
       +
           }

     

       34
       34
       +
       

     

       35
       35
       +
           &::details-content {

     

       36
       36
       +
             position: absolute;

     

       37
       37
       +
             z-index: 1;

     

       38
       38
       +
           }

     

       39
       39
       +
         }

     

       40
       40
       +
       </style>

+90

src/components/Settings.astro

···

       1
       1
       +
       <div id="settings">

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

       10
       10
       +
           </select>

     

       11
       11
       +
       

     

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

     

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

     

       14
       14
       +
       

     

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

     

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

     

       17
       17
       +
       

     

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

     

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

     

       20
       20
       +
       

     

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

     

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

     

       23
       23
       +
       

     

       24
       24
       +
           <div id="test-area">

     

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

     

       26
       26
       +
           </div>

     

       27
       27
       +
       

     

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

     

       29
       29
       +
         </form>

     

       30
       30
       +
       </div>

     

       31
       31
       +
       

     

       32
       32
       +
       <style>

     

       33
       33
       +
         #test-area {

     

       34
       34
       +
           --font: var(--body);

     

       35
       35
       +
           --size: var(--step-0);

     

       36
       36
       +
           --letter-spacing: 0em;

     

       37
       37
       +
           --word-spacing: 0em;

     

       38
       38
       +
           --line-height: 1.5;

     

       39
       39
       +
       

     

       40
       40
       +
           font-family: var(--font);

     

       41
       41
       +
           font-size: var(--size);

     

       42
       42
       +
           letter-spacing: var(--letter-spacing);

     

       43
       43
       +
           word-spacing: var(--word-spacing);

     

       44
       44
       +
           line-height: var(--line-height);

     

       45
       45
       +
         }

     

       46
       46
       +
       </style>

     

       47
       47
       +
       

     

       48
       48
       +
       <script>

     

       49
       49
       +
         const form = document.forms.namedItem("user-settings");

     

       50
       50
       +
         const inputs = document.querySelectorAll("#user-settings :not(button, label, option)");

     

       51
       51
       +
         const submitter = document.getElementById("confirm-settings");

     

       52
       52
       +
         const test = document.getElementById("test-area");

     

       53
       53
       +
       

     

       54
       54
       +
         form?.addEventListener("submit", (e) => {

     

       55
       55
       +
           e.preventDefault();

     

       56
       56
       +
         });

     

       57
       57
       +
       

     

       58
       58
       +
         inputs.forEach((input) => {

     

       59
       59
       +
           (input as HTMLElement).addEventListener("change", (e) => {

     

       60
       60
       +
             const target = e.target as HTMLInputElement || HTMLSelectElement;

     

       61
       61
       +
             switch (target.name) {

     

       62
       62
       +
               case "fontFamily":

     

       63
       63
       +
                 (target.value !== "default") 

     

       64
       64
       +
                   ? test?.style.setProperty("--font", `var(${target.value})`)

     

       65
       65
       +
                   : test?.style.setProperty("--font", `var(--body)`);

     

       66
       66
       +
                 break;

     

       67
       67
       +
               case "fontSize":

     

       68
       68
       +
                 test?.style.setProperty("--size", `var(--step-${target.value})`);

     

       69
       69
       +
                 break;

     

       70
       70
       +
               case "lineHeight":

     

       71
       71
       +
                 test?.style.setProperty("--line-height", target.value);

     

       72
       72
       +
                 break;

     

       73
       73
       +
               case "letterSpacing":

     

       74
       74
       +
                 test?.style.setProperty("--letter-spacing", `${target.value}em`);

     

       75
       75
       +
                 break;

     

       76
       76
       +
               case "wordSpacing":

     

       77
       77
       +
                 test?.style.setProperty("--word-spacing", `${target.value}em`);

     

       78
       78
       +
                 break;

     

       79
       79
       +
               default:

     

       80
       80
       +
                 break;

     

       81
       81
       +
             }

     

       82
       82
       +
           });

     

       83
       83
       +
         });

     

       84
       84
       +
       

     

       85
       85
       +
         submitter?.addEventListener("click", (e) => {

     

       86
       86
       +
           e.preventDefault();

     

       87
       87
       +
           const data = new FormData(form!);

     

       88
       88
       +
           console.table(data);

     

       89
       89
       +
         });

     

       90
       90
       +
       </script>

+5

src/lib/atproto.ts

···

       1
       1
       +
       import type { APIContext } from "astro";

     

       2
       2
       +
       

     

       3
       3
       +
       async function getAgent(locals: APIContext["locals"]) {

     

       4
       4
       +
         const agent = new Object()

     

       5
       5
       +
       }

+14

src/lib/types.ts

···

       1
       1
       +
       export interface Work {

     

       2
       2
       +
         id: number;

     

       3
       3
       +
         title: string;

     

       4
       4
       +
         author: number | string;

     

       5
       5
       +
         tags: Array<Tag>;

     

       6
       6
       +
         content: string;

     

       7
       7
       +
         createdAt: Date | string;

     

       8
       8
       +
         updatedAt: Date | string | undefined;

     

       9
       9
       +
       }

     

       10
       10
       +
       

     

       11
       11
       +
       export interface Tag {

     

       12
       12
       +
         label: string;

     

       13
       13
       +
         url: string;

     

       14
       14
       +
       }

+14

src/pages/index.astro

···

       1
       1
        
       ---

     

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

     

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

     

       4
       4
       +
       

     

       5
       5
       +
       const currentUser = Astro.locals.loggedInUser;

     

       3
       6
        
       ---

     

       4
       7
        
       <Layout>

     

       5
       8
        
       	<h1>hi</h1>

     
···

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

     

       8
       11
        
       		<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>

     

       9
       12
        
       	</main>

     

       13
       13
       +
       

     

       14
       14
       +
       	<Settings />

     

       15
       15
       +
       

     

       16
       16
       +
       	{currentUser

     

       17
       17
       +
       		? <>

     

       18
       18
       +
       			<p>you're logged in!</p>

     

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

     

       20
       20
       +
       				<button>logout</button>

     

       21
       21
       +
       			</form>

     

       22
       22
       +
       		</>

     

       23
       23
       +
       		: <a href="/login">login</a>}

     

       10
       24
        
       </Layout>

+29

src/pages/login.astro

···

       1
       1
       +
       ---

     

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

     

       3
       3
       +
       import Popover from "~/Popover.astro";

     

       4
       4
       +
       

     

       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

     

       18
       18
       +
                 <Popover 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
       +
               </label>

     

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

     

       25
       25
       +
               <button type="submit">Login</button>

     

       26
       26
       +
             </form>

     

       27
       27
       +
           )

     

       28
       28
       +
         }

     

       29
       29
       +
       </Layout>

+29

src/pages/works/[id].astro

···

       1
       1
       +
       ---

     

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

     

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

     

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

     

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

     

       6
       6
       +
       

     

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

     

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

     

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

     

       10
       10
       +
           return {

     

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

     

       12
       12
       +
             props: { work },

     

       13
       13
       +
           };

     

       14
       14
       +
         });

     

       15
       15
       +
       }) satisfies GetStaticPaths;

     

       16
       16
       +
       

     

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

     

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

     

       19
       19
       +
       ---

     

       20
       20
       +
       <Layout>

     

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

     

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

     

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

     

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

     

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

     

       26
       26
       +
         ))}

     

       27
       27
       +
       

     

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

     

       29
       29
       +
       </Layout>

+34

src/pages/works/add.astro

···

       1
       1
       +
       ---

     

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

     

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

     

       4
       4
       +
       

     

       5
       5
       +
       const loggedInUser = Astro.locals.loggedInUser;

     

       6
       6
       +
       

     

       7
       7
       +
       if (!loggedInUser) {

     

       8
       8
       +
         Astro.redirect("/works");

     

       9
       9
       +
       }

     

       10
       10
       +
       

     

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

     

       12
       12
       +
       ---

     

       13
       13
       +
       <Layout>

     

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

     

       15
       15
       +
       

     

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

     

       19
       19
       +
       

     

       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>

     

       28
       28
       +
       

     

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

     

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

     

       31
       31
       +
       

     

       32
       32
       +
           <button>submit</button>

     

       33
       33
       +
         </form>

     

       34
       34
       +
       </Layout>

+31

src/pages/works/index.astro

···

       1
       1
       +
       ---

     

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

     

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

     

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

     

       5
       5
       +
       

     

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

     

       7
       7
       +
         .from(Works)

     

       8
       8
       +
         .innerJoin(Users, eq(Works.author, Users.userDid));

     

       9
       9
       +
       

     

       10
       10
       +
       const loggedInUser = Astro.locals.loggedInUser;

     

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

     

       18
       18
       +
       

     

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

     

       20
       20
       +
           <article>

     

       21
       21
       +
             <h2>{Works.title}</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
       +
             ))}

     

       27
       27
       +
       

     

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

     

       29
       29
       +
           </article>

     

       30
       30
       +
         ))}

     

       31
       31
       +
       </Layout>