@cheaty-sheet/cheaty

Cheaty

Easily create your cheat-sheet !

Installation

npm i @cheaty-sheet/cheaty or npm i -g @cheaty-sheet/cheaty to use the cli in your whole system.

Usage

Cheaty is made to simple as simple as possible. You can use it as script or as CLI. the main goal of cheaty is to convert a cheat sheet definition into a real one. For that, we use a system of parser and renderer.

Rendered cheat sheet are print ready, A4 formatted, html files.

Script

const cheaty = require("@cheaty-sheet/cheaty");
const YMLParser = cheaty.parsers.YMLParser;
const HTMLRenderer = cheaty.renderers.HTMLRenderer;

new YMLParser().parseFromDisk("./cheatsheet.yml").then(sheet => {
  new HTMLRenderer().render(sheet).then(render => {
    render.saveToDisk("./cheatsheet.html");
  });
});

YMLParser instance have a parseFromDisk('PATH') method which will parse your sheet cheat. For now, we only provide a YML parser. But you can expect more to come in the future ! Then as for parser, we can instantiate a HTMLRenderer which have a render(sheet) method to render your sheet cheat. And for now, we only support HTML rendering. The returned render object have 2 method : .toString() to get the cheatsheet as (html) string, and .savetoDisk(OUTPUT_PATH) to directly save your generated sheet cheat on disk.

Parser also have a .parseFromString(STRING) to directly parse content. Here you would pass a YML string.

CLI

One simpler option is to directly use the cheaty command.

cheaty render <inputs...>

render the given input

Positionals:
  inputs  input(s) yaml file                                            [string]

Options:
  --version     Show version number                                    [boolean]
  -h, --help    Show help                                              [boolean]
  -o, --output  output folder                           [string] [default: "./"]

So you could use cheaty cheatsheet.yml and then open the newly created cheatsheet.html file.

Style and theme

Styling and theme are done with css. We are planning to implement style and theme customization in the near future.

YML syntax

Cheat sheet are divided into the following structure : block > section. The most basic cheat sheet would be

title: My Cheatsheet
description: custom description
blocks:
  - title: My first block
    sections:
      - type: text
        content: My first content

A sheet could contain as many blocks as needed, depending on the block size (it have to fit on an A4 paper).

Minimal required properties are :

• A title
• A description, which can be empty
• An array of blocks, which must contain at least one block, with at least one section in it.

Title and description can be markdown

Options

It is possible to override some parameters in cheaty by using the options block.

title: My Cheatsheet
description: custom description
options:
    key: value
blocks:
  - title: My first block
    sections:
      - type: text
        content: My first content

Paper size

You can customize the sheet paper size using the size options. It accept the following value :

• A3
• A4
• A5
• legal
• letter

All format have landscape possibilities like A4 landscape

default: A4

title: My Cheatsheet
description: custom description
options:
    size: A5 landscape

Author

You can add a author mention using the author options. This option fully support markdown.

