@okjavis/nodebb-theme-javis 1.0.1 → 1.3.0

package/scss/_variables.scss

@@ -0,0 +1,54 @@
+// ============================================
+// JAVIS Design System – Tokens
+// ============================================
+
+// Brand Colors
+$jv-primary: #0051ff;
+$jv-primary-hover: #0044dd;
+$jv-primary-soft: rgba(0, 81, 255, 0.12);
+
+// Neutrals
+$jv-bg: #f5f6f8;              // app background
+$jv-surface: #ffffff;         // cards, panels
+$jv-border-subtle: rgba(0,0,0,0.06);
+$jv-border-strong: rgba(0,0,0,0.12);
+
+// Text
+$jv-text-main: #111111;
+$jv-text-muted: #6b7280;
+$jv-text-soft: #9ca3af;
+
+// Radii
+$jv-radius-xs: 4px;
+$jv-radius-sm: 8px;
+$jv-radius-md: 12px;
+$jv-radius-lg: 16px;
+$jv-radius-pill: 999px;
+
+// Shadows
+$jv-shadow-soft: 0 2px 8px rgba(0,0,0,0.04);
+$jv-shadow-card: 0 4px 10px rgba(0,0,0,0.05);
+$jv-shadow-button: 0 4px 12px rgba(0, 81, 255, 0.25);
+$jv-shadow-button-hover: 0 6px 16px rgba(0, 81, 255, 0.35);
+
+// Spacing (8pt-ish scale)
+$jv-space-2: 4px;
+$jv-space-4: 8px;
+$jv-space-6: 12px;
+$jv-space-8: 16px;
+$jv-space-10: 20px;
+$jv-space-12: 24px;
+
+// Typography
+$jv-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
+$jv-font-size-base: 15px;
+$jv-font-size-sm: 13px;
+$jv-font-size-xs: 12px;
+$jv-font-size-lg: 18px;
+$jv-font-size-xl: 22px;
+$jv-font-size-xxl: 32px;
+
+// Line Heights
+$jv-line-height-base: 1.52;
+$jv-line-height-tight: 1.4;
+$jv-line-height-relaxed: 1.6;

package/scss/overrides.scss

@@ -0,0 +1,39 @@
+// ============================================
+// JAVIS Theme - Bootstrap Variable Overrides
+// This file is imported BEFORE Bootstrap variables
+// Use it to customize Bootstrap's defaults
+// ============================================
+
+// Import Harmony's overrides first (inherits their Bootstrap customizations)
+@import "nodebb-theme-harmony/scss/overrides";
+
+// JAVIS Brand Colors
+$primary: #0051ff;
+$link-color: #0051ff;
+
+// Typography
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
+
+// Body
+$body-bg: #f5f6f8;
+$body-color: #111111;
+
+// Borders
+$border-radius: 8px;
+$border-radius-sm: 4px;
+$border-radius-lg: 12px;
+$border-radius-pill: 999px;
+
+// Buttons
+$btn-border-radius: 999px;
+$btn-border-radius-sm: 999px;
+$btn-border-radius-lg: 999px;
+
+// Cards
+$card-border-radius: 16px;
+$card-border-color: rgba(0, 0, 0, 0.05);
+
+// Inputs
+$input-border-radius: 999px;
+$input-focus-border-color: #0051ff;
+$input-focus-box-shadow: 0 0 0 3px rgba(0, 81, 255, 0.12);

package/static/lib/theme.js

@@ -10,8 +10,45 @@
   $(document).ready(function() {
     console.log('JAVIS Community Theme initialized');
 
-    // Add any custom client-side interactions here
-    // Example: smooth scrolling, animations, custom widgets, etc.
+    // Ensure sidebar toggle works (reinitialize if Harmony's handler isn't loaded)
+    initSidebarToggle();
   });
 
