Add introduction sections (#1497)

Author: rstacruz

_sass/2017/components/h3-section.scss

@@ -130,10 +130,7 @@
   }
 
   /* Description paragraphs */
-  & > pre ~ p,
-  & > ul ~ p,
-  & > iframe ~ p,
-  & > table ~ p {
+  & p {
     background: $gray-bg;
     color: $gray-text;
 
@@ -212,3 +209,55 @@ ul.-also-see.-also-see.-also-see {
     display: block;
   }
 }
+
+.h3-section.-intro {
+  & > .body > p {
+    @include font-size(1);
+  }
+
+  & > .body > ul > li {
+    padding-left: 16px;
+    position: relative;
+  }
+
+  & > .body > ul > li::before {
+    display: none;
+  }
+
+  // & > .body > ul > li:hover {
+  //   background: rgba($base-b3, 0.1);
+  // }
+
+  & > .body > ul > li > a {
+    @include font-size(1);
+    display: block;
+    font-weight: bold;
+  }
+
+  // Cover the full card
+  & > .body > ul > li > a::before {
+    content: '';
+    @include ion-md-arrow-forward(24px, $base-a3);
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    margin-top: -12px;
+  }
+  & > .body > ul > li:hover > a::before {
+    @include ion-md-arrow-forward(24px, $base-a);
+  }
+
+  & > .body > ul > li > a::after {
+    content: '';
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  & > .body > ul > li em {
+    color: $base-mute;
+  }
+}

_sass/2017/components/main-heading.scss

@@ -16,18 +16,13 @@
     font-weight: 200;
     font-family: $body-font;
     margin: 0;
+    text-align: center;
   }
 
   & > h1 > em {
     font-style: normal;
     color: lighten($gray-text, 20%);
   }
-}
-
-.main-heading.-center {
-  & > h1 {
-    text-align: center;
-  }
 
   & > .pubbox {
     margin-top: 16px;
@@ -42,6 +37,28 @@
   }
 }
 
