From c792f1b4188dc37e1987f6fb8bcf64fd92348557 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Mon, 6 Jul 2020 00:38:31 +1000 Subject: [PATCH] Add introduction sections (#1497) --- _sass/2017/components/h3-section.scss | 57 +++++++++++++++++++++++-- _sass/2017/components/main-heading.scss | 29 ++++++++++--- bash.md | 8 ++++ enzyme.md | 8 +++- enzyme@2.md | 7 ++- factory_bot.md | 14 ++++-- fastify.md | 10 ++++- go.md | 18 +++++++- httpie.md | 11 ++++- sass.md | 7 +++ xpath.md | 6 ++- 11 files changed, 149 insertions(+), 26 deletions(-) diff --git a/_sass/2017/components/h3-section.scss b/_sass/2017/components/h3-section.scss index be9efad6b..4273b8140 100644 --- 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; + } +} diff --git a/_sass/2017/components/main-heading.scss b/_sass/2017/components/main-heading.scss index b7ece1d16..39dd7ef84 100644 --- 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 */ diff --git a/bash.md b/bash.md index 9ca7d4fda..73e0b1abf 100644 --- 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 diff --git a/enzyme.md b/enzyme.md index 38d3e7a41..13f879a56 100644 --- a/enzyme.md +++ b/enzyme.md @@ -11,12 +11,16 @@ keywords: - wrap.setProps() - "wrap.find().simulate('click')" - "wrap.contains(
)" -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} diff --git a/enzyme@2.md b/enzyme@2.md index 08cbca929..ebeee97a1 100644 --- 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} diff --git a/factory_bot.md b/factory_bot.md index 10f603591..e8c8f6d53 100644 --- 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 diff --git a/fastify.md b/fastify.md index cbbd80bea..c6fdb9409 100644 --- 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} diff --git a/go.md b/go.md index 60c85f7db..581521d93 100644 --- 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)_ diff --git a/httpie.md b/httpie.md index d2ede5a79..7d8f08a9a 100644 --- 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 diff --git a/sass.md b/sass.md index 4d5975be4..38593c8be 100644 --- 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 diff --git a/xpath.md b/xpath.md index ddec941d9..afbe5e42a 100644 --- a/xpath.md +++ b/xpath.md @@ -11,9 +11,11 @@ description: | ## Testing ### Xpath test bed +{: .-intro} -Test queries in the Xpath test bed:
-[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