Skip to content

Commit 11b4466

Browse files
author
贺子良
committed
💫 workflow(add 'react-markdown'):
1 parent 00c9a14 commit 11b4466

File tree

19 files changed

+2001
-50
lines changed

19 files changed

+2001
-50
lines changed

‎.env.production

Whitespace-only changes.

‎package-lock.json

Lines changed: 1646 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,14 @@
66
"@testing-library/jest-dom": "^5.16.2",
77
"@testing-library/react": "^12.1.3",
88
"@testing-library/user-event": "^13.5.0",
9+
"markdown-navbar": "^1.4.3",
910
"react": "^17.0.2",
1011
"react-dom": "^17.0.2",
12+
"react-markdown": "^8.0.0",
1113
"react-router": "^6.2.1",
1214
"react-router-dom": "^6.2.1",
1315
"react-scripts": "5.0.0",
16+
"remark-gfm": "^3.0.1",
1417
"styled-components": "^5.3.3",
1518
"web-vitals": "^2.1.4"
1619
},

‎public/index.html

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
1414
manifest.json provides metadata used when your web app is installed on a
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1616
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
17+
<!--<link rel=stylesheet
18+
href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.css>
19+
<link rel=stylesheet
20+
href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/theme/nord.min.css>
21+
<link rel=stylesheet
22+
href=https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/github.min.css>-->
23+
<link rel=stylesheet
24+
href=https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css>
25+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
26+
<!--
1927
Notice the use of %PUBLIC_URL% in the tags above.
2028
It will be replaced with the URL of the `public` folder during the build.
2129
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +32,12 @@
2432
work correctly both with client-side routing and a non-root public URL.
2533
Learn how to configure a non-root public URL by running `npm run build`.
2634
-->
27-
<title>React App</title>
28-
</head>
29-
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
31-
<div id="root"></div>
32-
<!--
35+
<title>React App</title>
36+
</head>
37+
<body>
38+
<noscript>You need to enable JavaScript to run this app.</noscript>
39+
<div id="root"></div>
40+
<!--
3341
This HTML file is a template.
3442
If you open it directly in the browser, you will see an empty page.
3543
@@ -38,6 +46,5 @@
3846
3947
To begin the development, run `npm start` or `yarn start`.
4048
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
42-
</body>
49+
--></body>
4350
</html>

