Add introduction sections (#1497)

2020-07-06 00:38:31 +10:00 · 2020-07-06 00:38:31 +10:00 · c792f1b418
parent ba699dd29e
commit c792f1b418
11 changed files with 149 additions and 26 deletions
--- a/_sass/2017/components/h3-section.scss
+++ b/_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;
+  }
+}
--- a/_sass/2017/components/main-heading.scss
+++ b/_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
 */
--- a/bash.md
+++ b/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
--- a/enzyme.md
+++ b/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}

--- a/enzyme@2.md
+++ b/enzyme@2.md
@ -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}

--- a/factory_bot.md
+++ b/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
--- a/fastify.md
+++ b/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}

--- a/go.md
+++ b/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)_
--- a/httpie.md
+++ b/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
--- a/sass.md
+++ b/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
--- a/xpath.md
+++ b/xpath.md
@ -11,9 +11,11 @@ description: |
 ## Testing

 ### Xpath test bed
+{: .-intro}

-Test queries in the Xpath test bed:<br>
-[Xpath test bed](http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm) _(whitebeam.org)_
+Test queries in the Xpath test bed:
+
+- [Xpath test bed](http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm) _(whitebeam.org)_

 ### Browser console