mirror of
https://github.com/dpnmw/community-landing.git
synced 2026-03-18 09:27:16 +00:00
Major overhaul and options inclusion
This commit is contained in:
@@ -11,6 +11,7 @@ module CommunityLanding
|
||||
if s.contributors_enabled
|
||||
User
|
||||
.joins(:posts)
|
||||
.includes(:user_profile)
|
||||
.where(posts: { created_at: s.contributors_days.days.ago.. })
|
||||
.where.not(username: %w[system discobot])
|
||||
.where(active: true, staged: false)
|
||||
|
||||
@@ -17,6 +17,14 @@ module CommunityLanding
|
||||
COMMENT_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>'
|
||||
HEART_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>'
|
||||
|
||||
# Social media icons (18×18, fill currentColor)
|
||||
SOCIAL_TWITTER_SVG = '<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>'
|
||||
SOCIAL_FACEBOOK_SVG = '<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>'
|
||||
SOCIAL_INSTAGRAM_SVG = '<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>'
|
||||
SOCIAL_YOUTUBE_SVG = '<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>'
|
||||
SOCIAL_TIKTOK_SVG = '<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>'
|
||||
SOCIAL_GITHUB_SVG = '<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>'
|
||||
|
||||
IOS_BADGE_SVG = '<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>'
|
||||
ANDROID_BADGE_SVG = '<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M17.6 11.48l1.56-2.7a.43.43 0 00-.16-.59.43.43 0 00-.59.16l-1.58 2.73A9.9 9.9 0 0012 10.07a9.9 9.9 0 00-4.83 1.01L5.59 8.35a.43.43 0 00-.59-.16.43.43 0 00-.16.59l1.56 2.7A10.16 10.16 0 002 18h20a10.16 10.16 0 00-4.4-6.52zM7 15.5a1 1 0 110-2 1 1 0 010 2zm10 0a1 1 0 110-2 1 1 0 010 2z"/></svg>'
|
||||
end
|
||||
|
||||
@@ -4,6 +4,16 @@ module CommunityLanding
|
||||
class PageBuilder
|
||||
include Helpers
|
||||
|
||||
SECTION_MAP = {
|
||||
"hero" => :render_hero,
|
||||
"stats" => :render_stats,
|
||||
"about" => :render_about,
|
||||
"participation" => :render_participation,
|
||||
"topics" => :render_topics,
|
||||
"groups" => :render_groups,
|
||||
"app_cta" => :render_app_cta,
|
||||
}.freeze
|
||||
|
||||
def initialize(data:, css:, js:)
|
||||
@data = data
|
||||
@css = css
|
||||
@@ -20,12 +30,14 @@ module CommunityLanding
|
||||
html << "<div class=\"cl-orb-container\"><div class=\"cl-orb cl-orb--1\"></div><div class=\"cl-orb cl-orb--2\"></div></div>\n"
|
||||
end
|
||||
html << render_navbar
|
||||
html << render_hero
|
||||
html << render_stats
|
||||
html << render_about
|
||||
html << render_topics
|
||||
html << render_groups
|
||||
html << render_app_cta
|
||||
|
||||
# Reorderable sections
|
||||
order = (@s.section_order.presence rescue nil) || "hero|stats|about|participation|topics|groups|app_cta"
|
||||
order.split("|").map(&:strip).each do |section_id|
|
||||
method_name = SECTION_MAP[section_id]
|
||||
html << send(method_name) if method_name
|
||||
end
|
||||
|
||||
html << render_footer_desc
|
||||
html << render_footer
|
||||
html << render_video_modal
|
||||
@@ -43,6 +55,12 @@ module CommunityLanding
|
||||
anim_class = @s.scroll_animation rescue "fade_up"
|
||||
anim_class = "none" if anim_class.blank?
|
||||
og_logo = logo_dark_url || logo_light_url
|
||||
base_url = Discourse.base_url
|
||||
|
||||
# SEO overrides
|
||||
meta_desc = (@s.meta_description.presence rescue nil) || @s.hero_subtitle
|
||||
og_image = (@s.og_image_url.presence rescue nil) || og_logo
|
||||
favicon = (@s.favicon_url.presence rescue nil)
|
||||
|
||||
html = +""
|
||||
html << "<!DOCTYPE html>\n<html lang=\"en\""
|
||||
@@ -55,18 +73,52 @@ module CommunityLanding
|
||||
html << "<link href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n"
|
||||
html << "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\">\n"
|
||||
html << "<meta name=\"color-scheme\" content=\"dark light\">\n"
|
||||
|
||||
# Favicon
|
||||
if favicon
|
||||
ftype = case favicon.to_s.split(".").last.downcase
|
||||
when "svg" then "image/svg+xml"
|
||||
when "png" then "image/png"
|
||||
else "image/x-icon"
|
||||
end
|
||||
html << "<link rel=\"icon\" type=\"#{ftype}\" href=\"#{e(favicon)}\">\n"
|
||||
end
|
||||
|
||||
# Title & meta
|
||||
html << "<title>#{e(@s.hero_title)} | #{e(site_name)}</title>\n"
|
||||
html << "<meta name=\"description\" content=\"#{e(@s.hero_subtitle)}\">\n"
|
||||
html << "<meta name=\"description\" content=\"#{e(meta_desc)}\">\n"
|
||||
|
||||
# Open Graph
|
||||
html << "<meta property=\"og:type\" content=\"website\">\n"
|
||||
html << "<meta property=\"og:title\" content=\"#{e(@s.hero_title)}\">\n"
|
||||
html << "<meta property=\"og:description\" content=\"#{e(@s.hero_subtitle)}\">\n"
|
||||
html << "<meta property=\"og:image\" content=\"#{og_logo}\">\n" if og_logo
|
||||
html << "<meta property=\"og:description\" content=\"#{e(meta_desc)}\">\n"
|
||||
html << "<meta property=\"og:url\" content=\"#{base_url}\">\n"
|
||||
html << "<meta property=\"og:site_name\" content=\"#{e(site_name)}\">\n"
|
||||
html << "<meta property=\"og:image\" content=\"#{og_image}\">\n" if og_image
|
||||
|
||||
# Twitter card
|
||||
html << "<meta name=\"twitter:card\" content=\"summary_large_image\">\n"
|
||||
html << "<link rel=\"canonical\" href=\"#{Discourse.base_url}\">\n"
|
||||
html << "<meta name=\"twitter:title\" content=\"#{e(@s.hero_title)}\">\n"
|
||||
html << "<meta name=\"twitter:description\" content=\"#{e(meta_desc)}\">\n"
|
||||
html << "<meta name=\"twitter:image\" content=\"#{og_image}\">\n" if og_image
|
||||
|
||||
html << "<link rel=\"canonical\" href=\"#{base_url}\">\n"
|
||||
|
||||
# JSON-LD structured data
|
||||
if (@s.json_ld_enabled rescue true)
|
||||
html << "<script type=\"application/ld+json\">\n#{render_json_ld(site_name, base_url, og_logo)}\n</script>\n"
|
||||
end
|
||||
|
||||
html << "<style>\n#{@css}\n</style>\n"
|
||||
html << @styles.color_overrides
|
||||
html << @styles.section_backgrounds
|
||||
|
||||
# Custom CSS (injected last so it can override everything)
|
||||
custom_css = @s.custom_css.presence rescue nil
|
||||
if custom_css
|
||||
html << "<style id=\"cl-custom-css\">\n#{custom_css}\n</style>\n"
|
||||
end
|
||||
|
||||
html << "</head>\n"
|
||||
html
|
||||
end
|
||||
@@ -105,6 +157,7 @@ module CommunityLanding
|
||||
|
||||
html << "<div class=\"cl-navbar__right\">"
|
||||
html << theme_toggle
|
||||
html << render_social_icons
|
||||
if signin_enabled
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--ghost\">#{e(signin_label)}</a>\n"
|
||||
end
|
||||
@@ -116,6 +169,7 @@ module CommunityLanding
|
||||
html << "<button class=\"cl-navbar__hamburger\" id=\"cl-hamburger\" aria-label=\"Toggle menu\"><span></span><span></span><span></span></button>\n"
|
||||
html << "<div class=\"cl-navbar__mobile-menu\" id=\"cl-nav-links\">\n"
|
||||
html << theme_toggle
|
||||
html << render_social_icons
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--ghost\">#{e(signin_label)}</a>\n"
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--primary\">#{e(join_label)}</a>\n"
|
||||
html << "</div>"
|
||||
@@ -319,6 +373,57 @@ module CommunityLanding
|
||||
html
|
||||
end
|
||||
|
||||
# ── 5b. PARTICIPATION ──
|
||||
|
||||
def render_participation
|
||||
return "" unless (@s.participation_enabled rescue true)
|
||||
|
||||
contributors = @data[:contributors]
|
||||
return "" unless contributors&.length.to_i > 3
|
||||
|
||||
# Positions 4–10: users with a public bio
|
||||
bio_max = (@s.participation_bio_max_length rescue 150).to_i
|
||||
candidates = contributors[3..9] || []
|
||||
users_with_bio = candidates.select { |u| u.user_profile&.bio_excerpt.present? rescue false }
|
||||
return "" if users_with_bio.empty?
|
||||
|
||||
show_title = @s.participation_title_enabled rescue true
|
||||
title_text = @s.participation_title.presence || "Participation"
|
||||
border = @s.participation_border_style rescue "none"
|
||||
min_h = @s.participation_min_height rescue 0
|
||||
count_label = @s.contributors_count_label.presence || ""
|
||||
show_count = @s.contributors_count_label_enabled rescue true
|
||||
|
||||
html = +""
|
||||
html << "<section class=\"cl-participation cl-anim\" id=\"cl-participation\"#{section_style(border, min_h)}><div class=\"cl-container\">\n"
|
||||
html << "<h2 class=\"cl-section-title\">#{e(title_text)}</h2>\n" if show_title
|
||||
stagger_class = @s.staggered_reveal_enabled ? " cl-stagger" : ""
|
||||
html << "<div class=\"cl-participation__grid#{stagger_class}\">\n"
|
||||
|
||||
users_with_bio.each do |user|
|
||||
avatar_url = user.avatar_template.to_s.gsub("{size}", "120")
|
||||
activity_count = user.attributes["post_count"].to_i rescue 0
|
||||
bio_raw = user.user_profile.bio_excerpt.to_s
|
||||
bio_text = bio_raw.length > bio_max ? "#{bio_raw[0...bio_max]}..." : bio_raw
|
||||
count_prefix = show_count && count_label.present? ? "#{e(count_label)} " : ""
|
||||
|
||||
html << "<div class=\"cl-participation-card\">\n"
|
||||
html << "<div class=\"cl-participation-card__quote\">#{Icons::QUOTE_SVG}</div>\n"
|
||||
html << "<p class=\"cl-participation-card__bio\">#{e(bio_text)}</p>\n"
|
||||
html << "<div class=\"cl-participation-card__footer\">\n"
|
||||
html << "<img src=\"#{avatar_url}\" alt=\"#{e(user.username)}\" class=\"cl-participation-card__avatar\" loading=\"lazy\">\n"
|
||||
html << "<div class=\"cl-participation-card__meta\">\n"
|
||||
html << "<span class=\"cl-participation-card__name\">@#{e(user.username)}</span>\n"
|
||||
html << "<span class=\"cl-participation-card__count\">#{count_prefix}#{activity_count}</span>\n"
|
||||
html << "</div>\n"
|
||||
html << "</div>\n"
|
||||
html << "</div>\n"
|
||||
end
|
||||
|
||||
html << "</div>\n</div></section>\n"
|
||||
html
|
||||
end
|
||||
|
||||
# ── 5. TRENDING DISCUSSIONS ──
|
||||
|
||||
def render_topics
|
||||
@@ -355,49 +460,107 @@ module CommunityLanding
|
||||
html
|
||||
end
|
||||
|
||||
# ── 7. COMMUNITY SPACES ──
|
||||
# ── 7. COMMUNITY SPACES + FAQ ──
|
||||
|
||||
def render_groups
|
||||
groups = @data[:groups]
|
||||
return "" unless @s.groups_enabled && groups&.any?
|
||||
groups = @data[:groups]
|
||||
faq_on = (@s.faq_enabled rescue false)
|
||||
has_groups = @s.groups_enabled && groups&.any?
|
||||
|
||||
border = @s.groups_border_style rescue "none"
|
||||
min_h = @s.groups_min_height rescue 0
|
||||
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 << "<section class=\"cl-spaces cl-anim\" id=\"cl-groups\"#{section_style(border, min_h)}><div class=\"cl-container\">\n"
|
||||
html << "<h2 class=\"cl-section-title\">#{e(@s.groups_title)}</h2>\n" if show_title
|
||||
stagger_class = @s.staggered_reveal_enabled ? " cl-stagger" : ""
|
||||
html << "<div class=\"cl-spaces__grid#{stagger_class}\">\n"
|
||||
|
||||
groups.each do |group|
|
||||
display_name = group.full_name.presence || group.name.tr("_-", " ").gsub(/\b\w/, &:upcase)
|
||||
hue = group.name.bytes.sum % 360
|
||||
sat = 55 + (group.name.bytes.first.to_i % 15)
|
||||
light = 45 + (group.name.bytes.last.to_i % 12)
|
||||
icon_color = "hsl(#{hue}, #{sat}%, #{light}%)"
|
||||
layout_class = (has_groups && faq_on) ? "cl-spaces__split" : "cl-spaces__full"
|
||||
html << "<div class=\"#{layout_class}\">\n"
|
||||
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-space-card\" style=\"--space-color: #{icon_color}\">\n"
|
||||
html << "<div class=\"cl-space-card__icon\">"
|
||||
if group.flair_url.present?
|
||||
html << "<img src=\"#{group.flair_url}\" alt=\"\">"
|
||||
else
|
||||
html << "<span class=\"cl-space-card__letter\">#{group.name[0].upcase}</span>"
|
||||
# ── Left: Groups Grid ──
|
||||
if has_groups
|
||||
stagger_class = @s.staggered_reveal_enabled ? " cl-stagger" : ""
|
||||
html << "<div class=\"cl-spaces__left\">\n"
|
||||
html << "<div class=\"cl-spaces__grid#{stagger_class}\">\n"
|
||||
|
||||
groups.each do |group|
|
||||
display_name = group.full_name.presence || group.name.tr("_-", " ").gsub(/\b\w/, &:upcase)
|
||||
hue = group.name.bytes.sum % 360
|
||||
sat = 55 + (group.name.bytes.first.to_i % 15)
|
||||
light = 45 + (group.name.bytes.last.to_i % 12)
|
||||
icon_color = "hsl(#{hue}, #{sat}%, #{light}%)"
|
||||
|
||||
# Group description from bio_raw
|
||||
desc_text = nil
|
||||
if show_desc
|
||||
raw_bio = (group.bio_raw.to_s.strip rescue "")
|
||||
if raw_bio.present?
|
||||
plain = raw_bio.gsub(/<[^>]*>/, "").strip
|
||||
desc_text = plain.length > desc_max ? "#{plain[0...desc_max]}..." : plain
|
||||
end
|
||||
end
|
||||
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-space-card\" style=\"--space-color: #{icon_color}\">\n"
|
||||
html << "<div class=\"cl-space-card__icon\">"
|
||||
if group.flair_url.present?
|
||||
html << "<img src=\"#{group.flair_url}\" alt=\"\">"
|
||||
else
|
||||
html << "<span class=\"cl-space-card__letter\">#{group.name[0].upcase}</span>"
|
||||
end
|
||||
html << "</div>\n"
|
||||
html << "<div class=\"cl-space-card__body\">\n"
|
||||
html << "<span class=\"cl-space-card__name\">#{e(display_name)}</span>\n"
|
||||
html << "<span class=\"cl-space-card__sub\">#{group.user_count} members</span>\n"
|
||||
html << "<p class=\"cl-space-card__desc\">#{e(desc_text)}</p>\n" if desc_text
|
||||
html << "</div>\n"
|
||||
html << "</a>\n"
|
||||
end
|
||||
html << "</div>\n"
|
||||
html << "<div class=\"cl-space-card__body\">\n"
|
||||
html << "<span class=\"cl-space-card__name\">#{e(display_name)}</span>\n"
|
||||
html << "<span class=\"cl-space-card__sub\">#{group.user_count} members</span>\n"
|
||||
html << "</div>\n"
|
||||
html << "</a>\n"
|
||||
|
||||
html << "</div>\n</div>\n"
|
||||
end
|
||||
|
||||
# ── Right: FAQ Accordion ──
|
||||
html << render_faq if faq_on
|
||||
|
||||
html << "</div>\n</div></section>\n"
|
||||
html
|
||||
end
|
||||
|
||||
def render_faq
|
||||
faq_title_on = @s.faq_title_enabled rescue true
|
||||
faq_title = @s.faq_title.presence || "Frequently Asked Questions"
|
||||
faq_raw = @s.faq_items.presence rescue nil
|
||||
|
||||
html = +""
|
||||
html << "<div class=\"cl-faq\">\n"
|
||||
html << "<h3 class=\"cl-faq__title\">#{e(faq_title)}</h3>\n" if faq_title_on
|
||||
|
||||
if faq_raw
|
||||
begin
|
||||
items = JSON.parse(faq_raw)
|
||||
items.each do |item|
|
||||
q = item["q"].to_s
|
||||
a = item["a"].to_s
|
||||
next if q.blank?
|
||||
html << "<details class=\"cl-faq__item\" data-faq-exclusive>\n"
|
||||
html << "<summary class=\"cl-faq__question\">#{e(q)}</summary>\n"
|
||||
html << "<div class=\"cl-faq__answer\">#{a}</div>\n"
|
||||
html << "</details>\n"
|
||||
end
|
||||
rescue JSON::ParserError
|
||||
# Invalid JSON — silently skip
|
||||
end
|
||||
end
|
||||
|
||||
html << "</div>\n"
|
||||
html
|
||||
end
|
||||
|
||||
# ── 8. APP CTA ──
|
||||
|
||||
def render_app_cta
|
||||
@@ -534,10 +697,38 @@ module CommunityLanding
|
||||
html
|
||||
end
|
||||
|
||||
def render_social_icons
|
||||
icons = {
|
||||
social_twitter_url: Icons::SOCIAL_TWITTER_SVG,
|
||||
social_facebook_url: Icons::SOCIAL_FACEBOOK_SVG,
|
||||
social_instagram_url: Icons::SOCIAL_INSTAGRAM_SVG,
|
||||
social_youtube_url: Icons::SOCIAL_YOUTUBE_SVG,
|
||||
social_tiktok_url: Icons::SOCIAL_TIKTOK_SVG,
|
||||
social_github_url: Icons::SOCIAL_GITHUB_SVG,
|
||||
}
|
||||
|
||||
links = +""
|
||||
icons.each do |setting, svg|
|
||||
url = (@s.public_send(setting).presence rescue nil)
|
||||
next unless url
|
||||
links << "<a href=\"#{e(url)}\" class=\"cl-social-icon\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"#{setting.to_s.split('_')[1].capitalize}\">#{svg}</a>\n"
|
||||
end
|
||||
return "" if links.empty?
|
||||
|
||||
"<div class=\"cl-social-icons\">#{links}</div>\n"
|
||||
end
|
||||
|
||||
def theme_toggle
|
||||
"<button class=\"cl-theme-toggle\" aria-label=\"Toggle theme\">#{Icons::SUN_SVG}#{Icons::MOON_SVG}</button>\n"
|
||||
end
|
||||
|
||||
def render_json_ld(site_name, base_url, logo_url)
|
||||
org = { "@type" => "Organization", "name" => site_name, "url" => base_url }
|
||||
org["logo"] = logo_url if logo_url
|
||||
website = { "@type" => "WebSite", "name" => site_name, "url" => base_url }
|
||||
{ "@context" => "https://schema.org", "@graph" => [org, website] }.to_json
|
||||
end
|
||||
|
||||
def login_url
|
||||
"/login"
|
||||
end
|
||||
|
||||
@@ -16,9 +16,12 @@ module CommunityLanding
|
||||
light_bg = (hex(@s.light_bg_color) rescue nil) || "#faf6f0"
|
||||
stat_icon = (hex(@s.stat_icon_color) rescue nil) || accent
|
||||
about_bg_img = (@s.about_background_image_url.presence rescue nil)
|
||||
app_g1 = (hex(@s.app_cta_gradient_start) rescue nil) || accent
|
||||
app_g2 = (hex(@s.app_cta_gradient_mid) rescue nil) || accent_hover
|
||||
app_g3 = (hex(@s.app_cta_gradient_end) rescue nil) || accent_hover
|
||||
app_g1_dark = safe_hex(:app_cta_gradient_start_dark) || accent
|
||||
app_g1_light = safe_hex(:app_cta_gradient_start_light)
|
||||
app_g2_dark = safe_hex(:app_cta_gradient_mid_dark) || accent_hover
|
||||
app_g2_light = safe_hex(:app_cta_gradient_mid_light)
|
||||
app_g3_dark = safe_hex(:app_cta_gradient_end_dark) || accent_hover
|
||||
app_g3_light = safe_hex(:app_cta_gradient_end_light)
|
||||
stat_icon_bg = hex(@s.stat_icon_bg_color.presence) rescue nil
|
||||
stat_counter = hex(@s.stat_counter_color.presence) rescue nil
|
||||
video_btn_bg = hex(@s.hero_video_button_color.presence) rescue nil
|
||||
@@ -48,6 +51,9 @@ module CommunityLanding
|
||||
topic_card_light = safe_hex(:topics_card_bg_light)
|
||||
space_card_dark = safe_hex(:groups_card_bg_dark)
|
||||
space_card_light = safe_hex(:groups_card_bg_light)
|
||||
part_card_dark = safe_hex(:participation_card_bg_dark)
|
||||
part_card_light = safe_hex(:participation_card_bg_light)
|
||||
part_icon_color = safe_hex(:participation_icon_color)
|
||||
|
||||
accent_rgb = hex_to_rgb(accent)
|
||||
stat_icon_rgb = hex_to_rgb(stat_icon)
|
||||
@@ -74,7 +80,11 @@ module CommunityLanding
|
||||
dark_extras << "\n --cl-primary-btn-bg: #{primary_btn_dark};" if primary_btn_dark
|
||||
dark_extras << "\n --cl-secondary-btn-bg: #{secondary_btn_dark};" if secondary_btn_dark
|
||||
dark_extras << "\n --cl-pill-bg: #{pill_bg_dark};" if pill_bg_dark
|
||||
dark_extras << "\n --cl-video-btn-bg: #{video_btn_bg};" if video_btn_bg
|
||||
if video_btn_bg
|
||||
video_btn_rgb = hex_to_rgb(video_btn_bg)
|
||||
dark_extras << "\n --cl-video-btn-bg: #{video_btn_bg};"
|
||||
dark_extras << "\n --cl-video-btn-glow: rgba(#{video_btn_rgb}, 0.35);"
|
||||
end
|
||||
|
||||
light_extras = +""
|
||||
light_extras << "\n --cl-navbar-signin-color: #{navbar_signin_light || navbar_signin_dark};" if navbar_signin_light || navbar_signin_dark
|
||||
@@ -82,7 +92,11 @@ module CommunityLanding
|
||||
light_extras << "\n --cl-primary-btn-bg: #{primary_btn_light || primary_btn_dark};" if primary_btn_light || primary_btn_dark
|
||||
light_extras << "\n --cl-secondary-btn-bg: #{secondary_btn_light || secondary_btn_dark};" if secondary_btn_light || secondary_btn_dark
|
||||
light_extras << "\n --cl-pill-bg: #{pill_bg_light || pill_bg_dark};" if pill_bg_light || pill_bg_dark
|
||||
light_extras << "\n --cl-video-btn-bg: #{video_btn_bg};" if video_btn_bg
|
||||
if video_btn_bg
|
||||
video_btn_rgb ||= hex_to_rgb(video_btn_bg)
|
||||
light_extras << "\n --cl-video-btn-bg: #{video_btn_bg};"
|
||||
light_extras << "\n --cl-video-btn-glow: rgba(#{video_btn_rgb}, 0.25);"
|
||||
end
|
||||
|
||||
"<style>
|
||||
:root, [data-theme=\"dark\"] {
|
||||
@@ -103,7 +117,9 @@ module CommunityLanding
|
||||
--cl-topic-card-bg: #{topic_card_dark || 'var(--cl-card)'};
|
||||
--cl-hero-card-bg: #{hero_card_dark_val};
|
||||
--cl-about-card-bg: #{about_dark_css};
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3});#{dark_extras}
|
||||
--cl-participation-card-bg: #{part_card_dark || 'var(--cl-card)'};
|
||||
--cl-participation-icon-color: #{part_icon_color || 'var(--cl-accent)'};
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_g1_dark}, #{app_g2_dark}, #{app_g3_dark});#{dark_extras}
|
||||
}
|
||||
[data-theme=\"light\"] {
|
||||
--cl-accent: #{accent};
|
||||
@@ -123,7 +139,9 @@ module CommunityLanding
|
||||
--cl-topic-card-bg: #{topic_card_light || topic_card_dark || 'var(--cl-card)'};
|
||||
--cl-hero-card-bg: #{hero_card_light_val};
|
||||
--cl-about-card-bg: #{about_light_css};
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3});#{light_extras}
|
||||
--cl-participation-card-bg: #{part_card_light || part_card_dark || 'var(--cl-card)'};
|
||||
--cl-participation-icon-color: #{part_icon_color || 'var(--cl-accent)'};
|
||||
--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}
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root:not([data-theme=\"dark\"]) {
|
||||
@@ -141,7 +159,9 @@ module CommunityLanding
|
||||
--cl-space-card-bg: #{space_card_light || space_card_dark || 'var(--cl-card)'};
|
||||
--cl-topic-card-bg: #{topic_card_light || topic_card_dark || 'var(--cl-card)'};
|
||||
--cl-about-card-bg: #{about_light_css};
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3});#{light_extras}
|
||||
--cl-participation-card-bg: #{part_card_light || part_card_dark || 'var(--cl-card)'};
|
||||
--cl-participation-icon-color: #{part_icon_color || 'var(--cl-accent)'};
|
||||
--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}
|
||||
}
|
||||
}
|
||||
</style>\n"
|
||||
@@ -154,6 +174,7 @@ module CommunityLanding
|
||||
["#cl-hero", safe_hex(:hero_bg_dark), safe_hex(:hero_bg_light)],
|
||||
["#cl-stats-row", safe_hex(:stats_bg_dark), safe_hex(:stats_bg_light)],
|
||||
["#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)],
|
||||
|
||||
Reference in New Issue
Block a user