Replace Webpack (_js) with Parcel (_parcel)
This commit is contained in:
parent
42bac34c80
commit
9ed567ec08
5
.babelrc
5
.babelrc
|
@ -1,9 +1,10 @@
|
|||
{
|
||||
"presets": [
|
||||
[
|
||||
"env",
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"forceAllTransforms": true
|
||||
"useBuiltIns": "entry",
|
||||
"targets": "> 2%"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
yarn.lock binary
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"jsxSingleQuote": true
|
||||
"jsxSingleQuote": true,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
|
|
32
Makefile
32
Makefile
|
@ -16,36 +16,10 @@ _site:
|
|||
bundle exec jekyll build --incremental
|
||||
|
||||
critical: _site ## Builds critical path CSS/JS
|
||||
node _support/critical.js
|
||||
yarn critical
|
||||
|
||||
# Ensure that bins are available.
|
||||
ensure-bin:
|
||||
@if [ ! -d $(npmbin) ]; then \
|
||||
echo "---"; \
|
||||
echo "Error: $(npmbin) not found, you may need to run '[docker-compose run --rm web] yarn install'."; \
|
||||
echo "---"; \
|
||||
exit 1; \
|
||||
fi
|
||||
@if ! which jekyll &>/dev/null; then \
|
||||
echo "---"; \
|
||||
echo "Warning: Jekyll not found, you may need to run '[docker-compose run --rm web] bundle install'."; \
|
||||
echo "---"; \
|
||||
fi
|
||||
|
||||
dev: ensure-bin ## Starts development server
|
||||
$(npmbin)/concurrently -k -p command -c "blue,green" \
|
||||
"make dev-webpack" \
|
||||
"make dev-jekyll"
|
||||
|
||||
dev-webpack: ensure-bin
|
||||
$(npmbin)/webpack --watch --colors -p
|
||||
|
||||
dev-jekyll: ensure-bin
|
||||
if [ -f _site ]; then \
|
||||
bundle exec jekyll serve --safe --trace --drafts --watch --incremental --host $(HOST) --port $(PORT); \
|
||||
else \
|
||||
bundle exec jekyll serve --safe --trace --drafts --watch --host $(HOST) --port $(PORT); \
|
||||
fi
|
||||
dev:
|
||||
yarn dev
|
||||
|
||||
test: _site ## Runs rudimentary tests
|
||||
@test -f _site/vim.html
|
||||
|
|
24
_config.yml
24
_config.yml
|
@ -9,21 +9,23 @@ plugins:
|
|||
- jekyll-github-metadata
|
||||
|
||||
exclude:
|
||||
- Makefile
|
||||
- README.md
|
||||
- .babelrc
|
||||
- .cache
|
||||
- CNAME
|
||||
- CONTRIBUTING.md
|
||||
- docker_compose.yml
|
||||
- Dockerfile
|
||||
- Gemfile
|
||||
- Gemfile.lock
|
||||
- CNAME
|
||||
- vendor
|
||||
- package.json
|
||||
- .babelrc
|
||||
- yarn.lock
|
||||
- package-lock.json
|
||||
- webpack.config.js
|
||||
- Makefile
|
||||
- node_modules
|
||||
- Dockerfile
|
||||
- docker_compose.yml
|
||||
- package.json
|
||||
- package-lock.json
|
||||
- README.md
|
||||
- vendor
|
||||
- webpack.config.js
|
||||
- yarn-error.log
|
||||
- yarn.lock
|
||||
|
||||
# Markdown
|
||||
|
||||
|
|
|
@ -1 +1,15 @@
|
|||
!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=2)}([function(e,n){function t(e,n){var t=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;if(t)return t.call(e,n);if(e.parentNode){for(var r=e.parentNode.querySelectorAll(n),o=r.length;o--;0)if(r[o]===e)return!0;return!1}}e.exports=t},function(e,n,t){function r(e,n){if(n){if(Array.isArray(n))return void o(n,function(n){r(e,n)});if(e.classList){var t=n.split(" ").filter(Boolean);o(t,function(n){e.classList.add(n)})}else e.className+=" "+n}}var o=t(4);e.exports=r},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(){d||((0,c.default)(document.documentElement,"LoadDone"),d=!0)}var i=t(3),u=r(i),a=t(1),c=r(a),f=t(6),l=r(f),s=document.querySelector("[data-js-main-body]");s&&((0,u.default)(s),(0,c.default)(s,"-wrapified")),(0,l.default)(window,"load",o),setTimeout(o,5e3);var d=void 0},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var n=0,t=Array(e.length);n<e.length;n++)t[n]=e[n];return t}return Array.from(e)}function i(e){u(e).forEach(function(e){(0,p.findChildren)(e,"[data-js-h3-section-list]").forEach(function(e){a(e)})})}function u(e){return c(e,{tag:"h2",wrapperFn:function(){return(0,p.createDiv)({class:"h2-section"})},bodyFn:function(){return(0,p.createDiv)({class:"body h3-section-list","data-js-h3-section-list":""})}})}function a(e){return c(e,{tag:"h3",wrapperFn:function(){return(0,p.createDiv)({class:"h3-section"})},bodyFn:function(){return(0,p.createDiv)({class:"body"})}})}function c(e,n){function t(e,n,t){var r=i(),o=e.className;o&&(0,d.default)(r,o),(0,p.before)(e,r);var a=u();return o&&(0,d.default)(a,o),(0,p.appendMany)(a,t),n&&r.appendChild(n),r.appendChild(a),r}var r=n.tag,i=n.wrapperFn,u=n.bodyFn,a=e.children[0],c=[];if(a&&!(0,l.default)(a,r)){var f=(0,p.nextUntil)(a,r);c.push(t(a,null,[a].concat(o(f))))}return(0,p.findChildren)(e,r).forEach(function(e){var n=(0,p.nextUntil)(e,r);c.push(t(e,e,n))}),c}Object.defineProperty(n,"__esModule",{value:!0}),n.default=i,n.groupify=c;var f=t(0),l=r(f),s=t(1),d=r(s),p=t(5)},function(e,n){function t(e,n){var t,r,o=e.length;if("number"==typeof o)for(t=0;t<o;t++)n(e[t],t);else{r=0;for(t in e)e.hasOwnProperty(t)&&n(e[t],t,r++)}return e}e.exports=t},function(e,n,t){"use strict";function r(e){if(Array.isArray(e)){for(var n=0,t=Array(e.length);n<e.length;n++)t[n]=e[n];return t}return Array.from(e)}function o(e,n){n.forEach(function(n){e.appendChild(n)})}function i(e,n){return u(e.nextSibling,n,[])}function u(e,n,t){return e?(0,s.default)(e,n)?t:u(e.nextSibling,n,[].concat(r(t),[e])):t}function a(e,n){e.parentNode.insertBefore(n,e)}function c(e,n){return[].slice.call(e.children).filter(function(e){return(0,s.default)(e,n)})}function f(e){var n=document.createElement("div");return Object.keys(e).forEach(function(t){n.setAttribute(t,e[t])}),n}Object.defineProperty(n,"__esModule",{value:!0}),n.appendMany=o,n.nextUntil=i,n.before=a,n.findChildren=c,n.createDiv=f;var l=t(0),s=function(e){return e&&e.__esModule?e:{default:e}}(l)},function(e,n){function t(e,n,t){e.addEventListener?e.addEventListener(n,t):e.attachEvent("on"+n,function(){t.call(e)})}e.exports=t}]);
|
||||
parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"r6WJ":[function(require,module,exports) {
|
||||
function e(e,t){var r=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;if(r)return r.call(e,t);if(e.parentNode){for(var c=e.parentNode.querySelectorAll(t),o=c.length;o--;0)if(c[o]===e)return!0;return!1}}module.exports=e;
|
||||
},{}],"cDuO":[function(require,module,exports) {
|
||||
function e(e,r){var n,o,t=e.length;if("number"==typeof t)for(n=0;n<t;n++)r(e[n],n);else for(n in o=0,e)e.hasOwnProperty(n)&&r(e[n],n,o++);return e}module.exports=e;
|
||||
},{}],"G20n":[function(require,module,exports) {
|
||||
var s=require("./each");function e(i,a){if(a)if(Array.isArray(a))s(a,function(s){e(i,s)});else if(i.classList){var r=a.split(" ").filter(Boolean);s(r,function(s){i.classList.add(s)})}else i.className+=" "+a}module.exports=e;
|
||||
},{"./each":"cDuO"}],"THIL":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.appendMany=c,exports.nextUntil=f,exports.before=s,exports.findChildren=d,exports.createDiv=p;var t=e(require("dom101/matches"));function e(t){return t&&t.__esModule?t:{default:t}}function r(t){return u(t)||i(t)||o(t)||n()}function n(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function o(t,e){if(t){if("string"==typeof t)return a(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(t,e):void 0}}function i(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}function u(t){if(Array.isArray(t))return a(t)}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function c(t,e){e.forEach(function(e){t.appendChild(e)})}function f(t,e){return l(t.nextSibling,e,[])}function l(e,n,o){return e?(0,t.default)(e,n)?o:l(e.nextSibling,n,[].concat(r(o),[e])):o}function s(t,e){t.parentNode.insertBefore(e,t)}function d(e,r){return[].slice.call(e.children).filter(function(e){return(0,t.default)(e,r)})}function p(t){var e=document.createElement("div");return Object.keys(t).forEach(function(r){e.setAttribute(r,t[r])}),e}
|
||||
},{"dom101/matches":"r6WJ"}],"hE9p":[function(require,module,exports) {
|
||||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=f,exports.groupify=p;var r=e(require("dom101/matches")),t=e(require("dom101/add-class")),n=require("../helpers/dom");function e(r){return r&&r.__esModule?r:{default:r}}function o(r){return c(r)||u(r)||i(r)||a()}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function i(r,t){if(r){if("string"==typeof r)return s(r,t);var n=Object.prototype.toString.call(r).slice(8,-1);return"Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n?Array.from(r):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(r,t):void 0}}function u(r){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(r))return Array.from(r)}function c(r){if(Array.isArray(r))return s(r)}function s(r,t){(null==t||t>r.length)&&(t=r.length);for(var n=0,e=new Array(t);n<t;n++)e[n]=r[n];return e}function f(r){l(r).forEach(function(r){(0,n.findChildren)(r,"[data-js-h3-section-list]").forEach(function(r){d(r)})})}function l(r){return p(r,{tag:"h2",wrapperFn:function(){return(0,n.createDiv)({class:"h2-section"})},bodyFn:function(){return(0,n.createDiv)({class:"body h3-section-list","data-js-h3-section-list":""})}})}function d(r){return p(r,{tag:"h3",wrapperFn:function(){return(0,n.createDiv)({class:"h3-section"})},bodyFn:function(){return(0,n.createDiv)({class:"body"})}})}function p(e,a){var i=a.tag,u=a.wrapperFn,c=a.bodyFn,s=e.children[0],f=[];if(s&&!(0,r.default)(s,i)){var l=(0,n.nextUntil)(s,i);f.push(d(s,null,[s].concat(o(l))))}return(0,n.findChildren)(e,i).forEach(function(r){var t=(0,n.nextUntil)(r,i);f.push(d(r,r,t))}),f;function d(r,e,o){var a=u(),i=r.className;i&&(0,t.default)(a,i),(0,n.before)(r,a);var s=c();return i&&(0,t.default)(s,i),(0,n.appendMany)(s,o),e&&a.appendChild(e),a.appendChild(s),a}}
|
||||
},{"dom101/matches":"r6WJ","dom101/add-class":"G20n","../helpers/dom":"THIL"}],"DJ2P":[function(require,module,exports) {
|
||||
function n(n,t,e){n.addEventListener?n.addEventListener(t,e):n.attachEvent("on"+t,function(){e.call(n)})}module.exports=n;
|
||||
},{}],"eoMl":[function(require,module,exports) {
|
||||
"use strict";var e=u(require("./wrapify")),d=u(require("dom101/add-class")),t=u(require("dom101/on"));function u(e){return e&&e.__esModule?e:{default:e}}var a,o=document.querySelector("[data-js-main-body]");function r(){a||((0,d.default)(document.documentElement,"LoadDone"),a=!0)}o&&((0,e.default)(o),(0,d.default)(o,"-wrapified")),(0,t.default)(window,"load",r),setTimeout(r,5e3);
|
||||
},{"./wrapify":"hE9p","dom101/add-class":"G20n","dom101/on":"DJ2P"}]},{},["eoMl"], null)
|
|
@ -1,5 +1,3 @@
|
|||
<!-- critical js -->
|
||||
<script>{% include 2017/critical/critical.js %}</script>
|
||||
<script src='{{base}}/assets/packed/vendor.js?t={{ timestamp }}'></script>
|
||||
<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 %}
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
// 3rd party libs
|
||||
window.Prism = require('prismjs')
|
||||
|
||||
// All the others
|
||||
function requireAll (r) { r.keys().forEach(r) }
|
||||
requireAll(require.context('./initializers/', true, /\.js$/))
|
||||
requireAll(require.context('./behaviors/', true, /\.js$/))
|
|
@ -1,21 +0,0 @@
|
|||
/* eslint-env jest */
|
||||
import qs from '../qs'
|
||||
|
||||
describe('qs()', () => {
|
||||
test('basic', run({
|
||||
input: '?preview=1',
|
||||
output: { preview: '1' }
|
||||
}))
|
||||
|
||||
test('two fragments', run({
|
||||
input: '?a=1&b=2',
|
||||
output: { a: '1', b: '2' }
|
||||
}))
|
||||
|
||||
function run ({ input, output }) {
|
||||
return function () {
|
||||
const result = qs(input)
|
||||
expect(result).toEqual(output)
|
||||
}
|
||||
}
|
||||
})
|
|
@ -1,63 +0,0 @@
|
|||
/* eslint-env jest */
|
||||
import wrapify from '../index'
|
||||
import $ from 'jquery'
|
||||
|
||||
it('simple usage', run(`
|
||||
<div>
|
||||
<h2>simple usage<h2>
|
||||
|
||||
<h3>install</h3>
|
||||
<p>(install)</p>
|
||||
|
||||
<h3>usage</h3>
|
||||
<p>(usage)</p>
|
||||
</div>
|
||||
`, $div => {
|
||||
expect($div.find('.h2-section .h3-section-list .h3-section').length).toEqual(2)
|
||||
}))
|
||||
|
||||
it('h3 with class', run(`
|
||||
<div>
|
||||
<h3 class='-hello'>install</h3>
|
||||
<p>(install)</p>
|
||||
</div>
|
||||
`, $div => {
|
||||
expect($div.find('div.h3-section.-hello').length).toEqual(1)
|
||||
expect($div.find('div.h3-section-list.-hello').length).toEqual(1)
|
||||
}))
|
||||
|
||||
it('multiple h2s', run(`
|
||||
<div>
|
||||
<h2>multiple h2<h2>
|
||||
|
||||
<h3>install</h3>
|
||||
<p>(install)</p>
|
||||
|
||||
<h3>usage</h3>
|
||||
<p>(usage)</p>
|
||||
|
||||
<h2>getting started<h2>
|
||||
|
||||
<h3>first</h3>
|
||||
<p>(first)</p>
|
||||
|
||||
<h3>second</h3>
|
||||
<p>(second)</p>
|
||||
</div>
|
||||
`))
|
||||
|
||||
function run (input, fn) {
|
||||
return function () {
|
||||
const $div = $(input)
|
||||
wrapify($div[0])
|
||||
expect($div[0]).toMatchSnapshot()
|
||||
if (fn) fn($div)
|
||||
}
|
||||
}
|
||||
|
||||
it('h2 + pre', run(`
|
||||
<div>
|
||||
<h2>heading</h2>
|
||||
<pre class='language-markdown'>(code)</pre>
|
||||
</div>
|
||||
`))
|
|
@ -0,0 +1,31 @@
|
|||
// Prismjs
|
||||
import 'prismjs'
|
||||
import 'prismjs/plugins/line-highlight/prism-line-highlight.min.js'
|
||||
import 'prismjs/components/prism-jsx.min.js'
|
||||
import 'prismjs/components/prism-bash.min.js'
|
||||
import 'prismjs/components/prism-scss.min.js'
|
||||
import 'prismjs/components/prism-css.min.js'
|
||||
import 'prismjs/components/prism-elixir.min.js'
|
||||
import 'prismjs/components/prism-ruby.min.js'
|
||||
|
||||
// Initializers
|
||||
import './initializers/prism'
|
||||
import './initializers/onmount'
|
||||
|
||||
// Behaviors
|
||||
import './behaviors/anchors'
|
||||
import './behaviors/dismissable'
|
||||
import './behaviors/dismiss'
|
||||
import './behaviors/disqus'
|
||||
import './behaviors/h3-section-list'
|
||||
import './behaviors/main-body'
|
||||
import './behaviors/no-preview'
|
||||
import './behaviors/searchable-header'
|
||||
import './behaviors/searchable-item'
|
||||
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'
|
|
@ -9,7 +9,7 @@ const DEFAULTS = {
|
|||
// text of anchor
|
||||
text: '#',
|
||||
// append before or after innerText?
|
||||
shouldAppend: false,
|
||||
shouldAppend: false
|
||||
}
|
||||
|
||||
/*
|
||||
|
@ -19,7 +19,9 @@ const DEFAULTS = {
|
|||
onmount('[data-js-anchors]', function () {
|
||||
const data = JSON.parse(this.getAttribute('data-js-anchors') || '{}')
|
||||
const rules = Array.isArray(data)
|
||||
? (data.length ? data : [DEFAULTS])
|
||||
? data.length
|
||||
? data
|
||||
: [DEFAULTS]
|
||||
: [Object.assign({}, DEFAULTS, data)]
|
||||
|
||||
for (const { rule, className, text, shouldAppend } of rules) {
|
|
@ -14,7 +14,7 @@ onmount('[data-js-dismiss]', function () {
|
|||
const dismissable = getData(parent, 'js-dismissable')
|
||||
const id = (dismissable && dismissable.id) || ''
|
||||
|
||||
on(this, 'click', e => {
|
||||
on(this, 'click', (e) => {
|
||||
Dismiss.setDismissed(id)
|
||||
e.preventDefault()
|
||||
if (parent) remove(parent)
|
|
@ -1,6 +1,6 @@
|
|||
/* eslint-disable no-new */
|
||||
|
||||
import Isotope from 'isotope-layout/dist/isotope.pkgd.js'
|
||||
import Isotope from 'isotope-layout'
|
||||
import onmount from 'onmount'
|
||||
import on from 'dom101/on'
|
||||
import qsa from 'dom101/query-selector-all'
|
||||
|
@ -17,7 +17,7 @@ onmount('[data-js-h3-section-list]', function () {
|
|||
|
||||
const images = qsa('img', this)
|
||||
|
||||
images.forEach(image => {
|
||||
images.forEach((image) => {
|
||||
on(image, 'load', () => {
|
||||
iso.layout()
|
||||
})
|
|
@ -6,7 +6,7 @@ import on from 'dom101/on'
|
|||
*/
|
||||
|
||||
onmount('[data-js-search-form]', function () {
|
||||
on(this, 'submit', e => {
|
||||
on(this, 'submit', (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
const link = document.querySelector('a[data-search-index]:visible')
|
|
@ -17,6 +17,8 @@ onmount('[data-js-search-input]', function () {
|
|||
const query = (qs(window.location.search) || {}).q
|
||||
if (query && query.length) {
|
||||
this.value = query
|
||||
setTimeout(() => { Search.show(query) })
|
||||
setTimeout(() => {
|
||||
Search.show(query)
|
||||
})
|
||||
}
|
||||
})
|
|
@ -10,11 +10,12 @@ import './searchable-item'
|
|||
*/
|
||||
|
||||
onmount('[data-js-searchable-header]', function () {
|
||||
const els = nextUntil(this, '[data-js-searchable-header]')
|
||||
.filter(el => matches(el, '[data-search-index]'))
|
||||
const els = nextUntil(this, '[data-js-searchable-header]').filter((el) =>
|
||||
matches(el, '[data-search-index]')
|
||||
)
|
||||
|
||||
const keywords = els
|
||||
.map(n => n.getAttribute('data-search-index'))
|
||||
.map((n) => n.getAttribute('data-search-index'))
|
||||
.join(' ')
|
||||
.split(' ')
|
||||
|
|
@ -20,7 +20,7 @@ on(window, 'load', done)
|
|||
setTimeout(done, 5000)
|
||||
|
||||
let isDone
|
||||
function done () {
|
||||
function done() {
|
||||
if (isDone) return
|
||||
addClass(document.documentElement, 'LoadDone')
|
||||
isDone = true
|
|
@ -2,7 +2,7 @@
|
|||
* Stores and retrieves data from an element. Works like jQuery.data().
|
||||
*/
|
||||
|
||||
export function data (el, key, val) {
|
||||
export function data(el, key, val) {
|
||||
if (typeof val !== 'undefined') {
|
||||
return getData(el, key)
|
||||
} else {
|
||||
|
@ -10,11 +10,11 @@ export function data (el, key, val) {
|
|||
}
|
||||
}
|
||||
|
||||
export function getData (el, key) {
|
||||
export function getData(el, key) {
|
||||
const str = el.getAttribute('data-' + key)
|
||||
return JSON.parse(str || '{}')
|
||||
}
|
||||
|
||||
export function setData (el, key, val) {
|
||||
export function setData(el, key, val) {
|
||||
el.setAttribute('data-' + key, JSON.stringify(val))
|
||||
}
|
|
@ -7,7 +7,7 @@ import * as Store from './store'
|
|||
* setDismissed('2017-09-02-happy-birthday')
|
||||
*/
|
||||
|
||||
export function setDismissed (id) {
|
||||
export function setDismissed(id) {
|
||||
Store.update('dismissed', function (data) {
|
||||
data[id] = true
|
||||
return data
|
||||
|
@ -22,7 +22,7 @@ export function setDismissed (id) {
|
|||
* isDismissed('2017-09-02-happy-birthday') => true
|
||||
*/
|
||||
|
||||
export function isDismissed (id) {
|
||||
export function isDismissed(id) {
|
||||
const data = Store.fetch('dismissed')
|
||||
return data && data[id]
|
||||
}
|
|
@ -4,33 +4,35 @@ import matches from 'dom101/matches'
|
|||
* Just like jQuery.append
|
||||
*/
|
||||
|
||||
export function appendMany (el, children) {
|
||||
children.forEach(child => { el.appendChild(child) })
|
||||
export function appendMany(el, children) {
|
||||
children.forEach((child) => {
|
||||
el.appendChild(child)
|
||||
})
|
||||
}
|
||||
|
||||
/*
|
||||
* Just like jQuery.nextUntil
|
||||
*/
|
||||
|
||||
export function nextUntil (el, selector) {
|
||||
export function nextUntil(el, selector) {
|
||||
const nextEl = el.nextSibling
|
||||
return nextUntilTick(nextEl, selector, [])
|
||||
}
|
||||
|
||||
function nextUntilTick (el, selector, acc) {
|
||||
function nextUntilTick(el, selector, acc) {
|
||||
if (!el) return acc
|
||||
|
||||
const isMatch = matches(el, selector)
|
||||
if (isMatch) return acc
|
||||
|
||||
return nextUntilTick(el.nextSibling, selector, [ ...acc, el ])
|
||||
return nextUntilTick(el.nextSibling, selector, [...acc, el])
|
||||
}
|
||||
|
||||
/*
|
||||
* Just like jQuery.before
|
||||
*/
|
||||
|
||||
export function before (reference, newNode) {
|
||||
export function before(reference, newNode) {
|
||||
reference.parentNode.insertBefore(newNode, reference)
|
||||
}
|
||||
|
||||
|
@ -38,9 +40,8 @@ export function before (reference, newNode) {
|
|||
* Like jQuery.children('selector')
|
||||
*/
|
||||
|
||||
export function findChildren (el, selector) {
|
||||
return [].slice.call(el.children)
|
||||
.filter(child => matches(child, selector))
|
||||
export function findChildren(el, selector) {
|
||||
return [].slice.call(el.children).filter((child) => matches(child, selector))
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -52,9 +53,9 @@ export function findChildren (el, selector) {
|
|||
* createDiv({ class: 'foo' })
|
||||
*/
|
||||
|
||||
export function createDiv (props) {
|
||||
export function createDiv(props) {
|
||||
const d = document.createElement('div')
|
||||
Object.keys(props).forEach(key => {
|
||||
Object.keys(props).forEach((key) => {
|
||||
d.setAttribute(key, props[key])
|
||||
})
|
||||
return d
|
|
@ -5,12 +5,12 @@
|
|||
* inject('devhints.disqus.com')
|
||||
*/
|
||||
|
||||
export default function inject (host) {
|
||||
export default function inject(host) {
|
||||
injectEmbed(host)
|
||||
injectCount(host)
|
||||
}
|
||||
|
||||
export function injectEmbed (host) {
|
||||
export function injectEmbed(host) {
|
||||
const d = document
|
||||
const s = d.createElement('script')
|
||||
s.src = `https://${host}/embed.js`
|
||||
|
@ -18,7 +18,7 @@ export function injectEmbed (host) {
|
|||
;(d.head || d.body).appendChild(s)
|
||||
}
|
||||
|
||||
export function injectCount (host) {
|
||||
export function injectCount(host) {
|
||||
const d = document
|
||||
const s = d.createElement('script')
|
||||
s.src = `https://${host}/count.js`
|
|
@ -7,7 +7,7 @@
|
|||
* })
|
||||
*/
|
||||
|
||||
export default function permutate (data) {
|
||||
export default function permutate(data) {
|
||||
let words = []
|
||||
if (data.slug) {
|
||||
words = words.concat(permutateString(data.slug))
|
||||
|
@ -26,11 +26,11 @@ export default function permutate (data) {
|
|||
* => ['h', 'hi', 'j', 'jo', 'joe']
|
||||
*/
|
||||
|
||||
export function permutateString (str) {
|
||||
export function permutateString(str) {
|
||||
let words = []
|
||||
let inputs = splitwords(str)
|
||||
|
||||
inputs.forEach(word => {
|
||||
inputs.forEach((word) => {
|
||||
words = words.concat(permutateWord(word))
|
||||
})
|
||||
|
||||
|
@ -45,7 +45,7 @@ export function permutateString (str) {
|
|||
* => ['h', 'he', 'hel', 'hell', 'hello']
|
||||
*/
|
||||
|
||||
export function permutateWord (str) {
|
||||
export function permutateWord(str) {
|
||||
let words = []
|
||||
const len = str.length
|
||||
for (var i = 1; i <= len; ++i) {
|
||||
|
@ -62,10 +62,11 @@ export function permutateWord (str) {
|
|||
* => ['hello', 'world']
|
||||
*/
|
||||
|
||||
export function splitwords (str) {
|
||||
const words = str.toLowerCase()
|
||||
export function splitwords(str) {
|
||||
const words = str
|
||||
.toLowerCase()
|
||||
.split(/[ /\-_]/)
|
||||
.filter(k => k && k.length !== 0)
|
||||
.filter((k) => k && k.length !== 0)
|
||||
|
||||
return words
|
||||
}
|
|
@ -2,6 +2,6 @@
|
|||
* Checks if we're in preview mode (?preview=1).
|
||||
*/
|
||||
|
||||
export function isPreview () {
|
||||
export function isPreview() {
|
||||
return window.location.search.indexOf('preview=1') !== -1
|
||||
}
|
|
@ -2,16 +2,16 @@
|
|||
* Helper: minimal qs implementation
|
||||
*/
|
||||
|
||||
export default function qs (search) {
|
||||
export default function qs(search) {
|
||||
search = search.substr(1)
|
||||
const parts = search.split('&').map(p => p.split('='))
|
||||
const parts = search.split('&').map((p) => p.split('='))
|
||||
return parts.reduce((result, part) => {
|
||||
result[part[0]] = qsdecode(part[1])
|
||||
return result
|
||||
}, {})
|
||||
}
|
||||
|
||||
export function qsdecode (string) {
|
||||
export function qsdecode(string) {
|
||||
if (!string) string = ''
|
||||
string = string.replace(/\+/g, ' ')
|
||||
return string
|
|
@ -8,8 +8,8 @@ import qsa from 'dom101/query-selector-all'
|
|||
* Search.showAll()
|
||||
*/
|
||||
|
||||
export function showAll () {
|
||||
qsa('[data-search-index]').forEach(el => {
|
||||
export function showAll() {
|
||||
qsa('[data-search-index]').forEach((el) => {
|
||||
el.removeAttribute('aria-hidden')
|
||||
})
|
||||
}
|
||||
|
@ -21,20 +21,20 @@ export function showAll () {
|
|||
* Search.show('hello')
|
||||
*/
|
||||
|
||||
export function show (val) {
|
||||
export function show(val) {
|
||||
const keywords = splitwords(val)
|
||||
|
||||
if (!keywords.length) return showAll()
|
||||
|
||||
const selectors = keywords
|
||||
.map(k => `[data-search-index~=${JSON.stringify(k)}]`)
|
||||
.map((k) => `[data-search-index~=${JSON.stringify(k)}]`)
|
||||
.join('')
|
||||
|
||||
qsa('[data-search-index]').forEach(el => {
|
||||
qsa('[data-search-index]').forEach((el) => {
|
||||
el.setAttribute('aria-hidden', true)
|
||||
})
|
||||
|
||||
qsa(selectors).forEach(el => {
|
||||
qsa(selectors).forEach((el) => {
|
||||
el.removeAttribute('aria-hidden')
|
||||
})
|
||||
}
|
|
@ -9,7 +9,7 @@
|
|||
* })
|
||||
*/
|
||||
|
||||
export function update (key, fn) {
|
||||
export function update(key, fn) {
|
||||
if (!window.localStorage) return
|
||||
let data = JSON.parse(window.localStorage[key] || '{}')
|
||||
data = fn(data)
|
||||
|
@ -23,7 +23,7 @@ export function update (key, fn) {
|
|||
* const data = fetch('dismissed')
|
||||
*/
|
||||
|
||||
export function fetch (key) {
|
||||
export function fetch(key) {
|
||||
if (!window.localStorage) return
|
||||
return JSON.parse(window.localStorage[key] || '{}')
|
||||
}
|
|
@ -6,5 +6,7 @@ import onmount from 'onmount'
|
|||
*/
|
||||
|
||||
ready(() => {
|
||||
setTimeout(() => { onmount() })
|
||||
setTimeout(() => {
|
||||
onmount()
|
||||
})
|
||||
})
|
|
@ -0,0 +1 @@
|
|||
window.Prism = require('prismjs')
|
|
@ -0,0 +1,88 @@
|
|||
/* eslint-env jest */
|
||||
import wrapify from '../index'
|
||||
|
||||
it(
|
||||
'simple usage',
|
||||
run(
|
||||
`
|
||||
<div>
|
||||
<h2>simple usage<h2>
|
||||
|
||||
<h3>install</h3>
|
||||
<p>(install)</p>
|
||||
|
||||
<h3>usage</h3>
|
||||
<p>(usage)</p>
|
||||
</div>
|
||||
`,
|
||||
(root) => {
|
||||
expect(
|
||||
root.querySelectorAll('.h2-section .h3-section-list .h3-section').length
|
||||
).toEqual(2)
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
it(
|
||||
'h3 with class',
|
||||
run(
|
||||
`
|
||||
<div>
|
||||
<h3 class='-hello'>install</h3>
|
||||
<p>(install)</p>
|
||||
</div>
|
||||
`,
|
||||
(root) => {
|
||||
expect(root.querySelectorAll('div.h3-section.-hello').length).toEqual(1)
|
||||
expect(
|
||||
root.querySelectorAll('div.h3-section-list.-hello').length
|
||||
).toEqual(1)
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
it(
|
||||
'multiple h2s',
|
||||
run(`
|
||||
<div>
|
||||
<h2>multiple h2<h2>
|
||||
|
||||
<h3>install</h3>
|
||||
<p>(install)</p>
|
||||
|
||||
<h3>usage</h3>
|
||||
<p>(usage)</p>
|
||||
|
||||
<h2>getting started<h2>
|
||||
|
||||
<h3>first</h3>
|
||||
<p>(first)</p>
|
||||
|
||||
<h3>second</h3>
|
||||
<p>(second)</p>
|
||||
</div>
|
||||
`)
|
||||
)
|
||||
|
||||
function run(input, fn) {
|
||||
return function () {
|
||||
const div = document.createElement('div')
|
||||
div.innerHTML = input
|
||||
|
||||
const root = div.children[0]
|
||||
wrapify(root)
|
||||
expect(root).toMatchSnapshot()
|
||||
|
||||
if (fn) fn(root)
|
||||
}
|
||||
}
|
||||
|
||||
it(
|
||||
'h2 + pre',
|
||||
run(`
|
||||
<div>
|
||||
<h2>heading</h2>
|
||||
<pre class='language-markdown'>(code)</pre>
|
||||
</div>
|
||||
`)
|
||||
)
|
|
@ -1,6 +1,12 @@
|
|||
import matches from 'dom101/matches'
|
||||
import addClass from 'dom101/add-class'
|
||||
import { appendMany, nextUntil, before, findChildren, createDiv } from '../helpers/dom'
|
||||
import {
|
||||
appendMany,
|
||||
nextUntil,
|
||||
before,
|
||||
findChildren,
|
||||
createDiv
|
||||
} from '../helpers/dom'
|
||||
|
||||
/**
|
||||
* Wraps h2 sections into h2-section.
|
||||
|
@ -9,14 +15,16 @@ import { appendMany, nextUntil, before, findChildren, createDiv } from '../helpe
|
|||
* @private
|
||||
*/
|
||||
|
||||
export default function wrapify (root) {
|
||||
export default function wrapify(root) {
|
||||
// These are your H2 sections. Returns a list of .h2-section nodes.
|
||||
const sections = wrapifyH2(root)
|
||||
|
||||
// For each h2 section, wrap the H3's in them
|
||||
sections.forEach(section => {
|
||||
sections.forEach((section) => {
|
||||
const bodies = findChildren(section, '[data-js-h3-section-list]')
|
||||
bodies.forEach(body => { wrapifyH3(body) })
|
||||
bodies.forEach((body) => {
|
||||
wrapifyH3(body)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
@ -33,14 +41,15 @@ export default function wrapify (root) {
|
|||
* @private
|
||||
*/
|
||||
|
||||
function wrapifyH2 (root) {
|
||||
function wrapifyH2(root) {
|
||||
return groupify(root, {
|
||||
tag: 'h2',
|
||||
wrapperFn: () => createDiv({ class: 'h2-section' }),
|
||||
bodyFn: () => createDiv({
|
||||
class: 'body h3-section-list',
|
||||
'data-js-h3-section-list': ''
|
||||
})
|
||||
bodyFn: () =>
|
||||
createDiv({
|
||||
class: 'body h3-section-list',
|
||||
'data-js-h3-section-list': ''
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
@ -57,7 +66,7 @@ function wrapifyH2 (root) {
|
|||
* @private
|
||||
*/
|
||||
|
||||
function wrapifyH3 (root) {
|
||||
function wrapifyH3(root) {
|
||||
return groupify(root, {
|
||||
tag: 'h3',
|
||||
wrapperFn: () => createDiv({ class: 'h3-section' }),
|
||||
|
@ -71,27 +80,27 @@ function wrapifyH3 (root) {
|
|||
* @private
|
||||
*/
|
||||
|
||||
export function groupify (el, { tag, wrapperFn, bodyFn }) {
|
||||
export function groupify(el, { tag, wrapperFn, bodyFn }) {
|
||||
const first = el.children[0]
|
||||
let result = []
|
||||
|
||||
// Handle the markup before the first h2
|
||||
if (first && !matches(first, tag)) {
|
||||
const sibs = nextUntil(first, tag)
|
||||
result.push(wrap(first, null, [ first, ...sibs ]))
|
||||
result.push(wrap(first, null, [first, ...sibs]))
|
||||
}
|
||||
|
||||
// Find all h3's inside it
|
||||
const children = findChildren(el, tag)
|
||||
|
||||
children.forEach(child => {
|
||||
children.forEach((child) => {
|
||||
const sibs = nextUntil(child, tag)
|
||||
result.push(wrap(child, child, sibs))
|
||||
})
|
||||
|
||||
return result
|
||||
|
||||
function wrap (pivot, first, sibs) {
|
||||
function wrap(pivot, first, sibs) {
|
||||
const wrap = wrapperFn()
|
||||
|
||||
const pivotClass = pivot.className
|
|
@ -1,4 +1,6 @@
|
|||
@import '../vendor/sanitize.css/sanitize';
|
||||
// Generated by parcel
|
||||
@import '../../assets/packed/app.css';
|
||||
|
||||
@import './variables';
|
||||
@import '../vendor/modularscale/modularscale';
|
||||
@import '../vendor/ionicons-inline/ionicons';
|
||||
|
|
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
File diff suppressed because one or more lines are too long
87
package.json
87
package.json
|
@ -1,59 +1,54 @@
|
|||
{
|
||||
"name": "cheatsheets",
|
||||
"description": "Devhints.io",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"repository": "https://github.com/rstacruz/cheatsheets.git",
|
||||
"author": "Rico Sta. Cruz <rstacruz@users.noreply.github.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"babel-core": "6.26.0",
|
||||
"babel-eslint": "8.0.1",
|
||||
"babel-jest": "21.2.0",
|
||||
"babel-loader": "7.1.2",
|
||||
"babel-preset-env": "1.6.0",
|
||||
"concurrently": "3.5.0",
|
||||
"css-loader": "0.28.7",
|
||||
"eslint-plugin-flowtype": "2.37.0",
|
||||
"jest": "21.2.1",
|
||||
"jest-html": "1.3.5",
|
||||
"npm-run-all": "4.1.1",
|
||||
"standard": "10.0.3",
|
||||
"style-loader": "0.18.2",
|
||||
"uglifyjs-webpack-plugin": "0.4.6",
|
||||
"webpack": "3.6.0"
|
||||
},
|
||||
"scripts": {
|
||||
"critical": "make critical",
|
||||
"dev": "make dev",
|
||||
"test": "jest",
|
||||
"test:all": "run-s test lint",
|
||||
"lint": "standard -v",
|
||||
"jest-html": "jest-html"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-polyfill": "6.26.0",
|
||||
"autoprefixer": "^9.8.0",
|
||||
"critical": "0.9.1",
|
||||
"dom101": "2.2.1",
|
||||
"hint.css": "2.5.0",
|
||||
"isotope-layout": "3.0.4",
|
||||
"jquery": "3.2.1",
|
||||
"onmount": "1.3.0",
|
||||
"prettier": "1.11.1",
|
||||
"prismjs": "1.8.1",
|
||||
"sanitize.css": "5.0.0"
|
||||
"dom101": "^2.2.1",
|
||||
"hint.css": "^2.6.0",
|
||||
"isotope-layout": "^3.0.6",
|
||||
"lodash.noop": "^3.0.1",
|
||||
"onmount": "^1.3.0",
|
||||
"postcss-modules": "^2.0.0",
|
||||
"prismjs": "^1.20.0",
|
||||
"sanitize.css": "^11.0.1",
|
||||
"sass": "^1.26.8"
|
||||
},
|
||||
"standard": {
|
||||
"parser": "babel-eslint",
|
||||
"ignore": [
|
||||
"assets/script.js"
|
||||
],
|
||||
"plugins": [
|
||||
"flowtype"
|
||||
]
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.10.2",
|
||||
"@babel/preset-env": "^7.10.2",
|
||||
"jest": "26.0.1",
|
||||
"jest-html": "1.5.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"parcel-bundler": "^1.12.4",
|
||||
"prettier": "^2.0.5",
|
||||
"wait-on": "^5.0.1"
|
||||
},
|
||||
"homepage": "https://devhints.io/",
|
||||
"jest": {
|
||||
"snapshotSerializers": [
|
||||
" <rootDir>/node_modules/jest-html"
|
||||
"<rootDir>/node_modules/jest-html"
|
||||
]
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "index.js",
|
||||
"private": true,
|
||||
"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}",
|
||||
"jest-html": "jest-html",
|
||||
"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",
|
||||
"prettier:format": "prettier --write '_parcel/**/*.{js,scss}'",
|
||||
"test": "jest"
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue