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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
|
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,
'live preview': 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
fullWidth
inputRef={inputEl}
variant="outlined"
color="secondary"
label="Markdown url"
/>
</p>
<Button variant="contained" color="secondary" onClick={handleParseUrl} >
Render!
</Button>
</ContentSection>
<Markdown url={url} />
</>
);
}
interface LivePropTypes {
setLivePreviewData: (livePreviewData: string) => void;
}
const LivePreviewPage: React.FC<LivePropTypes> = ({ setLivePreviewData }) => {
const classes = useStyles();
const inputEl = useRef<HTMLInputElement>(null);
const handleRender = (): void => {
setLivePreviewData(inputEl.current?.value || '');
}
return (
<>
<ContentSection sectionName="Markdown live preview" level={2} >
<p>
Start typing and see your text rendered on the left window! We recommend starting with # Header.
</p>
<p>
<TextField
fullWidth
multiline
inputRef={inputEl}
variant="outlined"
color="primary"
label="Markdown"
onChange={handleRender}
/>
</p>
</ContentSection>
</>
)
}
const App: React.FC = () => {
const classes = useStyles();
const [page, setPage] = useState<string>('home');
const [livePreviewData, setLivePreviewData] = useState<string>('');
const handleGoLivePreview = (): void => {
setPage('live preview');
}
const url = pageMap[page];
const fileName = url?.slice(url.lastIndexOf('/') + 1);
const info = [
`## 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 />
:
(page === 'live preview') ?
<Markdown data={livePreviewData || '# Start typing in the right window!'} />
:
<Markdown url={url} />
}
</div>
</Window>
<Window type="secondary" name="Feature preview">
<div className={classes.window}>
{
(page === 'live preview') ?
<LivePreviewPage setLivePreviewData={setLivePreviewData} />
:
<>
<Markdown data={info} />
<p className={classes.promoButton}>
<Button
variant="contained"
color="primary"
size="large"
onClick={handleGoLivePreview}
>
Try it yourself!
</Button>
</p>
</>
}
</div>
</Window>
</Benzin>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
|
