Feature/redesign 2026

.claude/commands/commit.md

@@ -1,3 +1,7 @@
+---
+model: claude-haiku-4-5-20251001
+---
+
 # Commit
 
 Create a git commit following conventional commit syntax and best practices.
@@ -41,8 +45,7 @@ Create a git commit following conventional commit syntax and best practices.
 - `<scope>` is optional but encouraged — use the affected module, file, or area (e.g. `api`, `auth`, `build`)
 - `<subject>` is lowercase, imperative mood, no period at end (e.g. `add retry logic`, not `Added retry logic.`)
 - Keep the subject line under 72 characters
-- Body lines wrap at 72 characters
-- Use the body to explain *why*, not *what* — the diff shows what
+- **Default to subject-line only — no body.** Only add a body for a genuinely important or non-obvious commit (e.g. a breaking change, a non-obvious workaround, a fix whose cause isn't visible in the diff), and keep it to one short line, not a multi-paragraph explanation. The diff already shows *what* changed — don't restate it.
 - Breaking changes: add `!` after type/scope (e.g. `feat(api)!:`) AND a `BREAKING CHANGE:` footer
 
 **Examples:**

.env.production

@@ -0,0 +1,7 @@
+NPM_FLAGS=--no-optional
+
+WP_REST_URL=https://bubec-wordpress-beta.jakubferenc.cz
+WP_GRAPHQL_URL=https://bubec-wordpress-beta.jakubferenc.cz/wordpress/graphql
+
+SENTRY_DSN=https://5c970e152985be7b91255ee405917532@o275554.ingest.us.sentry.io/4511484951658496
+SENTRY_ENVIRONMENT=production

.env.staging

@@ -0,0 +1,7 @@
+NPM_FLAGS=--no-optional
+
+WP_REST_URL=https://bubec-wordpress-beta.jakubferenc.cz
+WP_GRAPHQL_URL=https://bubec-wordpress-beta.jakubferenc.cz/wordpress/graphql
+
+SENTRY_DSN=https://5c970e152985be7b91255ee405917532@o275554.ingest.us.sentry.io/4511484951658496
+SENTRY_ENVIRONMENT=staging

.github/workflows/deploy.yml

@@ -0,0 +1,188 @@
+name: Deploy to beta
+
+on:
+  push:
+    branches: [feature/redesign-2026]
+  workflow_dispatch: {}
+
+concurrency:
+  group: deploy-beta
+  cancel-in-progress: true
+
+env:
+  DEPLOY_PATH: /www/hosting/jakubferenc.cz/bubec/nuxt
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Use production env file
+        run: cp .env.production .env
+
+      - name: Build
+        run: yarn build:ci
+
+      - name: Upload build output
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-output
+          path: .output/
+          retention-days: 1
+          include-hidden-files: true
+
+  test-unit:
+    needs: build
+    if: vars.SKIP_TESTS != '1'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Prepare Nuxt types
+        run: yarn nuxt prepare
+
+      - name: Unit tests
+        run: yarn test:unit
+
+  test-component:
+    needs: build
+    if: vars.SKIP_TESTS != '1'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Prepare Nuxt types
+        run: yarn nuxt prepare
+
+      - name: Component tests
+        run: yarn test:component
+
+  test-e2e:
+    needs: build
+    if: vars.SKIP_TESTS != '1'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Prepare Nuxt types
+        run: yarn nuxt prepare
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Download build output
+        uses: actions/download-artifact@v4
+        with:
+          name: build-output
+          path: .output/
+
+      - name: E2E tests
+        run: yarn test:e2e
+
+  deploy:
+    needs: [test-unit, test-component, test-e2e]
+    if: |
+      always() &&
+      (
+        vars.SKIP_TESTS == '1' ||
+        (
+          needs.test-unit.result == 'success' &&
+          needs.test-component.result == 'success' &&
+          needs.test-e2e.result == 'success'
+        )
+      )
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Download build output
+        uses: actions/download-artifact@v4
+        with:
+          name: build-output
+          path: .output/
+
+      - name: Install sshpass
+        run: sudo apt-get update && sudo apt-get install -y sshpass
+
+      - name: Ensure deploy path exists
+        env:
+          SSHPASS: ${{ secrets.DEPLOY_SSH_PASSWORD }}
+        run: |
+          sshpass -e ssh -o StrictHostKeyChecking=no \
+            "${{ secrets.DEPLOY_SSH_USER }}@${{ secrets.DEPLOY_SSH_HOST }}" \
+            "mkdir -p ${{ env.DEPLOY_PATH }}"
+
+      - name: Rsync build output
+        env:
+          SSHPASS: ${{ secrets.DEPLOY_SSH_PASSWORD }}
+        run: |
+          sshpass -e rsync -avr --delete \
+            -e "ssh -o StrictHostKeyChecking=no" \
+            .output/ "${{ secrets.DEPLOY_SSH_USER }}@${{ secrets.DEPLOY_SSH_HOST }}:${{ env.DEPLOY_PATH }}/.output/"
+
+      - name: Rsync deploy config
+        env:
+          SSHPASS: ${{ secrets.DEPLOY_SSH_PASSWORD }}
+        run: |
+          sshpass -e rsync -av \
+            -e "ssh -o StrictHostKeyChecking=no" \
+            Dockerfile.deploy docker-compose.deploy.yml \
+            "${{ secrets.DEPLOY_SSH_USER }}@${{ secrets.DEPLOY_SSH_HOST }}:${{ env.DEPLOY_PATH }}/"
+
+      - name: Restart container on server
+        env:
+          SSHPASS: ${{ secrets.DEPLOY_SSH_PASSWORD }}
+        run: |
+          sshpass -e ssh -o StrictHostKeyChecking=no \
+            "${{ secrets.DEPLOY_SSH_USER }}@${{ secrets.DEPLOY_SSH_HOST }}" \
+            "cd ${{ env.DEPLOY_PATH }} && docker compose -f docker-compose.deploy.yml up -d --build"

.gitignore

@@ -20,6 +20,9 @@ yarn-error.log*
 .yarn/build-state.yml
 .yarn/install-state.gz
 
+# Design
+resources/design
+
 # Runtime data
 pids
 *.pid
@@ -107,3 +110,10 @@ sw.*
 
 # Resources
 +resources
+.output
+test-results
+playwright-report
+.nuxtrc
+
+# graphql
+*.generated.ts

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  // Recommended when opening this workspace. ESLint is required for the
+  // fix-on-save setup above; Volar powers Vue/TS in .vue files.
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "Vue.volar"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  // ESLint owns formatting in this project (@nuxt/eslint-config `stylistic`), so we
+  // don't use a separate formatter/Prettier. Instead of "format on save" we
+  // run ESLint's autofix on save — this applies stylistic formatting AND any
+  // other auto-fixable rules in a single pass.
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+
+  // Don't run a second formatter on top of ESLint (avoids fighting rules).
+  "editor.formatOnSave": false,
+
+  // ESLint flat config lives at ./eslint.config.mjs (default in recent
+  // versions of the extension, set explicitly to be safe).
+  "eslint.useFlatConfig": true,
+
+  // Lint/fix these languages, including Vue SFCs.
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+    "vue"
+  ]
+}

