Add community blog

_config.yml

@@ -33,6 +33,9 @@ collections:
   authors:
     output: true
     permalink: /authors/:path/
+  community:
+    output: true
+    permalink: /community-blog/:title/
 
 defaults:
   - scope:
@@ -41,6 +44,12 @@ defaults:
     values:
       layout: "archive"
       type: "authors"
+  - scope:
+      path: ""
+      type: "community"
+    values:
+      layout: "post"
+      type: "community"
 
 # Pagination 
 paginate: 6

_layouts/default.html

@@ -153,12 +153,20 @@
                         <a class="nav-link" href="{{ site.baseurl }}/library/">Library</a>
                     </li> -->
 
-                    {% if page.url == "/coc/" %}
+                    {% if page.url == "/blog/" %}
                     <li class="nav-item active">
                         {% else %}
                     <li class="nav-item">
                         {% endif %}
-                        <a class="nav-link" href="{{ site.baseurl }}/coc/">COC</a>
+                        <a class="nav-link" href="{{ site.baseurl }}/blog/">Monthly Meetup Blog</a>
+                    </li>
+
+                    {% if page.url == "/community-blog/" %}
+                    <li class="nav-item active">
+                        {% else %}
+                    <li class="nav-item">
+                        {% endif %}
+                        <a class="nav-link" href="{{ site.baseurl }}/community-blog/">Community Blog</a>
                     </li>
 
                     <li class="nav-item">
@@ -252,6 +260,14 @@ <h1 class="sitetitle">{{ site.name }}</h1>
                             <a href="{{ site.baseurl }}/library/">Library</a>
                         </li> -->
 
+                        <li class="nav-item" style="display:inline; margin: 2em;">
+                            <a href="{{ site.baseurl }}/blog/">Monthly Meetup Blog</a>
+                        </li>
+
+                        <li class="nav-item" style="display:inline; margin: 2em;">
+                            <a href="{{ site.baseurl }}/community-blog/">Community Blog</a>
+                        </li>
+
                         <li class="nav-item" style="display:inline; margin: 2em;">
                             <a href="{{ site.baseurl }}/coc/">COC</a>
                         </li>

assets/css/main.scss

@@ -12,3 +12,45 @@
 @import
 	"syntax"
 ;
+
+/* Exclusive Tabs for Home Page */
+.exclusive-tabs-header {
+    display: flex !important;
+    flex-direction: row !important;
+    border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
+    margin-bottom: 27px;
+    padding: 0;
+}
+.exclusive-tab-link {
+    cursor: pointer !important;
+    opacity: 0.3 !important;
+    transition: all 0.3s ease;
+    margin-right: 40px !important;
+    padding-bottom: 20px !important;
+    display: inline-block !important;
+    border-bottom: 1px solid transparent !important;
+    margin-bottom: -1px !important;
+    font-weight: 700 !important;
+    font-size: 1.4rem !important;
+    color: #292b2c !important;
+}
+.exclusive-tab-link.is-active {
+    opacity: 1 !important;
+    border-bottom: 1px solid rgba(0,0,0,0.44) !important;
+}
+.exclusive-tab-link:hover {
+    opacity: 0.7 !important;
+    text-decoration: none !important;
+}
+.exclusive-pane:not(.is-visible) {
+    display: none !important;
+}
+.exclusive-pane.is-visible {
+    display: block !important;
+}
+.exclusive-content-area {
+    margin-top: 30px;
+}
+.pagination a {
+    cursor: pointer;
+}

blog.html

@@ -1,6 +1,6 @@
 ---
 layout: page
-title: Blog
+title: Monthly Meetup Blog
 description: List of all posts by "BangPypers – The Bangalore Python User Group".
 ---
 

community-blog.html

@@ -0,0 +1,32 @@
+---
+layout: page
+title: Community Blog
+description: List of all posts in the Community Blog.
+permalink: /community-blog/
+---
+
+<!-- Community Blog Index
+    ================================================== -->
+    <section class="recent-posts">
+
+        <div class="row listrecent">
+
+            <div class="col-lg-12 col-md-12 mb-30px">   
+            {% assign community_posts = site.community %}
+            {% assign sorted_posts = community_posts | reverse %}
+            {% for post in sorted_posts %}            
+            {% assign currentDate = post.date | date: "%Y" %}          
+            {% if currentDate != myDate %}
+            {% unless forloop.first %}</ul>{% endunless %}           
+            <h3>{{ currentDate }}</h3>
+            <ul style="list-style-type:none;">
+                {% assign myDate = currentDate %}
+                {% endif %}
+                <li><span class="text-muted">{{ post.date | date: "%B %-d" }}</span> - <a href="{{ post.url | prepend: site.baseurl | prepend: site.url }}">{{ post.title }}</a></li>
+                {% if forloop.last %}</ul>{% endif %}
+                {% endfor %}
+           </div>    
+
+        </div>
+
+        </section>

index.html

@@ -23,32 +23,107 @@ <h2><span>Featured</span></h2>
 
 {% endif %}
 
