From 672099ccdd341af88d76d5c38c8f4e382dd4dd92 Mon Sep 17 00:00:00 2001 From: Ken Date: Sat, 23 Feb 2019 07:45:45 -0800 Subject: [PATCH] making some major improvements on the exercise and demo pages --- assets/github.css | 99 +++++++++++++++++++++++++++ assets/step.css | 28 ++++++++ markdownReadme/src/index.ts | 40 +++++++++++ package-lock.json | 119 ++++++++++++++++++--------------- package.json | 4 +- step2-01/README.md | 2 + step2-01/demo/index.html | 10 ++- step2-01/exercise/index.html | 20 ++---- step2-01/exercise/src/index.ts | 18 ++--- step2-02/README.md | 4 +- step2-02/demo/index.html | 6 +- step2-02/exercise/index.html | 6 +- step2-03/README.md | 2 + step2-03/demo/index.html | 6 +- step2-03/exercise/index.html | 6 +- step2-04/README.md | 2 + step2-04/demo/index.html | 14 ++-- step2-04/exercise/index.html | 14 ++-- step2-05/README.md | 2 + step2-05/demo/index.html | 14 ++-- step2-05/exercise/index.html | 14 ++-- step2-06/README.md | 2 + step2-06/demo/index.html | 14 ++-- step2-06/exercise/index.html | 14 ++-- step2-07/README.md | 4 +- step2-07/demo/index.html | 6 +- step2-07/exercise/index.html | 6 +- step2-08/README.md | 2 + step2-08/demo/index.html | 6 +- step2-08/exercise/index.html | 6 +- step2-09/README.md | 2 + step2-09/demo/index.html | 6 +- step2-09/exercise/index.html | 6 +- webpack.config.js | 8 ++- 34 files changed, 391 insertions(+), 121 deletions(-) create mode 100644 assets/github.css create mode 100644 assets/step.css create mode 100644 markdownReadme/src/index.ts diff --git a/assets/github.css b/assets/github.css new file mode 100644 index 0000000..791932b --- /dev/null +++ b/assets/github.css @@ -0,0 +1,99 @@ +/* + +github.com style (c) Vasily Polovnyov + +*/ + +.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; +} diff --git a/assets/step.css b/assets/step.css new file mode 100644 index 0000000..5dce2d8 --- /dev/null +++ b/assets/step.css @@ -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; +} diff --git a/markdownReadme/src/index.ts b/markdownReadme/src/index.ts new file mode 100644 index 0000000..4e8bcdc --- /dev/null +++ b/markdownReadme/src/index.ts @@ -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 `
${highlighted}
`; + // }; + + 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(); diff --git a/package-lock.json b/package-lock.json index c0de319..fcc5309 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1027,17 +1027,6 @@ "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": { "version": "6.23.0", "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz", @@ -1303,7 +1292,8 @@ "big.js": { "version": "5.2.2", "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": { "version": "1.12.0", @@ -1852,7 +1842,8 @@ "commondir": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", - "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=" + "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=", + "dev": true }, "component-emitter": { "version": "1.2.1", @@ -2547,6 +2538,7 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", + "dev": true, "requires": { "object-keys": "^1.0.12" } @@ -2840,7 +2832,8 @@ "emojis-list": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", - "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" + "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", + "dev": true }, "encodeurl": { "version": "1.0.2", @@ -2895,6 +2888,7 @@ "version": "1.13.0", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.13.0.tgz", "integrity": "sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==", + "dev": true, "requires": { "es-to-primitive": "^1.2.0", "function-bind": "^1.1.1", @@ -2908,6 +2902,7 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz", "integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==", + "dev": true, "requires": { "is-callable": "^1.1.4", "is-date-object": "^1.0.1", @@ -3417,6 +3412,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.0.0.tgz", "integrity": "sha512-LDUY6V1Xs5eFskUVYtIwatojt6+9xC9Chnlk/jYOOvn3FAFfSaWddxahDGyNHh0b2dMXa6YW2m0tk8TdVaXHlA==", + "dev": true, "requires": { "commondir": "^1.0.1", "make-dir": "^1.0.0", @@ -3427,6 +3423,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", + "dev": true, "requires": { "locate-path": "^3.0.0" } @@ -3603,8 +3600,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -3625,14 +3621,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3647,20 +3641,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -3777,8 +3768,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -3790,7 +3780,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3805,7 +3794,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3813,14 +3801,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3839,7 +3825,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3920,8 +3905,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -3933,7 +3917,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -4019,8 +4002,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -4056,7 +4038,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4076,7 +4057,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4120,21 +4100,20 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true }, "get-caller-file": { "version": "1.0.3", @@ -4386,6 +4365,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, "requires": { "function-bind": "^1.1.1" } @@ -4408,7 +4388,8 @@ "has-symbols": { "version": "1.0.0", "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": { "version": "1.0.0", @@ -4468,6 +4449,11 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "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": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -4887,7 +4873,8 @@ "is-callable": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz", - "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==" + "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==", + "dev": true }, "is-ci": { "version": "1.2.1", @@ -4921,7 +4908,8 @@ "is-date-object": { "version": "1.0.1", "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": { "version": "0.1.6", @@ -5095,6 +5083,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz", "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=", + "dev": true, "requires": { "has": "^1.0.1" } @@ -5115,6 +5104,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz", "integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==", + "dev": true, "requires": { "has-symbols": "^1.0.0" } @@ -6581,6 +6571,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "dev": true, "requires": { "minimist": "^1.2.0" } @@ -6698,6 +6689,7 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz", "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==", + "dev": true, "requires": { "big.js": "^5.2.2", "emojis-list": "^2.0.0", @@ -6708,6 +6700,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", + "dev": true, "requires": { "p-locate": "^3.0.0", "path-exists": "^3.0.0" @@ -6770,6 +6763,7 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", + "dev": true, "requires": { "pify": "^3.0.0" } @@ -6813,6 +6807,11 @@ "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": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz", @@ -6966,7 +6965,8 @@ "minimist": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "dev": true }, "mississippi": { "version": "3.0.0", @@ -7011,6 +7011,7 @@ "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "dev": true, "requires": { "minimist": "0.0.8" }, @@ -7018,7 +7019,8 @@ "minimist": { "version": "0.0.8", "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": { "version": "1.0.12", "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": { "version": "1.0.1", @@ -7400,6 +7403,7 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz", "integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=", + "dev": true, "requires": { "define-properties": "^1.1.2", "es-abstract": "^1.5.1" @@ -7604,6 +7608,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.1.0.tgz", "integrity": "sha512-NhURkNcrVB+8hNfLuysU8enY5xn2KXphsHBaC2YmRNTZRc7RWusw6apSpdEj3jo4CMb6W9nrF6tTnsJsJeyu6g==", + "dev": true, "requires": { "p-try": "^2.0.0" } @@ -7612,6 +7617,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", + "dev": true, "requires": { "p-limit": "^2.0.0" } @@ -7625,7 +7631,8 @@ "p-try": { "version": "2.0.0", "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": { "version": "4.0.1", @@ -7755,7 +7762,8 @@ "path-exists": { "version": "3.0.0", "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": { "version": "1.0.1", @@ -7838,7 +7846,8 @@ "pify": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=" + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "dev": true }, "pinkie": { "version": "2.0.4", @@ -7859,6 +7868,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==", + "dev": true, "requires": { "find-up": "^3.0.0" } @@ -10211,6 +10221,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz", "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==", + "dev": true, "requires": { "define-properties": "^1.1.2", "object.getownpropertydescriptors": "^2.0.3" diff --git a/package.json b/package.json index d956708..96d9a73 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,8 @@ "react-redux": "^6.0.0", "redux": "^4.0.1", "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" } } diff --git a/step2-01/README.md b/step2-01/README.md index 15733d2..646d714 100644 --- a/step2-01/README.md +++ b/step2-01/README.md @@ -1,5 +1,7 @@ # 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. Topics in this step will include: diff --git a/step2-01/demo/index.html b/step2-01/demo/index.html index 454cef5..bec0a0d 100644 --- a/step2-01/demo/index.html +++ b/step2-01/demo/index.html @@ -1,6 +1,12 @@ - -
+ + + + +
+
+ Nothing to show here, just look at your console window for output. Hit F12 to open console window. +
diff --git a/step2-01/exercise/index.html b/step2-01/exercise/index.html index 0807af1..bec0a0d 100644 --- a/step2-01/exercise/index.html +++ b/step2-01/exercise/index.html @@ -1,20 +1,12 @@ - + - -
+ +
+
+ Nothing to show here, just look at your console window for output. Hit F12 to open console window. +
diff --git a/step2-01/exercise/src/index.ts b/step2-01/exercise/src/index.ts index c3a0fed..df8f49e 100644 --- a/step2-01/exercise/src/index.ts +++ b/step2-01/exercise/src/index.ts @@ -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 const obj1 = { first: 'who', @@ -24,11 +16,13 @@ function makePromise() { 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 // ... -})(); +} + +run(); diff --git a/step2-02/README.md b/step2-02/README.md index a5cfe10..beb715b 100644 --- a/step2-02/README.md +++ b/step2-02/README.md @@ -1,5 +1,7 @@ # 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: https://github.com/officedev/office-ui-fabric-react @@ -15,7 +17,7 @@ https://developer.microsoft.com/en-us/fabric/#/components # 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/` 3. Replace the DOM tags with Fabric components in those TSX files with these components: diff --git a/step2-02/demo/index.html b/step2-02/demo/index.html index 454cef5..6025e9f 100644 --- a/step2-02/demo/index.html +++ b/step2-02/demo/index.html @@ -1,6 +1,10 @@ - + + + + +
diff --git a/step2-02/exercise/index.html b/step2-02/exercise/index.html index 454cef5..6025e9f 100644 --- a/step2-02/exercise/index.html +++ b/step2-02/exercise/index.html @@ -1,6 +1,10 @@ - + + + + +
diff --git a/step2-03/README.md b/step2-03/README.md index f5bf00d..78ab476 100644 --- a/step2-03/README.md +++ b/step2-03/README.md @@ -1,5 +1,7 @@ # 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. A CodePen that illustrates what `mergeStyles` does: https://codepen.io/dzearing/pen/jGdgrE?editors=1011 diff --git a/step2-03/demo/index.html b/step2-03/demo/index.html index 454cef5..6025e9f 100644 --- a/step2-03/demo/index.html +++ b/step2-03/demo/index.html @@ -1,6 +1,10 @@ - + + + + +
diff --git a/step2-03/exercise/index.html b/step2-03/exercise/index.html index 454cef5..6025e9f 100644 --- a/step2-03/exercise/index.html +++ b/step2-03/exercise/index.html @@ -1,6 +1,10 @@ - + + + + +
diff --git a/step2-04/README.md b/step2-04/README.md index 0633334..fa397ce 100644 --- a/step2-04/README.md +++ b/step2-04/README.md @@ -1,5 +1,7 @@ # 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. https://jestjs.io/ diff --git a/step2-04/demo/index.html b/step2-04/demo/index.html index be1bd8a..7990ebe 100644 --- a/step2-04/demo/index.html +++ b/step2-04/demo/index.html @@ -1,8 +1,14 @@ - - For this step, we look at unit testing. Run - 
npm test
- in the command line. + + + + +
+
+ For this step, we look at unit testing. Run + 
npm test
+ in the command line. +
diff --git a/step2-04/exercise/index.html b/step2-04/exercise/index.html index be1bd8a..7990ebe 100644 --- a/step2-04/exercise/index.html +++ b/step2-04/exercise/index.html @@ -1,8 +1,14 @@ - - For this step, we look at unit testing. Run - 
npm test
- in the command line. + + + + +
+
+ For this step, we look at unit testing. Run + 
npm test
+ in the command line. +
diff --git a/step2-05/README.md b/step2-05/README.md index 9a98566..8f79e51 100644 --- a/step2-05/README.md +++ b/step2-05/README.md @@ -1,5 +1,7 @@ # Step 2.5: Redux: Reducers +[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) + Redux is an implementation of the Flux architectural pattern: ![Flux Diagram](../assets/flux.png) diff --git a/step2-05/demo/index.html b/step2-05/demo/index.html index be1bd8a..7990ebe 100644 --- a/step2-05/demo/index.html +++ b/step2-05/demo/index.html @@ -1,8 +1,14 @@ - - For this step, we look at unit testing. Run - 
npm test
- in the command line. + + + + +
+
+ For this step, we look at unit testing. Run + 
npm test
+ in the command line. +
diff --git a/step2-05/exercise/index.html b/step2-05/exercise/index.html index be1bd8a..7990ebe 100644 --- a/step2-05/exercise/index.html +++ b/step2-05/exercise/index.html @@ -1,8 +1,14 @@ - - For this step, we look at unit testing. Run - 
npm test
- in the command line. + + + + +
+
+ For this step, we look at unit testing. Run + 
npm test
+ in the command line. +
diff --git a/step2-06/README.md b/step2-06/README.md index 4ec943a..1bdae7b 100644 --- a/step2-06/README.md +++ b/step2-06/README.md @@ -1,5 +1,7 @@ # Step 2.6 +[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) + 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. diff --git a/step2-06/demo/index.html b/step2-06/demo/index.html index be1bd8a..7990ebe 100644 --- a/step2-06/demo/index.html +++ b/step2-06/demo/index.html @@ -1,8 +1,14 @@ - - For this step, we look at unit testing. Run - 
npm test
- in the command line. + + + + +
+
+ For this step, we look at unit testing. Run + 
npm test
+ in the command line. +
diff --git a/step2-06/exercise/index.html b/step2-06/exercise/index.html index be1bd8a..7990ebe 100644 --- a/step2-06/exercise/index.html +++ b/step2-06/exercise/index.html @@ -1,8 +1,14 @@ - - For this step, we look at unit testing. Run - 
npm test
- in the command line. + + + + +
+
+ For this step, we look at unit testing. Run + 
npm test
+ in the command line. +
diff --git a/step2-07/README.md b/step2-07/README.md index 70824d4..4858c7a 100644 --- a/step2-07/README.md +++ b/step2-07/README.md @@ -1,5 +1,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 `` component. ```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. -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 diff --git a/step2-07/demo/index.html b/step2-07/demo/index.html index 454cef5..6025e9f 100644 --- a/step2-07/demo/index.html +++ b/step2-07/demo/index.html @@ -1,6 +1,10 @@ - + + + + +
diff --git a/step2-07/exercise/index.html b/step2-07/exercise/index.html index 454cef5..6025e9f 100644 --- a/step2-07/exercise/index.html +++ b/step2-07/exercise/index.html @@ -1,6 +1,10 @@ - + + + + +
diff --git a/step2-08/README.md b/step2-08/README.md index cf0e57c..0fc7f74 100644 --- a/step2-08/README.md +++ b/step2-08/README.md @@ -1,5 +1,7 @@ # Step 2.8 +[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) + 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. diff --git a/step2-08/demo/index.html b/step2-08/demo/index.html index 454cef5..6025e9f 100644 --- a/step2-08/demo/index.html +++ b/step2-08/demo/index.html @@ -1,6 +1,10 @@ - + + + + +
diff --git a/step2-08/exercise/index.html b/step2-08/exercise/index.html index 454cef5..6025e9f 100644 --- a/step2-08/exercise/index.html +++ b/step2-08/exercise/index.html @@ -1,6 +1,10 @@ - + + + + +
diff --git a/step2-09/README.md b/step2-09/README.md index c0f2981..cda114a 100644 --- a/step2-09/README.md +++ b/step2-09/README.md @@ -1,5 +1,7 @@ # Step 2.9 +[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) + Redux Thunk middleware for actions with service calls. The documentation is here: https://github.com/reduxjs/redux-thunk diff --git a/step2-09/demo/index.html b/step2-09/demo/index.html index 454cef5..6025e9f 100644 --- a/step2-09/demo/index.html +++ b/step2-09/demo/index.html @@ -1,6 +1,10 @@ - + + + + +
diff --git a/step2-09/exercise/index.html b/step2-09/exercise/index.html index 454cef5..6025e9f 100644 --- a/step2-09/exercise/index.html +++ b/step2-09/exercise/index.html @@ -1,6 +1,10 @@ - + + + + +
diff --git a/webpack.config.js b/webpack.config.js index d23dfe9..390633a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -41,7 +41,7 @@ fs.readdirSync('./').filter(step => { module.exports = function() { return { - entry: entries, + entry: { ...entries, markdownReadme: './markdownReadme/src/index.ts' }, module: { rules: [ { @@ -66,7 +66,7 @@ module.exports = function() { return new HtmlWebpackPlugin({ template: path.join(__dirname, entry, 'index.html'), filename: `${entry}/index.html`, - chunks: [entry] + chunks: [entry, 'markdownReadme'] }); }), new CopyWebpackPlugin([ @@ -84,6 +84,10 @@ module.exports = function() { from: 'index.html', to: outPath }, + { + from: '*.md', + to: outPath + }, ...nonWebpackedEntries.map(entry => ({ from: `${entry}/**/*`, to: outPath })) ]), new ForkTsCheckerWebpackPlugin({