hzhang
cbac2b0771
Adopt the Hangman Lab visual language (adapted from the Gitea STYLE.md, Gitea-only mechanics excluded): - New acid SVG mark as favicon (?v cache-bust) and navbar logo. - Single acid accent (#d8ff3e); retune globals.css tokens to the ink/panel/line/text/dim/danger palette; drop the cyan/violet pair (secondary -> same acid so existing components stay on-brand). - Fonts: IBM Plex Mono for body/UI/mono, Major Mono Display for the lowercase brand lockup; Tailwind fontFamily + content fonts updated. - Site-wide fixed 48px blueprint-grid backdrop + one acid sheen. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Hangman Lab Frontend
This project serves as a lightweight frontend solution for personal websites, designed to work seamlessly with Keycloak for authentication and authorization. It provides an easy-to-use interface for managing and publishing markdown files, allowing users to maintain their personal content effortlessly.
Table of Contents
- Features
- Technologies Used
- Installation
- Configuration
- Development
- Building for Production
- Docker Deployment
- License
Features
- User Authentication: Secure login and logout functionalities using Keycloak and OpenID Connect (OIDC).
- Markdown Management: Create, edit, and view markdown files with live preview and syntax highlighting for a streamlined content creation experience.
- Docker Support: Containerized setup for easy deployment and scalability.
Technologies Used
This project uses the following open-source libraries, all of which are licensed under the MIT License:
- Bulma (MIT)
- Katex (MIT)
- oidc-client-ts (Apache-2.0)
- React (MIT)
- React-DOM (MIT)
- React-Markdown (MIT)
- React-Query (MIT)
- React-Router-DOM (MIT)
- React-Syntax-Highlighter (MIT)
- Rehype-Katex (MIT)
- Rehype-Raw (MIT)
- Remark-Math (MIT)
The development dependencies (e.g., Babel, Webpack, and loaders) are also licensed under the MIT License.
Installation
Prerequisites
- Node.js (v14.x or higher)
- npm (v6.x or higher) or Yarn
- Docker (optional, for containerized deployment)
- Keycloak Server: Ensure you have access to a Keycloak server for authentication.
Steps
-
Clone the Repository
git clone https://git.hangman-lab.top/hzhang/HangmanLab.Frontend.git cd HangmanLab.Frontend -
Install Dependencies
Using npm:
npm installOr using Yarn:
yarn install -
Configure environment variables
See Configuration[#configuration]
-
BuildConfig.sh
chmod +x BuildConfig ./BuildConfig.sh
Configuration
Set the following environment variables before running BuildConfig.sh
Environment Variables
BACKEND_HOST: URL of the backend server (default:http://localhost:5000)FRONTEND_HOST: URL of the frontend server (default:http://localhost:3000)KC_CLIENT_ID: Keycloak client IDKC_HOST: Keycloak server URLKC_REALM: Keycloak realm
Development
Running the Development Server
Start the development server with hot reloading:
npm start
Or using Yarn:
yarn start
The application will be accessible at http://localhost:3000 by default.
Docker Deployment
Image
Pull the latest Docker image from the registry:
docker pull git.hangman-lab.top/hzhang/hangmanlab-frontend:latest
Running the Docker Container
Ensure your backend service (e.g., running at http://localhost:5000) is up and accessible. Then, run the Docker container:
docker run -d -p 80:80 --name hangmanlab-frontend hangmanlab-frontend:latest
Note:
- The container listens on port 80. Adjust the port mapping (-p) as needed.
- Make sure to set the appropriate environment variables either in the Dockerfile or via Docker environment variable options.