From e9d72d53b5f68eb84a85e866b0b737c945e0c1ff Mon Sep 17 00:00:00 2001
From: gabeszm <vgabor92@protonmail.com>
Date: Thu, 16 Oct 2025 16:36:24 +0200
Subject: [PATCH] Fix Discourse 3.5.0 compatibility issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace color-mix() CSS function with rgba() for better browser support
- Update Handlebars templates: change this.theme.* to theme.* for correct context
- Fix JavaScript settings access: remove theme_vars nesting, use direct settings object
- Ensure banner visibility on homepage with proper settings integration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 common/common.scss                            |  2 +-
 .../api-initializers/welcome-banner.js        |  6 +-
 .../welcome-banner.hbs                        | 82 +++++++++----------
 .../welcome-banner-header.hbs                 | 82 +++++++++----------
 4 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/common/common.scss b/common/common.scss
index 03c4dab..5e107c0 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -242,6 +242,6 @@
 
   .search-input:focus {
     border-color: var(--tertiary);
-    box-shadow: 0 0 0 3px color-mix(in oklab, var(--tertiary) 20%, transparent);
+    box-shadow: 0 0 0 3px rgba(var(--tertiary-rgb), 0.2);
   }
   
\ No newline at end of file
diff --git a/javascripts/discourse/api-initializers/welcome-banner.js b/javascripts/discourse/api-initializers/welcome-banner.js
index 92fb8ef..7e2b8db 100644
--- a/javascripts/discourse/api-initializers/welcome-banner.js
+++ b/javascripts/discourse/api-initializers/welcome-banner.js
@@ -5,7 +5,7 @@ export default apiInitializer("1.8.0", (api) => {
     const welcomeCard = document.querySelector(".welcome-card");
     if (!welcomeCard) return;
 
-    const showOnPages = settings?.theme_vars?.show_on_pages || "homepage_only";
+    const showOnPages = settings.show_on_pages || "homepage_only";
 
     if (showOnPages === "all_pages") {
       // Show on all pages
@@ -25,7 +25,7 @@ export default apiInitializer("1.8.0", (api) => {
   // Render search input with SearchMenu integration
   function renderSearchInput() {
     // Check if search is enabled in settings (default to true if not set)
-    const searchEnabled = settings?.theme_vars?.enable_hero_search !== false;
+    const searchEnabled = settings.enable_hero_search !== false;
 
     if (isMobileView()) return;
 
@@ -45,7 +45,7 @@ export default apiInitializer("1.8.0", (api) => {
     const input = document.createElement("input");
     input.type = "text";
     input.className = "search-input";
-    input.placeholder = settings?.theme_vars?.search_placeholder || "Keresés a fórumon…";
+    input.placeholder = settings.search_placeholder || "Keresés a fórumon…";
     input.setAttribute("aria-label", "Search");
 
     // Open and sync SearchMenu
diff --git a/javascripts/discourse/connectors/above-main-container-outlet/welcome-banner.hbs b/javascripts/discourse/connectors/above-main-container-outlet/welcome-banner.hbs
index 3f01c4b..2e07c70 100644
--- a/javascripts/discourse/connectors/above-main-container-outlet/welcome-banner.hbs
+++ b/javascripts/discourse/connectors/above-main-container-outlet/welcome-banner.hbs
@@ -1,16 +1,16 @@
-{{#if this.theme.enable_welcome_banner}}
-{{#unless (eq this.theme.banner_position "below_header")}}
+{{#if theme.enable_welcome_banner}}
+{{#unless (eq theme.banner_position "below_header")}}
 <section class="above-main-container-outlet welcome-card">
     <div class="hero-section">
         <div class="hero-deco"></div>
         <div class="hero-content">
             <h2 class="hero-title">
-                {{{this.theme.hero_title_html}}}
+                {{{theme.hero_title_html}}}
             </h2>
             <div class="hero-description">
-                {{{this.theme.hero_content_html}}}
+                {{{theme.hero_content_html}}}
             </div>
-            {{#if this.theme.enable_hero_search}}
+            {{#if theme.enable_hero_search}}
             <div class="search-container" aria-label="Search"></div>
             {{/if}}
         </div>
@@ -18,104 +18,104 @@
 
     <div class="cta-section">
         <ul class="cta-list">
-            {{#if this.theme.cta_card_1_enabled}}
+            {{#if theme.cta_card_1_enabled}}
             <li>
                 <a
-                    href="{{this.theme.cta_card_1_url}}"
+                    href="{{theme.cta_card_1_url}}"
                     class="cta-card"
-                    aria-label="{{this.theme.cta_card_1_title}}"
+                    aria-label="{{theme.cta_card_1_title}}"
                 >
                     <div class="cta-icon">
-                        {{#if (eq this.theme.cta_card_1_icon_type "font_awesome")}}
-                            <i class="fas fa-{{this.theme.cta_card_1_icon_font_awesome}}"></i>
+                        {{#if (eq theme.cta_card_1_icon_type "font_awesome")}}
+                            <i class="fas fa-{{theme.cta_card_1_icon_font_awesome}}"></i>
                         {{else}}
-                            {{this.theme.cta_card_1_icon_emoji}}
+                            {{theme.cta_card_1_icon_emoji}}
                         {{/if}}
                     </div>
                     <div class="cta-content">
-                        <span class="cta-title">{{this.theme.cta_card_1_title}}</span>
-                        <span class="cta-desc">{{this.theme.cta_card_1_description}}</span>
+                        <span class="cta-title">{{theme.cta_card_1_title}}</span>
+                        <span class="cta-desc">{{theme.cta_card_1_description}}</span>
                         <span class="cta-cta">
                             <i class="fas fa-angle-double-right"></i>
-                            {{this.theme.cta_card_1_cta_text}}
+                            {{theme.cta_card_1_cta_text}}
                         </span>
                     </div>
                 </a>
             </li>
             {{/if}}
 
-            {{#if this.theme.cta_card_2_enabled}}
+            {{#if theme.cta_card_2_enabled}}
             <li>
                 <a
-                    href="{{this.theme.cta_card_2_url}}"
+                    href="{{theme.cta_card_2_url}}"
                     class="cta-card"
-                    aria-label="{{this.theme.cta_card_2_title}}"
+                    aria-label="{{theme.cta_card_2_title}}"
                 >
                     <div class="cta-icon">
-                        {{#if (eq this.theme.cta_card_2_icon_type "font_awesome")}}
-                            <i class="fas fa-{{this.theme.cta_card_2_icon_font_awesome}}"></i>
+                        {{#if (eq theme.cta_card_2_icon_type "font_awesome")}}
+                            <i class="fas fa-{{theme.cta_card_2_icon_font_awesome}}"></i>
                         {{else}}
-                            {{this.theme.cta_card_2_icon_emoji}}
+                            {{theme.cta_card_2_icon_emoji}}
                         {{/if}}
                     </div>
                     <div class="cta-content">
-                        <span class="cta-title">{{this.theme.cta_card_2_title}}</span>
-                        <span class="cta-desc">{{this.theme.cta_card_2_description}}</span>
+                        <span class="cta-title">{{theme.cta_card_2_title}}</span>
+                        <span class="cta-desc">{{theme.cta_card_2_description}}</span>
                         <span class="cta-cta">
                             <i class="fas fa-angle-double-right"></i>
-                            {{this.theme.cta_card_2_cta_text}}
+                            {{theme.cta_card_2_cta_text}}
                         </span>
                     </div>
                 </a>
             </li>
             {{/if}}
 
-            {{#if this.theme.cta_card_3_enabled}}
+            {{#if theme.cta_card_3_enabled}}
             <li>
                 <a
-                    href="{{this.theme.cta_card_3_url}}"
+                    href="{{theme.cta_card_3_url}}"
                     class="cta-card"
-                    aria-label="{{this.theme.cta_card_3_title}}"
+                    aria-label="{{theme.cta_card_3_title}}"
                 >
                     <div class="cta-icon">
-                        {{#if (eq this.theme.cta_card_3_icon_type "font_awesome")}}
-                            <i class="fas fa-{{this.theme.cta_card_3_icon_font_awesome}}"></i>
+                        {{#if (eq theme.cta_card_3_icon_type "font_awesome")}}
+                            <i class="fas fa-{{theme.cta_card_3_icon_font_awesome}}"></i>
                         {{else}}
-                            {{this.theme.cta_card_3_icon_emoji}}
+                            {{theme.cta_card_3_icon_emoji}}
                         {{/if}}
                     </div>
                     <div class="cta-content">
-                        <span class="cta-title">{{this.theme.cta_card_3_title}}</span>
-                        <span class="cta-desc">{{this.theme.cta_card_3_description}}</span>
+                        <span class="cta-title">{{theme.cta_card_3_title}}</span>
+                        <span class="cta-desc">{{theme.cta_card_3_description}}</span>
                         <span class="cta-cta">
                             <i class="fas fa-angle-double-right"></i>
-                            {{this.theme.cta_card_3_cta_text}}
+                            {{theme.cta_card_3_cta_text}}
                         </span>
                     </div>
                 </a>
             </li>
             {{/if}}
 
-            {{#if this.theme.cta_card_4_enabled}}
+            {{#if theme.cta_card_4_enabled}}
             <li>
                 <a
-                    href="{{this.theme.cta_card_4_url}}"
+                    href="{{theme.cta_card_4_url}}"
                     class="cta-card"
-                    aria-label="{{this.theme.cta_card_4_title}}"
+                    aria-label="{{theme.cta_card_4_title}}"
                 >
                     <div class="cta-icon">
-                        {{#if (eq this.theme.cta_card_4_icon_type "font_awesome")}}
-                            <i class="fas fa-{{this.theme.cta_card_4_icon_font_awesome}}"></i>
+                        {{#if (eq theme.cta_card_4_icon_type "font_awesome")}}
+                            <i class="fas fa-{{theme.cta_card_4_icon_font_awesome}}"></i>
                         {{else}}
-                            {{this.theme.cta_card_4_icon_emoji}}
+                            {{theme.cta_card_4_icon_emoji}}
                         {{/if}}
                     </div>
                     <div class="cta-content">
-                        <span class="cta-title">{{this.theme.cta_card_4_title}}</span>
-                        <span class="cta-desc">{{this.theme.cta_card_4_description}}</span>
+                        <span class="cta-title">{{theme.cta_card_4_title}}</span>
+                        <span class="cta-desc">{{theme.cta_card_4_description}}</span>
                         <span class="cta-cta">
                             <i class="fas fa-angle-double-right"></i>
-                            {{this.theme.cta_card_4_cta_text}}
+                            {{theme.cta_card_4_cta_text}}
                         </span>
                     </div>
                 </a>
diff --git a/javascripts/discourse/connectors/below-site-header/welcome-banner-header.hbs b/javascripts/discourse/connectors/below-site-header/welcome-banner-header.hbs
index aaaa3ae..2904728 100644
--- a/javascripts/discourse/connectors/below-site-header/welcome-banner-header.hbs
+++ b/javascripts/discourse/connectors/below-site-header/welcome-banner-header.hbs
@@ -1,16 +1,16 @@
-{{#if this.theme.enable_welcome_banner}}
-{{#if (eq this.theme.banner_position "below_header")}}
+{{#if theme.enable_welcome_banner}}
+{{#if (eq theme.banner_position "below_header")}}
 <section class="below-site-header welcome-card">
     <div class="hero-section">
         <div class="hero-deco"></div>
         <div class="hero-content">
             <h2 class="hero-title">
-                {{{this.theme.hero_title_html}}}
+                {{{theme.hero_title_html}}}
             </h2>
             <div class="hero-description">
-                {{{this.theme.hero_content_html}}}
+                {{{theme.hero_content_html}}}
             </div>
-            {{#if this.theme.enable_hero_search}}
+            {{#if theme.enable_hero_search}}
             <div class="search-container" aria-label="Search"></div>
             {{/if}}
         </div>
@@ -18,104 +18,104 @@
 
     <div class="cta-section">
         <ul class="cta-list">
-            {{#if this.theme.cta_card_1_enabled}}
+            {{#if theme.cta_card_1_enabled}}
             <li>
                 <a
-                    href="{{this.theme.cta_card_1_url}}"
+                    href="{{theme.cta_card_1_url}}"
                     class="cta-card"
-                    aria-label="{{this.theme.cta_card_1_title}}"
+                    aria-label="{{theme.cta_card_1_title}}"
                 >
                     <div class="cta-icon">
-                        {{#if (eq this.theme.cta_card_1_icon_type "font_awesome")}}
-                            <i class="fas fa-{{this.theme.cta_card_1_icon_font_awesome}}"></i>
+                        {{#if (eq theme.cta_card_1_icon_type "font_awesome")}}
+                            <i class="fas fa-{{theme.cta_card_1_icon_font_awesome}}"></i>
                         {{else}}
-                            {{this.theme.cta_card_1_icon_emoji}}
+                            {{theme.cta_card_1_icon_emoji}}
                         {{/if}}
                     </div>
                     <div class="cta-content">
-                        <span class="cta-title">{{this.theme.cta_card_1_title}}</span>
-                        <span class="cta-desc">{{this.theme.cta_card_1_description}}</span>
+                        <span class="cta-title">{{theme.cta_card_1_title}}</span>
+                        <span class="cta-desc">{{theme.cta_card_1_description}}</span>
                         <span class="cta-cta">
                             <i class="fas fa-angle-double-right"></i>
-                            {{this.theme.cta_card_1_cta_text}}
+                            {{theme.cta_card_1_cta_text}}
                         </span>
                     </div>
                 </a>
             </li>
             {{/if}}
 
-            {{#if this.theme.cta_card_2_enabled}}
+            {{#if theme.cta_card_2_enabled}}
             <li>
                 <a
-                    href="{{this.theme.cta_card_2_url}}"
+                    href="{{theme.cta_card_2_url}}"
                     class="cta-card"
-                    aria-label="{{this.theme.cta_card_2_title}}"
+                    aria-label="{{theme.cta_card_2_title}}"
                 >
                     <div class="cta-icon">
-                        {{#if (eq this.theme.cta_card_2_icon_type "font_awesome")}}
-                            <i class="fas fa-{{this.theme.cta_card_2_icon_font_awesome}}"></i>
+                        {{#if (eq theme.cta_card_2_icon_type "font_awesome")}}
+                            <i class="fas fa-{{theme.cta_card_2_icon_font_awesome}}"></i>
                         {{else}}
-                            {{this.theme.cta_card_2_icon_emoji}}
+                            {{theme.cta_card_2_icon_emoji}}
                         {{/if}}
                     </div>
                     <div class="cta-content">
-                        <span class="cta-title">{{this.theme.cta_card_2_title}}</span>
-                        <span class="cta-desc">{{this.theme.cta_card_2_description}}</span>
+                        <span class="cta-title">{{theme.cta_card_2_title}}</span>
+                        <span class="cta-desc">{{theme.cta_card_2_description}}</span>
                         <span class="cta-cta">
                             <i class="fas fa-angle-double-right"></i>
-                            {{this.theme.cta_card_2_cta_text}}
+                            {{theme.cta_card_2_cta_text}}
                         </span>
                     </div>
                 </a>
             </li>
             {{/if}}
 
-            {{#if this.theme.cta_card_3_enabled}}
+            {{#if theme.cta_card_3_enabled}}
             <li>
                 <a
-                    href="{{this.theme.cta_card_3_url}}"
+                    href="{{theme.cta_card_3_url}}"
                     class="cta-card"
-                    aria-label="{{this.theme.cta_card_3_title}}"
+                    aria-label="{{theme.cta_card_3_title}}"
                 >
                     <div class="cta-icon">
-                        {{#if (eq this.theme.cta_card_3_icon_type "font_awesome")}}
-                            <i class="fas fa-{{this.theme.cta_card_3_icon_font_awesome}}"></i>
+                        {{#if (eq theme.cta_card_3_icon_type "font_awesome")}}
+                            <i class="fas fa-{{theme.cta_card_3_icon_font_awesome}}"></i>
                         {{else}}
-                            {{this.theme.cta_card_3_icon_emoji}}
+                            {{theme.cta_card_3_icon_emoji}}
                         {{/if}}
                     </div>
                     <div class="cta-content">
-                        <span class="cta-title">{{this.theme.cta_card_3_title}}</span>
-                        <span class="cta-desc">{{this.theme.cta_card_3_description}}</span>
+                        <span class="cta-title">{{theme.cta_card_3_title}}</span>
+                        <span class="cta-desc">{{theme.cta_card_3_description}}</span>
                         <span class="cta-cta">
                             <i class="fas fa-angle-double-right"></i>
-                            {{this.theme.cta_card_3_cta_text}}
+                            {{theme.cta_card_3_cta_text}}
                         </span>
                     </div>
                 </a>
             </li>
             {{/if}}
 
-            {{#if this.theme.cta_card_4_enabled}}
+            {{#if theme.cta_card_4_enabled}}
             <li>
                 <a
-                    href="{{this.theme.cta_card_4_url}}"
+                    href="{{theme.cta_card_4_url}}"
                     class="cta-card"
-                    aria-label="{{this.theme.cta_card_4_title}}"
+                    aria-label="{{theme.cta_card_4_title}}"
                 >
                     <div class="cta-icon">
-                        {{#if (eq this.theme.cta_card_4_icon_type "font_awesome")}}
-                            <i class="fas fa-{{this.theme.cta_card_4_icon_font_awesome}}"></i>
+                        {{#if (eq theme.cta_card_4_icon_type "font_awesome")}}
+                            <i class="fas fa-{{theme.cta_card_4_icon_font_awesome}}"></i>
                         {{else}}
-                            {{this.theme.cta_card_4_icon_emoji}}
+                            {{theme.cta_card_4_icon_emoji}}
                         {{/if}}
                     </div>
                     <div class="cta-content">
-                        <span class="cta-title">{{this.theme.cta_card_4_title}}</span>
-                        <span class="cta-desc">{{this.theme.cta_card_4_description}}</span>
+                        <span class="cta-title">{{theme.cta_card_4_title}}</span>
+                        <span class="cta-desc">{{theme.cta_card_4_description}}</span>
                         <span class="cta-cta">
                             <i class="fas fa-angle-double-right"></i>
-                            {{this.theme.cta_card_4_cta_text}}
+                            {{theme.cta_card_4_cta_text}}
                         </span>
                     </div>
                 </a>