\n"
- html << "
#{e(stats_title)}
\n" if show_title + html << "#{button_with_icon(stats_title)}
\n" if show_title html << "\n"
html << stat_card(Icons::STAT_MEMBERS_SVG, stats[:members], @s.stat_members_label, icon_shape, card_style, round_nums, show_labels)
html << stat_card(Icons::STAT_TOPICS_SVG, stats[:topics], @s.stat_topics_label, icon_shape, card_style, round_nums, show_labels)
@@ -379,7 +379,7 @@ module CommunityLanding
# Right side — text content
html << "
\n"
- html << "
#{e(about_heading)}
\n" if about_heading_on + html << "#{button_with_icon(about_heading)}
\n" if about_heading_on html << Icons::QUOTE_SVG html << "#{about_body}
\n" if about_body.present?
html << "\n"
@@ -419,9 +419,14 @@ module CommunityLanding
title_text = @s.participation_title.presence || "Participation"
border = @s.participation_border_style rescue "none"
min_h = @s.participation_min_height rescue 0
+
+ topics_label = @s.participation_topics_label.presence || "Topics"
+ posts_label = @s.participation_posts_label.presence || "Posts"
+ likes_label = @s.participation_likes_label.presence || "Likes"
+
html = +""
html << "
\n"
- html << "
#{e(title_text)}
\n" if show_title + html << "#{button_with_icon(title_text)}
\n" if show_title stagger_class = @s.staggered_reveal_enabled ? " cl-stagger" : "" html << "\n"
@@ -442,9 +447,9 @@ module CommunityLanding
html << "
\n"
html << "#{e(bio_text)}
\n" html << "\n"
- html << "
\n"
html << "#{topic_count}Topics
\n"
- html << "#{post_count}Posts
\n"
- html << "#{likes_received}Likes
\n"
+ html << participation_stat(topic_count, topics_label, Icons::PART_TOPICS_SVG)
+ html << participation_stat(post_count, posts_label, Icons::PART_POSTS_SVG)
+ html << participation_stat(likes_received, likes_label, Icons::PART_LIKES_SVG)
html << "\n"
html << "![\"#{e(user.username)}\"](\"#{avatar_url}\")
\n"
@@ -473,7 +478,7 @@ module CommunityLanding
html = +""
html << "
\n"
- html << "
#{e(@s.topics_title)}
\n" if show_title + html << "#{button_with_icon(@s.topics_title)}
\n" if show_title stagger_class = @s.staggered_reveal_enabled ? " cl-stagger" : "" html << "\n"
@@ -505,14 +510,16 @@ module CommunityLanding
return "" unless has_groups || faq_on
- border = @s.groups_border_style rescue "none"
- min_h = @s.groups_min_height rescue 0
show_title = @s.groups_title_enabled rescue true
show_desc = @s.groups_show_description rescue true
desc_max = (@s.groups_description_max_length rescue 100).to_i
html = +""
- html << "
\n"
+ groups_bg_img = (@s.splits_background_image_url.presence rescue nil)
+ section_style_parts = []
+ section_style_parts << "background: url('#{groups_bg_img}') center/cover no-repeat;" if groups_bg_img
+ section_attr = section_style_parts.any? ? " style=\"#{section_style_parts.join(' ')}\"" : ""
+ html << "
\n"
if has_groups && faq_on
# ── Split layout: both titles at same level ──
@@ -520,7 +527,7 @@ module CommunityLanding
# Left column: Groups
html << "
\n"
elsif has_groups
# ── Groups only (full width) ──
- html << "\n"
- html << "
\n"
@@ -532,7 +539,7 @@ module CommunityLanding
html << "#{e(@s.groups_title)}
\n" if show_title + html << "#{button_with_icon(@s.groups_title)}
\n" if show_title html << render_groups_grid(groups, show_desc, desc_max) html << "#{e(@s.groups_title)}
\n" if show_title + html << "#{button_with_icon(@s.groups_title)}
\n" if show_title html << "\n"
html << render_groups_grid(groups, show_desc, desc_max)
html << "
\n"
@@ -592,7 +599,7 @@ module CommunityLanding
faq_raw = @s.faq_items.presence rescue nil
html = +""
- html << "#{e(faq_title)}
\n" if faq_title_on + html << "#{button_with_icon(faq_title)}
\n" if faq_title_on html << "\n"
if faq_raw
@@ -632,7 +639,7 @@ module CommunityLanding
html = +""
html << "
\n"
html << "
\n
\n"
- html << "
#{e(@s.app_cta_headline)}
\n" + html << "#{button_with_icon(@s.app_cta_headline)}
\n" html << "#{e(@s.app_cta_subtext)}
\n" if @s.app_cta_subtext.present? html << "\n"
@@ -818,14 +825,50 @@ module CommunityLanding
size > 0 ? " style=\"font-size: #{size}px\"" : ""
end
- def button_with_icon(label, icon_setting, position_setting)
- icon_name = (@s.public_send(icon_setting).presence rescue nil)
+ def participation_stat(count, raw_label, default_svg)
fa_enabled = (@s.fontawesome_enabled rescue false)
- return e(label) unless icon_name && fa_enabled
+ # Parse "icon | Label" format — if present, use FA icon instead of default SVG
+ if fa_enabled && raw_label.include?("|")
+ parts = raw_label.split("|", 2).map(&:strip)
+ left, right = parts
+ if left.match?(/\A[\w-]+\z/) && left.length < 30
+ icon_html = ""
+ label = right
+ elsif right.match?(/\A[\w-]+\z/) && right.length < 30
+ icon_html = ""
+ label = left
+ else
+ icon_html = default_svg
+ label = raw_label
+ end
+ else
+ icon_html = default_svg
+ label = raw_label
+ end
+ "
" \
+ "#{icon_html}#{count}" \
+ "#{e(label)}" \
+ "
\n"
+ end
- position = (@s.public_send(position_setting) rescue "before")
- icon_html = ""
- position == "after" ? "#{e(label)} #{icon_html}" : "#{icon_html} #{e(label)}"
+ def button_with_icon(raw_label)
+ fa_enabled = (@s.fontawesome_enabled rescue false)
+ return e(raw_label) unless fa_enabled && raw_label.include?("|")
+
+ parts = raw_label.split("|", 2).map(&:strip)
+ # Try to detect which side is the icon name (no spaces, short) vs label text
+ left, right = parts
+ if left.match?(/\A[\w-]+\z/) && left.length < 30
+ # "iconname | Label" — icon before
+ icon_html = ""
+ "#{icon_html} #{e(right)}"
+ elsif right.match?(/\A[\w-]+\z/) && right.length < 30
+ # "Label | iconname" — icon after
+ icon_html = ""
+ "#{e(left)} #{icon_html}"
+ else
+ e(raw_label)
+ end
end
end
end
diff --git a/lib/community_landing/style_builder.rb b/lib/community_landing/style_builder.rb
index c0aac5c..cab4695 100644
--- a/lib/community_landing/style_builder.rb
+++ b/lib/community_landing/style_builder.rb
@@ -61,6 +61,10 @@ module CommunityLanding
part_bio_color = safe_hex(:participation_bio_color)
part_name_color = safe_hex(:participation_name_color)
part_meta_color = safe_hex(:participation_meta_color)
+ cta_headline_dark = safe_hex(:app_cta_headline_color_dark)
+ cta_headline_light = safe_hex(:app_cta_headline_color_light)
+ cta_subtext_dark = safe_hex(:app_cta_subtext_color_dark)
+ cta_subtext_light = safe_hex(:app_cta_subtext_color_light)
orb_color = safe_hex(:orb_color)
orb_opacity = [[@s.orb_opacity.to_i, 0].max, 100].min rescue 50
@@ -139,7 +143,9 @@ module CommunityLanding
--cl-participation-name-color: #{part_name_color || 'var(--cl-text-strong)'};
--cl-participation-meta-color: #{part_meta_color || 'var(--cl-participation-icon-color)'};
--cl-faq-card-bg: #{faq_card_dark || 'var(--cl-card)'};
- --cl-app-gradient: linear-gradient(135deg, #{app_g1_dark}, #{app_g2_dark}, #{app_g3_dark});#{dark_extras}
+ --cl-app-gradient: linear-gradient(135deg, #{app_g1_dark}, #{app_g2_dark}, #{app_g3_dark});
+ --cl-cta-headline-color: #{cta_headline_dark || '#ffffff'};
+ --cl-cta-subtext-color: #{cta_subtext_dark || 'rgba(255, 255, 255, 0.75)'};#{dark_extras}
}
[data-theme=\"light\"] {
--cl-accent: #{accent};
@@ -169,7 +175,9 @@ module CommunityLanding
--cl-participation-name-color: #{part_name_color || 'var(--cl-text-strong)'};
--cl-participation-meta-color: #{part_meta_color || 'var(--cl-participation-icon-color)'};
--cl-faq-card-bg: #{faq_card_light || faq_card_dark || 'var(--cl-card)'};
- --cl-app-gradient: linear-gradient(135deg, #{app_g1_light || app_g1_dark}, #{app_g2_light || app_g2_dark}, #{app_g3_light || app_g3_dark});#{light_extras}
+ --cl-app-gradient: linear-gradient(135deg, #{app_g1_light || app_g1_dark}, #{app_g2_light || app_g2_dark}, #{app_g3_light || app_g3_dark});
+ --cl-cta-headline-color: #{cta_headline_light || '#1a1a2e'};
+ --cl-cta-subtext-color: #{cta_subtext_light || 'rgba(26, 26, 46, 0.7)'};#{light_extras}
}
@media (prefers-color-scheme: light) {
:root:not([data-theme=\"dark\"]) {
@@ -197,7 +205,9 @@ module CommunityLanding
--cl-participation-name-color: #{part_name_color || 'var(--cl-text-strong)'};
--cl-participation-meta-color: #{part_meta_color || 'var(--cl-participation-icon-color)'};
--cl-faq-card-bg: #{faq_card_light || faq_card_dark || 'var(--cl-card)'};
- --cl-app-gradient: linear-gradient(135deg, #{app_g1_light || app_g1_dark}, #{app_g2_light || app_g2_dark}, #{app_g3_light || app_g3_dark});#{light_extras}
+ --cl-app-gradient: linear-gradient(135deg, #{app_g1_light || app_g1_dark}, #{app_g2_light || app_g2_dark}, #{app_g3_light || app_g3_dark});
+ --cl-cta-headline-color: #{cta_headline_light || '#1a1a2e'};
+ --cl-cta-subtext-color: #{cta_subtext_light || 'rgba(26, 26, 46, 0.7)'};#{light_extras}
}
}
\n"
@@ -212,7 +222,6 @@ module CommunityLanding
["#cl-about", safe_hex(:about_bg_dark), safe_hex(:about_bg_light)],
["#cl-participation", safe_hex(:participation_bg_dark), safe_hex(:participation_bg_light)],
["#cl-topics", safe_hex(:topics_bg_dark), safe_hex(:topics_bg_light)],
- ["#cl-groups", safe_hex(:groups_bg_dark), safe_hex(:groups_bg_light)],
["#cl-app-cta", safe_hex(:app_cta_bg_dark), safe_hex(:app_cta_bg_light)],
["#cl-footer", safe_hex(:footer_bg_dark), safe_hex(:footer_bg_light)],
]
diff --git a/plugin.rb b/plugin.rb
index 2e59e39..688b3cd 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -87,6 +87,7 @@ after_initialize do
hero_background_image_url hero_image_urls about_image_url
about_background_image_url ios_app_badge_image_url
android_app_badge_image_url app_cta_image_url
+ splits_background_image_url
].freeze
# POST /community-landing/admin/pin-upload