be0be3bd00
Introduces drag-and-drop functionality for Experience and Education entries in the admin dashboard using SortableJS, along with collapsible forms powered by Alpine.js. Ensures live updates via HTMX. Refines both public site and admin dashboard UI: - Public site: Role/Degree are more prominent, Company/Institution highlight on hover. - Admin dashboard: Headers display Role/Degree as primary and include date ranges. Addresses backend needs by re-introducing 'display_order' to the database schema and updating queries and mutations for proper reordering. Fixes: - Resolved 'invalid_grant' Keycloak error by correcting PKCE code verifier generation. - Corrected database query parameter passing to fix text field clearing on form save. - Fixed JSX parsing errors with Alpine.js attributes by using full syntax and spread operator. - Resolved DOMTokenList whitespace error in SortableJS ghostClass. - Fixed SortableJS initialization and drag events to ensure visual reordering.
Modern SSR CV Website with ElysiaJS
A fast, server-side rendered (SSR) CV/Portfolio website built with ElysiaJS, SQLite, and TailwindCSS. Features a custom CMS with Keycloak authentication for managing multi-language content.
Features
- Fast SSR: Built on the Bun runtime and ElysiaJS for high performance.
- Multi-language Support: Built-in i18n (English/German) with clean URL routing (
/en,/de). - CMS Dashboard: Admin panel to manage Profile, Experience, Education, and Skills without touching code.
- Secure Auth: OpenID Connect (OIDC) authentication via Keycloak (using Arctic).
- Dark Mode: Automatic and manual theme switching.
- Portable DB: SQLite database for easy deployment and zero setup.
- Minimalist Design: Clean UI with TailwindCSS and subtle animations.
Prerequisites
Getting Started
1. Install Dependencies
bun install
2. Setup Database
Initialize and seed the SQLite database with default data:
bun run src/db/seed.ts
3. Setup Keycloak (Auth)
Start Keycloak and Postgres using Docker:
docker compose up -d
- Admin Console:
http://localhost:8080 - User:
admin - Password:
admin
Configuration Steps:
- Log in to Keycloak.
- Create a Realm (e.g.,
myrealm). - Create a Client (e.g.,
cv-app):- Client authentication: On
- Valid Redirect URIs:
http://localhost:3000/admin/callback
- Copy the Client Secret from the Credentials tab.
- Update your
.envfile:
KEYCLOAK_REALM_URL="http://localhost:8080/realms/myrealm"
KEYCLOAK_CLIENT_ID="cv-app"
KEYCLOAK_CLIENT_SECRET="your-secret-here"
KEYCLOAK_REDIRECT_URI="http://localhost:3000/admin/callback"
4. Run the Server
bun run src/index.tsx
- Public Site:
http://localhost:3000 - Admin Dashboard:
http://localhost:3000/admin/login
Testing
Run the unit tests for the database layer:
bun test
Project Structure
src/components: Reusable UI components (Layout, Sections).src/db: Database schema, seed script, and query/mutation logic.src/routes: Route handlers (admin.tsx,public.tsx).src/index.tsx: Application entry point.