weclome-banner/CLAUDE.md

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

--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