Changes for page Home
Last modified by Isaac Mejia on 2025/12/15 18:27
From version 32.1
edited by Isaac Mejia
on 2025/12/15 17:49
on 2025/12/15 17:49
Change comment:
There is no comment for this version
To version 5.1
edited by Isaac Mejia
on 2025/11/21 16:35
on 2025/11/21 16:35
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -1,249 +1,74 @@ 1 -{{velocity}} 2 -## --------------------------------------------- 3 -## KB Home (Main.WebHome) 4 -## Discover category landing pages dynamically. 5 -## --------------------------------------------- 1 +{{html clean="false"}} 6 6 7 -## 1) Find all top-level category pages under "Main" 8 -## We exclude: 9 -## - WebHome itself 10 -## - any technical KB* pages (KBStyles, KBArticleHeader, etc.) 11 -## - hidden docs 12 -#set ($xwql = 13 - "select doc.fullName, doc.title, doc.name " + 14 - "from XWikiDocument doc " + 15 - "where doc.space = 'Main' " + 16 - "and doc.name <> 'WebHome' " + 17 - "and doc.name not like 'KB%' " + 18 - "and doc.hidden <> true " + 19 - "order by lower(doc.title)" 20 -)## 21 -#set ($query = $services.query.xwql($xwql))## 22 -#set ($rows = $query.execute())## 3 +<div class="kb-hero"> 4 + <h1 class="kb-hero-title">Welcome to the Member Solutions Knowledge Base</h1> 5 + <p class="kb-hero-subtitle"> 6 + Guides, troubleshooting, and best practices to help you run a better business. 7 + </p> 23 23 24 -## 2) Icon map (optional overrides) 25 -#set ($kbCategoryIcons = { 26 - "Member Management": "👥", 27 - "Configuration": "⚙️", 28 - "Billing & Payments": "💳", 29 - "Payment Management": "💳", 30 - "Reporting & Analytics": "📊", 31 - "Notifications": "🔔", 32 - "Integrations": "🔗" 33 -})## 9 + <!-- Simple search form that goes to the WebSearch page --> 10 + <form class="kb-hero-search" method="get" action="/bin/view/Main/WebSearch"> 11 + <input type="text" name="text" placeholder="Search for articles..." /> 12 + </form> 13 +</div> 34 34 35 -## 3) Optional hand-authored descriptions for known categories 36 -#set ($kbCategoryDescriptions = { 37 - "Member Management": "How to manage members, families, and profiles.", 38 - "Configuration": "Set up locations, billing, and core system settings.", 39 - "Billing & Payments": "Invoices, collections, and payment processing.", 40 - "Payment Management": "Articles and guides for Payment Management.", 41 - "Reporting & Analytics": "Understand your numbers and performance.", 42 - "Notifications": "Articles and guides for Notifications.", 43 - "Integrations": "Connect Member Solutions with other tools in your stack." 44 -})## 15 +<div class="kb-section"> 16 + <h2 class="kb-section-title">Browse by category</h2> 17 + <div class="kb-category-grid"> 45 45 46 -## 4) Build a normalized list of category objects 47 -#set ($kbCategories = [])## 19 + <a class="kb-card" href="/bin/view/Main/GettingStarted"> 20 + <h3 class="kb-card-title">Getting Started</h3> 21 + <p class="kb-card-body"> 22 + Start here to set up your account and learn the basics. 23 + </p> 24 + <span class="kb-card-meta">Setup • Onboarding</span> 25 + </a> 48 48 49 -#foreach ($row in $rows)## 50 - #set ($fullName = $row.get(0))## ## e.g. "Main.Member Management" 51 - #set ($title = $row.get(1))## ## display title 52 - #set ($pageName = $row.get(2))## ## page name, used in URL & article space 53 - #set ($catDoc = $xwiki.getDocument($fullName))## 27 + <a class="kb-card" href="/bin/view/Main/BillingPayments"> 28 + <h3 class="kb-card-title">Billing & Payments</h3> 29 + <p class="kb-card-body"> 30 + Invoices, payments, autopay, collections, and more. 31 + </p> 32 + <span class="kb-card-meta">Finance</span> 33 + </a> 54 54 55 - ## Label shown on the card 56 - #set ($label = $catDoc.displayTitle)## 57 - #if ("$!label" == "")## 58 - #set ($label = $pageName)## 59 - #end## 35 + <a class="kb-card" href="/bin/view/Main/MemberManagement"> 36 + <h3 class="kb-card-title">Member Management</h3> 37 + <p class="kb-card-body"> 38 + Day-to-day operations for memberships and classes. 39 + </p> 40 + <span class="kb-card-meta">Members • Attendance</span> 41 + </a> 60 60 61 - ## Description (custom if defined, otherwise auto) 62 - #set ($desc = $kbCategoryDescriptions.get($label))## 63 - #if ("$!desc" == "")## 64 - #set ($desc = "Articles and guides for $label.")## 65 - #end## 43 + <a class="kb-card" href="/bin/view/Main/Integrations"> 44 + <h3 class="kb-card-title">Integrations</h3> 45 + <p class="kb-card-body"> 46 + Automations, data sync, APIs, and external tools. 47 + </p> 48 + <span class="kb-card-meta">Automations</span> 49 + </a> 66 66 67 - ## Article space: Main.<PageName with spaces replaced by underscores> 68 - #set ($articleSpace = "Main." + $pageName.replace(" ", "_"))## 69 - 70 - ## Count non-hidden, non-WebHome pages in that article space 71 - #set ($articleCount = 0)## 72 - #set ($countXwql = 73 - "select count(doc.fullName) " + 74 - "from XWikiDocument doc " + 75 - "where doc.space = :space " + 76 - "and doc.name <> 'WebHome' " + 77 - "and doc.hidden <> true" 78 - )## 79 - #set ($countQuery = $services.query.xwql($countXwql).bindValue("space", $articleSpace))## 80 - #set ($resultList = $countQuery.execute())## 81 - #if ($resultList && $resultList.size() > 0)## 82 - #set ($articleCount = $resultList.get(0))## 83 - #end## 84 - 85 - ## Icon, with a sensible default 86 - #set ($icon = $kbCategoryIcons.get($label))## 87 - #if ("$!icon" == "")## 88 - #set ($icon = "📘")## 89 - #end## 90 - 91 - ## Build clean URL: /bin/view/Main/<PageName> (no trailing slash) 92 - #set ($encoded = $escapetool.url($pageName))## 93 - #set ($cleanUrl = "/bin/view/Main/$encoded")## 94 - 95 - ## Push into our categories array as a small map 96 - #set ($entry = { 97 - "label": $label, 98 - "pageName": $pageName, 99 - "desc": $desc, 100 - "icon": $icon, 101 - "url": $cleanUrl, 102 - "count": $articleCount 103 - })## 104 - #set ($discard = $kbCategories.add($entry))## 105 -#end## 106 - 107 -## --- HARD ALLOWLIST: only show these categories on the homepage --- 108 -#set ($allowedCategories = ["Check-In","Configuration","Lead Management","Member Management","Member Portal","Notifications","Payment Management","Reporting"]) 109 - 110 -#foreach ($row in $catRows) 111 - #set ($fullName = $row.get(0)) 112 - #set ($title = $row.get(1)) 113 - #set ($pageName = $row.get(2)) 114 - #set ($catDoc = $xwiki.getDocument($fullName)) 115 - 116 - #set ($label = $catDoc.displayTitle) 117 - #if ("$!label" == "") 118 - #set ($label = $pageName) 119 - #end 120 - 121 - ## Only include categories we actually want 122 - #if ($allowedCategories.contains($label)) 123 - 124 - #set ($articleSpace = "Main." + $pageName.replace(" ", "_")) 125 - #set ($entry = {"label": $label, "space": $articleSpace}) 126 - #set ($discard = $kbCategories.add($entry)) 127 - 128 - #end 129 -#end 130 - 131 -{{html clean="false"}} 132 -<div class="kb-home"> 133 - 134 - <!-- HERO --> 135 - <div class="kb-hero"> 136 - <h1 class="kb-hero-title">Member Solutions Knowledge Base</h1> 137 - <p class="kb-hero-subtitle"> 138 - Guides, walkthroughs, and best practices to help you and your team get the most out of the platform. 139 - </p> 140 - 141 - <!-- Hero search wired to custom KB search page --> 142 - <div class="kb-hero-search"> 143 - <form action="$xwiki.getURL('Main.KBSearch', 'view')" method="get"> 144 - <input 145 - type="text" 146 - name="text" 147 - placeholder="Search for an article (e.g. "family membership")" 148 - aria-label="Search the knowledge base" 149 - /> 150 - <!-- optional: add a button if you want --> 151 - <!-- <button type="submit" class="kb-search-button">Search</button> --> 152 - </form> 153 - </div> 154 154 </div> 52 +</div> 155 155 156 - <!-- CATEGORY GRID --> 157 - <div class="kb-section"> 158 - <h2 class="kb-section-title">Browse by category</h2> 54 +<div class="kb-section"> 55 + <h2 class="kb-section-title">Popular articles</h2> 56 + <ul class="kb-popular-list"> 57 + <li><a href="/bin/view/Main/ImportingData">How to import member data</a></li> 58 + <li><a href="/bin/view/Main/BillingBasics">Billing basics: everything you need to know</a></li> 59 + <li><a href="/bin/view/Main/DigitalCheckin">Using digital check-in</a></li> 60 + <li><a href="/bin/view/Main/EventSetup">Creating your first event</a></li> 61 + </ul> 62 +</div> 159 159 160 - <div class="kb-category-grid"> 161 - #foreach ($cat in $kbCategories) 162 - #set ($label = $cat.get("label")) 163 - #set ($desc = $cat.get("desc")) 164 - #set ($icon = $cat.get("icon")) 165 - #set ($url = $cat.get("url")) 166 - #set ($count = $cat.get("count")) 167 - 168 - <a class="kb-card" href="$url"> 169 - <div> 170 - <div class="kb-card-title"> 171 - <span class="kb-card-icon">$icon</span> 172 - $escapetool.xml($label) 173 - </div> 174 - <div class="kb-card-body"> 175 - $escapetool.xml($desc) 176 - </div> 177 - </div> 178 - <div class="kb-card-meta"> 179 - #if ($count == 1) 180 - 1 article 181 - #elseif ($count > 1) 182 - $count articles 183 - #else 184 - Category 185 - #end 186 - </div> 187 - </a> 188 - #end 189 - </div> 64 +<div class="kb-cta"> 65 + <div class="kb-cta-content"> 66 + <h2>Need more help?</h2> 67 + <p>Our support team is here for you.</p> 68 + <a class="kb-cta-button" href="/bin/view/Main/ContactSupport"> 69 + Contact Support 70 + </a> 190 190 </div> 191 - 192 192 </div> 193 193 194 -<style> 195 -/* HOMEPAGE HERO OVERRIDE – BIGGER + MORE BREATHING ROOM */ 196 - 197 -/* Scope tightly so we only touch KB home hero */ 198 -body.viewbody.page-WebHome[class*="space-Main"] #xwikicontent .kb-hero { 199 - padding: 4.2rem 1rem 3.3rem !important; /* more air above + below */ 200 - max-width: 1100px; 201 - margin: 0 auto; 202 -} 203 - 204 -/* Title */ 205 -body.viewbody.page-WebHome[class*="space-Main"] #xwikicontent .kb-hero-title { 206 - font-size: 3.5rem !important; 207 - font-weight: 800 !important; 208 - line-height: 1.15; 209 - margin-bottom: 1rem !important; 210 - color: #0f172a; 211 -} 212 - 213 -/* Subtitle */ 214 -body.viewbody.page-WebHome[class*="space-Main"] #xwikicontent .kb-hero-subtitle { 215 - font-size: 1.35rem !important; 216 - line-height: 1.7; 217 - color: #4b5563 !important; 218 - max-width: 720px; 219 - margin: 0 auto 2.3rem !important; /* more space before search bar */ 220 -} 221 - 222 -/* Search bar – taller + larger text */ 223 -body.viewbody.page-WebHome[class*="space-Main"] #xwikicontent .kb-hero-search input[type="text"] { 224 - max-width: 650px !important; 225 - padding: 1.25rem 1.6rem !important; 226 - font-size: 1.2rem !important; 227 - border-radius: 999px; 228 - border: 1px solid #d1d5db; 229 - box-shadow: 230 - 0 26px 60px rgba(15, 23, 42, 0.14), 231 - 0 2px 4px rgba(15, 23, 42, 0.06) !important; 232 -} 233 - 234 -/* Placeholder text tone/size */ 235 -body.viewbody.page-WebHome[class*="space-Main"] #xwikicontent .kb-hero-search input[type="text"]::placeholder { 236 - font-size: 1.15rem; 237 - color: #9ca3af; 238 -} 239 - 240 -/* Extra space between hero and "Browse by category" */ 241 -body.viewbody.page-WebHome[class*="space-Main"] #xwikicontent .kb-section { 242 - margin-top: 4.6rem !important; 243 -} 244 -</style> 245 - 246 246 {{/html}} 247 -{{/velocity}} 248 - 249 -{{include reference="KBSupportCTA.WebHome"/}}