title: My Cheatsheet
description: custom description
options:
    author: Hello [cheaty sheet](http://my-site.com)

Note that due to YML limitation, a single markdown link is not a valid string. You'll have to write it like author: "[cheaty sheet](http://my-site.com)"

Logo

You can add a logo on document using the logo options.

title: My Cheatsheet
description: custom description
options:
    logo: http://your-site.com/logo.png

Watermark

You can add a watermark on document using the watermark options.

title: My Cheatsheet
description: custom description
options:
    watermark: Confidential

Highlight.js theme

Code highlight is done via highlight.js. You can choose a theme on the demo page.

default: github

title: My Cheatsheet
description: custom description
options:
    highlight_theme: darkula

Provide your own css

You can inject or replace your own css.

To add css :

title: My Cheatsheet
description: custom description
options:
    additional_style: '.foo {color:black;}'

To overwrite cheaty css:

title: My Cheatsheet
description: custom description
options:
    replace_style: '.foo {color:black;}'

replace_style has priority over additional_style, thus having replace_style in options will deactivate any other style relative option.

You can also link to an external style sheet by using additional_style_url or replace_style_url.

Blocks and Sections

A block represent a reserved space on the sheet paper. It must have a title and at least one section. A block can contain as many sections are needed.

Section are the real content of you sheet. At least, each section will have a type and content property. As you might have now guessed, they are multiple block type.

Text section

Used to represent a text paragraph. It can be used for description of anything you want

type: text
content: My first content

Markdown section

Used to represent a text paragraph. It can be used for description of anything you want.

type: markdown
content: My first **link** to [google](http://www.google.com)

We support github flavored markdown. Check the documentation for all features.

Code section

Code section are highlighted portion of code. We're using highlight.js library for that part.

type: code
language: javascript
content: >-
  cheaty.parseFromDisk('./cheatsheet.yml', 'YML')
      .then(sheet => {
          sheet.render('HTML').then(htmlRender => {
              htmlRender.saveToDisk('./cheatsheet.html')
          })
      });

language will be inserted in the html to force highlight.js to detect this syntax. So we are not relying on syntax auto detection here.

We are using multiline yaml string to insert code in the yaml file.

Please refer to the Options section of this documentation for theme customization.

Full example

Here is a complete example of an nginx cheet sheet

title: NGINX
description: "test"
blocks:
  - title: Port (listen)
    sections:
      - type: code
        language: nginx
        content: >-
          server {
            # standard HTTP protocol
            listen 80;

            # standard HTTPS protocol
            listen 443 ssl;

            # listen on 80 using IPv6
            listen [::]:80;

            # listen only on IPv6
            listen [::]:80 ipv6only=on;
          }
  - title: Domain name (server_name)
    sections:
      - type: code
        language: nginx
        content: >-
          server {
            # Listen to yourdomain.com
            server_name yourdomain.com;

            # Listen to multiple domains
            server_name yourdomain.com www.yourdomain.com;

            # Listen to all sub-domains
            server_name *.yourdomain.com;

            # Listen to all top-level domains
            server_name yourdomain.*;

            # Listen to unspecified hostnames (listens to IP address itself)
            server_name "";
          }
  - title: Access Logging (access_log)
    sections:
      - type: code
        language: nginx
        content: >-
          server {
            # Relative or full path to log file
            access_log /path/to/file.log;

            # Turn 'on' or 'off'
            access_log on;
          }
  - title: Miscellaneous (gzip, client_max_body_size)
    sections:
      - type: code
        language: nginx
        content: >-
          server {
            # Turn gzip compression 'on' or 'off'
            gzip on;

            # Limit client body size to 10mb
            client_max_body_size 10M;
          }
  - title: Static assets
    sections:
      - type: code
        language: nginx
        content: >-
          server {
            listen 80;
            server_name yourdomain.com;

            location / {
            	root /path/to/website;
            }
          }
  - title: Static assets with HTML5 History Mode
    sections:
      - type: code
        language: nginx
        content: >-
          server {
            listen 80;
            server_name yourdomain.com;
            root /path/to/website;

            location / {
            	try_files $uri $uri/ /index.html;
            }
          }
  - title: Redirects
    sections:
      - type: code
        language: nginx
        content: >-
          server {
            listen 80;
            server_name www.yourdomain.com;
            return 301 http://yourdomain.com$request_uri;
          }
      - type: code
        language: nginx
        content: >-
          server {
            listen 80;
            server_name yourdomain.com;

            location /redirect-url {
          	    return 301 http://otherdomain.com;
            }
          }
  - title: Reverse Proxy
    sections:
      - type: code
        language: nginx
        content: >-
          server {
            listen 80;
            server_name yourdomain.com;

            location / {
                proxy_pass http://0.0.0.0:3000;
                # where 0.0.0.0:3000 is your Node.js Server bound on 0.0.0.0 listing on port 3000
            }
          }
  - title: SSL
    sections:
      - type: code
        language: nginx
        content: >-
          server {
            listen 443 ssl;
            server_name yourdomain.com;

            ssl on;

            ssl_certificate /path/to/cert.pem;
            ssl_certificate_key /path/to/privkey.pem;

            ssl_stapling on;
            ssl_stapling_verify on;
            ssl_trusted_certificate /path/to/fullchain.pem;

            ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
            ssl_session_timeout 1d;
            ssl_session_cache shared:SSL:50m;
            add_header Strict-Transport-Security max-age=15768000;
          }

          # Permanent redirect for HTTP to HTTPS
          server {
            listen 80;
            server_name yourdomain.com;
            return 301 https://$host$request_uri;
          }
  - title: Load Balancing
    sections:
      - type: code
        language: nginx
        content: >-
          upstream node_js {
            server 0.0.0.0:3000;
            server 0.0.0.0:4000;
            server 123.131.121.122;
          }

          server {
            listen 80;
            server_name yourdomain.com;

            location / {
                proxy_pass http://node_js;
            }
          }