Implement keywords-based descriptions

CONTRIBUTING.md

@@ -97,3 +97,36 @@ The site devhints.io is backed by CloudFlare. Updates will take 2 days to propag
 ```bash
 ./_support/cf-purge.sh
 ```
+
+## SEO description
+
+There are multiple ways to set meta description.
+
+### keywords (and intro)
+
+Set `keywords` (and optionally `intro`). This is the easiest and the preferred
+way for now.
+
+```
+React cheatsheet - devhints.io
+------------------------------
+https://devhints.io/react ▼
+React.Component · render() · componentDidMount() · props/state · React is a
+JavaScript library for building web...
+```
+
+### description (and intro)
+
+Set `description` (and optionally `intro`)
+
+```
+React cheatsheet - devhints.io
+------------------------------
+https://devhints.io/react ▼
+One-page reference to React and its API. React is a JavaScript library for
+building web user interfaces...
+```
+
+### intro only
+
+If you left out `description` or `keywords`, a default description will be added.

_includes/values/description.html

@@ -2,7 +2,11 @@
   if page.description and page.intro
 %}{{ page.description }} {{ page.intro | markdownify | strip_html }}{%
   elsif page.description
-%}{{ page.description }}{%
+%}{{ page.description }} · One-page guide to {{ page.title }}{%
+  elsif page.keywords and page.intro
+%}{{ page.keywords | join: ' · ' }} · {{ page.intro | markdownify | strip_html }}{%
+  elsif page.keywords
+%}{{ page.keywords | join: ' · ' }} · One-page guide to {{ page.title }}{%
   elsif page.intro
 %}One-page guide to {{ page.title }}: usage, examples, and more. {{ page.intro | markdownify | strip_html }}{%
   elsif page.type == 'article'

css.md

@@ -2,8 +2,14 @@
 title: CSS
 category: CSS
 layout: 2017/sheet
-tags: [WIP]
 weight: -1
+keywords:
+  - "margin, padding, border"
+  - "div, .class, #id, [attr]"
+  - "font, background"
+  - "display: block, inline, flex"
+  - Selectors
+  - Properties
 ---
 
 ## Basics

enzyme.md

@@ -5,8 +5,12 @@ layout: 2017/sheet
 updated: 2017-10-12
 tags: [Featured]
 weight: -1
-description: |
+keywords:
-  shallow() · mount() · wrap.setProps() · wrap.find().simulate('click') · wrap.contains(<div/>) ·
+  - shallow()
+  - mount()
+  - wrap.setProps()
+  - "wrap.find().simulate('click')"
+  - "wrap.contains(<div/>)"
 intro: |
   [Enzyme](http://airbnb.io/enzyme) lets you write unit tests for React components. This guide covers Enzyme 3.x.
 ---

react.md

@@ -6,8 +6,12 @@ ads: true
 tags: [Featured]
 updated: 2017-10-10
 weight: -10
-description: |
+keywords:
-  React.Component · render() · componentDidMount() · props/state · dangerouslySetInnerHTML ·
+  - React.Component
+  - render()
+  - componentDidMount()
+  - props/state
+  - dangerouslySetInnerHTML
 intro: |
   [React](https://reactjs.org/) is a JavaScript library for building user interfaces. This guide targets React v15 to v16.
 ---

sass.md

@@ -5,8 +5,14 @@ layout: 2017/sheet
 tags: [Featured]
 updated: 2017-08-26
 weight: -5
-description: |
+keywords:
-  Variables · mixins · darken() · adjust-color() · @for @each @while @if @else · $list: (a b c) · $map: (a: b, c: d)
+  - Variables
+  - mixins
+  - darken()
+  - adjust-color()
+  - "@for @each @while @if @else"
+  - $list: (a b c)
+  - $map: (a: b, c: d)
 ---
 
 ## Basics