Add conditional hero content for logged-in and anonymous users

- Add theme settings for anonymous user hero title and content
- Add login and register button text settings
- Update WelcomeBanner component to detect user authentication state
- Display custom content and login/register buttons for anonymous users
- Display search functionality for logged-in users
- Add responsive styling for authentication buttons with hover effects
- Update .gitignore to exclude Claude Code files
This commit is contained in:
gabeszm 2025-10-17 17:13:42 +02:00
parent f595ef7b09
commit c4f807356c
4 changed files with 130 additions and 7 deletions

2
.gitignore vendored
View file

@ -2,3 +2,5 @@
*.log
node_modules/
.env
.claude
.CLAUDE.md

View file

@ -153,6 +153,62 @@
justify-self: stretch;
align-self: start;
}
/* Hero buttons for anonymous users */
.hero-buttons {
display: flex;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
}
.hero-login-btn,
.hero-register-btn {
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
transition: all 0.2s ease-in-out;
}
.hero-login-btn {
background-color: var(--primary-color);
color: #fff;
border: 2px solid var(--primary-color);
}
.hero-login-btn:hover {
background-color: transparent;
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.hero-register-btn {
background-color: transparent;
color: #fff;
border: 2px solid #fff;
}
.hero-register-btn:hover {
background-color: #fff;
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
@media (max-width: 600px) {
.hero-buttons {
flex-direction: column;
gap: 10px;
}
.hero-login-btn,
.hero-register-btn {
width: 100%;
text-align: center;
}
}
/* CTA szekció a hero alatt */
.cta-section {

View file

@ -7,11 +7,13 @@ import { eq, and, not } from "truth-helpers";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
import SearchMenu from "discourse/components/search-menu";
import DButton from "discourse/components/d-button";
import icon from "discourse-common/helpers/d-icon";
export default class WelcomeBanner extends Component {
@service router;
@service site;
@service currentUser;
get displayForRoute() {
const showOnPages = settings.show_on_pages || "homepage_only";
@ -33,6 +35,22 @@ export default class WelcomeBanner extends Component {
return this.site.mobileView;
}
get isAnonymous() {
return !this.currentUser;
}
get heroTitle() {
return this.isAnonymous
? settings.hero_title_anonymous_html
: settings.hero_title_html;
}
get heroContent() {
return this.isAnonymous
? settings.hero_content_anonymous_html
: settings.hero_content_html;
}
didInsert() {
document.documentElement.classList.add("display-welcome-banner");
}
@ -57,15 +75,30 @@ export default class WelcomeBanner extends Component {
<div class="hero-deco"></div>
<div class="hero-content">
<h2 class="hero-title">
{{htmlSafe settings.hero_title_html}}
{{htmlSafe this.heroTitle}}
</h2>
<div class="hero-description">
{{htmlSafe settings.hero_content_html}}
{{htmlSafe this.heroContent}}
</div>
{{#if (and settings.enable_hero_search (not this.isMobile))}}
<div class="search-container" role="search">
<SearchMenu @searchInputId="welcome-banner-search" />
{{#if this.isAnonymous}}
<div class="hero-buttons">
<DButton
@action={{this.router.transitionTo "login"}}
@label={{settings.login_button_text}}
class="btn-primary hero-login-btn"
/>
<DButton
@action={{this.router.transitionTo "signup"}}
@label={{settings.register_button_text}}
class="btn-default hero-register-btn"
/>
</div>
{{else}}
{{#if (and settings.enable_hero_search (not this.isMobile))}}
<div class="search-container" role="search">
<SearchMenu @searchInputId="welcome-banner-search" />
</div>
{{/if}}
{{/if}}
</div>
</div>

View file

@ -84,8 +84,40 @@ hero_content_html:
type: string
textarea: true
description:
en: Hero section content (HTML allowed)
hu: Hero szekció tartalma (HTML használható)
en: Hero section content for logged-in users (HTML allowed)
hu: Hero szekció tartalma bejelentkezett felhasználóknak (HTML használható)
hero_title_anonymous_html:
default: "👋 Üdvözlünk a <strong>Nyíltvilág</strong> fórumon!"
type: string
textarea: true
description:
en: Hero section title for anonymous users (HTML allowed)
hu: Hero szekció címe nem bejelentkezett felhasználóknak (HTML használható)
hero_content_anonymous_html:
default: |
<p>Ez a közösségi tér mindazoknak szól, akiket lelkesít a technológia világa legyen szó nyílt forráskódról, kiberbiztonságról, adatvédelemről vagy mesterséges intelligenciáról.</p>
<p>Csatlakozz hozzánk, és légy részese egy nyitott és inspiráló közösségnek, ahol megoszthatod a tudásod, kérdezhetsz, vagy tapasztalatokat cserélhetsz másokkal! 🌍✨</p>
type: string
textarea: true
description:
en: Hero section content for anonymous users (HTML allowed)
hu: Hero szekció tartalma nem bejelentkezett felhasználóknak (HTML használható)
login_button_text:
default: "Belépés"
type: string
description:
en: Login button text for anonymous users
hu: Belépés gomb szövege nem bejelentkezett felhasználóknak
register_button_text:
default: "Regisztráció"
type: string
description:
en: Register button text for anonymous users
hu: Regisztráció gomb szövege nem bejelentkezett felhasználóknak
# =============================================================================
# 🔍 SEARCH SETTINGS