Add blog category navigation / index page support

_category/core-platform.md

@@ -0,0 +1,4 @@
+---
+team: Core Platform
+permalink: "/blog/category/core-platform"
+---

_category/data-science.md

@@ -0,0 +1,4 @@
+---
+team: Data Science
+permalink: "/blog/category/data-science"
+---

_category/ios.md

@@ -0,0 +1,4 @@
+---
+team: iOS
+permalink: "/blog/category/ios"
+---

_category/web-development.md

@@ -0,0 +1,4 @@
+---
+team: Web Development
+permalink: "/blog/category/web-development"
+---

_config.yml

@@ -39,22 +39,15 @@ plugins:
   - jekyll-feed
   - jekyll-paginate
 
-# Exclude from processing.
-# The following items will not be processed, by default.
-# Any item listed under the `exclude:` key here will be automatically added to
-# the internal "default list".
-#
-# Excluded items can be processed by explicitly listing the directories or
-# their entries' file path in the `include:` list.
-#
-# exclude:
-#   - .sass-cache/
-#   - .jekyll-cache/
-#   - gemfiles/
-#   - Gemfile
-#   - Gemfile.lock
-#   - node_modules/
-#   - vendor/bundle/
-#   - vendor/cache/
-#   - vendor/gems/
-#   - vendor/ruby/
+# Blog categories
+collections:
+  category:
+    output: true
+
+defaults:
+  -
+    scope:
+      path: ""
+      type: category
+    values:
+      layout: "category"

_layouts/category.html

@@ -0,0 +1,16 @@
+---
+layout: post-index
+title: page.team
+---
+
+<ul class="post-list text-length-lg">
+
+    <!-- Loop though posts -->
+    {% for post in site.posts %}
+    {% capture team %}{{post.team}}{% endcapture %}
+    {% if team == page.team %}
+        {% include post-list-item.html %}
+    {% endif %}
+    {% endfor %}
+
+</ul>

_layouts/post-index.html

@@ -0,0 +1,59 @@
+---
+layout: default
+---
+
+<!-- Featured post hero -->
+{% include featured-post-hero.html %}
+
+<div class="post-index" id="{{ site.post-id | remove: "#" }}">
+
+    <!-- Post catagory nav -->
+    <nav class="post-index__nav text-white" aria-label="Blog Categories">
+
+        <ul class="post-index__nav-list list--plain">
+
+            {% unless page.url contains "category" %}
+                {% assign class = 'active' %}
+            {% endunless %}
+
+            <!-- Blog home -->
+            <li class="post-index__nav-list-item {{ class }}">
+                <a class="post-index__nav-link" href="{% link blog/index.html %}{{ site.post-id }}">Latest</a>
+            </li>
+
+            <!-- Catagory loop -->
+            {% for category in site.category %}
+            {% assign class = nil %}
+            {% if page.url contains category.url or page.url contains category.title or page.url == "/blog/index.html" %}
+                {% assign class = 'active' %}
+            {% endif %}
+
+            <li class="post-index__nav-list-item {{ class }}">
+                <a class="post-index__nav-link" href="{{ category.url }}{{ site.post-id }}">{{ category.team }}</a>
+            </li>
+            {% endfor %}
+        </ul>
+
+    </nav>
+
+    <section class="post-index__body">
+
+        <!-- Post catagory title -->
+        <div class="pb-2 border-bottom text-length-lg">
+            {% assign catagory-title = 'Latest' %}
+            {% if page.team %}
+                {% assign catagory-title = page.team %}
+            {% endif %}
+            <h1 class="section-heading text-teal">{{catagory-title}} Posts</h1>
+        </div>
+
+        <!-- Content -->
+        <div class="text-length-lg">
+            {{ content }}
+        </div>
+
+        <!-- Pagination -->
+        {% include pagination.html %}
+    </section>
+
+</div>

assets/_sass/base/_layout.scss

@@ -4,7 +4,7 @@
 
 // Container padding
 $cp-sm: rem-calc(15px);
-$cp-md: 5%;
+$cp-md: 5vw;
 $cp-lg: rem-calc(75px);
 $cp-offset-lg: 12%;
 $cp-offset-xl: rem-calc(175px);

assets/_sass/component/_featured-post-hero.scss

