README.md

Astro Party

An experiment with the new astro db to re-implement the party-task-planner with astro, astro server, astro db and htmx.

With this stack CRUD apps can be created without react, which can be a dread at times. All frontend actions can be implemented via the htmx abstraction, the templates come from the astro server, and the data is in a simple astro database which has a great integration with astro db and drizzle ORM.

Learnings

Learning Htmx

In this app I needed to figure these out in htmx + astro:

• Loading spinners
• Inline form validation
• Reusable Modals and data-flow without react
• Skeletons
• Toast Messages
• Astro View transitions with htmx

New Technologies

• Astro DB
• Astro SSR
• Netlify

I'll also have explained these in a blog over at ![double-trouble.dev]

Powered by Astro

Used the Astro minimal starter kit:

npm create astro@latest -- --template minimal

Plan

V1 Release: Basic App functionality with all the goodies.

Later Releases:

• Layout
  • Screen height on mobile behaves weirdly
  • Flexible bigger text input boxes (i.e. party description)
• Issues
  • Fix all type-errors
  • 404 page doesnt work in subdirectories
  • Fix deleting of an participant which still has tasks assigned
• Nice things
  • Modal gets closed when outside-area is clicked (escape & close button already work)
  • Have better toast messages with a proper library (js-snackbar?)
  • Navigate left-right on desktop via arrow keys
  • Pagination (average party wont have hundreds of guests / tasks, for bigger lists we have the scrollable area)
• Github Actions
  • Biome Linting
  • Nice releases

Dev Notes

• Doing a db schema changes from date to string was as easy as changing the schema in the db/config.ts, removing the frontend type conversion and running a npm run astro db push 👏
• AstroDBs local behavior with sqlite is different from the prod deployment. Locally I always get the insert / delete status back. On deployment that is always empty
  • Fixed by request it specifically with .returning()
• When I deploy from local there is a dependency missing from the build: Cannot find module '@libsql/linux-x64-gnu'
  • Fixed by downgrading @libsql/client: tursodatabase/libsql-client-ts#112
• Htmx with Astro View Transitions
  • bigskysoftware/htmx#692 htmx.trigger works for multiple events, the native browser events will only work once
  • Using htmx.trigger() will send an event, but htmx will not process it. Only htmx.process() works
    • Supported by bigskysoftware/htmx#2011
  • bigskysoftware/htmx#1761 a proper plugin?

Utils

Useful to verify skeletons:

await new Promise<void>((res) => setTimeout(() => {console.log(":)"); res()}, 2000))
return new Response(JSON.stringify({ ok: true }), {
    status: 200,
  })