+  function initSidebarToggle() {
+    // Check if the toggle element exists
+    var toggleEl = $('[component="sidebar/toggle"]');
+    if (!toggleEl.length) {
+      console.log('JAVIS: Sidebar toggle element not found');
+      return;
+    }
+
+    // Remove any existing handlers to avoid duplicates, then add our handler
+    toggleEl.off('click.javis').on('click.javis', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var sidebarEl = $('.sidebar');
+      sidebarEl.toggleClass('open');
+
+      console.log('JAVIS: Sidebar toggled, open:', sidebarEl.hasClass('open'));
+
+      // Save preference if user is logged in
+      if (typeof app !== 'undefined' && app.user && app.user.uid) {
+        require(['api'], function(api) {
+          api.put('/users/' + app.user.uid + '/settings', {
+            settings: {
+              openSidebars: sidebarEl.hasClass('open') ? 'on' : 'off',
+            },
+          }).catch(function(err) {
+            console.warn('JAVIS: Could not save sidebar preference', err);
+          });
+        });
+      }
+
+      $(window).trigger('action:sidebar.toggle');
+    });
+
+    console.log('JAVIS: Sidebar toggle initialized');
+  }
+
 })();

package/templates/partials/header/brand.tpl

@@ -0,0 +1,11 @@
+{{{ if widgets.brand-header.length }}}
+<div class="container-lg px-md-4 brand-container">
+	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		<div data-widget-area="brand-header" class="flex-fill gap-3 p-2 align-self-center">
+			{{{each widgets.brand-header}}}
+			{{./html}}
+			{{{end}}}
+		</div>
+	</div>
+</div>
+{{{ end }}}

package/templates/partials/posts_list_item.tpl

@@ -1,12 +1,8 @@
-{{{
+<!--
     JAVIS Community Theme - Post List Item
-
-    This template overrides Harmony's posts_list_item.tpl
+    Overrides Harmony's posts_list_item.tpl
     Used on: Recent, Popular, Unread pages (feed view)
-
-    To customize: Edit the HTML structure below
-    Original: https://github.com/NodeBB/nodebb-theme-harmony/blob/master/templates/partials/posts_list_item.tpl
-}}}
+-->
 <li component="post" class="posts-list-item {{{ if ./deleted }}} deleted{{{ else }}}{{{ if ./topic.deleted }}} deleted{{{ end }}}{{{ end }}}{{{ if ./topic.scheduled }}} scheduled{{{ end }}}" data-pid="{./pid}" data-uid="{./uid}">
 
     <a class="topic-title fw-semibold fs-5 mb-2 text-reset text-break d-block" href="{config.relative_path}/post/{encodeURIComponent(./pid)}">

package/templates/partials/sidebar/user-menu-dropdown.tpl

@@ -0,0 +1,99 @@
+<ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm ff-base" role="menu">
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink" href="{relative_path}/user/{user.userslug}" role="menuitem" aria-label="[[user:profile]]">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span>
+			<span class="fw-semibold" component="header/username">{user.username}</span>
+		</a>
+	</li>
+	<li role="presentation" class="dropdown-divider"></li>
+	<li><h6 class="dropdown-header text-xs">[[global:status]]</h6></li>
+	<li>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.online }}}selected{{{ end }}}" data-status="online" role="menuitem">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status online"></span>
+			<span class="flex-grow-1">[[global:online]]</span>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0" aria-label="[[global:selected]]"></i>
+		</a>
+	</li>
+	<li>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.away }}}selected{{{ end }}}" data-status="away" role="menuitem">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status away"></span>
+			<span class="flex-grow-1">[[global:away]]</span>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0"><span class="visually-hidden">[[global:selected]]</span></i>
+		</a>
+	</li>
+	<li>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.dnd }}}selected{{{ end }}}" data-status="dnd" role="menuitem">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status dnd"></span>
+			<span class="flex-grow-1">[[global:dnd]]</span>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0"></i>
+		</a>
+	</li>
+	<li>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.offline }}}selected{{{ end }}}" data-status="offline" role="menuitem">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status offline"></span>
+			<span class="flex-grow-1">[[global:invisible]]</span>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0"></i>
+		</a>
+	</li>
+	<li role="presentation" class="dropdown-divider"></li>
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/user/{user.userslug}/bookmarks" role="menuitem">
+			<i class="fa fa-fw fa-bookmark text-secondary"></i> <span>[[user:bookmarks]]</span>
+		</a>
+	</li>
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit" role="menuitem">
+			<i class="fa fa-fw fa-edit text-secondary"></i> <span>[[user:edit-profile]]</span>
+		</a>
+	</li>
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings" role="menuitem">
+			<i class="fa fa-fw fa-gear text-secondary"></i> <span>[[user:settings]]</span>
+		</a>
+	</li>
+	{{{ if showModMenu }}}
+	<li role="presentation" class="dropdown-divider"></li>
+	<li><h6 class="dropdown-header text-xs">[[pages:moderator-tools]]</h6></li>
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/flags" role="menuitem">
+			<i class="fa fa-fw fa-flag text-secondary"></i> <span>[[pages:flagged-content]]</span>
+		</a>
+	</li>
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue" role="menuitem">
+			<i class="fa fa-fw fa-list-alt text-secondary"></i> <span>[[pages:post-queue]]</span>
+		</a>
+	</li>
+	{{{ if registrationQueueEnabled }}}
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/registration-queue" role="menuitem">
+			<i class="fa fa-fw fa-list-alt text-secondary"></i> <span>[[pages:registration-queue]]</span>
+		</a>
+	</li>
+	{{{ end }}}
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/ip-blacklist" role="menuitem">
+			<i class="fa fa-fw fa-ban text-secondary"></i> <span>[[pages:ip-blacklist]]</span>
+		</a>
+	</li>
+	{{{ else }}}
+	{{{ if postQueueEnabled }}}
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue" role="menuitem">
+			<i class="fa fa-fw fa-list-alt text-secondary"></i> <span>[[pages:post-queue]]</span>
+		</a>
+	</li>
+	{{{ end }}}
+	{{{ end }}}
+
+	<li role="presentation" class="dropdown-divider"></li>
+	<li component="user/logout">
+		<form method="post" action="{relative_path}/logout" role="menuitem">
+			<input type="hidden" name="_csrf" value="{config.csrf_token}">
+			<input type="hidden" name="noscript" value="true">
+			<button type="submit" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw fa-sign-out text-secondary"></i><span>[[global:logout]]</span>
+			</button>
+		</form>
+	</li>
+</ul>

package/templates/partials/sidebar-left.tpl

@@ -0,0 +1,87 @@
+<nav component="sidebar/left" class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-lg-flex flex-column justify-content-between sticky-top">
+	<!-- JAVIS Logo Section -->
+	<div class="javis-sidebar-logo">
+		<a href="{relative_path}/" class="javis-logo-link" title="JAVIS Community">
+			<!-- Icon logo (shown when collapsed) -->
+			<img src="{relative_path}/plugins/@okjavis/nodebb-theme-javis/static/images/logo-icon.png" alt="JAVIS" class="javis-logo-icon visible-closed" />
+			<!-- Full logo (shown when expanded) -->
+			<img src="{relative_path}/plugins/@okjavis/nodebb-theme-javis/static/images/logo-full.png" alt="JAVIS Community" class="javis-logo-full visible-open" />
+		</a>
+	</div>
+
+	<ul id="main-nav" class="list-unstyled d-flex flex-column w-100 overflow-y-auto">
+		{{{ each navigation }}}
+		{{{ if displayMenuItem(@root, @index) }}}
+		<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+			<a class="nav-link navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}" {{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}} {{{ if ./text }}}aria-label="{./text}"{{{ end }}}>
+				<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
+					<span class="position-relative">
+						{{{ if ./iconClass }}}
+						<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
+						<span component="navigation/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
+						{{{ end }}}
+					</span>
+					{{{ if ./text }}}<span class="nav-text small visible-open fw-semibold text-truncate">{./text}</span>{{{ end }}}
+				</span>
+				<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
+			</a>
+			{{{ if ./dropdown }}}
+			<ul class="dropdown-menu p-1 shadow" role="menu">
+				{./dropdownContent}
+			</ul>
+			{{{ end }}}
+		</li>
+		{{{ end }}}
+		{{{ end }}}
+	</ul>
+	<div class="sidebar-toggle-container align-self-start">
+		<!-- User Profile Section (only for logged-in users) -->
+		{{{ if config.loggedIn }}}
+		<div class="sidebar-user-section mx-2 mb-2">
+			<div class="nav-item dropend usermenu">
+				<a component="header/avatar" id="sidebar_user_dropdown" href="#" role="button"
+				   class="nav-link d-flex gap-2 align-items-center text-truncate sidebar-user-trigger"
+				   data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+				   aria-label="[[user:user-menu]]">
+					<span class="sidebar-avatar-wrapper position-relative">
+						{buildAvatar(user, "32px", true)}
+						<span component="user/status" class="sidebar-status-dot position-absolute border border-white border-2 rounded-circle status {user.status}"></span>
+					</span>
+					<span class="nav-text visible-open fw-semibold text-truncate">{user.username}</span>
+				</a>
+				<!-- IMPORT partials/sidebar/user-menu-dropdown.tpl -->
+			</div>
+		</div>
+		{{{ else }}}
+		<!-- Login/Register for logged-out users -->
+		<div class="sidebar-auth-section mx-2 mb-2">
+			<div class="nav-item">
+				<a class="nav-link d-flex gap-2 align-items-center" href="{relative_path}/login">
+					<i class="fa fa-fw fa-sign-in"></i>
+					<span class="nav-text small visible-open fw-semibold">[[global:login]]</span>
+				</a>
+			</div>
+			{{{ if config.allowRegistration }}}
+			<div class="nav-item mt-1">
+				<a class="nav-link d-flex gap-2 align-items-center" href="{relative_path}/register">
+					<i class="fa fa-fw fa-user-plus"></i>
+					<span class="nav-text small visible-open fw-semibold">[[global:register]]</span>
+				</a>
+			</div>
+			{{{ end }}}
+		</div>
+		{{{ end }}}
+
+		{{{ if !config.disableCustomUserSkins }}}
+		<!-- IMPORT partials/skin-switcher.tpl -->
+		{{{ end }}}
+
+		<div class="sidebar-toggle m-2 d-none d-lg-block">
+			<a href="#" role="button" component="sidebar/toggle" class="nav-link d-flex gap-2 align-items-center p-2 pointer w-100 text-nowrap" title="[[themes/harmony:expand]]" aria-label="[[themes/harmony:sidebar-toggle]]">
+				<i class="fa fa-fw fa-angles-right"></i>
+				<i class="fa fa-fw fa-angles-left"></i>
+				<span class="nav-text visible-open fw-semibold small lh-1">[[themes/harmony:collapse]]</span>
+			</a>
+		</div>
+	</div>
+</nav>

package/templates/partials/sidebar-right.tpl

@@ -0,0 +1,7 @@
+<!-- Right sidebar hidden - user profile moved to left sidebar -->
+<!-- Widget area preserved for any sidebar footer widgets if needed -->
+<div class="d-none" data-widget-area="sidebar-footer">
+	{{{each widgets.sidebar-footer}}}
+	{{./html}}
+	{{{end}}}
+</div>

package/templates/partials/topics_list.tpl

@@ -0,0 +1,111 @@
+<!--
+    JAVIS Community Theme - Topics List (Reddit-style)
+    Used on: Categories, Recent, Popular, Unread pages
+-->
+<ul component="category" class="topics-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
+
+	{{{ each topics }}}
+	<li component="category/topic" class="topic-card {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
+		<link itemprop="url" content="{config.relative_path}/topic/{./slug}" />
+		<meta itemprop="name" content="{function.stripTags, ./title}" />
+		<meta itemprop="itemListOrder" content="descending" />
+		<meta itemprop="position" content="{increment(./index, "1")}" />
+		<a id="{./index}" data-index="{./index}" component="topic/anchor"></a>
+
+		<!-- Vote Column (Reddit-style) -->
+		{{{ if !reputation:disabled }}}
+		<div class="vote-column">
+			<button class="vote-btn vote-up" title="[[topic:upvote]]">
+				<i class="fa fa-chevron-up"></i>
+			</button>
+			<span class="vote-count" title="{./votes}">{humanReadableNumber(./votes, 0)}</span>
+			<button class="vote-btn vote-down" title="[[topic:downvote]]">
+				<i class="fa fa-chevron-down"></i>
+			</button>
+		</div>
+		{{{ end }}}
+
+		<!-- Main Content -->
+		<div class="topic-content">
+			<!-- Meta Row: Category + Author + Time -->
+			<div class="topic-meta">
+				{{{ if (!template.category || (cid != ./cid)) }}}
+				{buildCategoryLabel(./category, "a", "border")}
+				{{{ end }}}
+				<span class="meta-separator">•</span>
+				<span class="meta-author">
+					Posted by
+					<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" class="author-link">{./user.displayname}</a>
+				</span>
+				<span class="meta-separator">•</span>
+				<span class="timeago meta-time" title="{./timestampISO}"></span>
+			</div>
+
+			<!-- Title -->
+			<h3 component="topic/header" class="topic-title">
+				<a href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{./title}</a>
+			</h3>
+
+			<!-- Labels/Badges -->
+			<div component="topic/labels" class="topic-labels">
+				<span component="topic/pinned" class="topic-badge pinned {{{ if (./scheduled || !./pinned) }}}hidden{{{ end }}}">
+					<i class="fa fa-thumb-tack"></i> Pinned
+				</span>
+				<span component="topic/locked" class="topic-badge locked {{{ if !./locked }}}hidden{{{ end }}}">
+					<i class="fa fa-lock"></i> Locked
+				</span>
+				<span component="topic/scheduled" class="topic-badge scheduled {{{ if !./scheduled }}}hidden{{{ end }}}">
+					<i class="fa fa-clock-o"></i> Scheduled
+				</span>
+				{{{each ./icons}}}<span class="topic-badge">{@value}</span>{{{end}}}
+			</div>
+
+			<!-- Tags -->
+			{{{ if ./tags.length }}}
+			<div data-tid="{./tid}" component="topic/tags" class="topic-tags">
+				{{{ each ./tags }}}
+				<a href="{config.relative_path}/tags/{./valueEncoded}" class="topic-tag">{./valueEscaped}</a>
+				{{{ end }}}
+			</div>
+			{{{ end }}}
+
+			<!-- Thumbnail Preview (if exists) -->
+			{{{ if ./thumbs.length }}}
+			<a class="topic-thumbnail" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}">
+				<img src="{./thumbs.0.url}" alt="" loading="lazy" />
+				{{{ if ./thumbs.1 }}}
+				<span class="thumb-count">+{subtract(./thumbs.length, 1)}</span>
+				{{{ end }}}
+			</a>
+			{{{ end }}}
+
+			<!-- Teaser/Preview Content -->
+			{{{ if ./teaser.content }}}
+			<div class="topic-teaser">
+				{./teaser.content}
+			</div>
+			{{{ end }}}
+
+			<!-- Action Bar -->
+			<div class="topic-actions">
+				<a href="{config.relative_path}/topic/{./slug}" class="action-btn">
+					<i class="fa-regular fa-comment"></i>
+					<span>{humanReadableNumber(./postcount, 0)} Comments</span>
+				</a>
+				<button class="action-btn share-btn" data-url="{config.relative_path}/topic/{./slug}">
+					<i class="fa fa-share"></i>
+					<span>Share</span>
+				</button>
+				<button class="action-btn save-btn">
+					<i class="fa-regular fa-bookmark"></i>
+					<span>Save</span>
+				</button>
+				<span class="action-stat">
+					<i class="fa fa-eye"></i>
+					<span>{humanReadableNumber(./viewcount, 0)}</span>
+				</span>
+			</div>
+		</div>
+	</li>
+	{{{end}}}
+</ul>

package/theme.js

