diff --git a/.husky/pre-commit b/.husky/pre-commit index 5bb9572f..05fde6f9 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,6 +1,12 @@ #!/bin/sh -. "$(dirname "$0")/_/husky.sh" set -e # die on error -pnpm run lint \ No newline at end of file +REPO_ROOT=$(git rev-parse --show-toplevel 2>/dev/null || pwd) + +if command -v pnpm >/dev/null 2>&1; then + cd "$REPO_ROOT" + pnpm run lint +else + echo "pnpm not found. Skipping lint." >&2 +fi \ No newline at end of file diff --git a/README.md b/README.md index 83373343..cfc17140 100644 --- a/README.md +++ b/README.md @@ -1,90 +1,65 @@ # Open Elements Website -This repo contains the website of Open Elements. -The website is still work in progress. -In future the website will be available at https://www.open-elements.de and https://www.open-elements.com. +This repository contains the Open Elements website. -Netlify status of English page: +## Architecture (2026) -[![Netlify status of English page](https://api.netlify.com/api/v1/badges/0a7875a4-d4ba-4358-8616-87200dcbe7c5/deploy-status)](https://app.netlify.com/sites/open-elements-en/deploys) +The project is now a Next.js application with App Router, Tailwind CSS, and `next-intl` for i18n. Legacy Hugo content and templates are still kept in the repo for migration and historical content. -Netlify status of German page: +### Runtime layers -[![Netlify status of German page](https://api.netlify.com/api/v1/badges/935f5408-eef5-4889-9cb6-ee55a0990a0f/deploy-status)](https://app.netlify.com/sites/open-elements-de/deploys) +- **Next.js App (primary)** + - App Router pages and layouts in `src/app`. + - UI components in `src/components`. + - Shared utilities in `src/lib`, data in `src/data`, types in `src/types`. + - Styling via Tailwind CSS and `src/app/globals.css`. +- **Internationalization** + - `next-intl` routing and helpers in `src/i18n`. + - Translation messages in `locales`. -## Building the website +- **Legacy Hugo content (migrating)** + - Markdown content in `content`. + - Hugo templates in `src/layouts`. + - Hugo configuration in `config.toml`. + - Built static artifacts live in `public` (do not edit manually). -Since the page is based on Hugo and React we use `npm-run-all` to execute several dev executions in parallel. -Therefore you need to install `npm-run-all` as a dev dependency: +- **Web components** + - Custom elements live in `react-src` and are bundled via `react-src/build.mjs` into `public/js`. -``` -npm install --save-dev npm-run-all -``` - - -The project is based on [Hugo](https://gohugo.io/) and you need to [install Hugo](https://gohugo.io/installation/) to build the website. -Once Hugo is installed you can host the website on localhost by executing to following command from the root folder of the repository: - -``` -hugo serve -``` +- **E2E tests** + - Playwright specs in `tests/e2e`. -While the process is running the English (default) version of the website can be reached at http://localhost:1313/ and the German can be reached at http://localhost:1314/. +## Development -## Adding Tailwind CSS +### Requirements -### 1-Install Tailwind CSS +- Node.js 22 +- pnpm 10 -Install tailwindcss via npm, and create your tailwind.config.js file in the root folder. +### Install dependencies ``` -npm install -D tailwindcss -npx tailwindcss init +pnpm install ``` -### 2-Configure your template paths - -Add the paths to all of your template files in your tailwind.config.js file. +### Run locally ``` -content: [ - "content/**/*.md", "layouts/**/*.html" -], +pnpm run dev ``` -### 3-Add the Tailwind directives to your CSS -Create 'input.css' file in the root folder and add the @tailwind directives for each of Tailwind’s layers to your input CSS file. - -``` -@tailwind base; -@tailwind components; -@tailwind utilities; -``` +The app is available at http://localhost:3000. -### 4-Code snippet for Package.json - -Add the following code in 'Package.json' +### Build & start ``` - "scripts": { - "dev:css": "npx tailwindcss -i input.css -o assets/css/style.css -w", - "dev:hugo": "hugo server", - "dev": "run-p dev:*", - "build:css": "NODE_ENV=production npx tailwindcss -i input.css -o assets/css/style.css -m", - "build:hugo": "hugo", - "build": "run-s build:*" - }, +pnpm run build +pnpm run start ``` -### 5-Dev environment -For development run the following command in terminal. -``` -npm run dev -``` +### E2E tests -### 6-Production -For production ready css, run the following command in terminal. ``` -npm run build +pnpm run test:e2e ``` diff --git a/eslint.config.js b/eslint.config.js index 055f0e4b..7b7549aa 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -11,6 +11,7 @@ export default defineConfig([ "build/**", "next-env.d.ts", "content/**", - "src/react-src/**" + "public/**", + "react-src/**" ]) ]); diff --git a/package.json b/package.json index 4c9b4bbf..9a8ebaa1 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "next lint", + "lint": "eslint .", "test:e2e": "playwright test", "prepare": "husky" }, diff --git a/react-src/maven-prs.tsx b/react-src/maven-prs.tsx index a874d681..97594920 100644 --- a/react-src/maven-prs.tsx +++ b/react-src/maven-prs.tsx @@ -69,7 +69,7 @@ export default function MavenPRs({status}: { status?: string }) { } fetchPRs(); - }, []); + }, [status]); if (!prs) return
Keine Pull Requests gefunden
; diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index 2b626fba..fe289d4e 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -4,6 +4,7 @@ import { notFound } from 'next/navigation'; import { routing } from '@/i18n/routing'; import type { Metadata } from 'next' import { Montserrat } from 'next/font/google' +import Script from 'next/script' import '../globals.css' import Navbar from '@/components/Navbar' import Footer from '@/components/Footer' @@ -85,7 +86,7 @@ export default async function LocaleLayout({
{children}