@@ -56,6 +56,7 @@
 
 .feat-post__separator {
     @extend .fancy-line;
+    margin: 2em auto;
     width: 100%;
 
     // Vertical position line

assets/_sass/component/_post-index.scss

@@ -1,22 +1,113 @@
+////////////////////
+// Variables
+////////////////////
+
+$index-nav-gradient-sm: linear-gradient(180deg, $slate-700 0%, $slate-800 100%);
+$index-nav-gradient-lg: linear-gradient(180deg, $slate-700 0px, $slate-800 800px);
+
+////////////////////
+// Layout
+////////////////////
+
 .post-index {
     @media (min-width: $bp-md) {
         display: grid;
-        grid-template-columns: 1fr 2fr;
+        grid-template-columns: auto 1fr;
+        grid-template-areas:
+        "header body";
+    }
+
+    @media (min-width: $bp-xl) {
+        grid-template-columns: 1fr minmax(auto, ($max-width * .25)) minmax(0, ($max-width * .75)) 1fr;
+        grid-template-areas:
+        ". header body .";
+        // Hack to fake header gradient bleed off the left side
+        background-image: $index-nav-gradient-lg;
+        background-repeat: no-repeat;
+        background-size: 50% 100%;
     }
 }
 
-.post-index__header {
+.post-index__nav,
+.post-index__body {
+    margin: 0;
     @extend .section-container;
-    display: none;
-
-    @media (min-width: $bp-md) {
-        display: block;
-        margin: 0;
-        background-image: linear-gradient(180deg, $slate-700 0%, $slate-800 100%);
-    }
+}
+.post-index__nav {
+    grid-area: header;
 }
 
 .post-index__body {
-    @extend .section-container;
+    grid-area: body;
     background-color: $white;
+
+    @media (min-width: $bp-md) {
+        min-height: 85vh;
+    }
+}
+
+////////////////////
+// Navigation Styles
+////////////////////
+
+.post-index__nav {
+    background-image: $index-nav-gradient-lg;
+
+    // Mobile only tweaks
+    @media (max-width: $bp-md - 1px) {
+        padding-top: rem-calc(20px);
+        padding-bottom: rem-calc(15px);
+        background-image: $index-nav-gradient-sm;
+    }
+}
+
+.post-index__nav-list {
+    display: grid;
+    grid-gap: 0 rem-calc(10px);
+    grid-template-columns: 1fr 1fr;
+    margin-left: 1em;
+    font-size: rem-calc(14px);
+    color: rgba($white, .75);
+    @extend .monospace;
+
+    @media (min-width: $bp-md) {
+        display: block;
+        margin-left: 0;
+        font-size: rem-calc(18px);
+    }
+}
+
+.post-index__nav-list-item {
+    margin: 0 0 .5em 0;
+}
+
+// Active link styles
+.post-index__nav-list .active {
+    position: relative;
+    color: $white;
+
+    // Indicator Dot
+    &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: -.65em;
+        transform: translate(-50%, -50%);
+        width: 5px;
+        height: 5px;
+        background-color: $teal;
+        border-radius: 100%;
+        z-index: 2;
+    }
+}
+
+// Link styles
+.post-index__nav-link {
+    @extend .link-text-color;
+
+    &:hover,
+    &:focus {
+        color: $white;
+    }
 }

blog/index.html

@@ -1,32 +1,15 @@
 ---
-layout: default
+layout: post-index
 title: Blog
 ---
 
-<!-- Featured post hero -->
-{% include featured-post-hero.html %}
+{%- if site.posts.size > 0 -%}
+<ul class="post-list text-length-lg">
 
-<div class="post-index">
+    <!-- Loop though posts -->
+    {%- for post in paginator.posts -%}
+        {% include post-list-item.html %}
+    {%- endfor -%}
 
-    <div class="post-index__header">
-        <!-- future category nav will live here -->
-    </div>
-
-    <section id="all-posts" class="post-index__body">
-        <!-- Loop though posts -->
-        {%- if site.posts.size > 0 -%}
-        <ul class="post-list text-length-md">
-
-            <!-- Post -->
-            {%- for post in paginator.posts -%}
-                {% include post-list-item.html %}
-            {%- endfor -%}
-
-        </ul>
-        {%- endif -%}
-
-        <!-- pagination -->
-        {% include pagination.html %}
-    </section>
-
-</div>
+</ul>
+{%- endif -%}