reference/source/_posts/quickref.md at main · Fechin/reference

title

CheatSheets

date

2020-11-25 10:28:43 -0800

background

bg-gradient-to-l from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500

Getting Started

Develop Setup

Clone Repository View on Github

$ git clone https://github.com/Fechin/reference.git

Install Dependencies in the project directory
```
$ npm install
```
Start a Dev Server http://localhost:4000
```
$ npm run dev
```
Create or modify source/_posts/{name}.md
Send us pull request and chill {.marker-timeline}

It's a good practice to refer to the source code of the CheatSheets reference.

Directory Structure

.
├── source
│   ├── _posts   # Cheatsheet source files
│   │   ├── awk.md
│   │   ├── vim.md # => cheatsheets.zip/vim
│   │   ├── php.md
│   │   ├── css.md # => cheatsheets.zip/css
│   │   ├── ...
│   └── widget   # Widget files
│       └── chmod.html
├── public       # Distribution files
├── _config.yml
├── gulpfile.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── themes
    └── coo      # Theme files

Cheatsheet Structure {.row-span-2}

.
├── Section 1   # Header
│   ├── Card 1
│   ├── Card 2
│   ├── Card 3
│   ├── ...
├── Section 2
│   ├── Card 1
│   │   ├── Paragraph
│   │   ├── Code
│   │   ├── <hr/> (aka "---")
│   │   ├── List
│   │   │   ├── Paragraph
│   │   │   └── Code
│   │   └── Table
│   │       ├── Paragraph
│   │       └── Code
│   ├── Card 2
│   ├── Card 3
│   └── ...
├── Section 3
├── Section 4
└── ...

One cheatsheet contains multiple sections
One section contains multiple cards
One card can contain Code, Table, List and Paragraph
One list can contain Code and Paragraph
One table can contain Code and Paragraph

All the magic variants supported by CheatSheets.zip

Create source/_posts/demo.md

## Getting Started

### List Card {.col-span-2}

- Share quick reference
- Cheatsheet for developers ... {.style-timeline}

### Table Card

| id  | name    |
| --- | ------- |
| 1   | Roberta |

{.show-header}

Section Variants

Section Overview {.secondary}

-	-
`{.cols-1}`	one-column layout
`{.cols-2}`	two-column layout
`{.cols-3}`	three-column layout (default)
...
`{.cols-6}`	six-column layout

Section contains multiple cards
Use {.cols-n} to specify section as a n-column layout
Click the preview button below to focus on the section

Preview {.link-arrow}

.cols-1

# One Column Example {.cols-1}
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  1                                  ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  2                                  ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

↓ Source Code

## One Column Example {.cols-1}

### 1

### 2

Preview {.link-arrow}

.cols-2

# Two Columns Example
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  1              ┆ ┆  2              ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  3              ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

↓ Source Code

## Two Columns Example {.cols-2}

### 1

### 2

### 3

Preview {.link-arrow}

.cols-3 (default)

# Default
╭┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈╮
┆  1       ┆ ┆  2       ┆ ┆  3       ┆
╰┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈╮
┆  4       ┆
╰┈┈┈┈┈┈┈┈┈┈╯

↓ Source Code

## Default

### 1

### 2

### 3

### 4

Card Variants

Card Overview {.secondary}

Specifies the number of columns the card spans

-	-
`{.col-span-2}`	Example
`{.col-span-3}`
...
`.col-span-6}`

Specifies the number of rows the card spans {.text-left}

-	-
`{.row-span-2}`	Example
`{.row-span-3}`
...
`{.row-span-6}`

Emphasize card (aka `H3` Section)

-	-
`{.primary}`	Red titles, Example
`{.secondary}`	Yellow titles, Example

A complete example: Cards Example

.col-span-2 {.row-span-2}

The fifth card spans two columns

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆  1      ┆ ┆  2      ┆ ┆  3      ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  4      ┆ ┆  5                  ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

### 1

### 2

### 3

### 4

### 5 {.col-span-2}

The second card spans two columns

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  1      ┆ ┆  2                  ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆  3      ┆ ┆  4      ┆ ┆  5      ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

### 1

### 2 {.col-span-2}

### 3

### 4

### 5

The fourth card spans two columns

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆  1      ┆ ┆  2      ┆ ┆  3      ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆  4                  ┆ ┆  5      ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

### 1

### 2

### 3

### 4 {.col-span-2}

### 5

.row-span-2 {.row-span-2}

The first card spans two rows

╭┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 1      ┆ ┆ 2       ┆ ┆ 3       ┆
┆        ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
┆        ┆ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆        ┆ ┆ 4       ┆ ┆ 5       ┆
╰┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

