Begin to implement index@2017

_includes/2017/top-nav.html

@@ -6,13 +6,16 @@
 
     <div class='actions'>
       {% include social-list.html class="social page-actions" page=include.page %}
-      <ul class='page-actions'>
+
-        <li class='link github -button hint--bottom' data-hint='Edit this page on GitHub'>
+      {% if include.page.type == 'article' %}
-          <a href='https://github.com/rstacruz/cheatsheets/blob/gh-pages/{{ page.path | remove: '.html' }}'>
+        <ul class='page-actions'>
-            <span class='text -visible'>Edit</span>
+          <li class='link github -button hint--bottom' data-hint='Edit this page on GitHub'>
-          </a>
+            <a href='https://github.com/rstacruz/cheatsheets/blob/gh-pages/{{ page.path | remove: '.html' }}'>
-        </li>
+              <span class='text -visible'>Edit</span>
-      </ul>
+            </a>
+          </li>
+        </ul>
+      {% endif %}
     </div>
   </div>
 </div>

_layouts/2017/home.html

@@ -0,0 +1,33 @@
+---
+type: website
+---
+{% include 2017/head.html %}
+
+{% include 2017/top-nav.html page=page %}
+
+<div class='body-area -slim'>
+  <div class='search-box'>
+    <input type='text' placeholder='Search...' />
+  </div>
+
+  <div class='pages-list'>
+    {% for category in site.category_names %}
+      <h2 class='category item' id='{{ category | downcase | replace: " ", "-" }}'>
+        <span>{{ category }}</span>
+      </h2>
+
+      {% for page in site.pages %}
+        {% if page.category == category %}
+          {% if page.type == article %}
+            <a class='article item' href="{{base}}{{ page.url | remove: '.html' }}">
+              <code class='slug'>{{ page.url | remove: '.html' | remove: '/' }}</code>
+              <span class='title'>{{ page.title }}</span>
+            </a>
+          {% endif %}
+        {% endif %}
+      {% endfor %}
+    {% endfor %}
+  </div>
+</div>
+
+{% include 2017/foot.html %}

_layouts/home.html

@@ -11,10 +11,12 @@ html_class: home
   <div class='pages-list'>
     {% for page in site.pages %}
       {% if page.category == category %}
-        <a href="{{base}}{{ page.url | remove: '.html' }}">
+        {% if page.type == article %}
-          <span class='title'>{{ page.title }}</span>
+          <a href="{{base}}{{ page.url | remove: '.html' }}">
-          <span class='date'>{{ page.url | remove: '.html' | remove: '/' }}</span>
+            <span class='title'>{{ page.title }}</span>
-        </a>
+            <span class='date'>{{ page.url | remove: '.html' | remove: '/' }}</span>
+          </a>
+        {% endif %}
       {% endif %}
     {% endfor %}
   </div>

_sass/2017/components/body-area.scss

@@ -2,4 +2,8 @@
   max-width: $area-width;
   margin: 0 auto;
   @include gutter(padding);
+
+  &.-slim {
+    max-width: 600px;
+  }
 }

_sass/2017/components/page-actions.scss

@@ -58,6 +58,10 @@
     @include action-bar;
   }
 
+  & + & {
+    margin-left: 8px;
+  }
+
   & > .facebook > a::before {
     @include ion-icon('logo-facebook');
   }
@@ -75,10 +79,17 @@
     border-radius: 2px;
     padding: 0 16px;
     margin: 0 8px;
+    transition: all 100ms linear;
 
     & > .text {
       margin-left: 4px;
     }
+
+    &:hover,
+    &:focus {
+      background: $base-panel;
+      box-shadow: $shadow3;
+    }
   }
 
   // Collapse

_sass/2017/components/pages-list.scss

@@ -0,0 +1,55 @@
+.search-box {
+  background: $base-panel;
+  box-shadow: $shadow3;
+
+  & > input {
+    padding: 16px;
+    background: transparent;
+    border: 0;
+    width: 100%;
+  }
+}
+
+.pages-list {
+  > .item {
+    border-top: solid 1px $dark-line-color;
+    padding: 4px 0;
+  }
+
+  > .article {
+    text-decoration: none;
+    display: block;
+    white-space: nowrap;
+    padding-left: 8px;
+
+    &,
+    &:visited {
+      color: $base-mute;
+    }
+
+    &:hover,
+    &:focus {
+      & > code {
+        color: $base-a;
+      }
+    }
+
+    & > code {
+      color: $base-head;
+    }
+
+    & > .title::before {
+      content: '/ ';
+      margin: 0 8px;
+      color: $base-mute;
+      opacity: 0.5;
+    }
+  }
+
+  > .category {
+    @include font-size(1);
+    margin: 0;
+    font-weight: normal;
+    color: $base-b;
+  }
+}

_sass/2017/components/top-nav.scss

@@ -4,6 +4,7 @@
     height: 48px;
     line-height: 48px;
     text-align: center;
+    overflow: hidden;
   }
 
   >.container {

_sass/2017/style.scss

@@ -17,4 +17,5 @@
 @import './components/headline-ad';
 @import './components/main-heading';
 @import './components/page-actions';
+@import './components/pages-list';
 @import './components/top-nav';

index@2017.md

@@ -0,0 +1,6 @@
+---
+full_title: "Cheatsheets — for web development and more"
+description: "A collection of cheatsheets I've written."
+layout: 2017/home
+type: website
+---

react.md

@@ -3,6 +3,7 @@ title: React.js
 category: React
 layout: 2017/sheet
 ads: true
+tags: [Featured]
 ---
 
 {%raw%}

vim.md

@@ -2,6 +2,7 @@
 title: Vim
 category: Vim
 layout: 2017/sheet
+tags: [Featured]
 ---
 
 Getting started