1
0
mirror of https://github.com/onkelbeh/cheatsheets.git synced 2025-06-16 07:07:37 +02:00

Update the critical path with Parcel too

This commit is contained in:
Rico Sta. Cruz 2020-06-14 23:09:47 +10:00
parent 9ed567ec08
commit a20fdfe4e6
22 changed files with 178 additions and 2098 deletions

6
.gitignore vendored
View File

@ -3,4 +3,8 @@ _site
.jekyll-metadata
/node_modules
/vendor
.idea/
.idea/
# Generated by 'yarn dev'
/_includes/2017/critical/critical-home.js
/_includes/2017/critical/critical-sheet.js

View File

@ -1,6 +1,7 @@
# Developer notes
## Gitpod
## Gitpod
This repository supports contribution using [gitpod](https://gitpod.io) which is online IDE using [Theia](https://github.com/eclipse-theia/theia).
To open-up the environment simple natigate on https://gitpod.io/#https://github.com/rstacruz/cheatsheets
@ -9,14 +10,14 @@ Or using a button:<br>
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/rstacruz/cheatsheets)
### Preview built website
To preview the website you need to first build it then you can navigate to file that you are trying to contribute and preview directly.
<img src='_docs/images/gitpod_preview_tut.png' width=828 height=459/>
## Starting a local instance
This starts Jekyll and Webpack. This requires recent versions of [Node.js], [Yarn], [Ruby] and [Bundler] installed.
This starts Jekyll and Parcel. This requires recent versions of [Node.js], [Yarn], [Ruby] and [Bundler] installed.
```bash
yarn install
@ -56,9 +57,11 @@ See <https://devhints.io/cheatsheet-styles> for a reference on styling.
## JavaScript
When updating JavaScript, be sure webpack is running (`yarn run dev` takes care of this).
When updating JavaScript, be sure Parcel is running (`yarn dev` takes care of this).
This auto-updates `/assets/packed/` with sources in `_js/`.
This auto-updates `/assets/packed/` and `_includes/2017/critical/` with sources in `_parcel/`.
Before committing, run `yarn parcel:build` first.
## JavaScript tests
@ -75,16 +78,16 @@ Each sheet supports these metadata:
```yml
---
title: React.js
layout: 2017/sheet # 'default' | '2017/sheet'
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
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:
@ -93,9 +96,10 @@ tags:
# Special pages:
# (don't set these for cheatsheets)
type: home # home | article | error
og_type: website # opengraph type
type: home # home | article | error
og_type: website # opengraph type
---
```
## Prism languages
@ -115,6 +119,7 @@ title: ES2015
category: Hidden
redirect_to: /es6
---
```
## Localizations
@ -170,26 +175,3 @@ building web user interfaces...
### intro only
If you left out `description` or `keywords`, a default description will be added.
## Critical path CSS
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`.
## Critical path JS
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.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -3,11 +3,11 @@
<!-- critical css -->
{% if include.critical == 'home'
%}<style id='critical-css'>{% include 2017/critical/home.css %}</style>{%
%}<style id='critical-css'>{% include 2017/critical/critical-home.css %}</style>{%
endif
%}{%
if include.critical == 'sheet'
%}<style id='critical-css'>{% include 2017/critical/sheet.css %}</style>{%
%}<style id='critical-css'>{% include 2017/critical/critical-sheet.css %}</style>{%
endif %}
<!-- allow disabling critical CSS optimization by passing ?nocrit=1 -->

32
_parcel/_base.scss Normal file
View File

@ -0,0 +1,32 @@
// Vendor and variables
@import 'sanitize.css/sanitize.css';
@import '../_sass/2017/variables.scss';
@import '../node_modules/modularscale-sass/stylesheets/_modularscale.scss';
@import '../_sass/vendor/ionicons-inline/ionicons.scss';
// Utilities
@import '../_sass/2017/utils/carbon-style.scss';
@import '../_sass/2017/utils/_font-size.scss';
@import '../_sass/2017/utils/gutter.scss';
@import '../_sass/2017/utils/heading-style.scss';
@import '../_sass/2017/utils/section-gutter.scss';
@import '../_sass/2017/utils/section-with-container.scss';
// Base
@import 'sanitize.css/sanitize.css';
@import '../_sass/2017/base/base.scss';
@import '../_sass/2017/base/fade.scss';
// Components
@import '../_sass/2017/components/attribute-peg.scss';
@import '../_sass/2017/components/announcements-item.scss';
@import '../_sass/2017/components/announcements-list.scss';
@import '../_sass/2017/components/back-button.scss';
@import '../_sass/2017/components/body-area.scss';
@import '../_sass/2017/components/codefund-sponsor.scss';
@import '../_sass/2017/components/page-actions.scss';
@import '../_sass/2017/components/pages-list.scss';
@import '../_sass/2017/components/search-box.scss';
@import '../_sass/2017/components/site-header.scss';
@import '../_sass/2017/components/top-nav.scss';
@import '../_sass/2017/components/top-sheet.scss';

12
_parcel/_utils.scss Normal file
View File

@ -0,0 +1,12 @@
// Vendor
@import '../_sass/2017/variables.scss';
@import '../node_modules/modularscale-sass/stylesheets/_modularscale.scss';
@import '../_sass/vendor/ionicons-inline/ionicons.scss';
// Utilities
@import '../_sass/2017/utils/carbon-style.scss';
@import '../_sass/2017/utils/_font-size.scss';
@import '../_sass/2017/utils/gutter.scss';
@import '../_sass/2017/utils/heading-style.scss';
@import '../_sass/2017/utils/section-gutter.scss';
@import '../_sass/2017/utils/section-with-container.scss';

View File

@ -26,6 +26,5 @@ import './behaviors/search-form'
import './behaviors/search-input'
// CSS
import 'sanitize.css/sanitize'
import 'prismjs/plugins/line-highlight/prism-line-highlight.css'
import 'hint.css/hint.min.css'

View File

@ -0,0 +1,16 @@
@import './_utils.scss';
@import './_base.scss';
// Components
@import '../_sass/2017/components/attribute-peg.scss';
@import '../_sass/2017/components/announcements-item.scss';
@import '../_sass/2017/components/announcements-list.scss';
@import '../_sass/2017/components/back-button.scss';
@import '../_sass/2017/components/body-area.scss';
@import '../_sass/2017/components/codefund-sponsor.scss';
@import '../_sass/2017/components/page-actions.scss';
@import '../_sass/2017/components/pages-list.scss';
@import '../_sass/2017/components/search-box.scss';
@import '../_sass/2017/components/site-header.scss';
@import '../_sass/2017/components/top-nav.scss';
@import '../_sass/2017/components/top-sheet.scss';

View File

@ -0,0 +1,21 @@
@import './_utils.scss';
@import './_base.scss';
// Markdown
@import '../_sass/2017/markdown/a-em.scss';
@import '../_sass/2017/markdown/code.scss';
@import '../_sass/2017/markdown/headings.scss';
@import '../_sass/2017/markdown/local-anchor.scss';
@import '../_sass/2017/markdown/p.scss';
@import '../_sass/2017/markdown/table.scss';
@import '../_sass/2017/markdown/ul.scss';
// Components
@import '../_sass/2017/components/back-button.scss';
@import '../_sass/2017/components/body-area.scss';
@import '../_sass/2017/components/codefund-sponsor.scss';
@import '../_sass/2017/components/h3-section.scss';
@import '../_sass/2017/components/h3-section-list.scss';
@import '../_sass/2017/components/main-heading.scss';
@import '../_sass/2017/components/page-actions.scss';
@import '../_sass/2017/components/top-nav.scss';

View File

@ -43,6 +43,7 @@
margin: 0;
padding: 0;
cursor: pointer;
background: transparent;
&:hover,
&:focus {

View File

@ -80,14 +80,14 @@ $modularscale : () !default;// Parse settings starting with defaults.
// This does not support non-integer exponents,
// Check and return an error if a non-integer exponent is passed.
@if (floor($e) != $e) {
@error '
======================================================================
Non-integer values are not supported in modularscale by default.
// @error '
// ======================================================================
// Non-integer values are not supported in modularscale by default.
Try using mathsass in your project to add non-integer scale support.
https://github.com/terkel/mathsass
======================================================================
'
// Try using mathsass in your project to add non-integer scale support.
// https://github.com/terkel/mathsass
// ======================================================================
// '
}
// Seed the return.

View File

@ -1,45 +0,0 @@
const critical = require('critical')
console.warn('Generating critical path styles into _includes/2017/critical/...')
const OPTIONS = {
base: '_site',
width: 1400,
height: 900,
minify: true,
extract: true,
ignore: [
'@font-face'
],
include: [
// fade-in magic (base/fade)
/html\.WithJs/
]
}
critical.generate({
...OPTIONS,
src: 'index.html',
dest: '../_includes/2017/critical/home.css',
include: [
...OPTIONS.include,
// searchbox with placeholder
/\.search-box/
]
})
critical.generate({
...OPTIONS,
src: 'react.html',
dest: '../_includes/2017/critical/sheet.css',
include: [
...OPTIONS.include,
// sections (and h3 section list), just to be sure
/\.h3-section/,
// eg, -six-column in devhints.io/layout-thrashing
/-column/
]
})

View File

@ -1,73 +0,0 @@
const join = require('path').resolve
const webpack = require('webpack')
module.exports = {
context: join(__dirname, '..'),
entry: {
app: './_js/app.js',
vendor: [
// Large 3rd-party libs
'prismjs',
// Prism plugins
'prismjs/plugins/line-highlight/prism-line-highlight.min.js',
'prismjs/components/prism-jsx.min.js',
'prismjs/components/prism-bash.min.js',
'prismjs/components/prism-scss.min.js',
'prismjs/components/prism-css.min.js',
'prismjs/components/prism-elixir.min.js',
'prismjs/components/prism-ruby.min.js',
// CSS
'prismjs/plugins/line-highlight/prism-line-highlight.css',
'hint.css/hint.min.css'
]
},
output: {
path: join(__dirname, '..', 'assets', 'packed'),
filename: '[name].js',
devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{ loader: 'babel-loader' }
]
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
},
resolve: {
alias: {
// Never bundle jQuery
'jquery': join(__dirname, '..', '_js/helpers/noop.js')
}
},
stats: 'minimal',
plugins: [
// Optimize module ID's for vendor chunks
new webpack.HashedModuleIdsPlugin({
hashFunction: 'sha256',
hashDigest: 'base64',
hashDigestLength: 20
}),
// Optimize vendor
new webpack.optimize.CommonsChunkPlugin('vendor'),
// Don't include debug symbols ever
new webpack.EnvironmentPlugin({
NODE_ENV: 'production'
})
],
devtool: 'source-map'
}

View File

@ -1,28 +0,0 @@
const join = require('path').resolve
const webpack = require('webpack')
module.exports = {
context: join(__dirname, '..'),
entry: './_js/critical.js',
output: {
path: join(__dirname, '..', '_includes', '2017', 'critical'),
filename: 'critical.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{ loader: 'babel-loader' }
]
}
]
},
stats: 'minimal',
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'production'
})
]
}

File diff suppressed because one or more lines are too long

View File

@ -123,5 +123,5 @@ var s=require("./each");function e(i,a){if(a)if(Array.isArray(a))s(a,function(s)
},{}],"Jg8K":[function(require,module,exports) {
"use strict";var e=i(require("onmount")),t=o(require("../helpers/search")),r=i(require("../helpers/qs")),n=i(require("dom101/on"));function u(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return u=function(){return e},e}function o(e){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=u();if(t&&t.has(e))return t.get(e);var r={},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var i=n?Object.getOwnPropertyDescriptor(e,o):null;i&&(i.get||i.set)?Object.defineProperty(r,o,i):r[o]=e[o]}return r.default=e,t&&t.set(e,r),r}function i(e){return e&&e.__esModule?e:{default:e}}(0,e.default)("[data-js-search-input]",function(){var e=this;(0,n.default)(this,"input",function(){var r=e.value;""===r?t.showAll():t.show(r)});var u=((0,r.default)(window.location.search)||{}).q;u&&u.length&&(this.value=u,setTimeout(function(){t.show(u)}))});
},{"onmount":"yMxf","../helpers/search":"OY04","../helpers/qs":"hwlU","dom101/on":"DJ2P"}],"A2T1":[function(require,module,exports) {
"use strict";require("prismjs"),require("prismjs/plugins/line-highlight/prism-line-highlight.min.js"),require("prismjs/components/prism-jsx.min.js"),require("prismjs/components/prism-bash.min.js"),require("prismjs/components/prism-scss.min.js"),require("prismjs/components/prism-css.min.js"),require("prismjs/components/prism-elixir.min.js"),require("prismjs/components/prism-ruby.min.js"),require("./initializers/prism"),require("./initializers/onmount"),require("./behaviors/anchors"),require("./behaviors/dismissable"),require("./behaviors/dismiss"),require("./behaviors/disqus"),require("./behaviors/h3-section-list"),require("./behaviors/main-body"),require("./behaviors/no-preview"),require("./behaviors/searchable-header"),require("./behaviors/searchable-item"),require("./behaviors/search-form"),require("./behaviors/search-input"),require("sanitize.css/sanitize"),require("prismjs/plugins/line-highlight/prism-line-highlight.css"),require("hint.css/hint.min.css");
},{"prismjs":"hKAx","prismjs/plugins/line-highlight/prism-line-highlight.min.js":"FNB3","prismjs/components/prism-jsx.min.js":"PYFn","prismjs/components/prism-bash.min.js":"qQHq","prismjs/components/prism-scss.min.js":"vItu","prismjs/components/prism-css.min.js":"eQGU","prismjs/components/prism-elixir.min.js":"i6Tx","prismjs/components/prism-ruby.min.js":"aTnL","./initializers/prism":"Pzu0","./initializers/onmount":"ijeW","./behaviors/anchors":"knoa","./behaviors/dismissable":"VA1m","./behaviors/dismiss":"WCwQ","./behaviors/disqus":"FOh6","./behaviors/h3-section-list":"AQrF","./behaviors/main-body":"fbAA","./behaviors/no-preview":"RKLt","./behaviors/searchable-header":"r65P","./behaviors/searchable-item":"Fyz8","./behaviors/search-form":"YJrD","./behaviors/search-input":"Jg8K","sanitize.css/sanitize":"fbAA","prismjs/plugins/line-highlight/prism-line-highlight.css":"fbAA","hint.css/hint.min.css":"fbAA"}]},{},["A2T1"], null)
"use strict";require("prismjs"),require("prismjs/plugins/line-highlight/prism-line-highlight.min.js"),require("prismjs/components/prism-jsx.min.js"),require("prismjs/components/prism-bash.min.js"),require("prismjs/components/prism-scss.min.js"),require("prismjs/components/prism-css.min.js"),require("prismjs/components/prism-elixir.min.js"),require("prismjs/components/prism-ruby.min.js"),require("./initializers/prism"),require("./initializers/onmount"),require("./behaviors/anchors"),require("./behaviors/dismissable"),require("./behaviors/dismiss"),require("./behaviors/disqus"),require("./behaviors/h3-section-list"),require("./behaviors/main-body"),require("./behaviors/no-preview"),require("./behaviors/searchable-header"),require("./behaviors/searchable-item"),require("./behaviors/search-form"),require("./behaviors/search-input"),require("prismjs/plugins/line-highlight/prism-line-highlight.css"),require("hint.css/hint.min.css");
},{"prismjs":"hKAx","prismjs/plugins/line-highlight/prism-line-highlight.min.js":"FNB3","prismjs/components/prism-jsx.min.js":"PYFn","prismjs/components/prism-bash.min.js":"qQHq","prismjs/components/prism-scss.min.js":"vItu","prismjs/components/prism-css.min.js":"eQGU","prismjs/components/prism-elixir.min.js":"i6Tx","prismjs/components/prism-ruby.min.js":"aTnL","./initializers/prism":"Pzu0","./initializers/onmount":"ijeW","./behaviors/anchors":"knoa","./behaviors/dismissable":"VA1m","./behaviors/dismiss":"WCwQ","./behaviors/disqus":"FOh6","./behaviors/h3-section-list":"AQrF","./behaviors/main-body":"fbAA","./behaviors/no-preview":"RKLt","./behaviors/searchable-header":"r65P","./behaviors/searchable-item":"Fyz8","./behaviors/search-form":"YJrD","./behaviors/search-input":"Jg8K","prismjs/plugins/line-highlight/prism-line-highlight.css":"fbAA","hint.css/hint.min.css":"fbAA"}]},{},["A2T1"], null)

View File

@ -5,11 +5,11 @@
"author": "Rico Sta. Cruz <rstacruz@users.noreply.github.com>",
"dependencies": {
"autoprefixer": "^9.8.0",
"critical": "0.9.1",
"dom101": "^2.2.1",
"hint.css": "^2.6.0",
"isotope-layout": "^3.0.6",
"lodash.noop": "^3.0.1",
"modularscale-sass": "^3.0.10",
"onmount": "^1.3.0",
"postcss-modules": "^2.0.0",
"prismjs": "^1.20.0",
@ -38,7 +38,6 @@
"repository": "https://github.com/rstacruz/cheatsheets.git",
"scripts": {
"build": "run-s -s 'parcel:*:build' jekyll:build",
"critical": "node _support/critical.js",
"dev": "run-p -sl jekyll:watch 'parcel:*:watch'",
"jekyll:build": "bundle exec jekyll build --incremental",
"jekyll:watch": "wait-on assets/packed/app.js && bundle exec jekyll serve --safe --trace --drafts --watch --incremental --host ${HOST:-0.0.0.0} --port ${PORT:-3000}",
@ -46,8 +45,8 @@
"parcel:app:build": "parcel build '_parcel/app.js' -d assets/packed --no-source-maps --no-autoinstall",
"parcel:app:watch": "parcel watch '_parcel/app.js' -d assets/packed --no-source-maps --no-autoinstall",
"parcel:build": "run-s -s 'parcel:*:build'",
"parcel:critical:build": "parcel build _parcel/critical.js -d _includes/2017/critical --no-source-maps --no-autoinstall",
"parcel:critical:watch": "parcel watch _parcel/critical.js -d _includes/2017/critical --no-source-maps --no-autoinstall",
"parcel:critical:build": "parcel build '_parcel/critical*.{js,scss}' -d _includes/2017/critical --no-source-maps --no-autoinstall",
"parcel:critical:watch": "parcel watch '_parcel/critical*.{js,scss}' -d _includes/2017/critical --no-source-maps --no-autoinstall",
"prettier:format": "prettier --write '_parcel/**/*.{js,scss}'",
"test": "jest"
}

View File

@ -1,4 +0,0 @@
module.exports = [
require('./_support/webpack.config.js'),
require('./_support/webpack.critical.js')
]

1942
yarn.lock

File diff suppressed because it is too large Load Diff