ViteSakuga

Cloning a mvp of sakugabooru but with mainly typescript and good libs

• dockploy ??
• split upload and convert into components and utils
• better style Video (fix tailwind class not working)
• add shortcut keys to navigate to /user /tag /post toggle filters / seek next/previous frame / next/previous post / focus search
  • there is builtint keyboard shortcut in media chrome
• filterAndSortPosts check how it worked before and how it works now, should we filter client or server side?
• add dompurify with z.transform to schemas
• cleanup post schemas and server fn
• prevent the sidebar from blinking of rerender / Suspense somehow
• ask neo how to better handle currentUserId /src/routes/posts/$postId.tsx const currentUserId = context.user?.id;
• better handle optional props that shouldnt be optional is some cases, currentUserId in comments.tsx maybe not sure
• better ui
• convert.tsx mediabunny instead of old lib
• try pulumi to setup project bucket and domain name from scratch with typescript
• Store list scroll position and loaded data state in the URL, so when a user shares the URL, it restores the exact position in the infinite list (like pagination)
• in the searchbox add the feature that is in the taginput component with tag suggestion to allow for easier tag search
• add for suspenseQueries
• fix upload failing if user doesnt generate a thumbnail
• virtualize posts of other pages than /posts so /user/id /tags/tag and make component of rendered list to avoid code duplication
• fix virtualize .window error
• maybe change search behavior, if we are in user route then search should search for users and not go back to default posts route?
• add some toasts to forms / mutations for success / errors
• make a card component for displaying a single post in a list
• avoid code duplication in the filter thing
• add cursor/pagination thing to /user /tag
• move everything to query instead of router loader
• fix build and start errors
• fix vite serve
• transfer data from loaders to query
• better .env handling (crash if not defined and use zod to validate)
• fix build with rolldown
• check cursor db implementation
• manage account page
• add comments to posts
• modify posts
• add preview image to post
• scroll restoration from post to back to posts list (only works in prod build not dev)

Secondary

• ? add post ranking
• add search filters
• mediainfo
• use kyselyfy from drizzle to cleanup database types
• add tags to posts

Dev

git clone https://github.com/ozaki/vitesakuga
cd vitesakuga
pnpm i
pnpm dev

Infrastructure Setup

This project uses Pulumi to automate the creation of Cloudflare R2 buckets.

1. Prerequisites

• A Cloudflare Account
• Pulumi CLI installed
• Cloudflare Account ID (found on your dashboard)
• Cloudflare API Token with R2 Edit permissions

2. Deployment

Navigate to the infra directory and configure your credentials:

cd infra

# Set your Cloudflare details
pulumi config set cloudflare:accountId YOUR_ACCOUNT_ID
pulumi config set cloudflare:apiToken YOUR_API_TOKEN --secret

# Deploy the resources
pulumi up

3. Sync to Environment

After a successful deployment, run the sync script in the root directory to update your .env file:

./sync-infra.sh

Note: You will still need to manually generate an S3 API Token from the Cloudflare R2 dashboard to get the CLOUDFLARE_ACCESS_KEY and CLOUDFLARE_SECRET_KEY required in your .env.