diff --git a/.eleventy.js b/.eleventy.js index 2e8870ae..4ab97045 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -66,7 +66,10 @@ module.exports = function(eleventyConfig) { }); eleventyConfig.addPlugin(pluginSass, { - watch: ['**/*.{scss,sass}', '!node_modules/**'] + watch: ['src/**/*.{scss,sass}'], + + // Enable sourcemaps for ez debugging + sourcemaps: true }); // You can return your Config object (optional). diff --git a/.travis.yml b/.travis.yml index bd1f7283..29c86522 100644 --- a/.travis.yml +++ b/.travis.yml @@ -12,5 +12,7 @@ cache: - '$(npm config get prefix)/bin/firebase-tools' - node_modules notifications: + slack: + secure: tk9vgxAn/7BjDp7ncXgj8aqbW7OCkhkm5YCOb05cbmmBqQrt4SHEMEFAjJg3oFJgOAsDRfOwGD+rI6wFxOz9hGvPOJGCrfbvaVe+3iNJhDAolzRsKxgQec9hQNRpQ0Nr8kPgOPMi5ikOrbnwXjGbHEL1QR05E/XD1Pl2lhN40BnRWJAmdO/nSAnnqpXL+SwydkW/MgrxWbDpCZ/esqVdTvO6XsNAqbWE/Ottv3x+gGdsGdOM1A6UamxnEcE3HdoRHAsrq/pK/8z3sH1NSzXFWL59sm1vLPNh0cUVkLsYymIRU7JLUNNEudpD57q0+KvvhC/rDJx/eO1iAP4nPPVdbFGTMwuj1wvuojBngEYOAm7SuTC+5hyyEXQZHB84vmn/RK9rsokR7vw9cAObxuASwv6lnHYtbtVsYwCHKVe0pHcMBRXqohnU/LZDXOYQ57N72o3jwRyPgiiITP689p7aK+Sbo7AidzyoRnJmuQ+DCRcP/pZ47rRAB7d3e/hVtMEZ6ghQTkAVFXeA8Y172U+gKtLT9vWIB1zNxjft49XSjR9jr3ogn20CMlbzpmHpJkg4YYusqTaKXVfTTcuYiTrhjn/4SgU+vo+Kl4Fw2jTT3m5uQaKUEL8/pLk6ORLo4FJRcNwiSj4J9XjHWkOSkRPo7NewObkKFNguUfirfguGsXo= email: false webhooks: https://travis.webhooks.m4m.io diff --git a/package-lock.json b/package-lock.json index 3582903f..3cf37973 100644 --- a/package-lock.json +++ b/package-lock.json @@ -253,12 +253,12 @@ "dev": true }, "ajv": { - "version": "6.10.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz", - "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==", + "version": "6.11.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.11.0.tgz", + "integrity": "sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==", "dev": true, "requires": { - "fast-deep-equal": "^2.0.1", + "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" @@ -519,17 +519,17 @@ "dev": true }, "autoprefixer": { - "version": "9.7.3", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.3.tgz", - "integrity": "sha512-8T5Y1C5Iyj6PgkPSFd0ODvK9DIleuPKUPYniNxybS47g2k2wFgLZ46lGQHlBuGKIAEV8fbCDfKCCRS1tvOgc3Q==", + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.4.tgz", + "integrity": "sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g==", "dev": true, "requires": { - "browserslist": "^4.8.0", - "caniuse-lite": "^1.0.30001012", + "browserslist": "^4.8.3", + "caniuse-lite": "^1.0.30001020", "chalk": "^2.4.2", "normalize-range": "^0.1.2", "num2fraction": "^1.2.2", - "postcss": "^7.0.23", + "postcss": "^7.0.26", "postcss-value-parser": "^4.0.2" }, "dependencies": { @@ -592,9 +592,9 @@ "dev": true }, "aws4": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.0.tgz", - "integrity": "sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A==", + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz", + "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==", "dev": true }, "axios": { @@ -914,14 +914,14 @@ } }, "browserslist": { - "version": "4.8.3", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz", - "integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==", + "version": "4.8.5", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.5.tgz", + "integrity": "sha512-4LMHuicxkabIB+n9874jZX/az1IaZ5a+EUuvD7KFOu9x/Bd5YHyO0DIz2ls/Kl8g0ItS4X/ilEgf4T1Br0lgSg==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001017", - "electron-to-chromium": "^1.3.322", - "node-releases": "^1.1.44" + "caniuse-lite": "^1.0.30001022", + "electron-to-chromium": "^1.3.338", + "node-releases": "^1.1.46" } }, "bs-recipes": { @@ -996,9 +996,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001020", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001020.tgz", - "integrity": "sha512-yWIvwA68wRHKanAVS1GjN8vajAv7MBFshullKCeq/eKpK7pJBVDgFFEqvgWTkcP2+wIDeQGYFRXECjKZnLkUjA==", + "version": "1.0.30001023", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001023.tgz", + "integrity": "sha512-C5TDMiYG11EOhVOA62W1p3UsJ2z4DsHtMBQtjzp3ZsUglcQn62WOUgW0y795c7A5uZ+GCEIvzkMatLIlAsbNTA==", "dev": true }, "caseless": { @@ -1182,9 +1182,9 @@ } }, "clean-css": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", - "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", + "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==", "dev": true, "requires": { "source-map": "~0.6.0" @@ -1753,9 +1753,9 @@ }, "dependencies": { "readable-stream": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz", - "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.5.0.tgz", + "integrity": "sha512-gSz026xs2LfxBPudDuI41V1lka8cxg64E66SGe78zJlsUofOg/yqwezdIcdfwik6B4h8LFmWPA9ef9X3FiNFLA==", "dev": true, "requires": { "inherits": "^2.0.3", @@ -1826,9 +1826,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.3.329", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.329.tgz", - "integrity": "sha512-CoyYGbkQLwmOpaWRUZgeSNnEPH5fE5R8T7dhQIWV/rlIt+Kx6NFppQJ2oHELmzw8ZGabOBY5CrjGjyA+74QVoQ==", + "version": "1.3.341", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.341.tgz", + "integrity": "sha512-iezlV55/tan1rvdvt7yg7VHRSkt+sKfzQ16wTDqTbQqtl4+pSUkKPXpQHDvEt0c7gKcUHHwUbffOgXz6bn096g==", "dev": true }, "eleventy-plugin-sass": { @@ -2300,9 +2300,9 @@ } }, "fast-deep-equal": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", - "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz", + "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==", "dev": true }, "fast-glob": { @@ -3375,6 +3375,23 @@ "plugin-error": "1.0.1", "through2": "3.0.1", "vinyl-sourcemaps-apply": "0.2.1" + }, + "dependencies": { + "clean-css": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", + "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==", + "dev": true, + "requires": { + "source-map": "~0.6.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } } }, "gulp-if": { @@ -3540,9 +3557,9 @@ "dev": true }, "handlebars": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.6.0.tgz", - "integrity": "sha512-i1ZUP7Qp2JdkMaFon2a+b0m5geE8Z4ZTLaGkgrObkEd+OkUKyRbRWw4KxuFCoHfdETSY1yf9/574eVoNSiK7pw==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.2.tgz", + "integrity": "sha512-4PwqDL2laXtTWZghzzCtunQUTLbo31pcCJrd/B/9JP8XbhVzpS5ZXuKqlOzsd1rtcaLo4KqAn8nl8mkknS4MHw==", "dev": true, "requires": { "neo-async": "^2.6.0", @@ -3685,9 +3702,9 @@ }, "dependencies": { "readable-stream": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz", - "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.5.0.tgz", + "integrity": "sha512-gSz026xs2LfxBPudDuI41V1lka8cxg64E66SGe78zJlsUofOg/yqwezdIcdfwik6B4h8LFmWPA9ef9X3FiNFLA==", "dev": true, "requires": { "inherits": "^2.0.3", @@ -4130,9 +4147,9 @@ "dev": true }, "js-beautify": { - "version": "1.10.2", - "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.2.tgz", - "integrity": "sha512-ZtBYyNUYJIsBWERnQP0rPN9KjkrDfJcMjuVGcvXOUJrD1zmOGwhRwQ4msG+HJ+Ni/FA7+sRQEMYVzdTQDvnzvQ==", + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.3.tgz", + "integrity": "sha512-wfk/IAWobz1TfApSdivH5PJ0miIHgDoYb1ugSqHcODPmaYu46rYe5FVuIEkhjg8IQiv6rDNPyhsqbsohI/C2vQ==", "dev": true, "requires": { "config-chain": "^1.1.12", @@ -4226,9 +4243,9 @@ "dev": true }, "kind-of": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", "dev": true }, "lazy-cache": { @@ -4399,9 +4416,9 @@ } }, "luxon": { - "version": "1.21.3", - "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.21.3.tgz", - "integrity": "sha512-lLRwNcNnkZLuv13A1FUuZRZmTWF7ro2ricYvb0L9cvBYHPvZhQdKwrYnZzi103D2XKmlVmxWpdn2wfIiOt2YEw==", + "version": "1.22.0", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.22.0.tgz", + "integrity": "sha512-3sLvlfbFo+AxVEY3IqxymbumtnlgBwjDExxK60W3d+trrUzErNAz/PfvPT+mva+vEUrdIodeCOs7fB6zHtRSrw==", "dev": true }, "map-cache": { @@ -4747,9 +4764,9 @@ } }, "node-releases": { - "version": "1.1.45", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.45.tgz", - "integrity": "sha512-cXvGSfhITKI8qsV116u2FTzH5EWZJfgG7d4cpqwF8I8+1tWpD6AsvvGRKq2onR0DNj1jfqsjkXZsm14JMS7Cyg==", + "version": "1.1.47", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.47.tgz", + "integrity": "sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==", "dev": true, "requires": { "semver": "^6.3.0" @@ -4764,9 +4781,9 @@ } }, "node-sass": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.0.tgz", - "integrity": "sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==", + "version": "4.13.1", + "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz", + "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==", "dev": true, "requires": { "async-foreach": "^0.1.3", @@ -5474,9 +5491,9 @@ } }, "prismjs": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.18.0.tgz", - "integrity": "sha512-N0r3i/Cto516V8+GKKamhsPVZSFcO0TMUBtIDW6uq6BVqoC3FNtZVZ+cmH16N2XtGQlgRN+sFUTjOdCsEP51qw==", + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.19.0.tgz", + "integrity": "sha512-IVFtbW9mCWm9eOIaEkNyo2Vl4NnEifis2GQ7/MLRG5TQe6t+4Sj9J5QWI9i3v+SS43uZBlCAOn+zYTVYQcPXJw==", "dev": true, "requires": { "clipboard": "^2.0.0" @@ -5995,9 +6012,9 @@ "dev": true }, "resolve": { - "version": "1.14.2", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.2.tgz", - "integrity": "sha512-EjlOBLBO1kxsUxsKjLt7TAECyKW6fOh1VRkykQkKGzcBbjjPIxBqGh0jf7GJ3k/f5mxMqW3htMD3WdTUVtW8HQ==", + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.0.tgz", + "integrity": "sha512-+hTmAldEGE80U2wJJDC1lebb5jWqvTYAfm3YZ1ckk1gBr0MnCqUKlwK1e+anaFljIl+F5tR5IoZcm4ZDA1zMQw==", "dev": true, "requires": { "path-parse": "^1.0.6" @@ -6067,9 +6084,9 @@ } }, "rimraf": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.0.tgz", - "integrity": "sha512-NDGVxTsjqfunkds7CqsOiEnxln4Bo7Nddl3XhS4pXg5OzwkLqJ971ZVAAnB+DDLnF76N+VnDEiBHaVV8I06SUg==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.1.tgz", + "integrity": "sha512-IQ4ikL8SjBiEDZfk+DFVwqRK8md24RWMEJkdSlgNLkyyAImcjf8SWvU1qFMDOb4igBClbTQ/ugPqXcRwdFTxZw==", "dev": true, "requires": { "glob": "^7.1.3" @@ -7229,9 +7246,9 @@ "dev": true }, "uglify-js": { - "version": "3.7.4", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.7.4.tgz", - "integrity": "sha512-tinYWE8X1QfCHxS1lBS8yiDekyhSXOO6R66yNOCdUJeojxxw+PX2BHAz/BWyW7PQ7pkiWVxJfIEbiDxyLWvUGg==", + "version": "3.7.6", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.7.6.tgz", + "integrity": "sha512-yYqjArOYSxvqeeiYH2VGjZOqq6SVmhxzaPjJC1W2F9e+bqvFL9QXQ2osQuKUFjM2hGjKG2YclQnRKWQSt/nOTQ==", "dev": true, "optional": true, "requires": { @@ -7387,9 +7404,9 @@ "dev": true }, "uuid": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz", - "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", "dev": true }, "valid-url": { diff --git a/package.json b/package.json index ff77e512..5153748b 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@11ty/eleventy-plugin-rss": "^1.0.7", "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1", "eleventy-plugin-sass": "^1.0.0", - "luxon": "^1.21.3", - "rimraf": "^3.0.0" + "luxon": "^1.22.0", + "rimraf": "^3.0.1" } } diff --git a/src/_data/people.json b/src/_data/people.json index d6c1cfed..b4210dcb 100644 --- a/src/_data/people.json +++ b/src/_data/people.json @@ -68,5 +68,11 @@ "email": "blherminez@move4mobile.com", "github": "Bartlherminez", "avatar": "https://avatars2.githubusercontent.com/u/15778830?s=80" + }, + "danny": { + "name": "Danny Hooijer", + "email": "dhooyer@move4mobile.com", + "github": "DannyHooyer", + "avatar": "https://avatars0.githubusercontent.com/u/16132824?s=80" } - } \ No newline at end of file +} diff --git a/src/assets/stencil-getting-started/stencil-browsersupport.png b/src/assets/stencil-getting-started/stencil-browsersupport.png new file mode 100644 index 00000000..317b5190 Binary files /dev/null and b/src/assets/stencil-getting-started/stencil-browsersupport.png differ diff --git a/src/posts/2020-01-27-stencil-getting-started.md b/src/posts/2020-01-27-stencil-getting-started.md new file mode 100644 index 00000000..3f594266 --- /dev/null +++ b/src/posts/2020-01-27-stencil-getting-started.md @@ -0,0 +1,70 @@ +--- +title: 'Aan de slag met Stencil' +tags: Stencil, Web Components, Design System +comments: true +author: danny +min_read: 4 +date: 2020-01-27 +--- + +### Wat is Stencil? +[Stencil](https://stenciljs.com/) is een compiler die Web Components (Custom Elements v1) genereert. Stencil combineert de beste concepten van de meest populaire frameworks in een simpele tool. + +Stencil maakt gebruik van features zoals: +* Virtual DOM +* Async rendering +* Reactive data-binding +* TypeScript +* JSX + +Stencil is ontwikkeld door het Ionic framework team. + +### Browser Support + +Stencil bouwt Web Components die te gebruiken zijn in de populaire desktop en mobile browsers. Voor de browsers die geen ondersteuning bieden voor Custom Elements v1 (de API waarop Web Components zijn gebaseerd) maakt Stencil gebruik van polyfills. +Stencil maakt hiervoor gebruik van een dynamic loader die de polyfill alleen inlaadt in browsers die het nodig zijn. + +![verbindingen](/assets/stencil-getting-started/stencil-browsersupport.png) + +### Getting Started + +Stencil vereist een recente LTS versie van NodeJS en npm (npm 6 of hoger). Zorg er dus voor dat deze geïnstalleerd of up to date zijn voordat je verdergaat. Als je dat gedaan hebt initialiseer je een stencil project als volgt: + +``` + npm init stencil +``` + +Stencil kan gebruikt worden om losstaande componenten of gehele applicaties te maken. Na het uitvoeren van het hierboven weergegeven script krijg je de optie om het type project te kiezen. +De keuzes zijn hieronder weergegeven, deze blog gaat echter over de optie _component_. + +``` + ionic-pwa Everything you need to build fast, production ready PWAs + app Minimal starter for building a Stencil app or website +> component Collection of web components that can be used anywhere +``` + +#### Stencil Installation +Zorg ervoor dat je binnen de directory zit van het gegenereerde project, voer daarna het volgende script uit om de laatste versie van Stencil te installeren: + +``` + npm install @stencil/core@latest --save-exact +``` + +#### Component Generator +Nu beschik je over een standaard component Stencil project met een basic my-first-component. +Nu kan je de basic component verwijderen en je eigen component genereren, dit doe je als volgt: + +``` + npm run generate +``` + +Naast het uitvoeren van het generate script kan je ook de Stencil CLI aanroepen om dit te doen: + +``` + stencil generate +``` + +Alle gegenereerde componenten zijn terug te vinden in de _src/components_ folder. + + +Gefeliciteerd! Je hebt nu een basic component Stencil project opgezet! Voor meer informatie over Stencil klik dan [hier](https://stenciljs.com/docs/getting-started). diff --git a/styles.scss b/src/styles.scss similarity index 100% rename from styles.scss rename to src/styles.scss