CLAUDE.md

@@ -0,0 +1,66 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Working agreements
+
+- **Never `git commit` automatically.** Only commit when the user explicitly tells you to in that moment (e.g. "commit this", or invoking `/commit`). Completing a task is not implicit permission, and a prior commit request does not authorize future ones. Make and stage edits, then stop and wait for explicit authorization.
+- **Keep commit messages minimal.** Default to just the `<type>(<scope>): <subject>` line — no body. Only add a short, one-line body for genuinely important or non-obvious commits; never write a multi-paragraph explanation.
+- **Package manager is Yarn 4** (pinned via `packageManager`); use `yarn`, not npm/pnpm.
+- **Prefer `@/` for source-root imports** (e.g. `@/stores/main`, `@/utils/factories`, `@/components/...`). `@` is pinned to the source root in `nuxt.config.ts` (`alias`) and resolves via the generated TS paths. Note there is no `src/` folder — `srcDir` is `.`, so `@` (and the still-valid `~`) map to the repo root.
+- **Colocate `.graphql` files with their primary consumers.** Place `.graphql` files in the same directory as the component or page that primarily consumes them, using the same base name (e.g. `components/Footer.vue` + `components/Footer.graphql`, or `pages/aktuality/[slug].vue` + `pages/aktuality/[slug].graphql`). Use the **Czech (canonical) slug** for the directory. After adding/editing a `.graphql` operation, run `yarn codegen` to regenerate types.
+- **Do not use Gutenberg blocks.** This project does not author content as Gutenberg blocks (no `<!-- wp:… -->` block markup in `post_content` or ACF wysiwyg fields). Write content as plain HTML with the final Tailwind classes applied directly. Page structure is expressed through the ACF flexible-content **sections** model (`pages/[slug].vue`), and rich text as plain HTML — not the block editor. When reproducing a block-based layout (e.g. the old `render_block`-filtered "O nás" look), copy its **rendered** HTML/classes, not the block source.
+- **Colocate component tests with the component (or page) they test.** Place `*.spec.{js,ts}` files in the same directory as the `.vue` file they mount, using the same base name (e.g. `components/Footer.vue` + `components/Footer.spec.ts`, or `pages/newsletter.vue` + `pages/newsletter.spec.ts`). There is no more `tests/component/` — `vitest.config.ts`'s `include` globs `components/**/*.spec.{js,ts}` and `pages/**/*.spec.{js,ts}` directly, matching the existing `utils/**/*.spec.ts` colocation. Pure, no-single-file-subject tests still live in `tests/unit/`.
+
+## What this is
+
+Server-side-rendered (SSR) marketing/events site for Studio Bubec. **Nuxt 4.4 / Vue 3 / Pinia**, run as a long-lived Node server (Nitro `node-server` preset). Content is pulled from a **headless WordPress WPGraphQL API** (`apiGraphqlUrl`, default `https://bubec-wordpress.assemblage.cz/graphql`, overridable via `WP_GRAPHQL_URL`) **on demand** at request time; performance and WP-API load are handled by Nitro route caching (`routeRules` stale-while-revalidate), not a static build. Deployed as a Docker container running `node .output/server/index.mjs`. The WordPress backend lives in the separate **`bubec-wordpress`** repo (see its own `CLAUDE.md`).
+
+> Migrated from Nuxt 2.18 / Vue 2 / Vuex (static `nuxt generate`), and subsequently from the WordPress **REST** API to **WPGraphQL**. There is no `nuxt generate`, no build-time route enumeration, no `dist/` output, and no more axios/REST factories.
+
+## Commands
+
+Package manager is **Yarn 4** (pinned via `packageManager`); use `yarn`, not npm/pnpm. Node 24.
+
+- `yarn dev` — dev server on :3000 (or `docker-compose up --build` for the Docker env)
+- `yarn dev:mock` — dev server backed by local `mock/*.json` instead of the live API (`MOCK_DATA=1`)
+- `yarn build` — compile the SSR server output into `.output/`
+- `yarn start` — run the built server (`node .output/server/index.mjs`) on :3000
+- `yarn codegen` — regenerate `models/graphql.generated.ts` from the `.graphql` operations against the live WPGraphQL schema (reads `.env` for `WP_GRAPHQL_URL`)
+- `yarn lint` / `yarn lint:fix` — ESLint (standalone flat config built with `@nuxt/eslint-config`, includes stylistic formatting; not generated from `.nuxt/`)
+- `yarn typecheck` — `nuxt typecheck` (vue-tsc)
+- `yarn test` / `yarn test:watch` — Vitest unit + component tests (`yarn test:unit` / `yarn test:component` run each subset alone)
+- `yarn test:e2e` — Playwright e2e against the built server; run `yarn build` first (needs `npx playwright install chromium` once)
+- `yarn fetch-mock` — one-off: repopulate `mock/*.json` from the live WP REST API (`scripts/fetch-mock-data.mjs`)
+
+**macOS dev caveat:** the `dev` script is `TMPDIR=/tmp nuxt dev`. Nuxt 4's dev server connects to its vite-node worker over a unix socket in `$TMPDIR`; macOS's long `/var/folders/…` TMPDIR pushes the socket path past the OS 104-char limit (`connect EINVAL`), so a short TMPDIR is required. The `test`/`test:e2e` scripts set it too.
+
+## Architecture
+
+**Data flow (all content is WordPress, via WPGraphQL).** `utils/graphql.ts` exports the single access helper `gqlFetch($config, query, variables)` — a thin `$fetch` POST to `apiGraphqlUrl` that unwraps `data` and throws on GraphQL `errors`. There is no client library and no axios. Queries are authored as **colocated `.graphql` files** imported raw (`import q from "./x.graphql?raw"`) and passed to `gqlFetch`, typically inside `useAsyncData`. Example (`pages/aktuality/index.vue`):
+
+```ts
+import { gqlFetch } from "@/utils/graphql";
+import newsListQuery from "@/pages/aktuality/index.graphql?raw";
+const config = useRuntimeConfig().public;
+const { data } = await useAsyncData("newsList",
+  () => gqlFetch(config, newsListQuery, { language: language.value }),
+  { watch: [language] });
+```
+
+- **Types are generated, not hand-written.** `graphql-codegen` (`codegen.ts`) reads every `.graphql` under `stores/`, `pages/`, `components/` and emits operation + schema types to `models/graphql.generated.ts` (committed). `models/index.ts` re-exports those plus `models/wp.ts`, so consumers import query result types (`GlobalDataQuery`, etc.) and `WpConfig` from `@/models`. Run `yarn codegen` after changing any operation.
+- **Global data** (menus, ACF options, featured posts) is the one store: `stores/main.ts` (Pinia, option-store style) has a single guarded `fetchGlobalData()` action that runs `stores/main.graphql`. `app.vue` calls `store.fetchGlobalData()` inside `useAsyncData("global", …)` for every route (the old `nuxtServerInit`). Per-page/detail data is fetched directly with `gqlFetch` in the page's own `useAsyncData`.
+- **Mock mode.** `mock/*.json` holds curated, data-only content; `yarn dev:mock` / `yarn build:mock` set `MOCK_DATA=1` (surfaced as `runtimeConfig.public.mockData`) to serve from it instead of the live API. Regenerate the JSON with `yarn fetch-mock`.
+- **No build-time `getRoutes()`/payload.** SSR renders each route on demand. `routeRules` in `nuxt.config.ts` cache rendered HTML with stale-while-revalidate (`/**` 60s, `/newsletter/**` 1h) — this is what keeps WP load low while staying fresh.
+
+**Modules.** `@pinia/nuxt`, `@nuxtjs/i18n`, `@nuxtjs/sitemap` (`@nuxtjs/sitemap` + `site.url`/`trailingSlash` drive `/sitemap.xml`). ESLint is *not* a Nuxt module here — `eslint.config.mjs` builds a standalone flat config via `@nuxt/eslint-config`'s `createConfigForNuxt` (hand-maintained `dirs`), so `yarn lint` works without any `.nuxt/` prepare step.
+
+**i18n & routing.** Bilingual via `@nuxtjs/i18n` **v10**: `cs` (default) and `en`, locale files in `i18n/locales/`, Vue-I18n runtime options in `i18n/i18n.config.ts` (`legacy: false`, `globalInjection: true` so templates keep `$t`/`$i18n`; in `<script setup>` use `useI18n()`). Czech is the canonical slug; English paths are remapped in the `i18n.pages` block of `nuxt.config.ts`. Slug mapping: `aktuality`→`news`, `program`→`events`, `kurz`→`course`. Trailing slashes enforced (`site.trailingSlash: true`). `compilation.strictMessage: false` + `escapeHtml: false` are set because some locale messages contain HTML (e.g. `cookiePolicy.message`), which i18n v10 otherwise rejects/escapes. The GraphQL layer maps the locale to a `language` variable (`CS`/`EN`, via wp-graphql-polylang).
+
+**Pages/components.** `pages/` uses Nuxt file-based routing with `[slug].vue` dynamic detail pages per content type; `pages/kurz/index.vue` and `pages/program/detail/index.vue` redirect to `/` via `definePageMeta({ redirect })`. **All pages and components are `<script setup>` / Composition API** — no Options API, no `this.$config`/Vuex/`mapState`. `components/` are auto-imported (`components: true`). Styling is Tailwind (`tailwind.config.js`, wired through `postcss` + `assets/css/main.css`) plus SCSS variables/mixins auto-injected via Vite `css.preprocessorOptions` (`@use "@/assets/scss/_variables.scss" as *`, replacing `@nuxtjs/style-resources`). Static assets are served from `public/` (footer logos under `public/images/`). Head/SEO uses `useHead` + `useLocaleHead`; `utils/functions.ts` `getOpenGraphMeta` builds OG/Twitter tags (keyed by `key` for dedup).
+
+**Testing.** Vitest + `@nuxt/test-utils` (pinned to **vitest 4**, which the test-utils Nuxt environment requires): `tests/unit/` are pure (node env) tests not tied to one component/page. Component/page tests mount with `mountSuspended` (Nuxt env, happy-dom) and are colocated next to the `.vue` file they test (`components/Footer.spec.ts`, `pages/newsletter.spec.ts`, …) — see the colocation working agreement above. Playwright (`tests/e2e/`) builds the SSR output and drives the real `node .output/server` (`playwright.config.ts` `webServer`).
+
+**`bubec-theme/`** is a WordPress theme copy checked into this repo but **not part of the Nuxt build**. The live headless backend and its canonical theme live in the separate **`bubec-wordpress`** repo.
+
+Runtime config (titles, SEO, per-env base URLs) lives in `project.config.js`; `apiGraphqlUrl` is added in `nuxt.config.ts` (`runtimeConfig.public`). Read it app-wide with `useRuntimeConfig().public` (there is no `this.$config`).