### 1 {.row-span-2}

### 2

### 3

### 4

### 5

The second card spans two rows

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 1       ┆ ┆ 2      ┆ ┆ 3       ┆
╰┈┈┈┈┈┈┈┈┈╯ ┆        ┆ ╰┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈╮ ┆        ┆ ╭┈┈┈┈┈┈┈┈┈╮
┆ 4       ┆ ┆        ┆ ┆ 5       ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

### 1

### 2 {.row-span-2}

### 3

### 4

### 5

The third card spans two rows

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈╮
┆ 1       ┆ ┆ 2       ┆ ┆ 3      ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ┆        ┆
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆        ┆
┆ 4       ┆ ┆ 5       ┆ ┆        ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈╯

### 1

### 2

### 3 {.row-span-2}

### 4

### 5

.col-span-2 .row-span-2

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 1                   ┆ ┆ 2       ┆
┆                     ┆ ╰┈┈┈┈┈┈┈┈┈╯
┆                     ┆ ╭┈┈┈┈┈┈┈┈┈╮
┆                     ┆ ┆ 3       ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 4       ┆ ┆ 5       ┆ ┆ 6       ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

↓ Source Code

### 1 {.col-span-2 .row-span-2}

### 2

### 3

### 4

### 5

Spans rows and columns at the same time

Table Variants

Table Overview {.secondary}

-	-
`{.show-header}`	Show the header of the table
`{.shortcuts}`	Render shortcut key style
`{.bold-first}`	Bold first column
`{.plus-first}`	Plus first column
`{.show-header}`	Show headers
`{.left-text}`	Align the last column left
`{.no-wrap}`	Don't wrap text

Basic table

Pattern	Description
`[abc]`	Match a, b or c
`[^abc]`	Match except a, b or c
`[a-z]`	Match a to z

↓ Source Code

| Pattern  | Description            |
| -------- | ---------------------- |
| `[abc]`  | Match a, b or c        |
| `[^abc]` | Match except a, b or c |
| `[a-z]`  | Match a to z           |

.shortcuts

-	-
`Ctrl` `N`	New File
`Ctrl` `S`	Save

{.shortcuts}

↓ Source Code

| -          | -        |
| ---------- | -------- |
| `Ctrl` `N` | New File |
| `Ctrl` `S` | Save     |

{.shortcuts}

.show-header

Pattern	Description
`[abc]`	Match a, b or c
`[^abc]`	Match except a, b or c
`[a-z]`	Match a to z

{.show-header}

↓ Source Code

| Pattern  | Description            |
| -------- | ---------------------- |
| `[abc]`  | Match a, b or c        |
| `[^abc]` | Match except a, b or c |
| `[a-z]`  | Match a to z           |

{.show-header}

.left-text

Pattern	Description
`[abc]`	Match a, b or c
`[^abc]`	Match except a, b or c
`[a-z]`	Match a to z

{.left-text}

↓ Source Code

| Pattern  | Description            |
| -------- | ---------------------- |
| `[abc]`  | Match a, b or c        |
| `[^abc]` | Match except a, b or c |
| `[a-z]`  | Match a to z           |

{.left-text}

.bold-first

Pattern	Description
`[abc]`	Match a, b or c
`[^abc]`	Match except a, b or c
`[a-z]`	Match a to z

{.bold-first}

↓ Source Code

| Pattern  | Description            |
| -------- | ---------------------- |
| `[abc]`  | Match a, b or c        |
| `[^abc]` | Match except a, b or c |
| `[a-z]`  | Match a to z           |

{.bold-first}

List Variants

List Overview {.secondary}

List columns

-	-
`{.cols-1}`	one column (default)
`{.cols-2}`	two columns
...
`{.cols-6}`

List markers

-	-
`{.marker-none}`	Marker is not set
`{.marker-timeline}`	Marker style like timeline
`{.marker-round}`	Round marker

One Column (Default)

Share quick reference.
cheat sheet for developers.
Contributed by open source angels.
Manage your code snippets.

↓ Source Code

- Share quick reference.
- cheat sheet for developers.
- Contributed by open source angels.
- Manage your code snippets.

.cols-3

Share
Quick
Reference
And
Cheat Sheet
For
Developers

{.cols-3}

↓ Source Code

- Share
- Quick
- Reference
- And
- Cheat Sheet
- For
- Developers

{.cols-3}

.marker-timeline {.row-span-2}