+.UseCompactHeader .main-heading {
+  @media (min-width: 769px) {
+    & {
+      display: flex;
+      align-items: flex-end;
+      margin-bottom: 32px;
+    }
+
+    & > h1 {
+      flex: 1 0 auto;
+      text-align: left;
+      padding-right: 32px;
+    }
+
+    & > .pubbox {
+      flex: 0 0 auto;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+}
+
 /**
  * Add some space in preview mode
  */

bash.md

@@ -18,6 +18,14 @@ Getting started
 ---------------
 {: .-three-column}
 
+### Introduction
+{: .-intro}
+
+This is a quick reference to getting started with Bash scripting.
+
+- [Learn bash in y minutes](https://learnxinyminutes.com/docs/bash/) _(learnxinyminutes.com)_
+- [Bash Guide](http://mywiki.wooledge.org/BashGuide) _(mywiki.wooledge.org)_
+
 ### Example
 
 ```bash

enzyme.md

@@ -11,12 +11,16 @@ keywords:
   - 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.
 ---
 
 ## Getting started
 
+### Introduction
+
+[Enzyme](http://airbnb.io/enzyme) lets you write unit tests for React components. This guide covers Enzyme 3.x.
+
+- [Enzyme website](https://enzymejs.github.io/enzyme/) _(enzymejs.github.io)_
+
 ### Mounting
 {: .-prime}
 

[email protected]

@@ -5,13 +5,16 @@ layout: 2017/sheet
 updated: 2017-10-12
 weight: -1
 deprecated_by: /enzyme
-intro: |
-  [Enzyme](http://airbnb.io/enzyme) lets you write unit tests for React components. This guide covers Enzyme 2.x.
 ---
 
 ## Getting started
 {: .-three-column}
 
+### Introduction
+{: .-intro}
+
+**(Deprecated)** [Enzyme](http://airbnb.io/enzyme) lets you write unit tests for React components. This guide covers a previous version (v2.x).
+
 ### Mounting
 {: .-prime}
 

factory_bot.md

@@ -3,21 +3,27 @@ title: Factory Bot
 category: Ruby libraries
 layout: 2017/sheet
 weight: -3
-updated: 2020-06-24
+updated: 2020-07-06
 keywords:
   - "FactoryBot.define do"
   - "factory :user"
   - "first_name 'John'"
   - "sequence(:username) { |n| \"user#{n}\" }"
 tags: [Featurable]
-intro: |
-  [Factory Bot](http://www.rubydoc.info/gems/factory_bot/) is a helper for writing factories for Ruby tests.
-  It was previously known as Factory Girl. For older versions, use `FactoryGirl` instead of `FactoryBot`.
 ---
 
 ## Factories
 {: .-three-column}
 
+### Introduction
+{: .-intro}
+
+[Factory Bot](http://www.rubydoc.info/gems/factory_bot/) is a helper for writing factories for Ruby tests. It was previously known as Factory Girl. For older versions, use `FactoryGirl` instead of `FactoryBot`.
+
+- [Factory Bot documentation](http://www.rubydoc.info/gems/factory_bot/) _(rubydoc.info)_
+- [Getting started](https://github.com/thoughtbot/factory_bot/blob/master/GETTING_STARTED.md) _(github.com)_
+- [Source code](https://github.com/thoughtbot/factory_bot) _(github.com)_
+
 ### Defining factories
 
 ```ruby

fastify.md

@@ -3,12 +3,18 @@ title: Fastify
 category: JavaScript libraries
 layout: 2017/sheet
 updated: 2017-09-23
-intro: |
-  [Fastify](https://github.com/fastify/fastify) lets you create HTTP servers in Node.js with good performance. This guide targets fastify v0.28.x.
 ---
 
 ## Getting started
 
+### Introduction
+{: .-intro}
+
+[Fastify](https://github.com/fastify/fastify) lets you create HTTP servers in Node.js with good performance. This guide targets fastify v0.28.x.
+
+- [Fastify source code](https://github.com/fastify/fastify) _(github.com)_
+- [Documentation](https://github.com/fastify/fastify#documentation) _(github.com)_
+
 ### Hello world
 {: .-prime}
 

go.md

@@ -11,6 +11,13 @@ updated: 2020-06-21
 ## Getting started
 {: .-three-column}
 
+### Introduction
+{: .-intro}
+
+- [A tour of Go](https://tour.golang.org/welcome/1) _(tour.golang.org)_
+- [Go repl](https://repl.it/languages/go) _(repl.it)_
+- [Golang wiki](https://github.com/golang/go/wiki/) _(github.com)_
+
 ### Hello world
 {: .-prime}
 
@@ -576,10 +583,17 @@ See: [Pointer receivers](https://tour.golang.org/methods/4)
 
 ## References
 
+### Official resources
+{: .-intro}
+
 - [A tour of Go](https://tour.golang.org/welcome/1) _(tour.golang.org)_
 - [Golang wiki](https://github.com/golang/go/wiki/) _(github.com)_
-- [Awesome Go](https://awesome-go.com/) _(awesome-go.com)_
-- [Go by Example](https://gobyexample.com/) _(gobyexample.com)_
 - [Effective Go](https://golang.org/doc/effective_go.html) _(golang.org)_
+
+### Other links
+{: .-intro}
+
+- [Go by Example](https://gobyexample.com/) _(gobyexample.com)_
+- [Awesome Go](https://awesome-go.com/) _(awesome-go.com)_
 - [JustForFunc Youtube](https://www.youtube.com/channel/UC_BzFbxG2za3bp5NRRRXJSw) _(youtube.com)_
 - [Style Guide](https://github.com/golang/go/wiki/CodeReviewComments) _(github.com)_

httpie.md

@@ -6,10 +6,17 @@ weight: -3
 updated: 2020-07-05
 description: |
   $ http POST http://example.com name="John" Host:example.com — JSON, cookies, files, auth, and other httpie examples.
-intro: |
-  [HTTPie](https://httpie.org/) is a command-line HTTP client.
 ---
 
+### Intorduction
+{: .-intro}
+
+[HTTPie](https://httpie.org/) is a command-line HTTP client.
+
+- [HTTPie website](https://httpie.org/) _(httpie.org)_
+- [HTTPie documentation](https://httpie.org/docs) _(httpie.org)_
+- [Try it online](https://httpie.org/run) _(httpie.org)_
+
 ### Parameters
 
 ```bash

sass.md

@@ -18,6 +18,13 @@ keywords:
 ## Basics
 {: .-three-column}
 
+### Introduction
+{: .-intro}
+
+This is a quick reference to [Sass stylesheets](https://sass-lang.com).
+
+- [Sass documentation](https://sass-lang.com/documentation) _(sass-lang.com)_
+
 ### Variables
 
 ```scss