Files

Tuan-Dat Tran 3c990e5ab6 feat: Implement live editing (HTMX) and refine UI hierarchy

Integrates HTMX for real-time updates of Experience and Education forms in the admin dashboard,
eliminating full page reloads on save and enabling instant addition of new entries.
Adjusted the visual prominence of 'Role' in Experience and 'Degree' in Education sections.

Fixes:
- Corrected database query parameter passing, resolving text field clearing issue on save.
- Enabled live 'Add New' functionality for Experience and Education entries.

2025-11-22 00:05:50 +01:00

3.5 KiB

Raw Permalink Blame History

Project Context: ElysiaJS CV Website

Project Overview

This project is a high-performance, server-side rendered (SSR) CV/Portfolio website built on the Bun runtime using ElysiaJS. It features a custom Content Management System (CMS) for managing multi-language content (English/German) and uses SQLite for data persistence. Authentication for the CMS is handled via Keycloak (OpenID Connect) using the Arctic library.

Key Technologies

Runtime: Bun
Web Framework: ElysiaJS
Templating: JSX via @kitajs/ts-html-plugin / typed-html
Database: bun:sqlite (Native SQLite driver)
Authentication: Arctic (OIDC Client) + Keycloak (Identity Provider)
Styling: TailwindCSS
Testing: bun:test

Architecture

Directory Structure

src/components: Reusable UI components (e.g., Layout.tsx, Sections.tsx).
src/db: Database logic.
- schema.ts: Table definitions.
- queries.ts: Read operations (including Admin data fetchers).
- mutations.ts: Write operations (Admin actions).
- seed.ts: Initial data population script.
src/routes: Route handlers.
- public.tsx: Public-facing CV pages (/:lang).
- admin.tsx: Protected CMS routes (/admin/*) and Auth flows.
src/index.tsx: Main application entry point and server configuration.
tests: Unit tests (currently covering DB queries).

Database Schema

The database uses a "Translation Table" pattern to support i18n:

Structural Tables: profile, experience, education, skills (contain IDs, dates, URLs, sort order).
Translation Tables: profile_translations, experience_translations, etc. (contain language-specific text keyed by language_code and parent ID).

Authentication Flow

User visits /admin/login -> Redirects to Keycloak Authorization URL.
Keycloak validates credentials -> Redirects back to /admin/callback with code.
Server exchanges code for tokens using Arctic (PKCE enabled).
Session cookie is set.
Protected routes check for valid session cookie.

Development Workflow

Prerequisites

Bun installed.
Docker installed (for Keycloak).

Setup & Installation

Install Dependencies:
```
bun install
```
Initialize Database:
```
bun run src/db/seed.ts
```
Start Keycloak:
```
docker compose up -d
```
- Admin Console: http://localhost:8080 (admin/admin)
- Note: Ensure a Realm myrealm and Client cv-app are configured.

Running the Application

Development Server:
```
bun run src/index.tsx
```
Access at http://localhost:3000.

Testing

Run Unit Tests:
```
bun test
```

Configuration

Environment Variables: Managed in .env (contains Keycloak secrets and URLs).
Tailwind: Configured in tailwind.config.js (includes custom animations like fade-in).
TypeScript: Configured in tsconfig.json (supports JSX).

Conventions

Routing: Always use return Response.redirect(...) for redirects in Elysia, not set.redirect = ....
Styling: Use Tailwind utility classes. Dark mode is supported via the dark: prefix and a toggler in Layout.tsx.
Data Access: Separate Read (queries.ts) and Write (mutations.ts) logic.

3.5 KiB Raw Permalink Blame History