💫 workflow(add 'react-markdown'):

贺子良 · 贺子良 · commit 11b4466bc475 · 2022-03-06T21:40:43.000+08:00
diff --git a/.env.production b/.env.production
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,11 +6,14 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
+    "markdown-navbar": "^1.4.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-markdown": "^8.0.0",
     "react-router": "^6.2.1",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
+    "remark-gfm": "^3.0.1",
     "styled-components": "^5.3.3",
     "web-vitals": "^2.1.4"
   },
diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta
+            name="description"
+            content="Web site created using create-react-app"
+        />
+        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+        <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+        <!--<link rel=stylesheet
+        href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.css>
+        <link rel=stylesheet
+        href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/theme/nord.min.css>
+        <link rel=stylesheet
+        href=https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/github.min.css>-->
+        <link rel=stylesheet
+        href=https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css>
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +32,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+        <title>React App</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -38,6 +46,5 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+    --></body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -16,7 +16,7 @@ function App() {
                 <Route index element={<Home />} />
                 <Route path="projects" element={<Projects />}>
                     <Route index element={<ProjectsList />} />
-                    <Route path=":pid" element={<ProjectsDetail />} />
+                    <Route path=":id" element={<ProjectsDetail />} />
                 </Route>
                 <Route path="work" element={<Work />} />
 
diff --git a/src/assets/doc/m.md b/src/assets/doc/m.md
@@ -0,0 +1,18 @@
+
+
+
+* 贺子良/男/2019毕业
+  
+* 本科/中南林业科技大学
+  
+* 工作年限:3年
+
+* 技术栈:vue2 | vue3 | react
+
+* Github:https://github.com/coderzii
+
+* Tel:18616240038
+  
+* 期望职位:Web前端工程师 
+
+* 居住地区:上海市浦东新区
diff --git a/src/assets/doc/p1.md b/src/assets/doc/p1.md
@@ -0,0 +1,6 @@
+
+# 一级标题
+
+## 二级标题
+
+### 三级标题
diff --git a/src/assets/doc/p2.md b/src/assets/doc/p2.md
@@ -0,0 +1,3 @@
+
+
+# p02
diff --git a/src/assets/doc/p3.md b/src/assets/doc/p3.md
@@ -0,0 +1,3 @@
+
+
+# p03
diff --git a/src/assets/doc/w.md b/src/assets/doc/w.md
@@ -0,0 +1,73 @@
+# Project1
+
+`react-markdown` is a markdown component for React.
+
+👉 Changes are re-rendered as you type.
+
+👈 Try writing some markdown on the left.
+
+## Overview
+
+* Follows [CommonMark](https://commonmark.org)
+* Optionally follows [GitHub Flavored Markdown](https://github.github.com/gfm/)
+* Renders actual React elements instead of using `dangerouslySetInnerHTML`
+* Lets you define your own components (to render `MyHeading` instead of `h1`)
+* Has a lot of plugins
+
+## Table of contents
+
+Here is an example of a plugin in action
+([`remark-toc`](https://github.com/remarkjs/remark-toc)).
+This section is replaced by an actual table of contents.
+
+## Syntax highlighting
+
+Here is an example of a plugin to highlight code:
+[`rehype-highlight`](https://github.com/rehypejs/rehype-highlight).
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+import ReactMarkdown from 'react-markdown'
+import rehypeHighlight from 'rehype-highlight'
+
+ReactDOM.render(
+  <ReactMarkdown rehypePlugins={[rehypeHighlight]}>{'# Your markdown here'}</ReactMarkdown>,
+  document.querySelector('#content')
+)
+```
+
+Pretty neat, eh?
+
+## GitHub flavored markdown (GFM11111111111)
+
+For GFM, you can *also* use a plugin:
+[`remark-gfm`](https://github.com/remarkjs/react-markdown#use).
+It adds support for GitHub-specific extensions to the language:
+tables, strikethrough, tasklists, and literal URLs.
+
+These features **do not work by default**.
+👆 Use the toggle above to add the plugin.
+
+|    Feature | Support              |
+| ---------: | :------------------- |
+| CommonMark | 100%                 |
+|        GFM | 100% w/ `remark-gfm` |
+
+~~strikethrough~~
+
+* [ ] task list
+* [x] checked item
+
+https://example.com
+
+## HTML in markdown
+
+⚠️ HTML in markdown is quite unsafe, but if you want to support it, you can
+use [`rehype-raw`](https://github.com/rehypejs/rehype-raw).
+You should probably combine it with
+[`rehype-sanitize`](https://github.com/rehypejs/rehype-sanitize).
+
+<blockquote>
+  👆 Use the toggle above to add the plugin.
+</blockquote>
diff --git a/src/components/Markdown.jsx b/src/components/Markdown.jsx
@@ -0,0 +1,69 @@
+/*
+ * @Date: 2022-03-05
+ * @Description:
+ */
+import { useState, useEffect } from "react";
+import styled from "styled-components";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import MarkNav from "markdown-navbar";
+import "markdown-navbar/dist/navbar.css";
+
+import p1 from "../assets/doc/p1.md";
+import p2 from "../assets/doc/p2.md";
+import p3 from "../assets/doc/p3.md";
+import w from "../assets/doc/w.md";
+import m from "../assets/doc/m.md";
+
+export const MarkdownNavWrapper = styled.div`
+    position: fixed;
+    top: 118px;
+    left: 10px;
+
+    .title-anchor {
+        max-width: 220px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+`;
+
+const markdownMap = new Map();
+markdownMap.set("p1", p1);
+markdownMap.set("p2", p1);
+markdownMap.set("p3", p1);
+markdownMap.set("w", w);
+markdownMap.set("m", m);
+
+export function Markdown(props) {
+    const [md, setMd] = useState("");
+
+    const { id } = props;
+
+    const mdFile = markdownMap.get(`${id}`);
+
+    console.log("idid=>", id);
+
+    useEffect(() => {
+        //fetch("/doc/help.md");
+        fetch(mdFile)
+            .then((resp) => resp.text())
+            .then((txt) => {
+                setMd(txt);
+            });
+        console.log("useEffect=>", md);
+    }, [md]);
+    return (
+        <>
+            <MarkdownNavWrapper className="markdown-nav">
+                <MarkNav source={md} />
+            </MarkdownNavWrapper>
+            <ReactMarkdown
+                className="markdown-body"
+                children={md}
+                remarkPlugins={[remarkGfm]}
+            />
+        </>
+    );
+}
diff --git a/src/layout/styles.js b/src/layout/styles.js
@@ -225,5 +225,9 @@ export const LayoutWrapper = styled.div`
                 }
             }
         }
+
+        .markdown-body {
+            /*font-family: Andale Mono !important;*/
+        }
     }
 `;
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
@@ -4,6 +4,8 @@
  */
 import { HomeWrapper } from "./styles";
 
+import { Markdown } from "../../components/Markdown";
+
 export default function Home() {
     return (
         <HomeWrapper>
@@ -14,8 +16,8 @@ export default function Home() {
                     style={{ left: "-5px", width: "50px", height: "1px" }}
                 ></figure>
             </h1>
-            <div className="page-content markdown-body">
-                <p> Hey. I'm Ziliang He.</p>
+            <div className="page-content">
+                <Markdown id="m" />
             </div>
         </HomeWrapper>
     );
diff --git a/src/pages/home/styles.js b/src/pages/home/styles.js
@@ -24,16 +24,4 @@ export const HomeWrapper = styled.div`
         font-size: 12.8px;
         line-height: 1.5;
     }
-
-    .markdown-body {
-        .markdown-body {
-            color: #24292e;
-            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
-                Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-                Segoe UI Symbol;
-            font-size: 16px;
-            line-height: 1.5;
-            word-wrap: break-word;
-        }
-    }
 `;
diff --git a/src/pages/projects/detail/index.jsx b/src/pages/projects/detail/index.jsx
@@ -2,15 +2,17 @@
  * @Date: 2022-02-25
  * @Description:
  */
+import { useState, useEffect } from "react";
 import { useParams } from "react-router";
 import { ProjectsDetailWrapper } from "./styles";
+import { Markdown } from "../../../components/Markdown";
 
 export default function ProjectsDetai() {
     const params = useParams();
-    const { pid } = params;
+    const { id } = params;
     return (
         <ProjectsDetailWrapper>
-            <h3>pid : {pid}</h3>
+            <Markdown id={id} />
         </ProjectsDetailWrapper>
     );
 }
diff --git a/src/pages/projects/detail/styles.js b/src/pages/projects/detail/styles.js
@@ -2,9 +2,17 @@
  * @Date: 2022-02-25
  * @Description:
  */
-import styledComponents from "styled-components";
-
-export const ProjectsDetailWrapper = styledComponents.div`
+import styled from "styled-components";
 
+export const ProjectsDetailWrapper = styled.div`
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 
+    @media screen and (max-width: 768px) {
+        .markdown-nav {
+            display: none;
+        }
+    }
 `;
+
+
diff --git a/src/pages/projects/detail/test.md b/src/pages/projects/detail/test.md
diff --git a/src/pages/projects/list/index.jsx b/src/pages/projects/list/index.jsx
diff --git a/src/pages/work/index.jsx b/src/pages/work/index.jsx
