microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

making some major improvements on the exercise and demo pages

Browse Source
This commit is contained in:
Ken
2019-02-23 07:45:45 -08:00
parent f70417f6ae
commit 672099ccdd
34 changed files with 391 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
assets/github.css Normal file
View File

@@ -0,0 +1,99 @@
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;
}
.hljs-comment,
.hljs-quote {
color: #998;
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: #333;
font-weight: bold;
}
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
color: #008080;
}
.hljs-string,
.hljs-doctag {
color: #d14;
}
.hljs-title,
.hljs-section,
.hljs-selector-id {
color: #900;
font-weight: bold;
}
.hljs-subst {
font-weight: normal;
}
.hljs-type,
.hljs-class .hljs-title {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: #000080;
font-weight: normal;
}
.hljs-regexp,
.hljs-link {
color: #009926;
}
.hljs-symbol,
.hljs-bullet {
color: #990073;
}
.hljs-built_in,
.hljs-builtin-name {
color: #0086b3;
}
.hljs-meta {
color: #999;
font-weight: bold;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}

28
assets/step.css Normal file
View File

@@ -0,0 +1,28 @@
@import url(https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css);
@import url(./github.css);
body {
display: flex;
margin: 0;
padding: 0;
}
#app {
flex: 1;
padding: 50px;
}
#markdownReadme {
flex: 1;
background: #efefef;
padding: 50px;
margin: 0 auto;
}
pre {
padding: 15px;
border: 1px #999 solid;
border-radius: 2px;
background-color: white;
margin: 15px 0;
}

40
markdownReadme/src/index.ts Normal file
View File

@@ -0,0 +1,40 @@
import marked from 'marked';
import hljs from 'highlight.js';
async function run() {
const div = document.getElementById('markdownReadme');
// // Create your custom renderer.
// const renderer = new Renderer();
// renderer.code = (code, language) => {
// // Check whether the given language is valid for highlight.js.
// const validLang = !!(language && highlightjs.getLanguage(language));
// // Highlight only if the language is valid.
// const highlighted = validLang ? highlightjs.highlight(language, code).value : code;
// // Render the highlighted code with `hljs` class.
// return `<pre><code class="hljs ${language}">${highlighted}</code></pre>`;
// };
if (typeof hljs != 'undefined') {
marked.setOptions({
highlight: function(code, lang) {
if (lang && hljs.getLanguage(lang)) {
return hljs.highlight(lang, code).value;
} else {
return code;
}
}
});
}
// Set the renderer to marked.
// marked.setOptions({ renderer });
if (div) {
const response = await fetch('../README.md');
const markdownText = await response.text();
div.innerHTML = marked(markdownText, { baseUrl: '../' });
}
}
run();

119
package-lock.json generated
View File