-<!-- Posts Index
+<!-- Posts Navigation Toggles
 ================================================== -->
 <section class="recent-posts">
-
     <div class="section-title">
-
-        <h2><span>All Posts</span></h2>
-
+        <h2 class="exclusive-tabs-header">
+            <span id="btn-meetup" class="exclusive-tab-link is-active" onclick="bangalorePythonSwitch('meetup')">Monthly Meetup Posts</span>
+            <span id="btn-community" class="exclusive-tab-link" onclick="bangalorePythonSwitch('community')">Community Posts</span>
+        </h2>
     </div>
-
-    <div class="row listrecent">
 
-        {% for post in paginator.posts %}
-               {% include postbox.html %}          
-        {% endfor %}
+    <div class="exclusive-content-area">
+        <!-- Monthly Meetup Pane -->
+        <div id="area-meetup" class="exclusive-pane">
+            <div class="row listrecent">
+                {% for post in paginator.posts %}
+                    {% include postbox.html %}
+                {% endfor %}
+            </div>
+            <!-- Pagination for Meetup -->
+            <div class="bottompagination">
+                <div class="pointerup"><i class="fa fa-caret-up"></i></div>
+                <span class="navigation" role="navigation">
+                    {% include pagination.html %}
+                </span>
+            </div>
+        </div>
 
+        <!-- Community Blog Pane -->
+        <div id="area-community" class="exclusive-pane">
+            <div id="community-posts-container" class="row listrecent">
+                {% if site.community.size > 0 %}
+                    {% assign sorted_community = site.community | reverse %}
+                    {% for post in sorted_community %}
+                        {% include postbox.html %}          
+                    {% endfor %}
+                {% else %}
+                    <div class="col-md-12" id="no-community-msg"><p>No community posts found.</p></div>
+                {% endif %}
+            </div>
+            <!-- Pagination for Community -->
+            <div id="community-pagination" class="bottompagination" style="display: none; margin-top: 50px;">
+                <div class="pointerup"><i class="fa fa-caret-up"></i></div>
+                <span class="navigation" role="navigation">
+                    <div class="pagination" id="community-pagination-links">
+                        <!-- JS will populate this -->
+                    </div>
+                </span>
+            </div>
+        </div>
     </div>
-
 </section>
 
-<!-- Pagination
-================================================== -->
-<div class="bottompagination">
-<div class="pointerup"><i class="fa fa-caret-up"></i></div>
-<span class="navigation" role="navigation">
-    {% include pagination.html %}
-</span>
-</div>
+<script>
+var communityPage = parseInt(sessionStorage.getItem('communityPage')) || 1;
+
+function renderCommunity(page) {
+    var items = document.querySelectorAll('#community-posts-container .card-group');
+    if (!items.length) return;
+
+    var total = Math.ceil(items.length / 6);
+    if (page > total) page = 1;
+
+    communityPage = page;
+    sessionStorage.setItem('communityPage', page);
+    var start = (page - 1) * 6, end = start + 6;
+    items.forEach(function(it, i) {
+        it.style.setProperty('display', (i >= start && i < end) ? 'block' : 'none', 'important');
+    });
+
+    var nav = document.getElementById('community-pagination');
+    if (total <= 1) {
+        if (nav) nav.style.display = 'none';
+        return;
+    }
+    if (nav) nav.style.display = 'block';
+
+    var html = (page > 1 ? '<a class="ml-1 mr-1" style="color: #00ab6b;" onclick="renderCommunity('+(page-1)+')">&laquo; Prev</a>' : '<span class="ml-1 mr-1">&laquo; Prev</span>');
+    for (var i = 1; i <= total; i++) {
+        html += (i === page ? '<span class="ml-1 mr-1" style="color: #292b2c; font-weight: bold;">'+i+'</span>' : '<a class="ml-1 mr-1" style="color: #00ab6b;" onclick="renderCommunity('+i+')">'+i+'</a>');
+    }
+    html += (page < total ? '<a class="ml-1 mr-1" style="color: #00ab6b;" onclick="renderCommunity('+(page+1)+')">Next &raquo;</a>' : '<span class="ml-1 mr-1">Next &raquo;</span>');
+    document.getElementById('community-pagination-links').innerHTML = html;
+}
+
+function bangalorePythonSwitch(type) {
+    var isComm = type === 'community';
+    sessionStorage.setItem('activeTab', type);
+    ['meetup', 'community'].forEach(function(t) {
+        var pane = document.getElementById('area-' + t);
+        var btn = document.getElementById('btn-' + t);
+        if (pane) pane.classList.toggle('is-visible', (t === type));
+        if (btn) btn.classList.toggle('is-active', (t === type));
+    });
+    if (isComm) renderCommunity(communityPage);
+}
 
+document.addEventListener('DOMContentLoaded', function() {
+    var savedTab = sessionStorage.getItem('activeTab') || 'meetup';
+    if (savedTab === 'community') {
+        renderCommunity(communityPage);
+    }
+    bangalorePythonSwitch(savedTab);
+});
+</script>