Dockerfile

@@ -16,9 +16,13 @@ COPY . .
 
 # Set environment variables to use custom CA if needed
 ENV NODE_EXTRA_CA_CERTS=/etc/ssl/certs/ca-certificates.crt
+ENV NODE_ENV=production
 
-# Expose Nuxt development port
+# Build the SSR server output (Nitro node-server preset)
+RUN yarn build
+
+# Expose Nuxt SSR port
 EXPOSE 3000
 
-# Default command: Run Nuxt in development mode
-CMD ["npm", "run", "dev"]
+# Run the Nitro node-server output
+CMD ["node", ".output/server/index.mjs"]

Dockerfile.deploy

@@ -0,0 +1,19 @@
+# Deploy-only image: expects a pre-built .output/ in the build context
+# (produced by `yarn build` in CI). Does NOT run yarn install/yarn build —
+# see Dockerfile for the full-build image used by local/dev Docker.
+FROM node:24-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y ca-certificates && update-ca-certificates
+
+COPY .output ./.output
+
+ENV NODE_EXTRA_CA_CERTS=/etc/ssl/certs/ca-certificates.crt
+ENV NODE_ENV=production
+ENV NITRO_PORT=3000
+ENV NITRO_HOST=0.0.0.0
+
+EXPOSE 3000
+
+CMD ["node", ".output/server/index.mjs"]