fix load markdown file

.husky/.gitignore

@@ -0,0 +1 @@
+_

package.json

@@ -24,6 +24,7 @@
 		"eslint-plugin-prettier": "^3.4.0",
 		"eslint-plugin-react": "^7.23.2",
 		"fs-extra": "^9.1.0",
+		"gh-pages": "^3.1.0",
 		"highlight.js": "^10.7.2",
 		"husky": "^6.0.0",
 		"iconv-lite": "^0.6.2",
@@ -47,7 +48,9 @@
 		"test": "react-scripts test",
 		"eject": "react-scripts eject",
 		"prettier": "prettier --write ./src",
-		"spider": "node ./source/get-markdown.js"
+		"spider": "node ./source/get-markdown.js",
+		"predeploy": "yarn build",
+		"deploy": "gh-pages -d docs"
 	},
 	"husky": {
 		"hooks": {
@@ -57,7 +60,7 @@
 	"lint-staged": {
 		"*.{ts,tsx}": [
 			"yarn run prettier",
-			"git add"
+			"git add ."
 		]
 	},
 	"homepage": "https://ok3-8.github.io/some-cool-things-with-you/",

src/App.tsx

@@ -7,6 +7,22 @@ import Router from "./Router";
 import avatar from "./assets/avatar5.jpg";
 import setting from "./assets/setting.png";
 
+import marked from "marked";
+import hljs from "highlight.js";
+
+marked.setOptions({
+	renderer: new marked.Renderer(),
+	gfm: true,
+	pedantic: false,
+	sanitize: false,
+	breaks: true,
+	smartLists: true,
+	smartypants: true,
+	highlight: function (code) {
+		return hljs.highlightAuto(code).value;
+	},
+});
+
 export const Context = React.createContext({ tag: "random" });
 
 function reducer(state: any, action: any) {
@@ -87,6 +103,9 @@ function App() {
 					<Link to="/best-questions">
 						<CircularText text="Best Question" emoji="🍋" color="cyan" />
 					</Link>
+					<Link to="/diy-code">
+						<CircularText text="Do it yourself" emoji="🍓" color="cc99" />
+					</Link>
 					<Link to="/abcdefg">
 						<CircularText text="A B C D E F G" emoji="🍓" color="timber" />
 					</Link>

src/Router.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import Land4glory from "./pages/Land4glory";
 import Bad2Good from "./pages/Bad2Good";
 import Answer from "./pages/Answer";
+import DIYCode from "./pages/DIYCode";
 import Abcdefg from "./pages/Abcdefg";
 import { Switch, Route } from "react-router-dom";
 
@@ -12,6 +13,7 @@ const Router = () => (
 		<Route path="/land-of-lory" component={Land4glory} />
 		<Route path="/bad-to-good" component={Bad2Good} />
 		<Route path="/best-questions" component={Answer} />
+		<Route path="/diy-code" component={DIYCode} />
 		<Route path="/abcdefg" component={Abcdefg} />
 	</Switch>
 );

src/globals.d.ts

@@ -0,0 +1,4 @@
+declare module "*.md" {
+	const value: string;
+	export default value;
+}

src/index.css

@@ -94,6 +94,10 @@ code {
 	background-color: rgba(13, 202, 240, 0.2);
 	color: #0dcaf0;
 }
+.nav div.cc99 {
+	background-color: rgba(0, 102, 204, 0.32);
+	color: #0099cc;
+}
 .nav div.green {
 	background-color: rgba(25, 135, 84, 0.2);
 	color: #198754;

src/pages/Answer/index.tsx

@@ -1,26 +1,12 @@
 import React, { useContext, useEffect } from "react";
 
 import marked from "marked";
-import hljs from "highlight.js";
 import dayjs from "dayjs";
 
 import { Context } from "../../App";
 import codeJson from "./../../code_source/answer_json.json";
 import "./index.css";
 
-marked.setOptions({
-	renderer: new marked.Renderer(),
-	gfm: true,
-	pedantic: false,
-	sanitize: false,
-	breaks: true,
-	smartLists: true,
-	smartypants: true,
-	highlight: function (code) {
-		return hljs.highlightAuto(code).value;
-	},
-});
-
 let currentIndex = 0;
 
 function Answer() {

src/pages/Bad2Good/index.tsx

@@ -1,27 +1,13 @@
 import React, { useContext, useEffect } from "react";
 
 import marked from "marked";
-import hljs from "highlight.js";
 import dayjs from "dayjs";
 
 import { Context } from "../../App";
 import jsCodeJson from "./../../code_source/clean-code-javascript.json";
 import tsCodeJson from "./../../code_source/clean-code-typescript.json";
 import "./index.css";
 
-marked.setOptions({
-	renderer: new marked.Renderer(),
-	gfm: true,
-	pedantic: false,
-	sanitize: false,
-	breaks: true,
-	smartLists: true,
-	smartypants: true,
-	highlight: function (code) {
-		return hljs.highlightAuto(code).value;
-	},
-});
-
 const scripts: any = {
 	js: jsCodeJson,
 	ts: tsCodeJson,

src/pages/DIYCode/index.css

@@ -0,0 +1,13 @@
+.diy-code {
+	margin-left: 180px;
+}
+
+pre code {
+	padding: 10px;
+	border: 1px solid #eee;
+	position: relative;
+	display: inline-block;
+	border-radius: 6px;
+	background-color: #dff1f0;
+	font-size: 14px;
+}

src/pages/DIYCode/index.tsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+import marked from "marked";
+
+import theTextFile from "./promise.md";
+
+import "./index.css";
+
+function DIYCode() {
+	const [postMarkdown, setPostMarkdown] = useState("");
+
+	useEffect(() => {
+		fetch(theTextFile)
+			.then((response) => response.text())
+			.then((text) => {
+				// Logs a string of Markdown content.
+				// Now you could use e.g. <rexxars/react-markdown> to render it.
+				// console.log(text);
+				setPostMarkdown(text);
+			});
+	}, []);
+
+	const content = {
+		__html: marked(postMarkdown),
+	};
+
+	return (
+		<div className="App diy-code">
+			<div className="box" dangerouslySetInnerHTML={content}></div>
+		</div>
+	);
+}
+
+export default DIYCode;

src/pages/DIYCode/promise.md

@@ -0,0 +1,40 @@
+# 手撕 Promise
+
+**前言**
+
+很多同学在学习 Promise 时，知其然却不知其所以然，对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。
+
+本系列文章由如下几个章节组成：
+
+- 图解 Promise 实现原理(一)—— 基础实现 (本篇)
+- 图解 Promise 实现原理(二)：Promise 链式调用
+- 图解 Promise 实现原理(三)：Promise 原型方法实现
+- 图解 Promise 实现原理(四)：Promise 静态方法实现
+- 本文适合对 Promise 的用法有所了解的人阅读，如果还不清楚，请自行查阅阮一峰老师的 《ES6 入门 之 Promise 对象》。
+
+Promise 规范有很多，如 Promise/A，Promise/B，Promise/D 以及 Promise/A 的升级版 Promise/A+，有兴趣的可以去了解下，最终 ES6 中采用了 Promise/A+ 规范。所以本文的 Promise 源码是按照 Promise/A+规范来编写的(不想看英文版的移步 Promise/A+规范中文翻译)。
+
+## 第一步
+
+想要写源码，我们其实根据其 API 倒退我们准备写的源码。毕竟我们现在是在逆向开发。所以看看我们用常用的 promise 用法。先看一下最常用的以下两种场景：
+
+```javascript
+//场景一：直接调用 -> 这就意味着在写源码的时候 Promise方法上本身绑定的就有 resolve 或者 reject的属性
+
+Promise.resolve(1000); // -> 成功的值
+Promise.reject("some error"); // -> 失败的值
+
+//场景二：实例化 -> 这就意味着原型方法上要有个 then的方法
+new Promise((resolve, reject) => {
+	// 这里来个异步的代码
+	settimeout(() => {
+		resolve(1000);
+	}, 1000);
+}).then((res) => {
+	console.log("接受的结果", res);
+});
+```
+
+## 第二步
+
+...

tsconfig.json

@@ -1,26 +1,21 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ]
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strictNullChecks": true,
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"noFallthroughCasesInSwitch": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx"
+	},
+	"include": ["src"]
 }