Skip to content

Commit 9b1b245

Browse files
kylegordykylegordy
committed
Add blog category navigation / index page support
1 parent 7dfcb64 commit 9b1b245

File tree

11 files changed

+213
-54
lines changed

11 files changed

+213
-54
lines changed

‎_category/core-platform.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
team: Core Platform
3+
permalink: "/blog/category/core-platform"
4+
---

‎_category/data-science.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
team: Data Science
3+
permalink: "/blog/category/data-science"
4+
---

‎_category/ios.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
team: iOS
3+
permalink: "/blog/category/ios"
4+
---

‎_category/web-development.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
team: Web Development
3+
permalink: "/blog/category/web-development"
4+
---

‎_config.yml

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -39,22 +39,15 @@ plugins:
3939
- jekyll-feed
4040
- jekyll-paginate
4141

42-
# Exclude from processing.
43-
# The following items will not be processed, by default.
44-
# Any item listed under the `exclude:` key here will be automatically added to
45-
# the internal "default list".
46-
#
47-
# Excluded items can be processed by explicitly listing the directories or
48-
# their entries' file path in the `include:` list.
49-
#
50-
# exclude:
51-
# - .sass-cache/
52-
# - .jekyll-cache/
53-
# - gemfiles/
54-
# - Gemfile
55-
# - Gemfile.lock
56-
# - node_modules/
57-
# - vendor/bundle/
58-
# - vendor/cache/
59-
# - vendor/gems/
60-
# - vendor/ruby/
42+
# Blog categories
43+
collections:
44+
category:
45+
output: true
46+
47+
defaults:
48+
-
49+
scope:
50+
path: ""
51+
type: category
52+
values:
53+
layout: "category"

‎_layouts/category.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
layout: post-index
3+
title: page.team
4+
---
5+
6+
<ul class="post-list text-length-lg">
7+
8+
<!-- Loop though posts -->
9+
{% for post in site.posts %}
10+
{% capture team %}{{post.team}}{% endcapture %}
11+
{% if team == page.team %}
12+
{% include post-list-item.html %}
13+
{% endif %}
14+
{% endfor %}
15+
16+
</ul>

‎_layouts/post-index.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
layout: default
3+
---
4+
5+
<!-- Featured post hero -->
6+
{% include featured-post-hero.html %}
7+
8+
<div class="post-index" id="{{ site.post-id | remove: "#" }}">
9+
10+
<!-- Post catagory nav -->
11+
<nav class="post-index__nav text-white" aria-label="Blog Categories">
12+
13+
<ul class="post-index__nav-list list--plain">
14+
15+
{% unless page.url contains "category" %}
16+
{% assign class = 'active' %}
17+
{% endunless %}
18+
19+
<!-- Blog home -->
20+
<li class="post-index__nav-list-item {{ class }}">
21+
<a class="post-index__nav-link" href="{% link blog/index.html %}{{ site.post-id }}">Latest</a>
22+
</li>
23+
24+
<!-- Catagory loop -->
25+
{% for category in site.category %}
26+
{% assign class = nil %}
27+
{% if page.url contains category.url or page.url contains category.title or page.url == "/blog/index.html" %}
28+
{% assign class = 'active' %}
29+
{% endif %}
30+
31+
<li class="post-index__nav-list-item {{ class }}">
32+
<a class="post-index__nav-link" href="{{ category.url }}{{ site.post-id }}">{{ category.team }}</a>
33+
</li>
34+
{% endfor %}
35+
</ul>
36+
37+
</nav>
38+
39+
<section class="post-index__body">
40+
41+
<!-- Post catagory title -->
42+
<div class="pb-2 border-bottom text-length-lg">
43+
{% assign catagory-title = 'Latest' %}
44+
{% if page.team %}
45+
{% assign catagory-title = page.team %}
46+
{% endif %}
47+
<h1 class="section-heading text-teal">{{catagory-title}} Posts</h1>
48+
</div>
49+
50+
<!-- Content -->
51+
<div class="text-length-lg">
52+
{{ content }}
53+
</div>
54+
55+
<!-- Pagination -->
56+
{% include pagination.html %}
57+
</section>
58+
59+
</div>

‎assets/_sass/base/_layout.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
// Container padding
66
$cp-sm: rem-calc(15px);
7-
$cp-md: 5%;
7+
$cp-md: 5vw;
88
$cp-lg: rem-calc(75px);
99
$cp-offset-lg: 12%;
1010
$cp-offset-xl: rem-calc(175px);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656

