Merge pull request #16 from lakhanmandloi/master

Issue #9 feat: Sidebar and other layouts update

Gemfile.lock

@@ -19,29 +19,31 @@ GEM
       safe_yaml (~> 1.0)
     jekyll-feed (0.9.1)
       jekyll (~> 3.3)
-    jekyll-sass-converter (1.5.0)
+    jekyll-sass-converter (1.5.2)
       sass (~> 3.4)
     jekyll-seo-tag (2.1.0)
       jekyll (~> 3.3)
     jekyll-sitemap (1.0.0)
       jekyll (~> 3.3)
-    jekyll-watch (1.5.0)
-      listen (~> 3.0, < 3.1)
-    kramdown (1.15.0)
+    jekyll-watch (1.5.1)
+      listen (~> 3.0)
+    kramdown (1.16.2)
     liquid (3.0.6)
-    listen (3.0.8)
+    listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
     mercenary (0.3.6)
-    pathutil (0.14.0)
+    pathutil (0.16.1)
       forwardable-extended (~> 2.6)
-    public_suffix (3.0.0)
+    public_suffix (3.0.1)
     rb-fsevent (0.10.2)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
     rouge (1.11.1)
+    ruby_dep (1.5.0)
     safe_yaml (1.0.4)
-    sass (3.5.1)
+    sass (3.5.5)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)

README.md

@@ -1,7 +1,7 @@
 
 # Techjoomla Documentation Site
 
-Steps to contribute documentation to the Techjoomla Site.
+Steps to contribute documentation to the Techjoomla Site. 
 
 ## Git Fork Setup on local machine
 
@@ -25,19 +25,27 @@ Steps to contribute documentation to the Techjoomla Site.
 ### Adding a New Post
 
 1. Start the development server with command ```bundle exec jekyll serve```
-2. It will give you the link where you can see the changes.
+2. It will give you the link where you can see the changes. In most of the cases it is ```http://127.0.0.1:4000```
 3. Inside _post folder create a new md file format ```YYYY-MM-DD-filename.md```
 4. Open the same file you created and add front matter 
      ``` 
         ---
         date: 2017-01-15
         title: Post Title
         description: Post Description
+        pageTitle: Page Title
         categories:
           - CategoryName
+        tags:
+		  - Tag 1
+          - Tag 2
         type: Document
+        nav_ordering: 2
+        showSidebar: true
+        published: true
         --- 
      ```
