From 2993538ffe27f107ae6161df81a2e49b0da1fa29 Mon Sep 17 00:00:00 2001 From: Hari Nugraha Date: Thu, 26 Feb 2026 17:29:44 +0700 Subject: [PATCH] docs: add information regarding adding a new translation --- README.md | 69 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 37 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index acf8af6fc..3da0d462b 100644 --- a/README.md +++ b/README.md @@ -2,59 +2,64 @@ The repository for Hyperjump Technology's landing page. [https://hyperjump.tech](https://hyperjump.tech) -# Getting Started - -- Clone the repository -- Install dependencies using [Bun](https://bun.sh): `bun install` -- Run the development server: `bun dev` - -# Tech Stack +## Tech Stack - [Next.js](https://nextjs.org) with App Router. +- [Bun](https://bun.sh). - [Tailwind CSS](https://tailwindcss.com) and [Shadcn/UI](https://ui.shadcn.com/). - [simple-i18n-next](https://github.com/nicnocquee/simple-i18n-next#readme). - [TypeScript](https://www.typescriptlang.org). +- [Playwright](https://playwright.dev/). -# Pull Request Preview +## Development Workflows -When a pull request is opened or updated, a preview of the changes will be generated and uploaded as an artifact. This allows you to review the changes before merging. +### Running the App Locally -# Deployment +1. Install Bun: `curl -fsSL https://bun.sh/install | bash` +2. Install dependencies: `bun install --frozen-lockfile` +3. Start development server: `bun dev` -The website is deployed to GitHub Pages using the [export output](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#configuration) of Next.js. +### Adding a New Translation -# End-to-End (E2E) Testing +1. Add the key and value to `locales/en/*.json` and `locales/id/*.json`. +2. Run `bun run generate-locales`. +3. Use the generated function in your component: -This project uses [Playwright](https://playwright.dev/) for end-to-end tests. +```tsx +import { myNewKey } from "@/locales/.generated/strings"; +// ... +{myNewKey(lang)}; +``` -## Local Setup +### Running Tests -- Ensure dependencies are installed with Bun: `bun install` -- Install Playwright browsers (one-time): `bunx playwright install` +We use [Playwright](https://playwright.dev/) for end-to-end testing to ensure language switching and responsive layouts don't break. -## Running Tests +- `bunx playwright install`: Install Playwright browsers +- `bun run test:e2e`: Run all tests headlessly. +- `bun run test:e2e:ui`: Open the Playwright UI to debug tests. +- `bun run test:e2e:headed`: Run all tests in headed mode. +- `bun run test:e2e:report`: View the latest HTML report. -- Headless run (recommended): `bun run test:e2e` -- Headed (debug) run: `bun run test:e2e:headed` -- View the latest HTML report: `bun run test:e2e:report` +By default, tests will start the Next.js app automatically using `bun run build` then `bun run start` on port `3000`. -By default, tests will: +## Pull Request Preview -- Start the Next.js app automatically using `bun run build` then `bun run start` on port 3000. -- Run in headless mode. -- Print progress to the terminal. On CI, GitHub annotations will be shown for failures. +When a pull request is opened or updated, a preview of the changes will be generated and uploaded as an artifact. This allows you to review the changes before merging. -## Interpreting Results +## CI -- On success, you will see a summary with passed tests in the terminal. -- On failure, Playwright prints the failing steps to the console. Open the HTML report for details: - - `bun run test:e2e:report` (after a run) -- Traces, screenshots, and videos are captured on retry/failure and can be explored in the HTML report. +A GitHub Actions workflow at `.github/workflows/e2e.yml` runs E2E tests on every pull request. Results are printed to the build log, and the HTML report is uploaded as a build artifact for deeper inspection. -## CI +## Deployment -A GitHub Actions workflow at `.github/workflows/e2e.yml` runs E2E tests on every pull request and on pushes to `main`. Results are printed to the build log, and the HTML report is uploaded as a build artifact for deeper inspection. +1. After pull request merges to the `main` branch. +2. GitHub Actions will trigger: + - Linting & Prettier check. + - Playwright E2E tests. + - [Next.js static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#configuration) via `bun run build`. + - Deployment to the `gh-pages` branch. -# License +## License MIT