This starts Jekyll and Webpack.
yarn install
bundle install
env PORT=4001 yarn run dev
See https://devhints.io/cheatsheet-styles for a reference on styling.
When updating JavaScript, be sure webpack is running (yarn run dev
takes care of this).
This auto-updates /assets/packed/
with sources in _js/
.
There are also automated tests:
yarn run test --watch
Each sheet supports these metadata:
---
title: React.js
layout: 2017/sheet # 'default' | '2017/sheet'
# Optional:
category: React
updated: 2017-08-30 # To show in the updated list
ads: false # Add this to disable ads
weight: -5 # lower number = higher in related posts list
deprecated: true # Don't show in related posts
deprecated_by: /enzyme # Point to latest version
prism_languages: [vim] # Extra syntax highlighting
intro: |
This is some *Markdown* at the beginning of the article.
tags:
- WIP
- Featured
# Special pages:
# (don't set these for cheatsheets)
type: home # home | article | error
og_type: website # opengraph type
---
For supported prism languages:
This example sets up a redirect from es2015
to es6
:
# /es2015.md
---
title: ES2015
category: Hidden
redirect_to: /es6
---
See _data/content.yml
for chrome strings.
So you want to fork this repo? Sure, here's what you need to know to whitelabel this:
- It's all GitHub pages, so the branch has to be
gh-pages
. - All other GitHub pages gotchas apply (CNAME, etc).
- Edit everything in
_data/
- this holds all 'config' for the site: ad IDs, strings, etc. - Edit
_config.yml
as well, lots of things may not apply to you.
The site devhints.io is backed by CloudFlare. Updates will take 2 days to propagate to the website by default. To make sure recent changes will propagate, use this helper script. It will give instructions on how manual selective cache purging can be done.
./_support/cf-purge.sh
There are multiple ways to set meta description.
Set keywords
(and optionally intro
). This is the easiest and the preferred
way for now.
React cheatsheet - devhints.io
------------------------------
https://devhints.io/react ▼
React.Component · render() · componentDidMount() · props/state · React is a
JavaScript library for building web...
Set description
(and optionally intro
)
React cheatsheet - devhints.io
------------------------------
https://devhints.io/react ▼
One-page reference to React and its API. React is a JavaScript library for
building web user interfaces...
If you left out description
or keywords
, a default description will be added.
The critical path CSS is stored in:
_includes/2017/critical/home.html
_includes/2017/critical/sheet.html
You'll need to update these every now and then when you change something in the CSS. Use this to update these snippets:
yarn run critical
You can temporarily disable critical path optimizations by loading it with ?nocrit=1
, eg, https://devhints.io/?nocrit=1
.
There's JavaScript that's included inline in every page. It's entrypoint is:
_js/critical.js
This is automatically compiled into the partial _includes/2017/critical/critical.js
. Keep this bundle as small as possible.