Add widget areas

library.js

@@ -13,4 +13,56 @@ library.getTeasers = function(data, callback) {
 	callback(null, data);
 };
 
+library.defineWidgetAreas = function(areas, callback) {
+	areas = areas.concat([
+		{
+			name: "Categories Sidebar",
+			template: "categories.tpl",
+			location: "sidebar"
+		},
+		{
+			name: "Category Sidebar",
+			template: "category.tpl",
+			location: "sidebar"
+		},
+		{
+			name: "Topic Sidebar",
+			template: "topic.tpl",
+			location: "sidebar"
+		},
+		{
+			name: "Categories Header",
+			template: "categories.tpl",
+			location: "header"
+		},
+		{
+			name: "Category Header",
+			template: "category.tpl",
+			location: "header"
+		},
+		{
+			name: "Topic Header",
+			template: "topic.tpl",
+			location: "header"
+		},
+		{
+			name: "Categories Footer",
+			template: "categories.tpl",
+			location: "footer"
+		},
+		{
+			name: "Category Footer",
+			template: "category.tpl",
+			location: "footer"
+		},
+		{
+			name: "Topic Footer",
+			template: "topic.tpl",
+			location: "footer"
+		}
+	]);
+
+	callback(null, areas);
+};
+
 module.exports = library;

plugin.json