@@ -8,17 +8,59 @@
 const theme = {};
 
 theme.defineWidgetAreas = async (areas) => {
-  // Define custom widget areas for JAVIS theme
+  // Define widget areas like Harmony does
+  const locations = ['header', 'sidebar', 'footer'];
+  const templates = [
+    'categories.tpl', 'category.tpl', 'topic.tpl', 'users.tpl',
+    'unread.tpl', 'recent.tpl', 'popular.tpl', 'top.tpl', 'tags.tpl', 'tag.tpl',
+    'login.tpl', 'register.tpl', 'world.tpl',
+  ];
+
+  function capitalizeFirst(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
+  templates.forEach((template) => {
+    locations.forEach((location) => {
+      areas.push({
+        name: `${capitalizeFirst(template.split('.')[0])} ${capitalizeFirst(location)}`,
+        template: template,
+        location: location,
+      });
+    });
+  });
+
+  // Additional widget areas
   areas = areas.concat([
     {
-      name: 'JAVIS Right Sidebar',
-      template: 'categories.tpl',
-      location: 'sidebar-right',
+      name: 'Main post header',
+      template: 'topic.tpl',
+      location: 'mainpost-header',
+    },
+    {
+      name: 'Main post footer',
+      template: 'topic.tpl',
+      location: 'mainpost-footer',
+    },
+    {
+      name: 'Sidebar Footer',
+      template: 'global',
+      location: 'sidebar-footer',
+    },
+    {
+      name: 'Brand Header',
+      template: 'global',
+      location: 'brand-header',
+    },
+    {
+      name: 'About me (before)',
+      template: 'account/profile.tpl',
+      location: 'profile-aboutme-before',
     },
     {
-      name: 'JAVIS Left Sidebar',
-      template: 'categories.tpl',
-      location: 'sidebar-left',
+      name: 'About me (after)',
+      template: 'account/profile.tpl',
+      location: 'profile-aboutme-after',
     },
   ]);
 

package/theme.json

@@ -0,0 +1,8 @@
+{
+  "id": "@okjavis/nodebb-theme-javis",
+  "name": "JAVIS Community Theme",
+  "description": "Modern, premium NodeBB theme for JAVIS Community",
+  "url": "https://github.com/javis-admin/nodebb-community-theme",
+  "screenshot": "screenshot.png",
+  "baseTheme": "nodebb-theme-harmony"
+}

package/theme.scss

@@ -0,0 +1,21 @@
+// ============================================
+// JAVIS Community Theme
+// Extends NodeBB Harmony Theme
+// ============================================
+
+// Note: When using baseTheme, NodeBB loads the parent theme (Harmony) first.
+// This file contains JAVIS-specific style overrides that are applied on top.
+
+// Import Harmony's theme styles (required for inheritance)
+@import "nodebb-theme-harmony/scss/harmony";
+
+// JAVIS Custom Styles
+@import "./scss/variables";
+@import "./scss/base";
+@import "./scss/buttons";
+@import "./scss/forms";
+@import "./scss/cards";
+@import "./scss/sidebar";
+@import "./scss/sidebar-user";
+@import "./scss/categories";
+@import "./scss/feed";

package/less/_base.less

@@ -1,70 +0,0 @@
-// ============================================
-// BASE STYLES – Global Reset & Typography
-// ============================================
-
-html, body {
-  font-family: @jv-font-sans;
-  font-size: @jv-font-size-base;
-  line-height: @jv-line-height-base;
-  background-color: @jv-bg;
-  color: @jv-text-main;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  margin: 0;
-  padding: 0;
-}
-
-// Paragraph
-p {
-  margin: 0 0 @jv-space-6 0;
-}
-
-// Headings
-h1 {
-  font-size: @jv-font-size-xxl;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  margin-bottom: @jv-space-8;
-}
-
-h2 {
-  font-size: @jv-font-size-xl;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  margin-bottom: @jv-space-6;
-}
-
-h3 {
-  font-size: @jv-font-size-xl;
-  font-weight: 600;
-  margin-bottom: @jv-space-6;
-}
-
-h4 {
-  font-size: 20px;
-  font-weight: 600;
-  margin-bottom: @jv-space-6;
-}
-
-h5 {
-  font-size: 17px;
-  font-weight: 600;
-  margin-bottom: @jv-space-6;
-}
-
-h6 {
-  font-size: @jv-font-size-base;
-  font-weight: 600;
-  margin-bottom: @jv-space-4;
-}
-
-// Links
-a {
-  color: @jv-primary;
-  text-decoration: none;
-  transition: color 0.15s ease;
-
-  &:hover {
-    color: @jv-primary-hover;
-  }
-}