‎src/App.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function App() {
1616
<Route index element={<Home />} />
1717
<Route path="projects" element={<Projects />}>
1818
<Route index element={<ProjectsList />} />
19-
<Route path=":pid" element={<ProjectsDetail />} />
19+
<Route path=":id" element={<ProjectsDetail />} />
2020
</Route>
2121
<Route path="work" element={<Work />} />
2222

‎src/assets/doc/m.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
3+
4+
* 贺子良/男/2019毕业
5+
6+
* 本科/中南林业科技大学
7+
8+
* 工作年限:3年
9+
10+
* 技术栈:vue2 | vue3 | react
11+
12+
* Github:https://github.com/coderzii
13+
14+
* Tel:18616240038
15+
16+
* 期望职位:Web前端工程师
17+
18+
* 居住地区:上海市浦东新区

‎src/assets/doc/p1.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
# 一级标题
3+
4+
## 二级标题
5+
6+
### 三级标题

‎src/assets/doc/p2.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
3+
# p02

‎src/assets/doc/p3.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
3+
# p03

‎src/assets/doc/w.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
# Project1
2+
3+
`react-markdown` is a markdown component for React.
4+
5+
👉 Changes are re-rendered as you type.
6+
7+
👈 Try writing some markdown on the left.
8+
9+
## Overview
10+
11+
* Follows [CommonMark](https://commonmark.org)
12+
* Optionally follows [GitHub Flavored Markdown](https://github.github.com/gfm/)
13+
* Renders actual React elements instead of using `dangerouslySetInnerHTML`
14+
* Lets you define your own components (to render `MyHeading` instead of `h1`)
15+
* Has a lot of plugins
16+
17+
## Table of contents
18+
19+
Here is an example of a plugin in action
20+
([`remark-toc`](https://github.com/remarkjs/remark-toc)).
21+
This section is replaced by an actual table of contents.
22+
23+
## Syntax highlighting
24+
25+
Here is an example of a plugin to highlight code:
26+
[`rehype-highlight`](https://github.com/rehypejs/rehype-highlight).
27+
28+
```js
29+
import React from 'react'
30+
import ReactDOM from 'react-dom'
31+
import ReactMarkdown from 'react-markdown'
32+
import rehypeHighlight from 'rehype-highlight'
33+
34+
ReactDOM.render(
35+
<ReactMarkdown rehypePlugins={[rehypeHighlight]}>{'# Your markdown here'}</ReactMarkdown>,
36+
document.querySelector('#content')
37+
)
38+
```
39+
40+
Pretty neat, eh?
41+
42+
## GitHub flavored markdown (GFM11111111111)
43+
44+
For GFM, you can *also* use a plugin:
45+
[`remark-gfm`](https://github.com/remarkjs/react-markdown#use).
46+
It adds support for GitHub-specific extensions to the language:
47+
tables, strikethrough, tasklists, and literal URLs.
48+
49+
These features **do not work by default**.
50+
👆 Use the toggle above to add the plugin.
51+
52+
| Feature | Support |
53+
| ---------: | :------------------- |
54+
| CommonMark | 100% |
55+
| GFM | 100% w/ `remark-gfm` |
56+
57+
~~strikethrough~~
58+
59+
* [ ] task list
60+
* [x] checked item
61+
62+
https://example.com
63+
64+
## HTML in markdown
65+
66+
⚠️ HTML in markdown is quite unsafe, but if you want to support it, you can
67+
use [`rehype-raw`](https://github.com/rehypejs/rehype-raw).
68+
You should probably combine it with
69+
[`rehype-sanitize`](https://github.com/rehypejs/rehype-sanitize).
70+
71+
<blockquote>
72+
👆 Use the toggle above to add the plugin.
73+
</blockquote>

‎src/components/Markdown.jsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
* @Date: 2022-03-05
3+
* @Description:
4+
*/
5+
import { useState, useEffect } from "react";
6+
import styled from "styled-components";
7+
8+
import ReactMarkdown from "react-markdown";
9+
import remarkGfm from "remark-gfm";
10+
import MarkNav from "markdown-navbar";
11+
import "markdown-navbar/dist/navbar.css";
12+
13+
import p1 from "../assets/doc/p1.md";
14+
import p2 from "../assets/doc/p2.md";
15+
import p3 from "../assets/doc/p3.md";
16+
import w from "../assets/doc/w.md";
17+
import m from "../assets/doc/m.md";
18+
19+
export const MarkdownNavWrapper = styled.div`
20+
position: fixed;
21+
top: 118px;
22+
left: 10px;
23+
24+
.title-anchor {
25+
max-width: 220px;
26+
text-overflow: ellipsis;
27+
overflow: hidden;
28+
white-space: nowrap;
29+
}
30+
`;
31+
32+
const markdownMap = new Map();
33+
markdownMap.set("p1", p1);
34+
markdownMap.set("p2", p1);
35+
markdownMap.set("p3", p1);
36+
markdownMap.set("w", w);
37+
markdownMap.set("m", m);
38+
39+
export function Markdown(props) {
40+
const [md, setMd] = useState("");
41+
42+
const { id } = props;
43+
44+
const mdFile = markdownMap.get(`${id}`);
45+
46+
console.log("idid=>", id);
47+
48+
useEffect(() => {
49+
//fetch("/doc/help.md");
50+
fetch(mdFile)
51+
.then((resp) => resp.text())
52+
.then((txt) => {
53+
setMd(txt);
54+
});
55+
console.log("useEffect=>", md);
56+
}, [md]);
57+
return (
58+
<>
59+
<MarkdownNavWrapper className="markdown-nav">
60+
<MarkNav source={md} />
61+
</MarkdownNavWrapper>
62+
<ReactMarkdown
63+
className="markdown-body"
64+
children={md}
65+
remarkPlugins={[remarkGfm]}
66+
/>
67+
</>
68+
);
69+
}

‎src/layout/styles.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,5 +225,9 @@ export const LayoutWrapper = styled.div`
225225
}
226226
}
227227
}
228+
229+
.markdown-body {
230+
/*font-family: Andale Mono !important;*/
231+
}
228232
}
229233
`;

‎src/pages/home/index.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
*/
55
import { HomeWrapper } from "./styles";
66

7+
import { Markdown } from "../../components/Markdown";
8+
79
export default function Home() {
810
return (
911
<HomeWrapper>
@@ -14,8 +16,8 @@ export default function Home() {
1416
style={{ left: "-5px", width: "50px", height: "1px" }}
1517
></figure>
1618
</h1>
17-
<div className="page-content markdown-body">
18-
<p> Hey. I'm Ziliang He.</p>
19+
<div className="page-content">
20+
<Markdown id="m" />
1921
</div>
2022
</HomeWrapper>
2123
);

‎src/pages/home/styles.js

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,4 @@ export const HomeWrapper = styled.div`
2424
font-size: 12.8px;
2525
line-height: 1.5;
2626
}
27-
28-
.markdown-body {
29-
.markdown-body {
30-
color: #24292e;
31-
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
32-
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
33-
Segoe UI Symbol;
34-
font-size: 16px;
35-
line-height: 1.5;
36-
word-wrap: break-word;
37-
}
38-
}
3927
`;

‎src/pages/projects/detail/index.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@
22
* @Date: 2022-02-25
33
* @Description:
44
*/
5+
import { useState, useEffect } from "react";
56
import { useParams } from "react-router";
67
import { ProjectsDetailWrapper } from "./styles";
8+
import { Markdown } from "../../../components/Markdown";
79

810
export default function ProjectsDetai() {
911
const params = useParams();
10-
const { pid } = params;
12+
const { id } = params;
1113
return (
1214
<ProjectsDetailWrapper>
13-
<h3>pid : {pid}</h3>
15+
<Markdown id={id} />
1416
</ProjectsDetailWrapper>
1517
);
1618
}

‎src/pages/projects/detail/styles.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,17 @@
22
* @Date: 2022-02-25
33
* @Description:
44
*/
5-
import styledComponents from "styled-components";
6-
7-
export const ProjectsDetailWrapper = styledComponents.div`
5+
import styled from "styled-components";
86

7+
export const ProjectsDetailWrapper = styled.div`
8+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
9+
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
910
11+
@media screen and (max-width: 768px) {
12+
.markdown-nav {
13+
display: none;
14+
}
15+
}
1016
`;
17+
18+

0 commit comments

Comments
 (0)