1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { makeStyles, TextField, Button } from '@material-ui/core';
import {
Benzin,
Header,
Window,
Markdown,
ContentSection,
} from './lib';
import icon from './assets/icon.svg';
interface RenderPropTypes {
index: number;
style: React.CSSProperties;
}
const useStyles = makeStyles(theme => ({
window: {
padding: theme.spacing(4),
},
promoButton: {
display: 'flex',
justifyContent: 'center',
marginTop: theme.spacing(4),
}
}));
const Icon = <img src={icon} width="32px" height="37px" alt="logo"/>
const headerContents = {
home: null,
'spacevim': null,
'material-ui': null,
'custom': null,
};
const pageMap: Record<string, string> = {
home: 'https://raw.githubusercontent.com/eug-vs/react-benzin/develop/README.md',
'spacevim': 'https://raw.githubusercontent.com/spacevim/spacevim/master/README.md',
'material-ui': 'https://raw.githubusercontent.com/mui-org/material-ui/master/README.md',
};
const CustomPage: React.FC = () => {
const [url, setUrl] = useState<string>('');
const inputEl = useRef<HTMLInputElement>(null);
const handleParseUrl = (): void => {
setUrl(inputEl.current?.value || '');
}
return (
<>
<ContentSection sectionName="Render custom markdown document" level={2} >
<p>
This should be a link to a valid markdown file. Response should give the file contents.
If you copy README file from GitHub, make sure you provide link to raw view.
</p>
<p>
<TextField
inputRef={inputEl}
variant="outlined" color="secondary" label="Markdown url"
/>
</p>
<Button variant="contained" color="secondary" onClick={handleParseUrl} >
Render!
</Button>
</ContentSection>
<Markdown url={url} />
</>
);
}
const App: React.FC = () => {
const classes = useStyles();
const [page, setPage] = useState<string>('home');
const handleGoCustom = (): void => {
setPage('custom');
}
const url = pageMap[page];
const fileName = url?.slice(url.lastIndexOf('/') + 1);
const metadata = [
`## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:`,
'Switch between tabs on the header to explore other markdown templates. :recycle: ',
'Currently **only core features** of markdown function.',
'Templates on the left are being loaded from the [GitHub](https://github.com), though this pane is generated from plaintext. :pen:',
'## How do I use this feature?',
'```',
'import Markdown from \'react-benzin\';',
'const data = \'# Header\\nHello, *world!*\';',
'ReactDOM.render(<Markdown data={data}/>, document.getElementById(\'root\'));',
'```',
].join('\n');
return (
<Benzin>
<Header
logo={{
icon: Icon,
title: 'BENZIN',
}}
contents={headerContents}
page={page}
setPage={setPage}
/>
<Window type="primary">
<div className={classes.window}>
{
(page === 'custom') ?
<CustomPage />
:
<Markdown url={url} />
}
</div>
</Window>
<Window type="secondary" name="Feature preview">
<div className={classes.window}>
<Markdown data={metadata} />
<p className={classes.promoButton}>
<Button
variant="contained"
color="primary"
size="large"
onClick={handleGoCustom}
>
Render custom document
</Button>
</p>
</div>
</Window>
</Benzin>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
|
