# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Projekt áttekintés

Ez egy **Discourse fórum téma komponens** a Nyíltvilág magyar technológiai közösség számára. Egy egyedi üdvözlő bannert hoz létre, amely csak a főoldalon jelenik meg, és tartalmaz egy hero szekciót keresési funkcióval és kategória navigációs kártyákkal.

## Architektúra

### Komponens felépítés

A téma komponens a következő fő elemekből áll:

1. **javascripts/discourse/components/welcome-banner.gjs** - Glimmer komponens a banner renderelésére
   - Felhasználói állapot kezelése (bejelentkezett/nem bejelentkezett)
   - Dinamikus tartalom megjelenítés
   - Keresési funkció integráció bejelentkezett felhasználóknak
   - Belépés/Regisztráció gombok nem bejelentkezett felhasználóknak
2. **javascripts/discourse/api-initializers/welcome-banner.js** - Discourse API inicializáló
   - Plugin outlet integráció (below-header vagy above-content)
3. **common/common.scss** - Reszponzív stílusok CSS változókkal
4. **settings.yml** - Admin beállítások a banner testreszabásához
5. **locales/** - i18n fordítások (en.yml, hu.yml)

### Kulcsfontosságú technikai minták

**Glimmer Component alapú architektúra**
- Modern `@glimmer/component` használata
- Reactive getterek a dinamikus tartalom kezelésére (`heroTitle`, `heroContent`, `isAnonymous`)
- `@service` injekció: `currentUser`, `router`, `site`
- Template markup a `<template>` tagben (gjs fájl formátum)

**Felhasználói állapot kezelés**
- `currentUser` service használata a bejelentkezési állapot ellenőrzésére
- `isAnonymous` getter: `!this.currentUser` - meghatározza, hogy látogató vagy bejelentkezett felhasználó
- Feltételes tartalom renderelés az állapot alapján

**i18n támogatás**
- Fordítási fájlok a `locales/` mappában (en.yml, hu.yml)
- `i18n` helper használata a template-ben a gombok lokalizálásához
- Példa: `{{i18n "welcome_banner.buttons.login"}}` → "Belépés" (hu) vagy "Log in" (en)

**Keresési integráció mintája**
- Discourse natív `SearchMenu` komponens integrációja bejelentkezett felhasználóknak
- Mobil detektálás: `this.site.mobileView` - keresés csak asztali nézetben
- Feltételes renderelés: `{{#if (and settings.enable_hero_search (not this.isMobile))}}`

**Navigációs integráció**
- `DButton` komponens használata a belépés/regisztráció gombokhoz
- Router service használata: `this.router.transitionTo("login")` és `"signup"`
- Csak nem bejelentkezett felhasználóknak jelenik meg

**Route alapú megjelenítés**
- `displayForRoute` getter ellenőrzi az aktuális route-ot
- Beállítás alapján: `homepage_only` vagy `all_pages`
- Homepage route-ok: `discovery.latest`, `discovery.categories`

**Kód minőség és best practice-ek**
- Modern Glimmer/Ember konvenciók
- Angol osztálynevek és kommentek
- Accessibility támogatás (`role="search"`, `aria-label` attribútumok)
- Lifecycle hook-ok: `didInsert`, `willDestroy`

## Fontos implementációs részletek

**Felhasználói állapot alapú tartalom** (welcome-banner.gjs:38-52)
- `isAnonymous` getter ellenőrzi a `currentUser` service-t
- `heroTitle` és `heroContent` getterek dinamikusan választanak a settings között:
  - Bejelentkezett: `settings.hero_title_html` / `settings.hero_content_html`
  - Nem bejelentkezett: `settings.hero_title_anonymous_html` / `settings.hero_content_anonymous_html`

**Gombok vs keresés logika** (welcome-banner.gjs:84-102)
- Nem bejelentkezett felhasználóknak: `.hero-buttons` div két DButton-nal
- Bejelentkezett felhasználóknak: `.search-container` a SearchMenu komponenssel
- Csak akkor jelenik meg, ha `settings.enable_hero_search` engedélyezett és nem mobil

**i18n fordítások** (locales/hu.yml, locales/en.yml)
- Gomb szövegek: `welcome_banner.buttons.login` és `welcome_banner.buttons.register`
- Magyar: "Belépés" / "Regisztráció"
- Angol: "Log in" / "Sign up"

**Route detektálás** (welcome-banner.gjs:18-26)
- `displayForRoute` getter ellenőrzi a `router.currentRouteName`-t
- Homepage: `discovery.latest` vagy `discovery.categories`
- Beállítás: `show_on_pages` (homepage_only / all_pages)

## CSS architektúra

**Reszponzív töréspontok**
- Asztal: 1100px+
- Tablet: 900-1099px
- Mobil: <900px

**Grid elrendezés**
- A hero CSS Grid-et használ névvel ellátott területekkel: `"content"` és `"search"`
- A CTA (Call-To-Action) kártyák reszponzív gridet használnak: 1 oszlop (mobil), 2 oszlop (500px+), 4 oszlop (1510px+)
- Optimalizált grid oszlopok `1fr` egységekkel a felesleges `calc()` helyett

**Kulcsfontosságú CSS változók**
```css
--primary-color: #e81f2d
--page-bg: #14191f
--card-bg: #1b2028
--text-color: #ddd
```

## Fejlesztési megjegyzések

**Komponens tesztelése:**
- Módosítások megtekintése a fórum főoldalára navigálva (/)
- Oldal láthatóság tesztelése más URL-ekre navigálva
- Bejelentkezett állapot tesztelése: keresés megjelenik
- Nem bejelentkezett állapot tesztelése: belépés/regisztráció gombok megjelennek
- Mobil nézet tesztelése: keresés eltűnik mobilon
- i18n tesztelés: nyelv váltás a fórum beállításokban

**Gyakori módosítások:**
- Hero szöveg frissítése: settings.yml `hero_title_html`, `hero_content_html`, `hero_title_anonymous_html`, `hero_content_anonymous_html`
- Gomb szövegek módosítása: locales/hu.yml és locales/en.yml szerkesztése
- CTA kártyák módosítása: settings.yml `cta_card_*` beállítások
- Stílusok módosítása: common/common.scss változók vagy szelektorok
- Komponens logika módosítása: javascripts/discourse/components/welcome-banner.gjs

**Osztálynevek konvenciói:**
- `.welcome-card` - Fő banner konténer
- `.hero-section` - Hero szekció konténer
- `.hero-content` - Hero szöveges tartalom
- `.hero-title` - Hero cím
- `.hero-description` - Hero leírás
- `.hero-buttons` - Belépés/Regisztráció gomb konténer (csak nem bejelentkezetteknek)
- `.hero-login-btn` - Belépés gomb
- `.hero-register-btn` - Regisztráció gomb
- `.search-container` - Kereső konténer (csak bejelentkezetteknek)
- `.cta-section` - CTA kártyák szekció
- `.cta-card` - Egyedi CTA kártya
- Angol osztálynevek következetesen használva

**Discourse verzió kompatibilitás:**
- Modern Glimmer komponens architektúra (Discourse 3.1+)
- `apiInitializer` használata (Discourse 3.0+)
- gjs fájl formátum támogatás szükséges

**i18n bővítés:**
Új fordítások hozzáadása:
1. Fordítási kulcs hozzáadása `locales/en.yml` és `locales/hu.yml` fájlokhoz
2. `i18n` helper használata a template-ben: `{{i18n "welcome_banner.your.key"}}`
3. További nyelvek hozzáadása: új `locales/[lang].yml` fájl létrehozása