@@ -2,7 +2,8 @@
 	"id": "nodebb-theme-persona",
 	"library": "library.js",
 	"hooks": [
-		{ "hook": "filter:teasers.get", "method": "getTeasers" }
+		{ "hook": "filter:teasers.get", "method": "getTeasers" },
+		{ "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" }
 	],
 	"scripts": [
 		"lib/persona.js",

templates/categories.tpl

@@ -1,7 +1,14 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
-<h1 class="categories-title">[[pages:categories]]</h1>
-<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
-	<!-- BEGIN categories -->
-	<!-- IMPORT partials/categories/item.tpl -->
-	<!-- END categories -->
-</ul>
+<div widget-area="header"></div>
+<div class="row">
+	<div class="col-lg-9 col-sm-12" no-widget-class="col-lg-12 col-sm-12" no-widget-target="sidebar">
+		<h1 class="categories-title">[[pages:categories]]</h1>
+		<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
+			<!-- BEGIN categories -->
+			<!-- IMPORT partials/categories/item.tpl -->
+			<!-- END categories -->
+		</ul>
+	</div>
+	<div widget-area="sidebar" class="col-lg-3 col-sm-12"></div>
+</div>
+<div widget-area="footer"></div>

templates/category.tpl

@@ -1,41 +1,46 @@
-<div class="category">
-	<!-- IMPORT partials/breadcrumbs.tpl -->
-	<!-- IMPORT partials/category/subcategory.tpl -->
-
-	<!-- IF children.length --><hr class="hidden-xs"/><!-- ENDIF children.length -->
-
-	<div class="clearfix">
-		<!-- IF privileges.topics:create -->
-		<button id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
-		<!-- ELSE -->
-			<!-- IF !loggedIn -->
-			<a href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-			<!-- ENDIF !loggedIn -->
-		<!-- ENDIF privileges.topics:create -->
-
-		<span class="pull-right" component="category/controls">
-			<!-- IMPORT partials/category/watch.tpl -->
-			<!-- IMPORT partials/category/sort.tpl -->
-			<!-- IMPORT partials/category/tools.tpl -->
-		</span>
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div widget-area="header"></div>
+<div class="row">
+	<div class="category col-lg-9 col-sm-12" no-widget-class="category col-lg-12 col-sm-12" no-widget-target="sidebar">
+		<!-- IMPORT partials/category/subcategory.tpl -->
+
+		<!-- IF children.length --><hr class="hidden-xs"/><!-- ENDIF children.length -->
+
+		<div class="clearfix">
+			<!-- IF privileges.topics:create -->
+			<button id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- ELSE -->
+				<!-- IF !loggedIn -->
+				<a href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+				<!-- ENDIF !loggedIn -->
+			<!-- ENDIF privileges.topics:create -->
+
+			<span class="pull-right" component="category/controls">
+				<!-- IMPORT partials/category/watch.tpl -->
+				<!-- IMPORT partials/category/sort.tpl -->
+				<!-- IMPORT partials/category/tools.tpl -->
+			</span>
+		</div>
+
+		<hr class="hidden-xs" />
+
+		<p class="hidden-xs">{name}</p>
+
+		<!-- IF !topics.length -->
+		<div class="alert alert-warning" id="category-no-topics">
+			[[category:no_topics]]
+		</div>
+		<!-- ENDIF !topics.length -->
+
+		<!-- IMPORT partials/topics_list.tpl -->
+
+		<!-- IF config.usePagination -->
+			<!-- IMPORT partials/paginator.tpl -->
+		<!-- ENDIF config.usePagination -->
 	</div>
-
-	<hr class="hidden-xs" />
-
-	<p class="hidden-xs">{name}</p>
-
-	<!-- IF !topics.length -->
-	<div class="alert alert-warning" id="category-no-topics">
-		[[category:no_topics]]
-	</div>
-	<!-- ENDIF !topics.length -->
-
-	<!-- IMPORT partials/topics_list.tpl -->
-
-	<!-- IF config.usePagination -->
-		<!-- IMPORT partials/paginator.tpl -->
-	<!-- ENDIF config.usePagination -->
+	<div widget-area="sidebar" class="col-lg-3 col-sm-12"></div>
 </div>
+<div widget-area="footer"></div>
 
 <!-- IMPORT partials/move_thread_modal.tpl -->
 
@@ -44,4 +49,3 @@
 	<!-- IMPORT partials/paginator.tpl -->
 </noscript>
 <!-- ENDIF !config.usePagination -->
-

templates/topic.tpl

@@ -1,60 +1,65 @@
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div widget-area="header"></div>
 <div class="row">
-<div class="topic col-lg-12">
-	<!-- IMPORT partials/breadcrumbs.tpl -->
+	<div widget-area="header" class="col-sm-12"></div>
+	<div class="topic col-lg-9 col-sm-12" no-widget-class="topic col-lg-12 col-sm-12" no-widget-target="sidebar">
 
-	<h1 component="post/header" class="hidden-xs" itemprop="name">
+		<h1 component="post/header" class="hidden-xs" itemprop="name">
 
-		<i class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->"></i> <i class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->"></i> <span class="topic-title" component="topic/title">{title}</span>
+			<i class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->"></i> <i class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->"></i> <span class="topic-title" component="topic/title">{title}</span>
 
-		<span class="browsing-users hidden hidden-xs hidden-sm pull-right">
-			<span>[[category:browsing]]</span>
-			<div component="topic/browsing/list" class="thread_active_users active-users inline-block"></div>
-			<small class="hidden">
-				<i class="fa fa-users"></i> <span component="topic/browsing/count" class="user-count"></span>
-			</small>
-		</span>
-	</h1>
+			<span class="browsing-users hidden hidden-xs hidden-sm pull-right">
+				<span>[[category:browsing]]</span>
+				<div component="topic/browsing/list" class="thread_active_users active-users inline-block"></div>
+				<small class="hidden">
+					<i class="fa fa-users"></i> <span component="topic/browsing/count" class="user-count"></span>
+				</small>
+			</span>
+		</h1>
 
-	<div component="topic/deleted/message" class="alert alert-warning<!-- IF !deleted --> hidden<!-- ENDIF !deleted -->">[[topic:deleted_message]]</div>
+		<div component="topic/deleted/message" class="alert alert-warning<!-- IF !deleted --> hidden<!-- ENDIF !deleted -->">[[topic:deleted_message]]</div>
 
-	<hr class="visible-xs" />
+		<hr class="visible-xs" />
 
-	<ul component="topic" class="posts" data-tid="{tid}" data-cid="{cid}">
-		<!-- BEGIN posts -->
-			<li component="post" class="<!-- IF posts.deleted -->deleted<!-- ENDIF posts.deleted -->" <!-- IMPORT partials/data/topic.tpl -->>
-				<a component="post/anchor" data-index="{posts.index}" name="{posts.index}"></a>
+		<ul component="topic" class="posts" data-tid="{tid}" data-cid="{cid}">
+			<!-- BEGIN posts -->
+				<li component="post" class="<!-- IF posts.deleted -->deleted<!-- ENDIF posts.deleted -->" <!-- IMPORT partials/data/topic.tpl -->>
+					<a component="post/anchor" data-index="{posts.index}" name="{posts.index}"></a>
 
-				<meta itemprop="datePublished" content="{posts.timestampISO}">
-				<meta itemprop="dateModified" content="{posts.editedISO}">
+					<meta itemprop="datePublished" content="{posts.timestampISO}">
+					<meta itemprop="dateModified" content="{posts.editedISO}">
 
-				<!-- IMPORT partials/topic/post.tpl -->
-				<!-- IF !posts.index -->
-				<div class="post-bar-placeholder"></div>
-				<!-- ENDIF !posts.index -->
-			</li>
-		<!-- END posts -->
-	</ul>
+					<!-- IMPORT partials/topic/post.tpl -->
+					<!-- IF !posts.index -->
+					<div class="post-bar-placeholder"></div>
+					<!-- ENDIF !posts.index -->
+				</li>
+			<!-- END posts -->
+		</ul>
 
-	<div class="post-bar">
-		<!-- IMPORT partials/post_bar.tpl -->
-	</div>
+		<div class="post-bar">
+			<!-- IMPORT partials/post_bar.tpl -->
+		</div>
 
-	<!-- IF config.usePagination -->
-	<!-- IMPORT partials/paginator.tpl -->
-	<!-- ENDIF config.usePagination -->
-
-	<div class="visible-xs visible-sm pagination-block text-center">
-		<div class="progress-bar"></div>
-		<div class="wrapper">
-			<i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop"></i>
-			<i class="fa fa-2x fa-angle-up pointer fa-fw pageup"></i>
-			<span class="pagination-text"></span>
-			<i class="fa fa-2x fa-angle-down pointer fa-fw pagedown"></i>
-			<i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom"></i>
+		<!-- IF config.usePagination -->
+		<!-- IMPORT partials/paginator.tpl -->
+		<!-- ENDIF config.usePagination -->
+
+		<div class="visible-xs visible-sm pagination-block text-center">
+			<div class="progress-bar"></div>
+			<div class="wrapper">
+				<i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop"></i>
+				<i class="fa fa-2x fa-angle-up pointer fa-fw pageup"></i>
+				<span class="pagination-text"></span>
+				<i class="fa fa-2x fa-angle-down pointer fa-fw pagedown"></i>
+				<i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom"></i>
+			</div>
 		</div>
 	</div>
+	<div widget-area="sidebar" class="col-lg-3 col-sm-12"></div>
 </div>
-</div>
+<div widget-area="footer"></div>
+
 <!-- IF !config.usePagination -->
 <noscript>
 	<!-- IMPORT partials/paginator.tpl -->