Add blog category navigation / index page support
This commit is contained in:
parent
7dfcb64930
commit
9b1b245e2f
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
team: Core Platform
|
||||
permalink: "/blog/category/core-platform"
|
||||
---
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
team: Data Science
|
||||
permalink: "/blog/category/data-science"
|
||||
---
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
team: iOS
|
||||
permalink: "/blog/category/ios"
|
||||
---
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
team: Web Development
|
||||
permalink: "/blog/category/web-development"
|
||||
---
|
31
_config.yml
31
_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"
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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);
|
||||
|
|
|
@ -56,6 +56,7 @@
|
|||
|
||||
.feat-post__separator {
|
||||
@extend .fancy-line;
|
||||
margin: 2em auto;
|
||||
width: 100%;
|
||||
|
||||
// Vertical position line
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 -%}
|
||||
|
|
Loading…
Reference in New Issue