5757
.feat-post__separator {
5858
@extend .fancy-line;
59+
margin: 2em auto;
5960
width: 100%;
6061

6162
// Vertical position line

‎assets/_sass/component/_post-index.scss

Lines changed: 99 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,113 @@
1+
////////////////////
2+
// Variables
3+
////////////////////
4+
5+
$index-nav-gradient-sm: linear-gradient(180deg, $slate-700 0%, $slate-800 100%);
6+
$index-nav-gradient-lg: linear-gradient(180deg, $slate-700 0px, $slate-800 800px);
7+
8+
////////////////////
9+
// Layout
10+
////////////////////
11+
112
.post-index {
213
@media (min-width: $bp-md) {
314
display: grid;
4-
grid-template-columns: 1fr 2fr;
15+
grid-template-columns: auto 1fr;
16+
grid-template-areas:
17+
"header body";
18+
}
19+
20+
@media (min-width: $bp-xl) {
21+
grid-template-columns: 1fr minmax(auto, ($max-width * .25)) minmax(0, ($max-width * .75)) 1fr;
22+
grid-template-areas:
23+
". header body .";
24+
// Hack to fake header gradient bleed off the left side
25+
background-image: $index-nav-gradient-lg;
26+
background-repeat: no-repeat;
27+
background-size: 50% 100%;
528
}
629
}
730

8-
.post-index__header {
31+
.post-index__nav,
32+
.post-index__body {
33+
margin: 0;
934
@extend .section-container;
10-
display: none;
35+
}
36+
.post-index__nav {
37+
grid-area: header;
38+
}
39+
40+
.post-index__body {
41+
grid-area: body;
42+
background-color: $white;
43+
44+
@media (min-width: $bp-md) {
45+
min-height: 85vh;
46+
}
47+
}
48+
49+
////////////////////
50+
// Navigation Styles
51+
////////////////////
52+
53+
.post-index__nav {
54+
background-image: $index-nav-gradient-lg;
55+
56+
// Mobile only tweaks
57+
@media (max-width: $bp-md - 1px) {
58+
padding-top: rem-calc(20px);
59+
padding-bottom: rem-calc(15px);
60+
background-image: $index-nav-gradient-sm;
61+
}
62+
}
63+
64+
.post-index__nav-list {
65+
display: grid;
66+
grid-gap: 0 rem-calc(10px);
67+
grid-template-columns: 1fr 1fr;
68+
margin-left: 1em;
69+
font-size: rem-calc(14px);
70+
color: rgba($white, .75);
71+
@extend .monospace;
1172

1273
@media (min-width: $bp-md) {
1374
display: block;
14-
margin: 0;
15-
background-image: linear-gradient(180deg, $slate-700 0%, $slate-800 100%);
75+
margin-left: 0;
76+
font-size: rem-calc(18px);
1677
}
1778
}
1879

19-
.post-index__body {
20-
@extend .section-container;
21-
background-color: $white;
80+
.post-index__nav-list-item {
81+
margin: 0 0 .5em 0;
82+
}
83+
84+
// Active link styles
85+
.post-index__nav-list .active {
86+
position: relative;
87+
color: $white;
88+
89+
// Indicator Dot
90+
&::before {
91+
content: '';
92+
display: block;
93+
position: absolute;
94+
top: 50%;
95+
left: -.65em;
96+
transform: translate(-50%, -50%);
97+
width: 5px;
98+
height: 5px;
99+
background-color: $teal;
100+
border-radius: 100%;
101+
z-index: 2;
102+
}
103+
}
104+
105+
// Link styles
106+
.post-index__nav-link {
107+
@extend .link-text-color;
108+
109+
&:hover,
110+
&:focus {
111+
color: $white;
112+
}
22113
}

‎blog/index.html

Lines changed: 9 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,15 @@
11
---
2-
layout: default
2+
layout: post-index
33
title: Blog
44
---
55

6-
<!-- Featured post hero -->
7-
{% include featured-post-hero.html %}
6+
{%- if site.posts.size > 0 -%}
7+
<ul class="post-list text-length-lg">
88

9-
<div class="post-index">
9+
<!-- Loop though posts -->
10+
{%- for post in paginator.posts -%}
11+
{% include post-list-item.html %}
12+
{%- endfor -%}
1013

11-
<div class="post-index__header">
12-
<!-- future category nav will live here -->
13-
</div>
14-
15-
<section id="all-posts" class="post-index__body">
16-
<!-- Loop though posts -->
17-
{%- if site.posts.size > 0 -%}
18-
<ul class="post-list text-length-md">
19-
20-
<!-- Post -->
21-
{%- for post in paginator.posts -%}
22-
{% include post-list-item.html %}
23-
{%- endfor -%}
24-
25-
</ul>
26-
{%- endif -%}
27-
28-
<!-- pagination -->
29-
{% include pagination.html %}
30-
</section>
31-
32-
</div>
14+
</ul>
15+
{%- endif -%}

0 commit comments

Comments
 (0)