@@ -1027,17 +1027,6 @@
"babel-preset-jest": "^23.2.0" "babel-preset-jest": "^23.2.0"
} }
}, },
"babel-loader": {
"version": "8.0.5",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.5.tgz",
"integrity": "sha512-NTnHnVRd2JnRqPC0vW+iOQWU5pchDbYXsG2E6DMXEpMfUcQKclF9gmf3G3ZMhzG7IG9ji4coL0cm+FxeWxDpnw==",
"requires": {
"find-cache-dir": "^2.0.0",
"loader-utils": "^1.0.2",
"mkdirp": "^0.5.1",
"util.promisify": "^1.0.0"
}
},
"babel-messages": { "babel-messages": {
"version": "6.23.0", "version": "6.23.0",
"resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz", "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
@@ -1303,7 +1292,8 @@
"big.js": { "big.js": {
"version": "5.2.2", "version": "5.2.2",
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==" "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
"dev": true
}, },
"binary-extensions": { "binary-extensions": {
"version": "1.12.0", "version": "1.12.0",
@@ -1852,7 +1842,8 @@
"commondir": { "commondir": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
"integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=" "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
"dev": true
}, },
"component-emitter": { "component-emitter": {
"version": "1.2.1", "version": "1.2.1",
@@ -2547,6 +2538,7 @@
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
"dev": true,
"requires": { "requires": {
"object-keys": "^1.0.12" "object-keys": "^1.0.12"
} }
@@ -2840,7 +2832,8 @@
"emojis-list": { "emojis-list": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
"dev": true
}, },
"encodeurl": { "encodeurl": {
"version": "1.0.2", "version": "1.0.2",
@@ -2895,6 +2888,7 @@
"version": "1.13.0", "version": "1.13.0",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.13.0.tgz", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.13.0.tgz",
"integrity": "sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==", "integrity": "sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==",
"dev": true,
"requires": { "requires": {
"es-to-primitive": "^1.2.0", "es-to-primitive": "^1.2.0",
"function-bind": "^1.1.1", "function-bind": "^1.1.1",
@@ -2908,6 +2902,7 @@
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz", "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz",
"integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==", "integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==",
"dev": true,
"requires": { "requires": {
"is-callable": "^1.1.4", "is-callable": "^1.1.4",
"is-date-object": "^1.0.1", "is-date-object": "^1.0.1",
@@ -3417,6 +3412,7 @@
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.0.0.tgz", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.0.0.tgz",
"integrity": "sha512-LDUY6V1Xs5eFskUVYtIwatojt6+9xC9Chnlk/jYOOvn3FAFfSaWddxahDGyNHh0b2dMXa6YW2m0tk8TdVaXHlA==", "integrity": "sha512-LDUY6V1Xs5eFskUVYtIwatojt6+9xC9Chnlk/jYOOvn3FAFfSaWddxahDGyNHh0b2dMXa6YW2m0tk8TdVaXHlA==",
"dev": true,
"requires": { "requires": {
"commondir": "^1.0.1", "commondir": "^1.0.1",
"make-dir": "^1.0.0", "make-dir": "^1.0.0",
@@ -3427,6 +3423,7 @@
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
"dev": true,
"requires": { "requires": {
"locate-path": "^3.0.0" "locate-path": "^3.0.0"
} }
@@ -3603,8 +3600,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@@ -3625,14 +3621,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@@ -3647,20 +3641,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@@ -3777,8 +3768,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@@ -3790,7 +3780,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@@ -3805,7 +3794,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@@ -3813,14 +3801,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@@ -3839,7 +3825,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@@ -3920,8 +3905,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@@ -3933,7 +3917,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@@ -4019,8 +4002,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@@ -4056,7 +4038,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@@ -4076,7 +4057,6 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@@ -4120,21 +4100,20 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
} }
} }
}, },
"function-bind": { "function-bind": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
"dev": true
}, },
"get-caller-file": { "get-caller-file": {
"version": "1.0.3", "version": "1.0.3",
@@ -4386,6 +4365,7 @@
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
"dev": true,
"requires": { "requires": {
"function-bind": "^1.1.1" "function-bind": "^1.1.1"
} }
@@ -4408,7 +4388,8 @@
"has-symbols": { "has-symbols": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
"integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=" "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=",
"dev": true
}, },
"has-value": { "has-value": {
"version": "1.0.0", "version": "1.0.0",
@@ -4468,6 +4449,11 @@
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true "dev": true
}, },
"highlight.js": {
"version": "9.14.2",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.14.2.tgz",
"integrity": "sha512-Nc6YNECYpxyJABGYJAyw7dBAYbXEuIzwzkqoJnwbc1nIpCiN+3ioYf0XrBnLiyyG0JLuJhpPtt2iTSbXiKLoyA=="
},
"hmac-drbg": { "hmac-drbg": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -4887,7 +4873,8 @@
"is-callable": { "is-callable": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
"integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==" "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==",
"dev": true
}, },
"is-ci": { "is-ci": {
"version": "1.2.1", "version": "1.2.1",
@@ -4921,7 +4908,8 @@
"is-date-object": { "is-date-object": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz", "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=" "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
"dev": true
}, },
"is-descriptor": { "is-descriptor": {
"version": "0.1.6", "version": "0.1.6",
@@ -5095,6 +5083,7 @@
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
"integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=", "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
"dev": true,
"requires": { "requires": {
"has": "^1.0.1" "has": "^1.0.1"
} }
@@ -5115,6 +5104,7 @@
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz", "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz",
"integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==", "integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==",
"dev": true,
"requires": { "requires": {
"has-symbols": "^1.0.0" "has-symbols": "^1.0.0"
} }
@@ -6581,6 +6571,7 @@
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
"dev": true,
"requires": { "requires": {
"minimist": "^1.2.0" "minimist": "^1.2.0"
} }
@@ -6698,6 +6689,7 @@
"version": "1.2.3", "version": "1.2.3",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz", "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
"integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==", "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
"dev": true,
"requires": { "requires": {
"big.js": "^5.2.2", "big.js": "^5.2.2",
"emojis-list": "^2.0.0", "emojis-list": "^2.0.0",
@@ -6708,6 +6700,7 @@
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
"dev": true,
"requires": { "requires": {
"p-locate": "^3.0.0", "p-locate": "^3.0.0",
"path-exists": "^3.0.0" "path-exists": "^3.0.0"
@@ -6770,6 +6763,7 @@
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
"integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
"dev": true,
"requires": { "requires": {
"pify": "^3.0.0" "pify": "^3.0.0"
} }
@@ -6813,6 +6807,11 @@
"object-visit": "^1.0.0" "object-visit": "^1.0.0"
} }
}, },
"marked": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/marked/-/marked-0.6.1.tgz",
"integrity": "sha512-+H0L3ibcWhAZE02SKMqmvYsErLo4EAVJxu5h3bHBBDvvjeWXtl92rGUSBYHL2++5Y+RSNgl8dYOAXcYe7lp1fA=="
},
"math-random": { "math-random": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz", "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
@@ -6966,7 +6965,8 @@
"minimist": { "minimist": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
}, },
"mississippi": { "mississippi": {
"version": "3.0.0", "version": "3.0.0",
@@ -7011,6 +7011,7 @@
"version": "0.5.1", "version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
}, },
@@ -7018,7 +7019,8 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
} }
} }
}, },
@@ -7385,7 +7387,8 @@
"object-keys": { "object-keys": {
"version": "1.0.12", "version": "1.0.12",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
"integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==" "integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==",
"dev": true
}, },
"object-visit": { "object-visit": {
"version": "1.0.1", "version": "1.0.1",
@@ -7400,6 +7403,7 @@
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz", "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
"integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=", "integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=",
"dev": true,
"requires": { "requires": {
"define-properties": "^1.1.2", "define-properties": "^1.1.2",
"es-abstract": "^1.5.1" "es-abstract": "^1.5.1"
@@ -7604,6 +7608,7 @@
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.1.0.tgz", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.1.0.tgz",
"integrity": "sha512-NhURkNcrVB+8hNfLuysU8enY5xn2KXphsHBaC2YmRNTZRc7RWusw6apSpdEj3jo4CMb6W9nrF6tTnsJsJeyu6g==", "integrity": "sha512-NhURkNcrVB+8hNfLuysU8enY5xn2KXphsHBaC2YmRNTZRc7RWusw6apSpdEj3jo4CMb6W9nrF6tTnsJsJeyu6g==",
"dev": true,
"requires": { "requires": {
"p-try": "^2.0.0" "p-try": "^2.0.0"
} }
@@ -7612,6 +7617,7 @@
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
"dev": true,
"requires": { "requires": {
"p-limit": "^2.0.0" "p-limit": "^2.0.0"
} }
@@ -7625,7 +7631,8 @@
"p-try": { "p-try": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz", "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
"integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==" "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
"dev": true
}, },
"package-json": { "package-json": {
"version": "4.0.1", "version": "4.0.1",
@@ -7755,7 +7762,8 @@
"path-exists": { "path-exists": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=" "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
"dev": true
}, },
"path-is-absolute": { "path-is-absolute": {
"version": "1.0.1", "version": "1.0.1",
@@ -7838,7 +7846,8 @@
"pify": { "pify": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=" "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
"dev": true
}, },
"pinkie": { "pinkie": {
"version": "2.0.4", "version": "2.0.4",
@@ -7859,6 +7868,7 @@
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
"integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==", "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
"dev": true,
"requires": { "requires": {
"find-up": "^3.0.0" "find-up": "^3.0.0"
} }
@@ -10211,6 +10221,7 @@
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz", "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
"integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==", "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
"dev": true,
"requires": { "requires": {
"define-properties": "^1.1.2", "define-properties": "^1.1.2",
"object.getownpropertydescriptors": "^2.0.3" "object.getownpropertydescriptors": "^2.0.3"

4
package.json
View File

@@ -55,6 +55,8 @@
"react-redux": "^6.0.0", "react-redux": "^6.0.0",
"redux": "^4.0.1", "redux": "^4.0.1",
"redux-starter-kit": "^0.4.3", "redux-starter-kit": "^0.4.3",
"redux-thunk": "^2.3.0" "redux-thunk": "^2.3.0",
"marked": "^0.6.1",
"highlight.js": "^9.14.2"
} }
} }

2
step2-01/README.md
View File

@@ -1,5 +1,7 @@
# Step 2.1: Introduction to Typescript # Step 2.1: Introduction to Typescript
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
In this step, we'll cover enough of the Typescript concepts to be productive with the React & Redux frameworks. In this step, we'll cover enough of the Typescript concepts to be productive with the React & Redux frameworks.
Topics in this step will include: Topics in this step will include:

10
step2-01/demo/index.html
View File

@@ -1,6 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
<div id="app"></div> <link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app">
Nothing to show here, just look at your console window for output. Hit F12 to open console window.
</div>
</body> </body>
</html> </html>

20
step2-01/exercise/index.html
View File

@@ -1,20 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <link rel="stylesheet" href="../../assets/step.css" />
* {
margin: 0;
outline: 0;
}
textarea {
width: 100vh;
height: 100vh;
border: none;
}
</style>
</head> </head>
<body> <body class="ms-Fabric">
<div id="app"></div> <div id="markdownReadme"></div>
<div id="app">
Nothing to show here, just look at your console window for output. Hit F12 to open console window.
</div>
</body> </body>
</html> </html>

18
step2-01/exercise/src/index.ts
View File

@@ -1,11 +1,3 @@
const app = document.getElementById('app');
const textarea = document.createElement('textarea');
textarea.setAttribute('readonly', 'true');
app.appendChild(textarea);
function log(results: string) {
textarea.innerText += results;
}
// Some setup code for exercises // Some setup code for exercises
const obj1 = { const obj1 = {
first: 'who', first: 'who',
@@ -24,11 +16,13 @@ function makePromise() {
return Promise.resolve(5); return Promise.resolve(5);
} }
// Do the exercises here, output your results with "log()" function // Do the exercises here, output your results with "console.log()" function
// ... // ...
log('hello world'); console.log('hello world');
(async () => { async function run() {
// Place your code for the async / await exercise here // Place your code for the async / await exercise here
// ... // ...
})(); }
run();

4
step2-02/README.md
View File

@@ -1,5 +1,7 @@
# Step 2.2: UI Fabric Component Library # Step 2.2: UI Fabric Component Library
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
UI Fabric is a Component Library that is developed to reflect the latest Microsoft design language. It is used in many Microsoft web applications and is developed in the open: UI Fabric is a Component Library that is developed to reflect the latest Microsoft design language. It is used in many Microsoft web applications and is developed in the open:
https://github.com/officedev/office-ui-fabric-react https://github.com/officedev/office-ui-fabric-react
@@ -15,7 +17,7 @@ https://developer.microsoft.com/en-us/fabric/#/components
# Exercise # Exercise
1. Open up the Documentation for DefaultButton here: 1. Open up the [Documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button)
2. Open up the TSX files inside `components/` 2. Open up the TSX files inside `components/`
3. Replace the DOM tags with Fabric components in those TSX files with these components: 3. Replace the DOM tags with Fabric components in those TSX files with these components:

6
step2-02/demo/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

6
step2-02/exercise/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

2
step2-03/README.md
View File

@@ -1,5 +1,7 @@
# Step 2.3: Theming and Styling # Step 2.3: Theming and Styling
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
Theming and Styling with UI Fabric. In this section, we will illustrate how to utilize some of the built-in theming and styling features right inside UI Fabric component library. UI Fabric exposes its own css-in-js library called `mergeStyles` that is very performant compared with other similar libraries. Theming and Styling with UI Fabric. In this section, we will illustrate how to utilize some of the built-in theming and styling features right inside UI Fabric component library. UI Fabric exposes its own css-in-js library called `mergeStyles` that is very performant compared with other similar libraries.
A CodePen that illustrates what `mergeStyles` does: https://codepen.io/dzearing/pen/jGdgrE?editors=1011 A CodePen that illustrates what `mergeStyles` does: https://codepen.io/dzearing/pen/jGdgrE?editors=1011

6
step2-03/demo/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

6
step2-03/exercise/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

2
step2-04/README.md
View File

@@ -1,5 +1,7 @@
# Step 2.4 # Step 2.4
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
Testing Typescript code with jest. jest is a test framework made by Facebook and is very popular in the React and the wider JS ecosystem. We will work on implementing simple unit tests here in this exercise. Testing Typescript code with jest. jest is a test framework made by Facebook and is very popular in the React and the wider JS ecosystem. We will work on implementing simple unit tests here in this exercise.
https://jestjs.io/ https://jestjs.io/

14
step2-04/demo/index.html
View File

@@ -1,8 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
For this step, we look at unit testing. Run <link rel="stylesheet" href="../../assets/step.css" />
<pre>npm test</pre> </head>
in the command line. <body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app">
For this step, we look at unit testing. Run
<pre>npm test</pre>
in the command line.
</div>
</body> </body>
</html> </html>

14
step2-04/exercise/index.html
View File

@@ -1,8 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
For this step, we look at unit testing. Run <link rel="stylesheet" href="../../assets/step.css" />
<pre>npm test</pre> </head>
in the command line. <body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app">
For this step, we look at unit testing. Run
<pre>npm test</pre>
in the command line.
</div>
</body> </body>
</html> </html>

2
step2-05/README.md
View File

@@ -1,5 +1,7 @@
# Step 2.5: Redux: Reducers # Step 2.5: Redux: Reducers
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
Redux is an implementation of the Flux architectural pattern: Redux is an implementation of the Flux architectural pattern:
![Flux Diagram](../assets/flux.png) ![Flux Diagram](../assets/flux.png)

14
step2-05/demo/index.html
View File

@@ -1,8 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
For this step, we look at unit testing. Run <link rel="stylesheet" href="../../assets/step.css" />
<pre>npm test</pre> </head>
in the command line. <body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app">
For this step, we look at unit testing. Run
<pre>npm test</pre>
in the command line.
</div>
</body> </body>
</html> </html>

14
step2-05/exercise/index.html
View File

@@ -1,8 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
For this step, we look at unit testing. Run <link rel="stylesheet" href="../../assets/step.css" />
<pre>npm test</pre> </head>
in the command line. <body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app">
For this step, we look at unit testing. Run
<pre>npm test</pre>
in the command line.
</div>
</body> </body>
</html> </html>

2
step2-06/README.md
View File

@@ -1,5 +1,7 @@
# Step 2.6 # Step 2.6
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
Redux: Dispatching Actions and Examining State. Redux: Dispatching Actions and Examining State.
In this step, we learn about `dispatch` and `getState()`. Dispatching action messages to the store is the only means by which to inform the reducers to modify the shared state tree. In this step, we learn about `dispatch` and `getState()`. Dispatching action messages to the store is the only means by which to inform the reducers to modify the shared state tree.

14
step2-06/demo/index.html
View File

@@ -1,8 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
For this step, we look at unit testing. Run <link rel="stylesheet" href="../../assets/step.css" />
<pre>npm test</pre> </head>
in the command line. <body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app">
For this step, we look at unit testing. Run
<pre>npm test</pre>
in the command line.
</div>
</body> </body>
</html> </html>

14
step2-06/exercise/index.html
View File

@@ -1,8 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
For this step, we look at unit testing. Run <link rel="stylesheet" href="../../assets/step.css" />
<pre>npm test</pre> </head>
in the command line. <body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app">
For this step, we look at unit testing. Run
<pre>npm test</pre>
in the command line.
</div>
</body> </body>
</html> </html>

4
step2-07/README.md
View File

@@ -1,5 +1,7 @@
# Step 2.7 # Step 2.7
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
Connect store to view with `react-redux`. `connect()` is used to turn Redux store and dispatch functions into props inside React components. The state and action dispatchers are passed along with a `<Provider>` component. Connect store to view with `react-redux`. `connect()` is used to turn Redux store and dispatch functions into props inside React components. The state and action dispatchers are passed along with a `<Provider>` component.
```ts ```ts
@@ -8,7 +10,7 @@ const NewComponent = function connect(mapStateToProps?, mapDispatchToProps?, mer
The `connect()` function takes in a few functions that maps some portion of the state tree and dispatcher functions as props. It is a **higher order function** meaning that the return value of `connect()` is a function that decorates OldComponents into a NewComponent with all the mapped props. The `connect()` function takes in a few functions that maps some portion of the state tree and dispatcher functions as props. It is a **higher order function** meaning that the return value of `connect()` is a function that decorates OldComponents into a NewComponent with all the mapped props.
This `mapStateToProps` function selects out portions of the state tree. This function informs the connected view when to re-render based on a shallow comparison from previous state. This `mapStateToProps` function selects out portions of the state tree. This function informs the connected view when to re-render based on a shallow comparison from previous state.
# Exercise # Exercise

6
step2-07/demo/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

6
step2-07/exercise/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

2
step2-08/README.md
View File

@@ -1,5 +1,7 @@
# Step 2.8 # Step 2.8
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
Combine Reducers Combine Reducers
This lesson is just a helper to make the process of writing reducers use less boilerplate code. This step briefly introduces to a world of helpers in writing Redux code. This lesson is just a helper to make the process of writing reducers use less boilerplate code. This step briefly introduces to a world of helpers in writing Redux code.

6
step2-08/demo/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

6
step2-08/exercise/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

2
step2-09/README.md
View File

@@ -1,5 +1,7 @@
# Step 2.9 # Step 2.9
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
Redux Thunk middleware for actions with service calls. The documentation is here: Redux Thunk middleware for actions with service calls. The documentation is here:
https://github.com/reduxjs/redux-thunk https://github.com/reduxjs/redux-thunk

6
step2-09/demo/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

6
step2-09/exercise/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

8
webpack.config.js
View File

@@ -41,7 +41,7 @@ fs.readdirSync('./').filter(step => {
module.exports = function() { module.exports = function() {
return { return {
entry: entries, entry: { ...entries, markdownReadme: './markdownReadme/src/index.ts' },
module: { module: {
rules: [ rules: [
{ {
@@ -66,7 +66,7 @@ module.exports = function() {
return new HtmlWebpackPlugin({ return new HtmlWebpackPlugin({
template: path.join(__dirname, entry, 'index.html'), template: path.join(__dirname, entry, 'index.html'),
filename: `${entry}/index.html`, filename: `${entry}/index.html`,
chunks: [entry] chunks: [entry, 'markdownReadme']
}); });
}), }),
new CopyWebpackPlugin([ new CopyWebpackPlugin([
@@ -84,6 +84,10 @@ module.exports = function() {
from: 'index.html', from: 'index.html',
to: outPath to: outPath
}, },
{
from: '*.md',
to: outPath
},
...nonWebpackedEntries.map(entry => ({ from: `${entry}/**/*`, to: outPath })) ...nonWebpackedEntries.map(entry => ({ from: `${entry}/**/*`, to: outPath }))
]), ]),
new ForkTsCheckerWebpackPlugin({ new ForkTsCheckerWebpackPlugin({