Add critical path CSS
This commit is contained in:
Rico Sta. Cruz
parent
c23c734832
commit
b3beaccbe9
|
|
@ -130,3 +130,16 @@ 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
|
||||
```
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -5,8 +5,20 @@
|
|||
<script src='{{base}}/assets/packed/app.js?t={{ timestamp }}'></script>
|
||||
{% for lang in page.prism_languages %}<script src='https://cdn.jsdelivr.net/npm/prismjs@1.6.0/components/prism-{{lang}}.min.js'></script>{% endfor %}
|
||||
|
||||
<!-- 3rd-party libs -->
|
||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Cousine'>
|
||||
{% if include.critical == 'home' %}
|
||||
<style>{% include 2017/critical/home.html %}</style>
|
||||
{% endif %}
|
||||
|
||||
<!-- 2017 layout -->
|
||||
<link href='{{base}}/assets/2017/style.css?t={{ timestamp }}' rel='stylesheet'>
|
||||
{% if include.critical == 'sheet' %}
|
||||
<style>{% include 2017/critical/sheet.html %}</style>
|
||||
{% endif %}
|
||||
|
||||
<!-- css -->
|
||||
<script>;(function(links){(requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame||(function(fn){window.addEventListener('load',fn)}))(function(){var h=document.getElementsByTagName('head')[0],l,i;for (i=0;i<links.length;i++){l=document.createElement('link');l.rel='stylesheet';l.href=links[i];h.appendChild(l);}})})([
|
||||
'https://fonts.googleapis.com/css?family=Cousine',
|
||||
'{{base}}/assets/2017/style.css?t={{ timestamp }}'
|
||||
])</script>
|
||||
<noscript>
|
||||
<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Cousine'>
|
||||
<link rel='stylesheet' type='text/css' href='{{base}}/assets/2017/style.css?t={{ timestamp }}'>
|
||||
</noscript>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
| where_exp: "page", "page.updated"
|
||||
| sort: "updated", "first"
|
||||
%}
|
||||
{% include 2017/head.html %}
|
||||
{% include 2017/head.html critical='home' %}
|
||||
|
||||
</head><body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!doctype html>
|
||||
<html class='NoJs' lang='en'><head>
|
||||
|
||||
{% include 2017/head.html %}
|
||||
{% include 2017/head.html critical='sheet' %}
|
||||
{% include 2017/article-schema.html page=page %}
|
||||
|
||||
</head><body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
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'
|
||||
]
|
||||
}
|
||||
|
||||
critical.generate({
|
||||
...options,
|
||||
src: 'index.html',
|
||||
dest: '../_includes/2017/critical/home.html'
|
||||
})
|
||||
|
||||
critical.generate({
|
||||
...options,
|
||||
src: 'react.html',
|
||||
dest: '../_includes/2017/critical/sheet.html',
|
||||
include: [
|
||||
/\.h3-section/
|
||||
]
|
||||
})
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
"webpack": "3.6.0"
|
||||
},
|
||||
"scripts": {
|
||||
"critical": "node _support/critical.js",
|
||||
"dev": "run-p dev:webpack dev:jekyll",
|
||||
"dev:webpack": "webpack --watch --colors -p",
|
||||
"dev:jekyll": "bundle exec jekyll serve --safe --drafts --watch --port $PORT --incremental",
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"babel-polyfill": "6.26.0",
|
||||
"critical": "0.9.1",
|
||||
"dom101": "2.2.1",
|
||||
"hint.css": "2.5.0",
|
||||
"isotope-layout": "3.0.4",
|
||||
|
|
|
|||
Loading…
Reference in New Issue