ba5c3a9650
- Modified multiple HTML files for dark mode support - Updated styles.css with dark mode styling - Added dark-mode.js for toggle functionality - Work still in progress, saving current state 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
61 lines
3.6 KiB
Markdown
61 lines
3.6 KiB
Markdown
This is a test playground for web development - both frontend with simple html/css and vanilla javascript, and a backend API written in go.
|
|
|
|
Currently it is not a git repo, it's just an experiment.
|
|
|
|
**IMPORTANT: This is a learning project for a non-developer. Always prioritize maximum simplicity and readability over "best practices". Use the most straightforward, beginner-friendly approaches possible. Avoid complex patterns, frameworks, or advanced techniques.**
|
|
|
|
The current purpose: develop all basic features necessary for a simple browsergame along the lines of ogame - no realtime unit controls, currently no 3d graphics, just a "planet status" screen with buildings and researches, some buttons that call the api, and a map.
|
|
|
|
There is now a SQLite database available (`items.db`) with basic CRUD functionality. The database uses modernc.org/sqlite (pure Go, no CGO). Current tables:
|
|
- `items` table: id (INTEGER PRIMARY KEY), name (TEXT) - used for the items management demo
|
|
|
|
remember to keep this file up to date if you change any of the points here.
|
|
|
|
Current folder structure: flat.
|
|
|
|
## API Access
|
|
There is a reverse proxy rewrite rule in place. To call any API endpoint from the frontend, you need to add `/api/` to the URL path:
|
|
- API endpoint URLs should be: `playground.shiny.space/api/yourendpointhere`
|
|
- Example: `/randomnumber` endpoint becomes `/api/randomnumber`
|
|
|
|
## Authentication
|
|
The setup uses Caddy with Authelia for authentication:
|
|
- Caddy acts as reverse proxy and checks with Authelia before allowing access to protected pages
|
|
- When authenticated, Authelia adds headers to requests that reach the Go API
|
|
- The Go API can read these headers to get user information
|
|
|
|
### Authentication Headers from Authelia
|
|
The following headers are available in authenticated requests:
|
|
- `Remote-User`: Username of the authenticated user
|
|
- `Remote-Name`: Display name of the user
|
|
- `Remote-Email`: Email address of the user
|
|
- `Remote-Groups`: User's group memberships
|
|
|
|
### Authentication API Endpoint
|
|
- `/api/auth/user` (GET) - Returns user information and all headers for debugging
|
|
- Protected pages can use JavaScript to fetch this endpoint to get current user info
|
|
- Returns JSON with username, name, email, groups, and complete headers object
|
|
|
|
### Authentication Test Page
|
|
- `account.html` - Test page that requires authentication to access
|
|
- Displays user information by calling `/api/auth/user`
|
|
- Shows both structured user info and raw headers for debugging
|
|
- Configure Caddy to require authentication for this page to test the setup
|
|
|
|
## Development
|
|
To rebuild the Go API after making changes:
|
|
- Run `go build -o api` in the project directory
|
|
- The server has file watching enabled and will automatically restart with the new binary when it detects changes
|
|
|
|
## Test Sites
|
|
The `index.html` file serves as the main navigation page listing all available test sites/demos. When creating new test HTML files, always add them to the feature list in `index.html` with a descriptive title and explanation.
|
|
|
|
## Styling
|
|
All HTML pages use the unified `styles.css` file for consistent styling. Keep styling in this CSS file as much as reasonably possible - avoid inline styles in HTML files. It's perfectly fine to add new classes to `styles.css` for future tests and functionality. This approach keeps the test code much more readable and maintainable.
|
|
|
|
## Dark Mode
|
|
The site includes a simple dark mode toggle available on all pages:
|
|
- Toggle button (🌙/☀️) appears in the top-right corner of every page
|
|
- Uses CSS variables for easy theme switching
|
|
- User preference is saved in localStorage and persists across all pages
|
|
- Implementation uses `dark-mode.js` for reusable functionality across all HTML files
|