gabeszm/weclome-banner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add customizable CTA arrow icons for all cards

Browse source 
- Add cta_card_X_cta_icon settings for each CTA card (1-4)
- Default to "angle-double-right" icon for all cards
- Allow admin to customize arrow icon per card (e.g., 'arrow-right', 'chevron-right', etc.)
- Update component template to use settings instead of hardcoded icon
- Each CTA card now has independent control over its arrow/action icon
This commit is contained in:
gabeszm 2025-10-16 18:07:17 +02:00
parent f355950f9f
commit e90fea48a0
2 changed files with 32 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
javascripts/discourse/components/welcome-banner.gjs
View file

@ -86,7 +86,7 @@ export default class WelcomeBanner extends Component {
<span class="cta-title">{{settings.cta_card_1_title}}</span>
<span class="cta-desc">{{settings.cta_card_1_description}}</span>
<span class="cta-cta">
{{icon "angle-double-right"}}
{{icon settings.cta_card_1_cta_icon}}
{{settings.cta_card_1_cta_text}}
</span>
</div>
@ -108,7 +108,7 @@ export default class WelcomeBanner extends Component {
<span class="cta-title">{{settings.cta_card_2_title}}</span>
<span class="cta-desc">{{settings.cta_card_2_description}}</span>
<span class="cta-cta">
{{icon "angle-double-right"}}
{{icon settings.cta_card_2_cta_icon}}
{{settings.cta_card_2_cta_text}}
</span>
</div>
@ -130,8 +130,7 @@ export default class WelcomeBanner extends Component {
<span class="cta-title">{{settings.cta_card_3_title}}</span>
<span class="cta-desc">{{settings.cta_card_3_description}}</span>
<span class="cta-cta">
<p>»</p>
{{icon "angle-double-right"}}
{{icon settings.cta_card_3_cta_icon}}
{{settings.cta_card_3_cta_text}}
</span>
</div>
@ -153,7 +152,7 @@ export default class WelcomeBanner extends Component {
<span class="cta-title">{{settings.cta_card_4_title}}</span>
<span class="cta-desc">{{settings.cta_card_4_description}}</span>
<span class="cta-cta">
{{icon "angle-double-right"}}
{{icon settings.cta_card_4_cta_icon}}
{{settings.cta_card_4_cta_text}}
</span>
</div>

28
settings.yml
View file

@ -161,6 +161,13 @@ cta_card_1_cta_text:
en: CTA card 1 call-to-action text
hu: 1. CTA kártya cselekvésre ösztönző szöveg
cta_card_1_cta_icon:
default: "angle-double-right"
type: string
description:
en: "CTA card 1 arrow icon (Font Awesome). Examples: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
hu: "1. CTA kártya nyíl ikon (Font Awesome). Példák: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
cta_card_1_url:
default: "https://www.nyiltvilag.hu/c/tudasbazis/9"
type: string
@ -224,6 +231,13 @@ cta_card_2_cta_text:
en: CTA card 2 call-to-action text
hu: 2. CTA kártya cselekvésre ösztönző szöveg
cta_card_2_cta_icon:
default: "angle-double-right"
type: string
description:
en: "CTA card 2 arrow icon (Font Awesome). Examples: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
hu: "2. CTA kártya nyíl ikon (Font Awesome). Példák: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
cta_card_2_url:
default: "https://www.nyiltvilag.hu/c/altalanos/4"
type: string
@ -287,6 +301,13 @@ cta_card_3_cta_text:
en: CTA card 3 call-to-action text
hu: 3. CTA kártya cselekvésre ösztönző szöveg
cta_card_3_cta_icon:
default: "angle-double-right"
type: string
description:
en: "CTA card 3 arrow icon (Font Awesome). Examples: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
hu: "3. CTA kártya nyíl ikon (Font Awesome). Példák: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
cta_card_3_url:
default: "https://www.nyiltvilag.hu/c/fejlesztes/7"
type: string
@ -350,6 +371,13 @@ cta_card_4_cta_text:
en: CTA card 4 call-to-action text
hu: 4. CTA kártya cselekvésre ösztönző szöveg
cta_card_4_cta_icon:
default: "angle-double-right"
type: string
description:
en: "CTA card 4 arrow icon (Font Awesome). Examples: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
hu: "4. CTA kártya nyíl ikon (Font Awesome). Példák: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
cta_card_4_url:
default: "https://www.nyiltvilag.hu/c/biztonsag/8"
type: string