mirror of
https://github.com/dpnmw/community-landing.git
synced 2026-03-18 09:27:16 +00:00
UI Reworked
This commit is contained in:
251
plugin.rb
251
plugin.rb
@@ -2,7 +2,7 @@
|
||||
|
||||
# name: community-landing
|
||||
# about: Branded public landing page for unauthenticated visitors
|
||||
# version: 1.0.0
|
||||
# version: 2.0.0
|
||||
# authors: Community
|
||||
# url: https://github.com/community/community-landing
|
||||
|
||||
@@ -100,6 +100,8 @@ after_initialize do
|
||||
ERB::Util.html_escape(text.to_s)
|
||||
end
|
||||
|
||||
# ── SVG Icons ──
|
||||
|
||||
SUN_SVG = '<svg class="cl-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>'
|
||||
MOON_SVG = '<svg class="cl-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>'
|
||||
QUOTE_SVG = '<svg class="cl-about__quote-mark" viewBox="0 0 24 24" fill="currentColor" width="32" height="32"><path d="M6 7h3l2 4v6H5v-6h3zm8 0h3l2 4v6h-6v-6h3z"/></svg>'
|
||||
@@ -110,6 +112,12 @@ after_initialize do
|
||||
STAT_LIKES_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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>'
|
||||
STAT_CHATS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>'
|
||||
|
||||
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>'
|
||||
|
||||
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>'
|
||||
|
||||
def hex_to_rgb(hex)
|
||||
hex = hex.to_s.gsub("#", "")
|
||||
return "0, 0, 0" unless hex.match?(/\A[0-9a-fA-F]{6}\z/)
|
||||
@@ -117,10 +125,15 @@ after_initialize do
|
||||
end
|
||||
|
||||
def build_color_overrides(s)
|
||||
accent = s.community_landing_accent_color.presence || "#7c6aff"
|
||||
accent_hover = s.community_landing_accent_hover_color.presence || "#9485ff"
|
||||
accent = s.community_landing_accent_color.presence || "#d4a24e"
|
||||
accent_hover = s.community_landing_accent_hover_color.presence || "#c4922e"
|
||||
dark_bg = s.community_landing_dark_bg_color.presence || "#06060f"
|
||||
light_bg = s.community_landing_light_bg_color.presence || "#f8f9fc"
|
||||
light_bg = s.community_landing_light_bg_color.presence || "#faf6f0"
|
||||
stat_icon_color = s.community_landing_stat_icon_color.presence || accent
|
||||
about_grad_start = s.community_landing_about_gradient_start.presence || "#fdf6ec"
|
||||
about_grad_end = s.community_landing_about_gradient_end.presence || "#fef9f0"
|
||||
app_grad_start = s.community_landing_app_cta_gradient_start.presence || accent
|
||||
app_grad_end = s.community_landing_app_cta_gradient_end.presence || accent_hover
|
||||
accent_rgb = hex_to_rgb(accent)
|
||||
|
||||
"<style>
|
||||
@@ -134,6 +147,9 @@ after_initialize do
|
||||
--cl-gradient-text: linear-gradient(135deg, #{accent_hover}, #{accent}, #{accent_hover});
|
||||
--cl-border-hover: rgba(#{accent_rgb}, 0.25);
|
||||
--cl-orb-1: rgba(#{accent_rgb}, 0.12);
|
||||
--cl-stat-icon-color: #{stat_icon_color};
|
||||
--cl-about-gradient: linear-gradient(135deg, #{about_grad_start}, #{about_grad_end});
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_grad_start}, #{app_grad_end});
|
||||
}
|
||||
[data-theme=\"light\"] {
|
||||
--cl-accent: #{accent};
|
||||
@@ -145,6 +161,9 @@ after_initialize do
|
||||
--cl-gradient-text: linear-gradient(135deg, #{accent}, #{accent_hover}, #{accent});
|
||||
--cl-border-hover: rgba(#{accent_rgb}, 0.3);
|
||||
--cl-orb-1: rgba(#{accent_rgb}, 0.08);
|
||||
--cl-stat-icon-color: #{stat_icon_color};
|
||||
--cl-about-gradient: linear-gradient(135deg, #{about_grad_start}, #{about_grad_end});
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_grad_start}, #{app_grad_end});
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root:not([data-theme=\"dark\"]) {
|
||||
@@ -157,6 +176,9 @@ after_initialize do
|
||||
--cl-gradient-text: linear-gradient(135deg, #{accent}, #{accent_hover}, #{accent});
|
||||
--cl-border-hover: rgba(#{accent_rgb}, 0.3);
|
||||
--cl-orb-1: rgba(#{accent_rgb}, 0.08);
|
||||
--cl-stat-icon-color: #{stat_icon_color};
|
||||
--cl-about-gradient: linear-gradient(135deg, #{about_grad_start}, #{about_grad_end});
|
||||
--cl-app-gradient: linear-gradient(135deg, #{app_grad_start}, #{app_grad_end});
|
||||
}
|
||||
}
|
||||
</style>\n"
|
||||
@@ -179,20 +201,16 @@ after_initialize do
|
||||
|
||||
# ── App badge helper ──
|
||||
|
||||
def render_app_badge(store_url, custom_icon_url, default_svg, badge_h, badge_style)
|
||||
def render_app_badge(store_url, icon_svg, label, badge_h, badge_style)
|
||||
style_class = case badge_style
|
||||
when "pill" then "cl-app-badge--pill"
|
||||
when "square" then "cl-app-badge--square"
|
||||
else "cl-app-badge--rounded"
|
||||
end
|
||||
html = "<a href=\"#{store_url}\" class=\"cl-app-badge #{style_class}\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"height: #{badge_h}px;\">"
|
||||
if custom_icon_url
|
||||
html << "<img src=\"#{custom_icon_url}\" alt=\"\" class=\"cl-app-badge__img\">"
|
||||
else
|
||||
html << default_svg
|
||||
end
|
||||
html << "</a>\n"
|
||||
html
|
||||
"<a href=\"#{store_url}\" class=\"cl-app-badge #{style_class}\" target=\"_blank\" rel=\"noopener noreferrer\">" \
|
||||
"<span class=\"cl-app-badge__icon\">#{icon_svg}</span>" \
|
||||
"<span class=\"cl-app-badge__label\">#{e(label)}</span>" \
|
||||
"</a>\n"
|
||||
end
|
||||
|
||||
def build_html(css, js)
|
||||
@@ -203,7 +221,6 @@ after_initialize do
|
||||
# Logo URLs
|
||||
logo_dark_url = s.community_landing_logo_dark_url.presence
|
||||
logo_light_url = s.community_landing_logo_light_url.presence
|
||||
# Fallback: if only light is set, treat it as the universal logo
|
||||
if logo_dark_url.nil? && logo_light_url.nil?
|
||||
fallback = s.respond_to?(:logo_url) ? s.logo_url.presence : nil
|
||||
logo_dark_url = fallback
|
||||
@@ -212,7 +229,6 @@ after_initialize do
|
||||
logo_h = s.community_landing_logo_height rescue 30
|
||||
og_logo = logo_dark_url || logo_light_url
|
||||
|
||||
# Footer logo
|
||||
footer_logo_url = s.community_landing_footer_logo_url.presence
|
||||
|
||||
html = +""
|
||||
@@ -232,33 +248,27 @@ after_initialize do
|
||||
html << build_color_overrides(s)
|
||||
html << "</head>\n<body class=\"cl-body\">\n"
|
||||
|
||||
# Navbar labels
|
||||
signin_label = s.community_landing_navbar_signin_label.presence || "Sign In"
|
||||
join_label = s.community_landing_navbar_join_label.presence || "Join Free"
|
||||
join_label = s.community_landing_navbar_join_label.presence || "Get Started"
|
||||
|
||||
# ── NAVBAR ──
|
||||
html << "<nav class=\"cl-navbar\" id=\"cl-navbar\"><div class=\"cl-navbar__inner\">\n"
|
||||
html << "<a href=\"/\" class=\"cl-navbar__brand\">"
|
||||
if has_logo
|
||||
html << render_logo(logo_dark_url, logo_light_url, site_name, "cl-navbar__logo", logo_h)
|
||||
else
|
||||
html << "<span class=\"cl-navbar__site-name\">#{e(site_name)}</span>"
|
||||
end
|
||||
html << "</a>\n"
|
||||
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__links\" id=\"cl-nav-links\">\n"
|
||||
html << "<div class=\"cl-navbar__left\">"
|
||||
html << "<button class=\"cl-theme-toggle\" aria-label=\"Toggle theme\">#{SUN_SVG}#{MOON_SVG}</button>\n"
|
||||
html << "</div>"
|
||||
html << "<div class=\"cl-navbar__right\">"
|
||||
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></div></nav>\n"
|
||||
html << "</div>"
|
||||
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 << "<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>"
|
||||
html << "</div></nav>\n"
|
||||
|
||||
# ── HERO — text left, image right ──
|
||||
hero_style = ""
|
||||
if s.community_landing_hero_background_image_url.present?
|
||||
hero_style = " style=\"background-image: linear-gradient(rgba(6,6,15,0.8), rgba(6,6,15,0.8)), url('#{s.community_landing_hero_background_image_url}');\""
|
||||
end
|
||||
html << "<section class=\"cl-hero\" id=\"cl-hero\"#{hero_style}>\n"
|
||||
html << "<div class=\"cl-hero__orb\"></div>\n"
|
||||
# ── HERO ──
|
||||
html << "<section class=\"cl-hero\" id=\"cl-hero\">\n"
|
||||
html << "<div class=\"cl-hero__inner\">\n"
|
||||
html << "<div class=\"cl-hero__content\">\n"
|
||||
|
||||
@@ -271,18 +281,18 @@ after_initialize do
|
||||
|
||||
html << "<p class=\"cl-hero__subtitle\">#{e(s.community_landing_hero_subtitle)}</p>\n"
|
||||
|
||||
primary_label = s.community_landing_hero_primary_button_label.presence || "Browse the Forum"
|
||||
primary_label = s.community_landing_hero_primary_button_label.presence || "View Latest Topics"
|
||||
primary_url = s.community_landing_hero_primary_button_url.presence || "/latest"
|
||||
secondary_label = s.community_landing_hero_secondary_button_label.presence || "Join the Community"
|
||||
secondary_label = s.community_landing_hero_secondary_button_label.presence || "Explore Our Spaces"
|
||||
secondary_url = s.community_landing_hero_secondary_button_url.presence || login_url
|
||||
|
||||
html << "<div class=\"cl-hero__actions\">\n"
|
||||
html << "<a href=\"#{primary_url}\" class=\"cl-btn cl-btn--primary cl-btn--lg\">#{e(primary_label)}</a>\n"
|
||||
html << "<a href=\"#{secondary_url}\" class=\"cl-btn cl-btn--ghost cl-btn--lg\">#{e(secondary_label)}</a>\n"
|
||||
html << "</div>\n"
|
||||
html << "</div>\n"
|
||||
|
||||
html << "</div>\n" # end cl-hero__content
|
||||
|
||||
# Hero image
|
||||
hero_image_urls_raw = s.community_landing_hero_image_urls.presence
|
||||
if hero_image_urls_raw
|
||||
urls = hero_image_urls_raw.split("|").map(&:strip).reject(&:empty?).first(5)
|
||||
@@ -294,11 +304,13 @@ after_initialize do
|
||||
end
|
||||
end
|
||||
|
||||
html << "</div></section>\n" # end hero
|
||||
html << "</div></section>\n"
|
||||
|
||||
# ── STATS ROW — full-width counter cards ──
|
||||
html << "<section class=\"cl-stats-row cl-reveal\" id=\"cl-stats-row\"><div class=\"cl-container\">\n"
|
||||
html << "<div class=\"cl-stats-row__grid\">\n"
|
||||
# ── PREMIUM STATS ROW ──
|
||||
stats_title = s.community_landing_stats_title.presence || "Premium Stats"
|
||||
html << "<section class=\"cl-stats cl-reveal\" id=\"cl-stats-row\"><div class=\"cl-container\">\n"
|
||||
html << "<h2 class=\"cl-section-title\">#{e(stats_title)}</h2>\n"
|
||||
html << "<div class=\"cl-stats__grid\">\n"
|
||||
html << stats_counter_card(STAT_MEMBERS_SVG, @stats[:members], s.community_landing_stat_members_label)
|
||||
html << stats_counter_card(STAT_TOPICS_SVG, @stats[:topics], s.community_landing_stat_topics_label)
|
||||
html << stats_counter_card(STAT_POSTS_SVG, @stats[:posts], s.community_landing_stat_posts_label)
|
||||
@@ -306,20 +318,14 @@ after_initialize do
|
||||
html << stats_counter_card(STAT_CHATS_SVG, @stats[:chats], s.community_landing_stat_chats_label)
|
||||
html << "</div>\n</div></section>\n"
|
||||
|
||||
# ── TWO-COLUMN CONTENT AREA ──
|
||||
html << "<div class=\"cl-content\"><div class=\"cl-container\">\n"
|
||||
html << "<div class=\"cl-content__grid\">\n"
|
||||
|
||||
# ── LEFT COLUMN — About + Contributors ──
|
||||
html << "<div class=\"cl-content__left\">\n"
|
||||
|
||||
# About — quote card
|
||||
# ── ABOUT COMMUNITY — full-width card ──
|
||||
if s.community_landing_about_enabled
|
||||
about_body = s.community_landing_about_body.presence || ""
|
||||
about_image = s.community_landing_about_image_url.presence
|
||||
about_role = s.community_landing_about_role.presence || site_name
|
||||
html << "<section class=\"cl-about cl-reveal\" id=\"cl-about\">\n"
|
||||
html << "<section class=\"cl-about cl-reveal\" id=\"cl-about\"><div class=\"cl-container\">\n"
|
||||
html << "<div class=\"cl-about__card\">\n"
|
||||
html << "<h2 class=\"cl-about__heading\">#{e(s.community_landing_about_title)}</h2>\n"
|
||||
html << QUOTE_SVG
|
||||
if about_body.present?
|
||||
html << "<div class=\"cl-about__body\">#{about_body}</div>\n"
|
||||
@@ -331,108 +337,112 @@ after_initialize do
|
||||
html << "<div class=\"cl-about__meta-text\">\n"
|
||||
html << "<span class=\"cl-about__author\">#{e(s.community_landing_about_title)}</span>\n"
|
||||
html << "<span class=\"cl-about__role\">#{e(about_role)}</span>\n"
|
||||
html << "</div></div></div>\n"
|
||||
html << "</section>\n"
|
||||
html << "</div></div>\n"
|
||||
html << "</div>\n"
|
||||
html << "</div></section>\n"
|
||||
end
|
||||
|
||||
# Top Contributors
|
||||
if s.community_landing_contributors_enabled && @top_contributors&.any?
|
||||
html << "<section class=\"cl-contributors cl-reveal\" id=\"cl-contributors\">\n"
|
||||
html << "<h2 class=\"cl-section-title\">#{e(s.community_landing_contributors_title)}</h2>\n"
|
||||
html << "<div class=\"cl-contributors__list\">\n"
|
||||
@top_contributors.each do |user|
|
||||
avatar_url = user.avatar_template.gsub("{size}", "120")
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-contributor\">\n"
|
||||
html << "<img src=\"#{avatar_url}\" alt=\"#{e(user.username)}\" class=\"cl-contributor__avatar\" loading=\"lazy\">\n"
|
||||
html << "<span class=\"cl-contributor__name\">#{e(user.username)}</span>\n"
|
||||
# ── TRENDING DISCUSSIONS — horizontal scrollable cards ──
|
||||
if s.community_landing_topics_enabled && @hot_topics&.any?
|
||||
html << "<section class=\"cl-topics cl-reveal\" id=\"cl-topics\"><div class=\"cl-container\">\n"
|
||||
html << "<h2 class=\"cl-section-title\">#{e(s.community_landing_topics_title)}</h2>\n"
|
||||
html << "<div class=\"cl-topics__scroll\">\n"
|
||||
@hot_topics.each do |topic|
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-topic-card\">\n"
|
||||
if topic.category
|
||||
html << "<span class=\"cl-topic-card__cat\" style=\"--cat-color: ##{topic.category.color}\">#{e(topic.category.name)}</span>\n"
|
||||
end
|
||||
html << "<span class=\"cl-topic-card__title\">#{e(topic.title)}</span>\n"
|
||||
html << "<div class=\"cl-topic-card__meta\">"
|
||||
html << "<span class=\"cl-topic-card__stat\">#{COMMENT_SVG} #{topic.posts_count}</span>"
|
||||
html << "<span class=\"cl-topic-card__stat\">#{HEART_SVG} #{topic.like_count}</span>"
|
||||
html << "</div>"
|
||||
html << "</a>\n"
|
||||
end
|
||||
html << "</div>\n</section>\n"
|
||||
html << "</div>\n</div></section>\n"
|
||||
end
|
||||
|
||||
html << "</div>\n" # end left
|
||||
|
||||
# ── RIGHT COLUMN — Trending Discussions ──
|
||||
html << "<div class=\"cl-content__right\">\n"
|
||||
|
||||
# Trending Discussions
|
||||
if s.community_landing_topics_enabled && @hot_topics&.any?
|
||||
html << "<section class=\"cl-topics cl-reveal\" id=\"cl-topics\">\n"
|
||||
html << "<h2 class=\"cl-section-title\">#{e(s.community_landing_topics_title)}</h2>\n"
|
||||
html << "<div class=\"cl-topics__list\">\n"
|
||||
@hot_topics.each do |topic|
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-topic-row\">\n"
|
||||
if topic.category
|
||||
html << "<span class=\"cl-topic-row__cat\" style=\"--cat-color: ##{topic.category.color}\">#{e(topic.category.name)}</span>\n"
|
||||
end
|
||||
html << "<span class=\"cl-topic-row__title\">#{e(topic.title)}</span>\n"
|
||||
html << "<span class=\"cl-topic-row__meta\">"
|
||||
html << "<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>"
|
||||
html << " #{topic.posts_count}"
|
||||
html << "</span></a>\n"
|
||||
# ── TOP CREATORS — pill badges ──
|
||||
if s.community_landing_contributors_enabled && @top_contributors&.any?
|
||||
html << "<section class=\"cl-creators cl-reveal\" id=\"cl-contributors\"><div class=\"cl-container\">\n"
|
||||
html << "<h2 class=\"cl-section-title\">#{e(s.community_landing_contributors_title)}</h2>\n"
|
||||
html << "<div class=\"cl-creators__list\">\n"
|
||||
@top_contributors.each do |user|
|
||||
avatar_url = user.avatar_template.gsub("{size}", "120")
|
||||
cheers = user.respond_to?(:post_count) ? user.post_count : 0
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-creator-pill\">\n"
|
||||
html << "<img src=\"#{avatar_url}\" alt=\"#{e(user.username)}\" class=\"cl-creator-pill__avatar\" loading=\"lazy\">\n"
|
||||
html << "<span class=\"cl-creator-pill__name\">@#{e(user.username)}</span>\n"
|
||||
html << "<span class=\"cl-creator-pill__cheers\">#{cheers} cheers</span>\n"
|
||||
html << "</a>\n"
|
||||
end
|
||||
html << "</div>\n</section>\n"
|
||||
html << "</div>\n</div></section>\n"
|
||||
end
|
||||
|
||||
html << "</div>\n" # end right
|
||||
|
||||
# ── BOTTOM ROW — Groups (full-width) ──
|
||||
# ── COMMUNITY SPACES — colored cards ──
|
||||
if s.community_landing_groups_enabled && @groups&.any?
|
||||
html << "<div class=\"cl-content__bottom\">\n"
|
||||
html << "<section class=\"cl-groups cl-reveal\" id=\"cl-groups\">\n"
|
||||
html << "<section class=\"cl-spaces cl-reveal\" id=\"cl-groups\"><div class=\"cl-container\">\n"
|
||||
html << "<h2 class=\"cl-section-title\">#{e(s.community_landing_groups_title)}</h2>\n"
|
||||
html << "<div class=\"cl-groups__grid\">\n"
|
||||
html << "<div class=\"cl-spaces__grid\">\n"
|
||||
@groups.each do |group|
|
||||
display_name = group.name.tr("_-", " ").gsub(/\b\w/, &:upcase)
|
||||
hue = group.name.bytes.sum % 360
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-group-card\">\n"
|
||||
html << "<div class=\"cl-group-card__icon\">"
|
||||
html << "<a href=\"#{login_url}\" class=\"cl-space-card\">\n"
|
||||
html << "<div class=\"cl-space-card__icon\" style=\"background: hsl(#{hue}, 55%, 50%)\">"
|
||||
if group.flair_url.present?
|
||||
html << "<img src=\"#{group.flair_url}\" alt=\"\">"
|
||||
else
|
||||
html << "<span class=\"cl-group-card__initial\" style=\"background: hsl(#{hue}, 55%, 50%)\">#{group.name[0].upcase}</span>"
|
||||
html << "<span class=\"cl-space-card__letter\">#{group.name[0].upcase}</span>"
|
||||
end
|
||||
html << "</div>\n"
|
||||
html << "<span class=\"cl-group-card__name\">#{e(display_name)}</span>\n"
|
||||
html << "<span class=\"cl-group-card__count\">#{group.user_count} members</span>\n"
|
||||
html << "<span class=\"cl-space-card__name\">#{e(display_name)}</span>\n"
|
||||
html << "<span class=\"cl-space-card__count\">#{group.user_count} members</span>\n"
|
||||
html << "</a>\n"
|
||||
end
|
||||
html << "</div>\n</section>\n"
|
||||
html << "</div>\n"
|
||||
html << "</div>\n</div></section>\n"
|
||||
end
|
||||
|
||||
html << "</div></div></div>\n" # end content grid
|
||||
|
||||
# ── APP CTA (above footer) ──
|
||||
# ── APP CTA — split layout with image ──
|
||||
if s.community_landing_show_app_ctas && (s.community_landing_ios_app_url.present? || s.community_landing_android_app_url.present?)
|
||||
badge_h = s.community_landing_app_badge_height rescue 45
|
||||
badge_style = s.community_landing_app_badge_style rescue "rounded"
|
||||
ios_icon = s.community_landing_ios_app_icon_url.presence
|
||||
android_icon = s.community_landing_android_app_icon_url.presence
|
||||
|
||||
ios_w = (badge_h * 3.0).to_i
|
||||
android_w = (badge_h * 3.375).to_i
|
||||
|
||||
ios_default_svg = "<svg viewBox=\"0 0 120 40\" width=\"#{ios_w}\" height=\"#{badge_h}\"><rect width=\"120\" height=\"40\" fill=\"#000\"/><text x=\"60\" y=\"15\" text-anchor=\"middle\" fill=\"#fff\" font-size=\"7\" font-family=\"system-ui\">Download on the</text><text x=\"60\" y=\"28\" text-anchor=\"middle\" fill=\"#fff\" font-size=\"12\" font-weight=\"600\" font-family=\"system-ui\">App Store</text></svg>"
|
||||
android_default_svg = "<svg viewBox=\"0 0 135 40\" width=\"#{android_w}\" height=\"#{badge_h}\"><rect width=\"135\" height=\"40\" fill=\"#000\"/><text x=\"67\" y=\"15\" text-anchor=\"middle\" fill=\"#fff\" font-size=\"7\" font-family=\"system-ui\">GET IT ON</text><text x=\"67\" y=\"28\" text-anchor=\"middle\" fill=\"#fff\" font-size=\"12\" font-weight=\"600\" font-family=\"system-ui\">Google Play</text></svg>"
|
||||
app_image = s.community_landing_app_cta_image_url.presence
|
||||
|
||||
html << "<section class=\"cl-app-cta cl-reveal\" id=\"cl-app-cta\"><div class=\"cl-container\">\n"
|
||||
html << "<div class=\"cl-app-cta__inner\">\n"
|
||||
html << "<div class=\"cl-app-cta__content\">\n"
|
||||
html << "<h2 class=\"cl-app-cta__headline\">#{e(s.community_landing_app_cta_headline)}</h2>\n"
|
||||
html << "<p class=\"cl-app-cta__subtext\">#{e(s.community_landing_app_cta_subtext)}</p>\n"
|
||||
html << "<p class=\"cl-app-cta__subtext\">#{e(s.community_landing_app_cta_subtext)}</p>\n" if s.community_landing_app_cta_subtext.present?
|
||||
html << "<div class=\"cl-app-cta__badges\">\n"
|
||||
if s.community_landing_ios_app_url.present?
|
||||
html << render_app_badge(s.community_landing_ios_app_url, ios_icon, ios_default_svg, badge_h, badge_style)
|
||||
html << render_app_badge(s.community_landing_ios_app_url, IOS_BADGE_SVG, "App Store", badge_h, badge_style)
|
||||
end
|
||||
if s.community_landing_android_app_url.present?
|
||||
html << render_app_badge(s.community_landing_android_app_url, android_icon, android_default_svg, badge_h, badge_style)
|
||||
html << render_app_badge(s.community_landing_android_app_url, ANDROID_BADGE_SVG, "Google Play", badge_h, badge_style)
|
||||
end
|
||||
html << "</div></div></section>\n"
|
||||
html << "</div>\n"
|
||||
html << "</div>\n"
|
||||
if app_image
|
||||
html << "<div class=\"cl-app-cta__image\">\n"
|
||||
html << "<img src=\"#{app_image}\" alt=\"App preview\" class=\"cl-app-cta__img\">\n"
|
||||
html << "</div>\n"
|
||||
end
|
||||
html << "</div>\n"
|
||||
html << "</div></section>\n"
|
||||
end
|
||||
|
||||
# ── FOOTER DESCRIPTION ──
|
||||
if s.community_landing_footer_description.present?
|
||||
html << "<div class=\"cl-footer-desc\"><div class=\"cl-container\">\n"
|
||||
html << "<p class=\"cl-footer-desc__text\">#{s.community_landing_footer_description}</p>\n"
|
||||
html << "</div></div>\n"
|
||||
end
|
||||
|
||||
# ── FOOTER ──
|
||||
html << "<footer class=\"cl-footer\" id=\"cl-footer\">\n"
|
||||
html << "<div class=\"cl-container\">\n"
|
||||
html << "<div class=\"cl-footer__top\">\n"
|
||||
html << "<div class=\"cl-footer__row\">\n"
|
||||
html << "<div class=\"cl-footer__left\">\n"
|
||||
html << "<div class=\"cl-footer__brand\">"
|
||||
if footer_logo_url
|
||||
html << "<img src=\"#{footer_logo_url}\" alt=\"#{e(site_name)}\" class=\"cl-footer__logo\" style=\"height: #{logo_h}px;\">"
|
||||
@@ -450,10 +460,13 @@ after_initialize do
|
||||
end
|
||||
html << "</div>\n"
|
||||
html << "</div>\n"
|
||||
html << "<div class=\"cl-footer__right\">\n"
|
||||
html << "<span class=\"cl-footer__copy\">© #{Time.now.year} #{e(site_name)}</span>\n"
|
||||
html << "</div>\n"
|
||||
html << "</div>\n"
|
||||
if s.community_landing_footer_text.present?
|
||||
html << "<div class=\"cl-footer__text\">#{s.community_landing_footer_text}</div>\n"
|
||||
end
|
||||
html << "<div class=\"cl-footer__copy\">© #{Time.now.year} #{e(site_name)}</div>\n"
|
||||
html << "</div></footer>\n"
|
||||
|
||||
html << "<script>\n#{js}\n</script>\n"
|
||||
@@ -462,10 +475,10 @@ after_initialize do
|
||||
end
|
||||
|
||||
def stats_counter_card(icon_svg, count, label)
|
||||
"<div class=\"cl-stats-counter\">\n" \
|
||||
"<div class=\"cl-stats-counter__icon\">#{icon_svg}</div>\n" \
|
||||
"<span class=\"cl-stats-counter__value\" data-count=\"#{count}\">0</span>\n" \
|
||||
"<span class=\"cl-stats-counter__label\">#{e(label)}</span>\n" \
|
||||
"<div class=\"cl-stat-card\">\n" \
|
||||
"<div class=\"cl-stat-card__icon\">#{icon_svg}</div>\n" \
|
||||
"<span class=\"cl-stat-card__label\">#{e(label)}</span>\n" \
|
||||
"<span class=\"cl-stat-card__value\" data-count=\"#{count}\">0</span>\n" \
|
||||
"</div>\n"
|
||||
end
|
||||
|
||||
|
||||
Reference in New Issue
Block a user