+    title & description are used as meta data of page and also used on homepage and related post data. showSidebar adds page on homepage and sidebar, in case of its absence or false value it will not be added. nav_ordering is the ordering value of the menu under its category. 
 5. This will add a section on homepage with Category name and a post under it. The post will be generated with url - ```domainname.com/categoryname/filename```
 6. Add below the front matter your content to be added on that post. To know markdown follow [this link](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
 
@@ -54,6 +62,9 @@ Steps to contribute documentation to the Techjoomla Site.
         categories:
           - CategoryName
         type: Video
+        nav_ordering: 2
+        showSidebar: true
+        published: true
         --- 
      ```
 

_includes/meta.html

@@ -0,0 +1,26 @@
+<div class="post-meta">
+
+	<div class="pull-right">
+		<a target="_blank" class="nounderline" href="https://github.com/techjoomla/techjoomla.github.io/edit/master/{{page.path}}"> 
+			<i class="material-icons">mode_edit</i> Edit 
+		</a>
+		&nbsp;|&nbsp;
+		<a target="_blank" class="nounderline" href="https://github.com/techjoomla/techjoomla.github.io/issues"> 
+			<i class="material-icons">report</i> Report Issue 
+		</a>
+		&nbsp;|&nbsp;
+		<a class="modalOpen no-smooth nounderline" href="#share">
+			<i class="material-icons">share</i> Share
+		</a>
+	</div>
+
+	<div>
+
+		{% assign categories = page.categories %}
+		{% for category in categories %}
+			 <a class="nounderline" href="{{ site.baseurl }}/{{ category | downcase }}"><i class="material-icons">folder</i> {{ category }}</a>
+		{% endfor %} 
+
+	</div>
+
+</div>

_includes/sidebar.html

@@ -7,13 +7,38 @@
 		{% assign posts = category[1] %}
 		{% assign size = posts | size %}
 		<div class = 'category-module {% if name == page.categories[0] %}active{% endif %}'>
-			<span class="heading">{{ name | replace: "-", " " }}</span>
-			<ul>
-				{% assign tutorials = posts | sort: "title" %}
-				{% for tutorial in tutorials | sort: "navigation_weight" %}
-					<li {% if tutorial.url == page.url %}class="active"{% endif %}><a href="{{ site.baseurl }}{{ tutorial.url }}">{{ tutorial.title }}</a></li>
+			<span class="heading accordion {% if name == page.categories[0] %}active{% endif %}" >{{ name | replace: "-", " " }}</span>
+			<ul class="panel">
+				{% assign tutorials = posts | sort: "nav_ordering" %}
+				{% for tutorial in tutorials  %}
+					{% if tutorial.showSidebar %}
+					{% if tutorial.published %}
+					<li {% if tutorial.url == page.url %}class="active"{% endif %}>
+						<a href="{{ site.baseurl }}{{ tutorial.url }}">{{ tutorial.title }}</a>
+					</li>
+					{% endif %}
+					{% endif %}
 				{% endfor %}
 			</ul>
 		</div>
 	{% endfor %}
 </section>
+<script>
+var acc = $(".accordion");
+var i;
+
+for (i = 0; i < acc.length; i++) {
+    acc[i].addEventListener("click", function() {
+        this.classList.toggle("active");
+        $(this).siblings("span.active").removeClass("active");
+
+        var panel = this.nextElementSibling;
+        if (panel.style.display === "block") {
+            panel.style.display = "none";
+        } else {
+            panel.style.display = "block";
+        }
+    });
+}
+
+</script>

_layouts/post.html

@@ -20,18 +20,24 @@
 
 		<div class="tutorial-main">
 
+			<h1>{{page.pageTitle}}</h1>
+
+			{% include meta.html %}
+
+			<hr />
+
 			{{ content }}
 			<hr />
-			<div class="pull-right">
-				<a target="_blank" href="https://github.com/techjoomla/techjoomla.github.io/edit/master/{{page.path}}"> <i class="material-icons">mode_edit</i> Edit</a> | 
-				<a target="_blank" href="https://github.com/techjoomla/techjoomla.github.io/issues"> <i class="material-icons">report</i> Report Issue</a>
-			</div>
-			{% include categories.html %}
-			{% include tags.html %}
+
 		</div>
 		<div class="tutorial-share">
-			<a class="modalOpen no-smooth" href="#subscribe">{% include social-icon.html icon="Email" %} Subscribe</a>
-			<a class="modalOpen no-smooth" href="#share">{% include social-icon.html icon="Share" %} Share</a>
+			<!--<a class="modalOpen no-smooth" href="#subscribe">{% include social-icon.html icon="Email" %} Subscribe</a>
+			<a class="modalOpen no-smooth" href="#share">{% include social-icon.html icon="Share" %} Share</a>-->
+			<small>Tags: </small>
+			{% assign tags = page.tags %}
+			{% for item in tags %}
+				<span class="tag">{{ item }}</span>
+			{% endfor %}
 		</div>
 	</section>
 	<section class="post-related">

_posts/2017-01-17-com-api-introduction.md

@@ -8,10 +8,12 @@ tags:
   - Joomla
   - REST API
 type: Document
-navigation_weight: 1
+nav_ordering: 1
+showSidebar: true
+published: true
+pageTitle: "REST API framework for Joomla"
 ---
 
-# REST API framework for Joomla
 
 com_api is a quick and easy way to add REST APIs to Joomla. Extendible via plugins, you an easily add support for more Joomla extensions. To get started, download the component and install the API plugins you need. Enable the plugins and you are ready to fetch your content via APIs. 
 

_posts/2017-01-17-com-api-plugin-development.md

@@ -8,11 +8,12 @@ tags:
   - Joomla
   - REST API
 type: Document
-navigation_weight: 0
+nav_ordering: 2
+showSidebar: true
+published: true
+pageTitle: "Writing your own API Plugin"
 ---
 
-# Writing your own API Plugin
-
 Each resource supports the GET, POST and DELETE operations. These are exposed by creating methods of the same name, i.e. `get()` `post()` and `delete()` in each of the resources. If a resouce URL is accessed via HTTP POST, the post() method is called, and similarly for the rest.
 
 ## API plugin file structure

_posts/2017-09-15-com-api-making-api-calls.md

@@ -7,9 +7,12 @@ tags:
   - Joomla
   - REST API
 type: Document
+showSidebar: true
+published: true
+nav_ordering: 3
+pageTitle: "Calling API resources"
 ---
 
-# Calling API resources
 
 ## API URLs
 The URL to access any route is of the format - 

_posts/2017-09-15-tjreports-architecture-overview.md

@@ -7,9 +7,12 @@ tags:
   - tjreports
   - architecture
 type: Document
+showSidebar: true
+published: true
+nav_ordering: 1
+pageTitle: "TJ Reports : Architecture Overview"
 ---
 
-# TJ Reports : Architecture Overview
 In terms of data structure, the TJ Reports framework is a Joomla MVC List view, with added features for saving queries, modifying columns and dynamic filters. Since reports are typically tabular data, reusing existing list view infrastructure was an obvious choice. So under the hood, it simply extends JModelList. The key difference is that instead of a single model, the framework allows plugins to extend the base reports model and provide a query or list for the report.
 
 ## Plugin Architecture
@@ -25,4 +28,4 @@ Additionally, ACL can be applied to each instance so it becomes possible to crea
 ## Component Architecture
 As mentioned above, the component loads a single plugin instance using it's configuration. The component also applies the ACL based on the instance configuration. 
 
-The component allows users to create saved queries. Saved queries are stored similar to an instance, but they inherit the ACL and configuration superset of the instance they are created from.
+The component allows users to create saved queries. Saved queries are stored similar to an instance, but they inherit the ACL and configuration superset of the instance they are created from.

_posts/2017-09-15-tjreports-integration-guide.md

@@ -7,9 +7,12 @@ tags:
   - Joomla
   - tjreports
 type: Document
+showSidebar: true
+published: true
+nav_ordering: 2
+pageTitle: "TJ Reports Integration Guide"
 ---
 
-# TJ Reports Integration Guide
 
 ## Installing the default instances
 The reporting plugin only offers the code needed for the report. For the report to be usable, it needs to be configured. An extension developer who wishes to create default 'instances' for the plugins can do that by adding the below method in the installation script.

_posts/2017-09-15-tjreports-writing-a-plugin.md

@@ -7,9 +7,12 @@ tags:
   - Joomla
   - tjreports
 type: Document
+showSidebar: true
+published: true
+nav_ordering: 3
+pageTitle: "Example Report Plugin"
 ---
 
-# Example Report Plugin
 The plugin type for TJ Reports plugins is `tjreports`.
 
 ## Folder structure

_posts/2017-09-16-hierarchy-manager-overview.md

@@ -8,8 +8,11 @@ tags:
   - Joomla
   - Hierarchy
 type: Document
-navigation_weight: 1
+nav_ordering: 1
+showSidebar: true
+published: true
+pageTitle: "Hierarchy Management"
 ---
-# Hierarchy Management 
+
 
 Hierarchy Management is an horizontal (Infrastructure) extension by Techjoomla that allows setting up general or context specific hierarchical relations between users. This can be used by other extensions to allow special access control, generate reports and so on.

_posts/2017-09-16-tc-manager-overview.md

@@ -7,10 +7,12 @@ tags:
   - Joomla
   - Terms & Conditions Manager
 type: Document
-navigation_weight: 1
+nav_ordering: 1
+showSidebar: true
+published: true
+pageTitle: "Terms & Conditions Manager"
 ---
 
-# Terms & Conditions Manager
 Terms & Conditions Manager is used to force users to accept the T&C before they can start using the site, or a part of the site. 
 
 It is also possible to define multiple T&C that block different contexts. For example, you may want users to accept terms before they start writing blogs on your site. On the same site, you may want users to accept different terms before they can participate in the community. The T&C Manager allows you to do this.

_posts/_defaults.md

@@ -5,4 +5,7 @@ categories:
 tags:
 description:
 type: Document
+nav_ordering: 100
+showSidebar: false
+published: false
 ---

_sass/elements.scss

@@ -35,7 +35,7 @@ ul, ol {
 
 code, pre, tt {
 	font-family: Inconsolata,Consolas,Courier,"Courier New","Liberation Mono",monospace;
-	font-size: .9em;
+	font-size: 1em;
 	white-space: pre-wrap;
 	border-radius: 2px;
 	line-height: 1.4;