diff --git a/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js b/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js index 7ab4a80..3faa837 100644 --- a/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js +++ b/assets/javascripts/discourse/initializers/community-landing-admin-tabs.js @@ -28,13 +28,16 @@ const TABS = [ "hero_primary_button_label", "hero_primary_button_url", "hero_secondary_button_label", "hero_secondary_button_url", "hero_video_url", "hero_video_button_color", "hero_video_blur_on_hover", - "hero_bg_dark", "hero_bg_light", "hero_min_height", "hero_border_style" + "hero_bg_dark", "hero_bg_light", "hero_min_height", "hero_border_style", + "hero_card_bg_dark", "hero_card_bg_light", "hero_card_opacity", + "contributors_enabled", "contributors_days", "contributors_count" ]) }, { id: "stats", label: "Stats", settings: new Set([ + "stats_enabled", "stat_labels_enabled", "stats_title", "stat_icon_color", "stat_icon_bg_color", "stat_icon_shape", "stat_counter_color", "stat_members_label", "stat_topics_label", "stat_posts_label", "stat_likes_label", "stat_chats_label", "stat_round_numbers", @@ -60,14 +63,6 @@ const TABS = [ "topics_bg_dark", "topics_bg_light", "topics_min_height", "topics_border_style" ]) }, - { - id: "contributors", - label: "Creators", - settings: new Set([ - "contributors_enabled", "contributors_title", "contributors_days", "contributors_count", - "contributors_bg_dark", "contributors_bg_light", "contributors_min_height", "contributors_border_style" - ]) - }, { id: "groups", label: "Spaces", @@ -99,6 +94,18 @@ const TABS = [ } ]; +// Pairs of dark/light background settings to display side-by-side +const BG_PAIRS = [ + ["hero_bg_dark", "hero_bg_light"], + ["hero_card_bg_dark", "hero_card_bg_light"], + ["stats_bg_dark", "stats_bg_light"], + ["about_bg_dark", "about_bg_light"], + ["topics_bg_dark", "topics_bg_light"], + ["groups_bg_dark", "groups_bg_light"], + ["app_cta_bg_dark", "app_cta_bg_light"], + ["footer_bg_dark", "footer_bg_light"], +]; + let currentTab = "settings"; let filterActive = false; let isActive = false; @@ -126,6 +133,14 @@ function applyTabFilter() { ); }); + // Toggle visibility on bg-pair wrappers + container.querySelectorAll(".cl-bg-pair").forEach((pair) => { + const firstRow = pair.querySelector(".row.setting[data-setting]"); + if (firstRow) { + pair.classList.toggle("cl-tab-hidden", firstRow.classList.contains("cl-tab-hidden")); + } + }); + // Update filter-active dimming on whichever tab container exists const nativeTabs = container.querySelector(".admin-plugin-config-area__tabs"); if (nativeTabs) { @@ -179,6 +194,25 @@ function handleTabClick(container, tabId) { applyTabFilter(); } +function wrapBgPairs() { + const container = getContainer(); + if (!container) return; + + BG_PAIRS.forEach(([darkName, lightName]) => { + const darkRow = container.querySelector(`.row.setting[data-setting="${darkName}"]`); + const lightRow = container.querySelector(`.row.setting[data-setting="${lightName}"]`); + if (!darkRow || !lightRow) return; + // Skip if already wrapped + if (darkRow.parentElement && darkRow.parentElement.classList.contains("cl-bg-pair")) return; + + const wrapper = document.createElement("div"); + wrapper.className = "cl-bg-pair"; + darkRow.parentNode.insertBefore(wrapper, darkRow); + wrapper.appendChild(darkRow); + wrapper.appendChild(lightRow); + }); +} + function buildTabsUI() { const container = getContainer(); if (!container) return false; @@ -229,6 +263,7 @@ function buildTabsUI() { nativeTabsEl.classList.add("cl-tabs-injected"); container.classList.add("cl-tabs-active"); + wrapBgPairs(); applyTabFilter(); return true; } @@ -273,6 +308,7 @@ function buildTabsUI() { } container.classList.add("cl-tabs-active"); + wrapBgPairs(); applyTabFilter(); return true; } diff --git a/assets/stylesheets/community_landing/admin.css b/assets/stylesheets/community_landing/admin.css index 9e1316c..a020ac9 100644 --- a/assets/stylesheets/community_landing/admin.css +++ b/assets/stylesheets/community_landing/admin.css @@ -1,6 +1,6 @@ /* ═══════════════════════════════════════════════════════════════════ Community Landing — Admin Settings Panel Styles - Tab navigation + fallback separators + Tab navigation + fallback separators + bg-pair layout ═══════════════════════════════════════════════════════════════════ */ /* ── Tab-hidden class (used instead of inline display:none) ── */ @@ -123,6 +123,30 @@ html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover { padding-top: 0 !important; } +/* ── Dual-color background pairs (side-by-side dark/light) ── */ + +.cl-bg-pair { + display: flex; + gap: 16px; + width: 100%; +} + +.cl-bg-pair > .row.setting { + flex: 1; + min-width: 0; + margin-bottom: 0 !important; +} + +.cl-bg-pair.cl-tab-hidden { + display: none !important; +} + +@media (max-width: 600px) { + .cl-bg-pair { + flex-direction: column; + } +} + /* ── Fallback: Separator borders when tabs are NOT active ── (e.g. if JS fails to load or on older Discourse) */ @@ -155,10 +179,9 @@ html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover { .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="scroll_animation"], .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="navbar_signin_label"], .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="hero_title"], -.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="stats_title"], +.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="stats_enabled"], .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="about_enabled"], .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="topics_enabled"], -.admin-detail:not(.cl-tabs-active) .row.setting[data-setting="contributors_enabled"], .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="groups_enabled"], .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="show_app_ctas"], .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="footer_description"] { @@ -173,10 +196,9 @@ html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="a html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="scroll_animation"], html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="navbar_signin_label"], html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="hero_title"], -html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="stats_title"], +html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="stats_enabled"], html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="about_enabled"], html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="topics_enabled"], -html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="contributors_enabled"], html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="groups_enabled"], html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="show_app_ctas"], html.dark-scheme .admin-detail:not(.cl-tabs-active) .row.setting[data-setting="footer_description"], diff --git a/assets/stylesheets/community_landing/landing.css b/assets/stylesheets/community_landing/landing.css index 19ffbd7..831e536 100644 --- a/assets/stylesheets/community_landing/landing.css +++ b/assets/stylesheets/community_landing/landing.css @@ -602,6 +602,8 @@ min-height: 80vh; display: flex; align-items: center; + background-size: cover; + background-position: center; } @media (min-width: 1024px) { @@ -692,34 +694,15 @@ transition: opacity 0.6s ease; } -/* ── Hero Background Image (flat mode) ── */ -.cl-hero__bg { - position: absolute; - inset: 0; - background-size: cover; - background-position: center; - z-index: 0; - opacity: 0.25; -} - -.cl-hero__bg::after { - content: ""; - position: absolute; - inset: 0; - background: linear-gradient(to bottom, transparent 60%, var(--cl-bg)); -} - /* ── Hero Card Mode ── */ .cl-hero--card .cl-hero__inner { - background: var(--cl-card); + background: var(--cl-hero-card-bg, var(--cl-card)); border: 1px solid var(--cl-border); border-radius: var(--cl-radius); padding: 3rem 2.5rem; backdrop-filter: var(--cl-blur); -webkit-backdrop-filter: var(--cl-blur); box-shadow: 0 8px 32px var(--cl-shadow); - background-size: cover; - background-position: center; } @media (min-width: 1024px) { @@ -892,10 +875,11 @@ transition: filter 0.4s ease; } -/* ── Hero Creators (top 3 pills in hero) ── */ +/* ── Hero Creators (top 3 ranked pills in hero) ── */ .cl-hero__creators { display: flex; - flex-wrap: wrap; + flex-wrap: nowrap; + justify-content: center; gap: 0.75rem; margin-top: 2rem; } @@ -1224,18 +1208,8 @@ } /* ═══════════════════════════════════════════════════════════════════ - 6. TOP CREATORS — pill badges + 6. CREATOR PILLS — used in hero section ═══════════════════════════════════════════════════════════════════ */ -.cl-creators { - padding: 2.5rem 0 3rem; -} - -.cl-creators__list { - display: flex; - flex-wrap: wrap; - gap: 1rem; -} - .cl-creator-pill { display: flex; align-items: center; @@ -1245,29 +1219,48 @@ border: 1px solid var(--cl-border); border-radius: 50px; text-decoration: none; + position: relative; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: var(--cl-blur); -webkit-backdrop-filter: var(--cl-blur); } .cl-creator-pill:hover { - border-color: var(--cl-border-hover); + border-color: var(--rank-color, var(--cl-border-hover)); background: var(--cl-accent-subtle); transform: translateY(-3px); box-shadow: 0 8px 24px var(--cl-shadow); } +.cl-creator-pill__rank { + position: absolute; + top: -6px; + left: -6px; + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--rank-color); + color: #000; + font-size: 0.65rem; + font-weight: 900; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); +} + .cl-creator-pill__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; - border: 2px solid var(--cl-border); + border: 2px solid var(--rank-color, var(--cl-border)); transition: border-color 0.3s ease; } .cl-creator-pill:hover .cl-creator-pill__avatar { - border-color: var(--cl-accent); + border-color: var(--rank-color, var(--cl-accent)); } .cl-creator-pill__name { diff --git a/config/locales/en.yml b/config/locales/en.yml index e732a8d..1241421 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -42,9 +42,14 @@ en: hero_bg_light: "Background color for the hero section in light mode. Hex value. Leave blank for default." hero_min_height: "Minimum height for the hero section in pixels. Set to 0 for auto height." hero_border_style: "Border style at the bottom of the hero section." + hero_card_bg_dark: "Background color for the hero card overlay in dark mode. Only applies when hero card mode is enabled. Leave blank for default glass effect." + hero_card_bg_light: "Background color for the hero card overlay in light mode. Only applies when hero card mode is enabled. Leave blank for default glass effect." + hero_card_opacity: "Opacity of the hero card background (0 to 1, default 0.85). Lower values make the card more transparent, showing the background image through." # ── 3. Stats Section ── - stats_title: "━━ ROW 3: PREMIUM STATS ━━ — Full-width row of live community statistics (members, topics, posts, likes, chats) with animated counters and icons. Each card shows icon + label on one line with the counter below. This is the section heading." + stats_enabled: "━━ ROW 3: PREMIUM STATS ━━ — Show or hide the entire stats section." + stat_labels_enabled: "Show text labels below stat counters (e.g. 'Members', 'Topics'). When off, only numbers and icons are displayed." + stats_title: "Section heading text above the stats row." stat_icon_color: "Color for all stat counter icons. Hex value (e.g. #d4a24e)." stat_icon_bg_color: "Background color behind each stat icon. Leave blank for a subtle accent tint." stat_icon_shape: "Shape of the icon background: circle or rounded square." @@ -87,15 +92,10 @@ en: topics_min_height: "Minimum height for the trending section in pixels. Set to 0 for auto height." topics_border_style: "Border style at the bottom of the trending section." - # ── 6. Top Creators ── - contributors_enabled: "━━ ROW 6: CREATORS ━━ — Show the Top Creators section: pill-shaped badges showing your most active community members. Each pill displays avatar, @username, and post count from the lookback period." - contributors_title: "Heading text above the creator pills." + # ── 6. Hero Creators ── + contributors_enabled: "Show top 3 creators in the hero section with gold, silver, and bronze rank badges. Each pill displays avatar, @username, and post count." contributors_days: "Lookback period in days for calculating top contributors." - contributors_count: "Number of top contributor pills to display. Recommended: 6–12." - contributors_bg_dark: "Background color for the creators section in dark mode. Leave blank for default." - contributors_bg_light: "Background color for the creators section in light mode. Leave blank for default." - contributors_min_height: "Minimum height for the creators section in pixels. Set to 0 for auto height." - contributors_border_style: "Border style at the bottom of the creators section." + contributors_count: "Number of top contributors to fetch (top 3 are shown in the hero)." # ── 7. Community Spaces ── groups_enabled: "━━ ROW 7: SPACES ━━ — Show the Community Spaces section: a grid of colorful cards representing your public groups. Each card shows a colored icon (with group's first letter or flair), group name, and member count. Only public, non-automatic groups are shown." diff --git a/config/settings.yml b/config/settings.yml index f28dba2..6f556eb 100644 --- a/config/settings.yml +++ b/config/settings.yml @@ -155,10 +155,25 @@ plugins: - solid - dashed - dotted + hero_card_bg_dark: + default: "" + type: color + hero_card_bg_light: + default: "" + type: color + hero_card_opacity: + default: "0.85" + type: string # ══════════════════════════════════════════ # 3. Premium Stats Section # ══════════════════════════════════════════ + stats_enabled: + default: true + type: bool + stat_labels_enabled: + default: true + type: bool stats_title: default: "Premium Stats" type: string @@ -307,39 +322,17 @@ plugins: - dotted # ══════════════════════════════════════════ - # 6. Top Creators Section + # 6. Hero Creators (Top 3 in Hero) # ══════════════════════════════════════════ contributors_enabled: default: true type: bool - contributors_title: - default: "Top Creators" - type: string contributors_days: default: 90 type: integer contributors_count: default: 10 type: integer - contributors_bg_dark: - default: "" - type: color - contributors_bg_light: - default: "" - type: color - contributors_min_height: - default: 0 - type: integer - min: 0 - max: 2000 - contributors_border_style: - default: "none" - type: enum - choices: - - none - - solid - - dashed - - dotted # ══════════════════════════════════════════ # 7. Community Spaces Section diff --git a/lib/community_landing/page_builder.rb b/lib/community_landing/page_builder.rb index 11d0e74..0a49735 100644 --- a/lib/community_landing/page_builder.rb +++ b/lib/community_landing/page_builder.rb @@ -24,7 +24,6 @@ module CommunityLanding html << render_stats html << render_about html << render_topics - html << render_contributors html << render_groups html << render_app_cta html << render_footer_desc @@ -127,18 +126,15 @@ module CommunityLanding site_name = @s.title html = +"" - html << "
\n" + # Build hero section style: bg image on the section itself + border/min-height + hero_style_parts = [] + hero_style_parts << "background-image: url('#{hero_bg_img}');" if hero_bg_img + hero_style_parts << "border-bottom: 1px #{hero_border} var(--cl-border);" if hero_border.present? && hero_border != "none" + hero_style_parts << "min-height: #{hero_min_h}px;" if hero_min_h.to_i > 0 + hero_attr = hero_style_parts.any? ? " style=\"#{hero_style_parts.join(' ')}\"" : "" + html << "
\n" - if hero_bg_img && !hero_card - html << "
\n" - end - - inner_style = "" - if hero_card && hero_bg_img - inner_style = " style=\"background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('#{hero_bg_img}'); background-size: cover; background-position: center;\"" - end - - html << "
\n
\n" + html << "
\n
\n" title_words = @s.hero_title.to_s.split(" ") if title_words.length > 1 @@ -159,15 +155,18 @@ module CommunityLanding html << "#{e(secondary_label)}\n" html << "
\n" - # Hero creators (top 3) + # Hero creators (top 3 with gold/silver/bronze ranks) contributors = @data[:contributors] if (@s.contributors_enabled rescue false) && contributors&.any? top3 = contributors.first(3) + rank_colors = ["#FFD700", "#C0C0C0", "#CD7F32"] html << "
\n" - top3.each do |user| + top3.each_with_index do |user, idx| avatar_url = user.avatar_template.gsub("{size}", "120") activity_count = user.attributes["post_count"].to_i rescue 0 - html << "\n" + rank_color = rank_colors[idx] + html << "\n" + html << "#{idx + 1}\n" html << "\"#{e(user.username)}\"\n" html << "@#{e(user.username)}\n" html << "#{activity_count}\n" @@ -214,22 +213,25 @@ module CommunityLanding # ── 3. STATS ── def render_stats + return "" unless (@s.stats_enabled rescue true) + stats = @data[:stats] stats_title = @s.stats_title.presence || "Premium Stats" border = @s.stats_border_style rescue "none" min_h = @s.stats_min_height rescue 0 icon_shape = @s.stat_icon_shape rescue "circle" round_nums = @s.stat_round_numbers rescue false + show_labels = @s.stat_labels_enabled rescue true html = +"" html << "
\n" html << "

#{e(stats_title)}

\n" html << "
\n" - html << stat_card(Icons::STAT_MEMBERS_SVG, stats[:members], @s.stat_members_label, icon_shape, round_nums) - html << stat_card(Icons::STAT_TOPICS_SVG, stats[:topics], @s.stat_topics_label, icon_shape, round_nums) - html << stat_card(Icons::STAT_POSTS_SVG, stats[:posts], @s.stat_posts_label, icon_shape, round_nums) - html << stat_card(Icons::STAT_LIKES_SVG, stats[:likes], @s.stat_likes_label, icon_shape, round_nums) - html << stat_card(Icons::STAT_CHATS_SVG, stats[:chats], @s.stat_chats_label, icon_shape, round_nums) + html << stat_card(Icons::STAT_MEMBERS_SVG, stats[:members], @s.stat_members_label, icon_shape, round_nums, show_labels) + html << stat_card(Icons::STAT_TOPICS_SVG, stats[:topics], @s.stat_topics_label, icon_shape, round_nums, show_labels) + html << stat_card(Icons::STAT_POSTS_SVG, stats[:posts], @s.stat_posts_label, icon_shape, round_nums, show_labels) + html << stat_card(Icons::STAT_LIKES_SVG, stats[:likes], @s.stat_likes_label, icon_shape, round_nums, show_labels) + html << stat_card(Icons::STAT_CHATS_SVG, stats[:chats], @s.stat_chats_label, icon_shape, round_nums, show_labels) html << "
\n
\n" html end @@ -309,35 +311,6 @@ module CommunityLanding html end - # ── 6. TOP CREATORS ── - - def render_contributors - contributors = @data[:contributors] - return "" unless @s.contributors_enabled && contributors&.any? - - border = @s.contributors_border_style rescue "none" - min_h = @s.contributors_min_height rescue 0 - - html = +"" - html << "
\n" - html << "

#{e(@s.contributors_title)}

\n" - html << "
\n" - - contributors.each do |user| - avatar_url = user.avatar_template.gsub("{size}", "120") - activity_count = user.attributes["post_count"].to_i rescue 0 - - html << "\n" - html << "\"#{e(user.username)}\"\n" - html << "@#{e(user.username)}\n" - html << "#{activity_count}\n" - html << "\n" - end - - html << "
\n
\n" - html - end - # ── 7. COMMUNITY SPACES ── def render_groups @@ -466,14 +439,15 @@ module CommunityLanding # ── Shared helpers ── - def stat_card(icon_svg, count, label, icon_shape = "circle", round_numbers = false) + def stat_card(icon_svg, count, label, icon_shape = "circle", round_numbers = false, show_label = true) shape_class = icon_shape == "rounded" ? "cl-stat-icon--rounded" : "cl-stat-icon--circle" round_attr = round_numbers ? ' data-round="true"' : '' + label_html = show_label ? "#{e(label)}\n" : "" "
\n" \ "
#{icon_svg}
\n" \ "
\n" \ "0\n" \ - "#{e(label)}\n" \ + "#{label_html}" \ "
\n" \ "
\n" end diff --git a/lib/community_landing/style_builder.rb b/lib/community_landing/style_builder.rb index 2bca9bf..4ad95f9 100644 --- a/lib/community_landing/style_builder.rb +++ b/lib/community_landing/style_builder.rb @@ -27,6 +27,10 @@ module CommunityLanding space_card_bg = hex(@s.groups_card_bg_color.presence) rescue nil topic_card_bg = hex(@s.topics_card_bg_color.presence) rescue nil video_btn_bg = hex(@s.hero_video_button_color.presence) rescue nil + hero_card_dark = hex(@s.hero_card_bg_dark.presence) rescue nil + hero_card_light = hex(@s.hero_card_bg_light.presence) rescue nil + hero_card_opacity = [[@s.hero_card_opacity.to_s.to_f, 0].max, 1].min rescue 0.85 + hero_card_opacity = 0.85 if hero_card_opacity == 0.0 && (@s.hero_card_opacity.to_s.strip.empty? rescue true) accent_rgb = hex_to_rgb(accent) stat_icon_rgb = hex_to_rgb(stat_icon) @@ -35,6 +39,12 @@ module CommunityLanding space_card_bg_val = space_card_bg || "var(--cl-card)" topic_card_bg_val = topic_card_bg || "var(--cl-card)" + # Hero card bg: convert hex + opacity to rgba + hero_card_dark_rgb = hero_card_dark ? hex_to_rgb(hero_card_dark) : "12, 12, 25" + hero_card_light_rgb = hero_card_light ? hex_to_rgb(hero_card_light) : "255, 255, 255" + hero_card_dark_val = "rgba(#{hero_card_dark_rgb}, #{hero_card_opacity})" + hero_card_light_val = "rgba(#{hero_card_light_rgb}, #{hero_card_opacity})" + about_bg_extra = about_bg_img ? ", url('#{about_bg_img}') center/cover no-repeat" : "" video_btn_line = video_btn_bg ? "\n --cl-video-btn-bg: #{video_btn_bg};" : "" @@ -54,6 +64,7 @@ module CommunityLanding --cl-stat-counter-color: #{stat_counter_val}; --cl-space-card-bg: #{space_card_bg_val}; --cl-topic-card-bg: #{topic_card_bg_val};#{video_btn_line} + --cl-hero-card-bg: #{hero_card_dark_val}; --cl-about-gradient: linear-gradient(135deg, #{about_g1}, #{about_g2}, #{about_g3})#{about_bg_extra}; --cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3}); } @@ -72,6 +83,7 @@ module CommunityLanding --cl-stat-counter-color: #{stat_counter_val}; --cl-space-card-bg: #{space_card_bg_val}; --cl-topic-card-bg: #{topic_card_bg_val};#{video_btn_line} + --cl-hero-card-bg: #{hero_card_light_val}; --cl-about-gradient: linear-gradient(135deg, #{about_g1}, #{about_g2}, #{about_g3})#{about_bg_extra}; --cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3}); } @@ -102,7 +114,6 @@ module CommunityLanding ["#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-topics", safe_hex(:topics_bg_dark), safe_hex(:topics_bg_light)], - ["#cl-contributors", safe_hex(:contributors_bg_dark), safe_hex(:contributors_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 b3b8cb0..7d0c53c 100644 --- a/plugin.rb +++ b/plugin.rb @@ -42,10 +42,12 @@ after_initialize do base_url = Discourse.base_url csp = "default-src 'self' #{base_url}; " \ "script-src 'self' 'unsafe-inline'; " \ - "style-src 'self' 'unsafe-inline'; " \ + "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; " \ + "style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com; " \ "img-src 'self' #{base_url} data: https:; " \ "font-src 'self' #{base_url} https://fonts.gstatic.com; " \ "media-src 'self' https:; " \ + "connect-src 'self' #{base_url}; " \ "frame-src https://www.youtube.com https://www.youtube-nocookie.com; " \ "frame-ancestors 'self'" response.headers["Content-Security-Policy"] = csp