Renamed to new_name
```
$ git branch -m <new_name>
```
Push and reset
```
$ git push origin -u <new_name>
```
Delete remote branch shell script $ git push origin --delete <old>

{.marker-timeline}

↓ Source Code

- **Renamed** to `new_name`
  ```shell script
  $ git branch -m <new_name>
  ```
- **Push** and reset
  ```shell script
  $ git push origin -u <new_name>
  ```
- **Delete** remote branch `shell script     $ git push origin --delete <old>     `

{.marker-timeline}

.marker-none

Share
Quick
Reference
And
Cheat Sheet

{.cols-2 .marker-none}

↓ Source Code

- Share
- Quick
- Reference
- And
- Cheat Sheet

{.cols-2 .marker-none}

.marker-round

Share
Quick
Reference

{.marker-round}

↓ Source Code

- Share
- Quick
- Reference

{.marker-round}

Code Variants

Basic code

cheatsheets.zip.is(() => {
  awesome.site();
});

here.is.some.more();

↓ Source Code

````js
cheatsheets.zip.is(() => {
  awesome.site()
})
\```

```js
here.is.some.more()
\```
````

Code blocks can be placed one after the other.

Code with headings

index.js

cheatsheets.zip.is(() => {
  awesome.site();
});

other.js

here.is.some.more();

↓ Source Code

#### index.js

```js
cheatsheets.zip.is(() => {
  awesome.site();
});
```

#### other.js

```js
here.is.some.more();
```

Code blocks can have headings.

Line wrapping

<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))</script>

↓ Source Code

```js {.wrap}
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))</script>
```

Add {.wrap} to wrap long lines.

Long lines (default)

function createNode(nodeName: string, options: { key: string }) {
  return true
}

Long lines will have scrollbars.

Paragraph Variants

Header paragraphs

The text that appears in the header

↓ Source Code

### Basic paragraphs

The text that appears in the header

Middle paragraphs {.row-span-2}

This is a list

This paragraph will appear in the middle

cheatsheets.is(() => {
  awesome.site();
});

↓ Source Code

### Middle paragraphs

- This is a list

This paragraph will appear in the middle

```js
cheatsheets.is(() => {
  awesome.site();
});
```

Footer paragraphs {.row-span-2}

cheatsheets.is(() => {
  awesome.site();
});

↓ Source Code

```js
cheatsheets.is(() => {
  awesome.site();
});
```

This paragraph will appear in the footer

This paragraph will appear in the footer

Crosslink

Add {.link-arrow} to make big loud external links:

[Home](/) {.link-arrow}

Home {.link-arrow}

Cards Example

row-span-2 {.row-span-2}

col-span-2 {.col-span-2}

Primary Card {.primary}

Add {.primary} to make the title red.

Secondary Card {.secondary}

Add {.secondary} to make the title yellow.

Uh oh!

FilesExpand file tree

quickref.md

Latest commit

History

quickref.md

File metadata and controls

Getting Started

Develop Setup

Directory Structure

Cheatsheet Structure {.row-span-2}

Syntax Variants

Create source/_posts/demo.md

Section Variants

Section Overview {.secondary}

.cols-1

↓ Source Code

.cols-2

↓ Source Code

.cols-3 (default)

↓ Source Code

Card Variants

Card Overview {.secondary}

Specifies the number of columns the card spans

Specifies the number of rows the card spans {.text-left}

Emphasize card (aka H3 Section)

.col-span-2 {.row-span-2}

The fifth card spans two columns

The second card spans two columns

The fourth card spans two columns

.row-span-2 {.row-span-2}

The first card spans two rows

The second card spans two rows

The third card spans two rows

.col-span-2 .row-span-2

↓ Source Code

Table Variants

Table Overview {.secondary}

Basic table

↓ Source Code

.shortcuts

↓ Source Code

.show-header

↓ Source Code

.left-text

↓ Source Code

.bold-first

↓ Source Code

List Variants

List Overview {.secondary}

One Column (Default)

↓ Source Code

.cols-3

↓ Source Code

.marker-timeline {.row-span-2}

↓ Source Code

.marker-none

↓ Source Code

.marker-round

↓ Source Code

Code Variants

Basic code

↓ Source Code

Code with headings

index.js

other.js

↓ Source Code

Line wrapping

↓ Source Code

Long lines (default)

Paragraph Variants

Header paragraphs

↓ Source Code

Middle paragraphs {.row-span-2}

↓ Source Code

Footer paragraphs {.row-span-2}

↓ Source Code

Crosslink

Cards Example

row-span-2 {.row-span-2}

Emphasize card (aka `H3` Section)