Cross links

.tool-versions

@@ -0,0 +1 @@
+ruby 2.2.3

Readme.md

@@ -42,6 +42,7 @@ layout: 2017/sheet   # 'default' | '2017/sheet'
 updated: 201708      # To show in the updated list (update _config.yml)
 ads: false           # Add this to disable ads
 weight: -5           # lower number = higher in related posts list
+deprecated: true     # Don't show in related posts
 ---
 ```
 

_includes/2017/related-posts-item.html

@@ -0,0 +1,6 @@
+<li class='{{ include.class }}'>
+  <a href='{{ base }}{{ include.post.url | remove: '.html' }}'>
+    <strong>{{ include.post.title }}</strong>
+    <span>cheatsheet</span>
+  </a>
+</li>

_includes/2017/related-posts.html

@@ -0,0 +1,35 @@
+{% assign category_posts = site.pages
+  | where: "category", include.page.category
+  | where_exp: "page", "page.url != include.page.url"
+  | where_exp: "page", "page.deprecated != true"
+  | sort: "weight", "last"
+%}
+{% assign top_posts = site.pages
+  | where_exp: "page", "page.tags contains 'Featured'"
+  | where_exp: "page", "page.url != include.page.url"
+  | where_exp: "page", "page.deprecated != true"
+  | sort: "weight", "last"
+%}
+<div class='related-posts'>
+  <div class='container'>
+    {% if include.page.category == 'Others' %}
+      <h3>Other cheatsheets</h3>
+    {% else %}
+      <h3>Other {{ include.page.category }} cheatsheets</h3>
+    {% endif %}
+
+    <ul class='related-post-list'>
+      {% for post in category_posts limit: 6 %}
+        {% include 2017/related-posts-item.html post=post class='item related-post-item' %}
+      {% endfor %}
+    </ul>
+
+    <h3>Top cheatsheets</h3>
+
+    <ul class='related-post-list'>
+      {% for post in top_posts limit: 6 %}
+        {% include 2017/related-posts-item.html post=post class='item related-post-item' %}
+      {% endfor %}
+    </ul>
+  </div>
+</div>

_layouts/2017/sheet.html

@@ -26,4 +26,5 @@ <h1 class='h1'>{{ page.title }} <em>cheatsheet</em></h1>
   </div>
 </div>
 
+{% include 2017/related-posts.html page=page %}
 {% include 2017/foot.html %}

_sass/2017/components/related-posts.scss

@@ -0,0 +1,144 @@
+.related-posts {
+  & {
+    @include gutter(padding-top, $multiplier: 4);
+    @include gutter(padding-bottom, $multiplier: 4);
+    @include gutter(margin-top, $multiplier: 4);
+    background: $gray-bg;
+  }
+
+  & > .container {
+    @include gutter(padding-left);
+    @include gutter(padding-right);
+    max-width: $area-width;
+    margin: 0 auto;
+  }
+
+  & > .container > h3 {
+    @include font-size(1);
+    font-weight: normal;
+    color: $base-head;
+    margin: 16px 0;
+    padding: 0;
+  }
+
+  & > .container > :first-child {
+    margin-top: 0;
+  }
+
+  & > .container > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.related-post-list {
+  &,
+  & > li {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  & {
+    display: flex;
+    margin: -4px;
+  }
+
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+  }
+
+  & > .item {
+    flex: 1 1 (100% / 2);
+    margin: 4px;
+
+    @media (min-width: 481px) {
+      flex: 1 1 (100% / 4);
+    }
+
+    @media (min-width: 769px) {
+      flex: 1 1 (100% / 8);
+    }
+  }
+
+}
+
+.related-post-item.related-post-item {
+  & {
+    display: flex;
+    text-align: left;
+    line-height: 1.4;
+  }
+
+  // Layout
+  & > a {
+    flex: 1 1 100%;
+    display: block;
+    border-radius: 2px;
+    box-shadow: $shadow2;
+    padding: 16px;
+    text-decoration: none;
+  }
+
+  // Color
+  & > a,
+  & > a:visited {
+    background: white;
+    color: $base-text;
+
+    & > strong {
+      color: $base-a;
+    }
+
+    &:hover,
+    &:focus {
+      color: $base-a;
+    }
+
+    &:hover > strong,
+    &:focus > strong {
+      color: darken($base-a, 16%);
+    }
+  }
+
+  &:first-of-type > a,
+  &:first-of-type > a:visited {
+    background: $base-a;
+    color: white;
+
+    & > strong {
+      color: white;
+    }
+
+    &:hover,
+    &:focus {
+      color: white;
+    }
+
+    &:hover > strong,
+    &:focus > strong {
+      color: white;
+    }
+
+    &:hover,
+    &:focus {
+      background: darken($base-a, 8%);
+    }
+  }
+
+  @media (min-width: 481px) {
+    & > a > strong,
+    & > a > span {
+      display: block;
+    }
+  }
+
+  & > a > strong {
+    @include font-size(1);
+    font-weight: normal;
+  }
+
+  & > a > span {
+    @include font-size(-1);
+    opacity: 0.5;
+  }
+}

_sass/2017/style.scss

@@ -24,6 +24,7 @@
 @import './components/page-actions';
 @import './components/pages-list';
 @import './components/push-button';
+@import './components/related-posts';
 @import './components/search-box';
 @import './components/side-ad';
 @import './components/site-header';

badges.md

@@ -1,5 +1,5 @@
 ---
-title: Code stuff
+title: Code badges
 ---
 
 Here are some badges for open source projects.

cron.md

@@ -3,6 +3,7 @@ title: Cron
 category: CLI
 layout: 2017/sheet
 updated: 201708
+weight: -3
 ---
 
 ## Format

css-system-font-stack.md

@@ -1,7 +1,8 @@
 ---
-title: "CSS system font stack"
+title: "CSS system fonts"
 category: CSS
 layout: 2017/sheet
+weight: -3
 ---
 
 ### System fonts

es6.md

@@ -4,6 +4,7 @@ category: JavaScript
 layout: 2017/sheet
 tags: [Featured]
 updated: 201708
+weight: -10
 ---
 
 ### Promises

phoenix-ecto@1.2.md

@@ -1,6 +1,7 @@
 ---
 title: "Phoenix: Ecto models"
 category: Elixir
+deprecated: true
 ---
 
 This is for Phoenix 1.2 and below. [Phoenix 1.3 has a new API.](phoenix-ecto@1.3.html).

react.md

@@ -5,6 +5,7 @@ layout: 2017/sheet
 ads: true
 tags: [Featured]
 updated: 201708
+weight: -10
 ---
 
 {%raw%}

react@0.14.md

@@ -1,7 +1,8 @@
 ---
-title: React.js
+title: React.js (v0.14)
 category: React
 layout: default-ad
+deprecated: true
 ---
 
 {%raw%}