diff options
Diffstat (limited to 'CLAUDE.md')
-rw-r--r-- | CLAUDE.md | 91 |
1 files changed, 91 insertions, 0 deletions
@@ -2,11 +2,102 @@ This app is a WIP to implement a blog as a React webapp using Ocaml, mlx for JSX, Piaf for HTTP handling, Caqti to handle database queries, using Eio across the app for async. +## Current Status + +The project is successfully running as a server-side rendered React application in OCaml with the following features implemented: + +- **Database**: SQLite with schema for posts, comments, and votes +- **Routing**: Type-safe routing using the `routes` library +- **SSR React**: JSX-like syntax via mlx, server-side rendering +- **API Endpoints**: RESTful endpoints for posts, comments, and votes +- **Frontend**: Tailwind CSS styling with responsive design +- **Static Assets**: Serving CSS, images, and other static files ## Build the app To compile the app and see if the code is correct do: `dune clean && dune build` +## Running the app +```bash +# Build and run the server +dune exec bs5 + +# Or use the run script +./run.sh +``` + +## Tech Stack + +### Core +- **OCaml**: Primary language +- **Eio**: Async runtime for OCaml 5 +- **mlx**: JSX syntax for OCaml React components +- **dune**: Build system + +### Web Framework +- **Piaf**: HTTP server and client +- **React (server-side)**: Rendering React components on the server + +### Database +- **Caqti**: Database abstraction layer +- **SQLite**: Embedded database with WAL mode +- **Rapper**: Type-safe SQL queries with PPX + +### Styling +- **Tailwind CSS**: Utility-first CSS framework +- **Custom fonts**: Crimson Text and Inter fonts included + +### Development +- **Nix**: Development environment with flake.nix +- **ocaml-lsp-server**: Language server support +- **ocamlformat-mlx**: Code formatting for mlx files + +## Project Structure + +``` +├── lib/ # Core application code +│ ├── handler.ml # HTTP handlers +│ ├── router.ml # Route definitions +│ ├── html.ml # HTML rendering utilities +│ ├── post_handlers.ml # POST request handlers +│ ├── shared/ +│ │ └── query.ml # Database queries +│ └── pages/ +│ ├── BlogIndex.mlx # Main blog page React component +│ └── components/ # Reusable React components +├── assets/ # Static assets +│ ├── styles.css # Generated Tailwind CSS +│ ├── fonts/ # Web fonts +│ ├── board/ # Board/category icons +│ └── avatars/ # User avatars +├── bulkdata/ # Database files +│ ├── blog.db # SQLite database +│ └── schema.sql # Database schema +└── bin/ # Main executable +``` + +## Key Features Implemented + +### Database Schema +- **Posts**: id, title, content, date, tags, url +- **Comments**: id, content, date, tags, url, post_id, parent, author +- **Votes**: post_id, comment_id, user_id, vote_type + +### API Endpoints +- `GET /` - Main blog page with post previews +- `GET /posts` - Get all posts +- `GET /posts/:id` - Get specific post +- `GET /posts/:id/comments` - Get comments for a post +- `POST /posts` - Create new post +- `POST /comments` - Create new comment +- `POST /votes` - Create new vote +- `GET /assets/*` - Serve static assets + +### React Components +- **Layout**: Main page layout with HTML boilerplate +- **PostPreviews**: Displays list of blog post previews +- **Navbar**: Navigation component +- **SiteTitle**: Header component ## Things to take into account |