// community-landing-admin-tabs v2.5.0 import { withPluginApi } from "discourse/lib/plugin-api"; // Setting descriptions — injected into the admin DOM since the newer // plugin settings page does not render .desc elements automatically. const DESCRIPTIONS = { // ── Master Switch ── community_landing_enabled: "Enable the community landing page for logged-out visitors.", // ── Layout ── section_order: "Order of content sections. Drag to reorder. Available: hero, stats, about, participation, topics, groups, app_cta.", custom_css: "Raw CSS injected after all plugin styles. Use for overrides and tweaks. No style tags needed.", // ── SEO & Meta ── meta_description: "Meta description for search engines and social sharing. If blank, the hero subtitle is used.", og_image_url: "Open Graph image URL for social sharing (1200×630px recommended). If blank, the site logo is used.", favicon_url: "Custom favicon URL (.ico, .png, .svg). If blank, the browser default is used.", json_ld_enabled: "Add JSON-LD structured data (Organization + WebSite schema) for search engines.", // ── Branding: Logo ── logo_dark_url: "Logo image URL for dark mode. Shown in navbar and footer. Leave blank to show site name as text.", logo_light_url: "Logo image URL for light mode. If not set, the dark logo is used for both themes.", logo_height: "Logo height in pixels (16–80). Applies to both navbar and footer logos.", footer_logo_url: "Override logo for the footer only. If not set, the navbar logo is reused.", // ── Colors ── accent_color: "Primary accent color: buttons, links, highlights, gradients, stat icons. Hex value.", accent_hover_color: "Accent color on hover. Should be slightly lighter or darker than the accent.", dark_bg_color: "Page background color for dark mode.", light_bg_color: "Page background color for light mode.", orb_color: "Color of decorative background orbs. Leave blank to use the accent color.", orb_opacity: "Opacity of the background orbs (0–100). Default: 50.", // ── Scroll Animations ── scroll_animation: "How sections animate into view on scroll: fade_up, fade_in, slide_left, slide_right, zoom_in, flip_up, or none.", staggered_reveal_enabled: "Animate child elements (cards, stats) with a staggered delay for a cascading reveal effect.", dynamic_background_enabled: "Enable parallax background orbs that drift as the user scrolls.", mouse_parallax_enabled: "Enable subtle parallax movement of background elements in response to mouse position.", scroll_progress_enabled: "Show a thin progress bar at the top of the page indicating scroll position.", // ── Fonts ── google_font_name: "Google Font family for body text. Must match exact Google Fonts name (e.g. 'Inter', 'Poppins'). Default: Outfit.", title_font_name: "Separate Google Font for titles and headings. Leave blank to use the body font.", // ── Icons ── fontawesome_enabled: "Load FontAwesome 6 Free icons from CDN for use on buttons.", // ── Navbar ── navbar_signin_label: "Sign-in link text. Use 'icon | Label' for FA icon before or 'Label | icon' for after (e.g. 'right-to-bracket | Sign In').", navbar_signin_enabled: "Show the sign-in link in the navbar.", navbar_signin_color_dark: "Sign-in link color for dark mode. Leave blank for default.", navbar_signin_color_light: "Sign-in link color for light mode.", navbar_join_label: "Join button text. Use 'icon | Label' for FA icon before or 'Label | icon' for after (e.g. 'user-plus | Get Started').", navbar_join_enabled: "Show the join/register button in the navbar.", navbar_join_color_dark: "Join button background color for dark mode. Leave blank for accent color.", navbar_join_color_light: "Join button background color for light mode.", navbar_bg_color: "Custom navbar background when scrolled. Leave blank for frosted glass effect.", navbar_border_style: "Border style at the bottom of the navbar when scrolled.", social_twitter_url: "Twitter / X profile URL. Leave blank to hide. Icons appear in navbar before auth buttons.", social_facebook_url: "Facebook page or profile URL. Leave blank to hide.", social_instagram_url: "Instagram profile URL. Leave blank to hide.", social_youtube_url: "YouTube channel URL. Leave blank to hide.", social_tiktok_url: "TikTok profile URL. Leave blank to hide.", social_github_url: "GitHub organization or profile URL. Leave blank to hide.", // ── Hero ── hero_title: "Main headline text in the hero section.", hero_title_size: "Hero title font size in pixels. 0 = use default responsive size.", hero_accent_word: "Which word gets the accent shimmer. 0 = last word, 1 = first, 2 = second, etc.", hero_subtitle: "Supporting text below the headline. Describe your community's purpose.", hero_card_enabled: "Display hero content inside a rounded card with border and shadow.", hero_image_first: "Show hero image above text on mobile / left on desktop. Off = text first.", hero_background_image_url: "Full-bleed background image behind the hero. In card mode, fills the card with overlay.", hero_image_urls: "Images for the right side of the hero. One URL per line, up to 5. One is shown randomly per page load. Use the Add Image button or paste URLs.", hero_image_max_height: "Maximum height for the hero image in pixels (100–1200).", hero_primary_button_enabled: "Show the primary CTA button in the hero.", hero_primary_button_label: "Primary button text. Use 'icon | Label' for FA icon before or 'Label | icon' for after (e.g. 'rocket | Get Started').", hero_primary_button_url: "URL the primary button links to. Relative path or absolute URL.", hero_secondary_button_enabled: "Show the secondary CTA button in the hero.", hero_secondary_button_label: "Secondary button text. Use 'icon | Label' for FA icon before or 'Label | icon' for after (e.g. 'arrow-right | Learn More').", hero_secondary_button_url: "URL the secondary button links to.", hero_primary_btn_color_dark: "Primary button background for dark mode. Leave blank for accent color.", hero_primary_btn_color_light: "Primary button background for light mode.", hero_secondary_btn_color_dark: "Secondary button background for dark mode. Leave blank for glass style.", hero_secondary_btn_color_light: "Secondary button background for light mode.", hero_video_url: "Hero video URL (MP4 or YouTube). Play button opens a lightbox modal.", hero_video_button_color: "Custom color for the video play button. Leave blank for accent color.", hero_video_blur_on_hover: "Blur the hero image when hovering the play button.", hero_bg_dark: "Hero section background for dark mode. Leave blank for default.", hero_bg_light: "Hero section background for light mode.", hero_min_height: "Minimum hero section height in pixels. 0 = auto height.", hero_border_style: "Border style at the bottom of the hero section.", hero_card_bg_dark: "Hero card overlay background for dark mode. Only in card mode.", hero_card_bg_light: "Hero card overlay background for light mode.", hero_card_opacity: "Hero card background opacity (0–1). Lower = more transparent. Default: 0.85.", // ── Contributors (Hero Creators) ── contributors_enabled: "Show top 3 creators in the hero with gold, silver, bronze badges.", contributors_title: "Heading above the creators list.", contributors_title_enabled: "Show the heading above the creators list.", contributors_count_label: "Label before each creator's count (e.g. 'Cheers'). Blank = no prefix.", contributors_count_label_enabled: "Show the count label prefix before activity counts.", contributors_alignment: "Horizontal alignment of the creators list: center or left.", contributors_pill_max_width: "Max width per creator pill card in pixels (200–600).", contributors_pill_bg_dark: "Creator pill background for dark mode. Leave blank for glass styling.", contributors_pill_bg_light: "Creator pill background for light mode.", contributors_days: "Lookback period in days for calculating top contributors.", contributors_count: "Number of top contributors to fetch (top 3 in hero, 4–10 in Participation).", // ── Participation ── participation_enabled: "Show Participation section: testimonial cards with leaderboard bios (positions 4–10).", participation_title_enabled: "Show heading above participation cards.", participation_title: "Heading text above participation cards. Use 'icon | Title' for FA icon (e.g. 'users | Participation').", participation_bio_max_length: "Max characters from each user's bio (50–500). Longer bios are truncated.", participation_icon_color: "Color for the decorative quote icon and avatar border. Leave blank for accent color.", participation_card_bg_dark: "Participation card background for dark mode.", participation_card_bg_light: "Participation card background for light mode.", participation_bg_dark: "Section background for dark mode. Leave blank for default.", participation_bg_light: "Section background for light mode.", participation_min_height: "Minimum section height in pixels. 0 = auto.", participation_border_style: "Border style at the bottom of the section.", participation_title_size: "Section title font size in pixels. 0 = use default.", participation_topics_label: "Label for the Topics stat. Use 'icon | Label' for FA icon (e.g. 'file-lines | Topics'). Default SVG used when no icon specified.", participation_posts_label: "Label for the Posts stat. Use 'icon | Label' for FA icon (e.g. 'comment | Posts'). Default SVG used when no icon specified.", participation_likes_label: "Label for the Likes stat. Use 'icon | Label' for FA icon (e.g. 'heart | Likes'). Default SVG used when no icon specified.", participation_stat_color: "Color for stat numbers (Topics, Posts, Likes). Leave blank for default text color.", participation_stat_label_color: "Color for stat labels below the numbers. Leave blank for muted text.", participation_bio_color: "Color for the bio excerpt text. Leave blank for default text color.", participation_name_color: "Color for the @username. Leave blank for default strong text color.", participation_meta_color: "Color for the join date and location line. Leave blank for accent color.", // ── Stats ── stats_enabled: "Show the stats section with live community counters.", stat_labels_enabled: "Show text labels below stat counters (e.g. 'Members'). Off = numbers and icons only.", stats_title_enabled: "Show section heading above the stats row.", stats_title: "Section heading text above the stats. Use 'icon | Title' for FA icon (e.g. 'chart-bar | Premium Stats').", stats_title_size: "Stats title font size in pixels. 0 = use default.", stat_card_style: "Stat card style: rectangle, rounded, pill, or minimal (no background).", stat_icon_color: "Color for stat counter icons.", stat_icon_bg_color: "Background behind each stat icon. Leave blank for subtle accent tint.", stat_icon_shape: "Icon background shape: circle or rounded square.", stat_counter_color: "Color for stat counter numbers. Leave blank for default text color.", stat_members_label: "Custom label for the Members stat.", stat_topics_label: "Custom label for the Topics stat.", stat_posts_label: "Custom label for the Posts stat.", stat_likes_label: "Custom label for the Likes stat.", stat_chats_label: "Custom label for the Chats stat. Shows chat messages if Chat plugin is active.", stat_round_numbers: "Round large numbers: 1000 → 1K, 12345 → 12.3K, 1234567 → 1.2M.", stat_card_bg_dark: "Stat card background for dark mode.", stat_card_bg_light: "Stat card background for light mode.", stats_bg_dark: "Section background for dark mode. Leave blank for default.", stats_bg_light: "Section background for light mode.", stats_min_height: "Minimum section height in pixels. 0 = auto.", stats_border_style: "Border style at the bottom of the stats section.", // ── About ── about_enabled: "Show the About section: card with heading, quote icon, description, and author attribution.", about_heading_enabled: "Show the bold heading at the top of the About card.", about_heading: "Heading text at the top of the About card. Use 'icon | Title' for FA icon (e.g. 'info-circle | About Community').", about_title: "Author or community name in the card's bottom attribution.", about_title_size: "About heading font size in pixels. 0 = use default.", about_role: "Subtitle below author name (e.g. 'Community Manager'). Blank = site name.", about_body: "Main body text. Supports HTML: p, a, strong, em, ul, li, br.", about_image_url: "Avatar image next to author name. Square images work best.", about_card_color_dark: "About card background for dark mode.", about_card_color_light: "About card background for light mode.", about_background_image_url: "Background image on the card. Use a subtle pattern or texture.", about_bg_dark: "Section background for dark mode. Leave blank for default.", about_bg_light: "Section background for light mode.", about_min_height: "Minimum section height in pixels. 0 = auto.", about_border_style: "Border style at the bottom of the about section.", // ── Trending ── topics_enabled: "Show Trending Discussions: scrollable row of active topic cards with live data.", topics_title_enabled: "Show heading above the topic cards.", topics_title: "Heading text above the topic cards. Use 'icon | Title' for FA icon (e.g. 'fire | Trending Discussions').", topics_title_size: "Trending title font size in pixels. 0 = use default.", topics_count: "Number of trending topic cards to display.", topics_card_bg_dark: "Topic card background for dark mode.", topics_card_bg_light: "Topic card background for light mode.", topics_bg_dark: "Section background for dark mode. Leave blank for default.", topics_bg_light: "Section background for light mode.", topics_min_height: "Minimum section height in pixels. 0 = auto.", topics_border_style: "Border style at the bottom of the trending section.", // ── Spaces ── groups_enabled: "Show Community Spaces: grid of group cards with icon, name, and member count.", groups_title_enabled: "Show heading above group cards.", groups_title: "Heading text above group cards. Use 'icon | Title' for FA icon (e.g. 'layer-group | Community Spaces').", groups_title_size: "Spaces title font size in pixels. 0 = use default.", groups_count: "Number of group cards to display.", groups_selected: "Show only specific groups. Enter names separated by pipes (e.g. designers|developers). Blank = auto-select.", groups_show_description: "Show group description text below the group name on each card.", groups_description_max_length: "Max characters for group descriptions (30–500). Longer text is truncated.", groups_card_bg_dark: "Space card background for dark mode.", groups_card_bg_light: "Space card background for light mode.", splits_background_image_url: "Background image for the splits section (Groups + FAQ row).", // ── FAQ ── faq_enabled: "Show FAQ accordion alongside the Spaces section. One item opens at a time.", faq_title_enabled: "Show heading above the FAQ accordion.", faq_title: "Heading text above the FAQ. Use 'icon | Title' for FA icon (e.g. 'circle-question | FAQ').", faq_title_size: "FAQ title font size in pixels. 0 = use default.", faq_items: 'FAQ items as JSON array: [{\"q\":\"Question\",\"a\":\"Answer\"}]. HTML supported in answers.', faq_card_bg_dark: "FAQ card background for dark mode.", faq_card_bg_light: "FAQ card background for light mode.", // ── App CTA ── show_app_ctas: "Show App Download CTA: gradient banner with headline, badges, and promo image.", ios_app_url: "Apple App Store URL. Leave blank to hide iOS badge.", android_app_url: "Google Play Store URL. Leave blank to hide Android badge.", ios_app_badge_image_url: "Custom iOS badge image. Leave blank for default.", android_app_badge_image_url: "Custom Android badge image. Leave blank for default.", app_badge_height: "Badge height in pixels (30–80).", app_badge_style: "Badge border-radius: rounded, pill, or square.", app_cta_headline: "Bold headline in the app download banner. Use 'icon | Title' for FA icon (e.g. 'mobile-screen | Get the App').", app_cta_title_size: "App CTA headline font size in pixels. 0 = use default.", app_cta_subtext: "Supporting text below the headline.", app_cta_gradient_start_dark: "Gradient start color for dark mode. Leave blank for accent.", app_cta_gradient_start_light: "Gradient start color for light mode.", app_cta_gradient_mid_dark: "Gradient middle color for dark mode.", app_cta_gradient_mid_light: "Gradient middle color for light mode.", app_cta_gradient_end_dark: "Gradient end color for dark mode.", app_cta_gradient_end_light: "Gradient end color for light mode.", app_cta_image_url: "Promo image on the right (e.g. phone mockup). PNG for transparent bg.", app_cta_headline_color_dark: "Headline text color for dark mode. Default: white.", app_cta_headline_color_light: "Headline text color for light mode. Default: dark navy.", app_cta_subtext_color_dark: "Subtext color for dark mode. Default: white at 75%.", app_cta_subtext_color_light: "Subtext color for light mode. Default: dark navy at 70%.", app_cta_bg_dark: "Section background for dark mode. Leave blank for default.", app_cta_bg_light: "Section background for light mode.", app_cta_min_height: "Minimum section height in pixels. 0 = auto.", app_cta_border_style: "Border style at the bottom of the app CTA section.", // ── Footer ── footer_description: "Description paragraph above the footer bar.", footer_text: "Optional HTML text inside the footer bar. Supports: p, a, strong, em, ul, li, br.", footer_links: 'Footer links as JSON array: [{\"label\":\"Terms\",\"url\":\"/tos\"}].', footer_bg_dark: "Footer background for dark mode. Leave blank for default.", footer_bg_light: "Footer background for light mode.", footer_border_style: "Border style at the top of the footer bar.", }; const TABS = [ { id: "settings", label: "Settings", settings: new Set([ "community_landing_enabled", "section_order", "custom_css", "meta_description", "og_image_url", "favicon_url", "json_ld_enabled", "logo_dark_url", "logo_light_url", "logo_height", "footer_logo_url", "accent_color", "accent_hover_color", "dark_bg_color", "light_bg_color", "orb_color", "orb_opacity", "scroll_animation", "staggered_reveal_enabled", "dynamic_background_enabled", "mouse_parallax_enabled", "scroll_progress_enabled", "google_font_name", "title_font_name", "fontawesome_enabled" ]) }, { id: "navbar", label: "Navbar", settings: new Set([ "navbar_signin_label", "navbar_signin_enabled", "navbar_signin_color_dark", "navbar_signin_color_light", "navbar_join_label", "navbar_join_enabled", "navbar_join_color_dark", "navbar_join_color_light", "navbar_bg_color", "navbar_border_style", "social_twitter_url", "social_facebook_url", "social_instagram_url", "social_youtube_url", "social_tiktok_url", "social_github_url" ]) }, { id: "hero", label: "Hero", settings: new Set([ "hero_title", "hero_accent_word", "hero_subtitle", "hero_title_size", "hero_card_enabled", "hero_image_first", "hero_background_image_url", "hero_image_urls", "hero_image_max_height", "hero_primary_button_enabled", "hero_primary_button_label", "hero_primary_button_url", "hero_secondary_button_enabled", "hero_secondary_button_label", "hero_secondary_button_url", "hero_primary_btn_color_dark", "hero_primary_btn_color_light", "hero_secondary_btn_color_dark", "hero_secondary_btn_color_light", "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_card_bg_dark", "hero_card_bg_light", "hero_card_opacity", "contributors_enabled", "contributors_title", "contributors_title_enabled", "contributors_count_label", "contributors_count_label_enabled", "contributors_alignment", "contributors_pill_max_width", "contributors_pill_bg_dark", "contributors_pill_bg_light", "contributors_days", "contributors_count" ]) }, { id: "participation", label: "Participation", settings: new Set([ "participation_enabled", "participation_title_enabled", "participation_title", "participation_title_size", "participation_bio_max_length", "participation_topics_label", "participation_posts_label", "participation_likes_label", "participation_icon_color", "participation_card_bg_dark", "participation_card_bg_light", "participation_bg_dark", "participation_bg_light", "participation_min_height", "participation_border_style", "participation_stat_color", "participation_stat_label_color", "participation_bio_color", "participation_name_color", "participation_meta_color" ]) }, { id: "stats", label: "Stats", settings: new Set([ "stats_enabled", "stat_labels_enabled", "stats_title_enabled", "stats_title", "stats_title_size", "stat_card_style", "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", "stat_card_bg_dark", "stat_card_bg_light", "stats_bg_dark", "stats_bg_light", "stats_min_height", "stats_border_style" ]) }, { id: "about", label: "About", settings: new Set([ "about_enabled", "about_heading_enabled", "about_heading", "about_title", "about_title_size", "about_role", "about_body", "about_image_url", "about_card_color_dark", "about_card_color_light", "about_background_image_url", "about_bg_dark", "about_bg_light", "about_min_height", "about_border_style" ]) }, { id: "topics", label: "Topics", settings: new Set([ "topics_enabled", "topics_title_enabled", "topics_title", "topics_title_size", "topics_count", "topics_card_bg_dark", "topics_card_bg_light", "topics_bg_dark", "topics_bg_light", "topics_min_height", "topics_border_style" ]) }, { id: "groups", label: "Groups", settings: new Set([ "groups_enabled", "groups_title_enabled", "groups_title", "groups_title_size", "groups_count", "groups_selected", "groups_show_description", "groups_description_max_length", "groups_card_bg_dark", "groups_card_bg_light", "splits_background_image_url" ]) }, { id: "faq", label: "FAQ", settings: new Set([ "faq_enabled", "faq_title_enabled", "faq_title", "faq_title_size", "faq_items", "faq_card_bg_dark", "faq_card_bg_light" ]) }, { id: "appcta", label: "App CTA", settings: new Set([ "show_app_ctas", "ios_app_url", "android_app_url", "ios_app_badge_image_url", "android_app_badge_image_url", "app_badge_height", "app_badge_style", "app_cta_headline", "app_cta_title_size", "app_cta_subtext", "app_cta_gradient_start_dark", "app_cta_gradient_start_light", "app_cta_gradient_mid_dark", "app_cta_gradient_mid_light", "app_cta_gradient_end_dark", "app_cta_gradient_end_light", "app_cta_image_url", "app_cta_headline_color_dark", "app_cta_headline_color_light", "app_cta_subtext_color_dark", "app_cta_subtext_color_light", "app_cta_bg_dark", "app_cta_bg_light", "app_cta_min_height", "app_cta_border_style" ]) }, { id: "footer", label: "Footer", settings: new Set([ "footer_description", "footer_text", "footer_links", "footer_bg_dark", "footer_bg_light", "footer_border_style" ]) } ]; // Tabs that depend on a section-enable toggle. // When the toggle is OFF the tab shows a notice instead of the full settings list. const TAB_ENABLE_SETTINGS = { hero: { setting: "contributors_enabled", label: "Contributors", onlySettings: [ "contributors_enabled", "contributors_title", "contributors_title_enabled", "contributors_count_label", "contributors_count_label_enabled", "contributors_alignment", "contributors_pill_max_width", "contributors_pill_bg_dark", "contributors_pill_bg_light", "contributors_days", "contributors_count" ]}, participation: { setting: "participation_enabled", label: "Participation" }, stats: { setting: "stats_enabled", label: "Stats" }, about: { setting: "about_enabled", label: "About" }, topics: { setting: "topics_enabled", label: "Topics" }, groups: { setting: "groups_enabled", label: "Groups" }, faq: { setting: "faq_enabled", label: "FAQ" }, appcta: { setting: "show_app_ctas", label: "App CTA" }, }; // Image URL settings that get upload buttons injected in the admin panel. // "multi: true" means pipe-separated list (appends rather than replaces). const IMAGE_UPLOAD_SETTINGS = { og_image_url: { label: "Upload Image", multi: false }, favicon_url: { label: "Upload Favicon", multi: false }, logo_dark_url: { label: "Upload Logo", multi: false }, logo_light_url: { label: "Upload Logo", multi: false }, footer_logo_url: { label: "Upload Logo", multi: false }, hero_background_image_url: { label: "Upload Image", multi: false }, hero_image_urls: { label: "Add Image", multi: true }, about_image_url: { label: "Upload Image", multi: false }, about_background_image_url: { label: "Upload Image", multi: false }, ios_app_badge_image_url: { label: "Upload Badge", multi: false }, android_app_badge_image_url: { label: "Upload Badge", multi: false }, app_cta_image_url: { label: "Upload Image", multi: false }, splits_background_image_url: { label: "Upload Image", multi: false }, }; let currentTab = "settings"; let filterActive = false; let isActive = false; let recheckTimer = null; function getContainer() { return ( document.querySelector(".admin-plugin-config-area") || document.querySelector(".admin-detail") ); } function applyTabFilter() { const container = getContainer(); if (!container) return; const tab = TABS.find((t) => t.id === currentTab); if (!tab) return; container.querySelectorAll(".row.setting[data-setting]").forEach((row) => { const name = row.getAttribute("data-setting"); row.classList.toggle( "cl-tab-hidden", !filterActive && !tab.settings.has(name) ); }); // Update filter-active dimming on native nav or standalone tab bar const nativeNav = document.querySelector(".d-nav-submenu__tabs"); if (nativeNav) { nativeNav.classList.toggle("cl-filter-active", filterActive); } const standaloneBar = document.querySelector(".cl-admin-tabs"); if (standaloneBar) { standaloneBar.classList.toggle("filter-active", filterActive); } } function updateActiveStates(activeId) { // Native nav: our injected
  • tabs document.querySelectorAll("li.cl-admin-tab").forEach((li) => { li.classList.toggle("active", li.dataset.tab === activeId); }); // Native nav: the original Settings
  • // Discourse's router keeps aria-current="true" on the native , so we // must also add a class to suppress its active styling when another tab // is selected. const nativeItem = document.querySelector(".cl-native-settings-item"); if (nativeItem) { const isSettings = activeId === "settings"; nativeItem.classList.toggle("active", isSettings); nativeItem.classList.toggle("cl-tab-inactive", !isSettings); } // Standalone fallback: