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 -->
+<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,5 +1,7 @@
-<div class="category">
 <!-- 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 -->
@@ -36,6 +38,9 @@
 			<!-- IMPORT partials/paginator.tpl -->
 		<!-- ENDIF config.usePagination -->
 	</div>
+	<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,6 +1,8 @@
-<div class="row">
-<div class="topic col-lg-12">
 <!-- IMPORT partials/breadcrumbs.tpl -->
+<div widget-area="header"></div>
+<div class="row">
+	<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">
 
@@ -54,7 +56,10 @@
 			</div>
 		</div>
 	</div>
+	<div widget-area="sidebar" class="col-lg-3 col-sm-12"></div>
 </div>
+<div widget-area="footer"></div>
+
 <!-- IF !config.usePagination -->
 <noscript>
 	<!-- IMPORT partials/paginator.tpl -->