Skip to content

Commit 6b05caa

Browse files
author
k.golikov
committed
Add MarkdownCheatSheetPage
1 parent d5a6e9b commit 6b05caa

File tree

13 files changed

+663
-9
lines changed

13 files changed

+663
-9
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"react-router-dom": "^6.2.2",
4040
"react-scripts": "5.0.0",
4141
"react-split": "^2.0.14",
42+
"react-syntax-highlighter": "^15.5.0",
4243
"redux": "^4.1.2",
4344
"redux-thunk": "^2.4.1",
4445
"rooks": "^5.11.0",
@@ -92,6 +93,7 @@
9293
"@types/react-dom": "^18.0.2",
9394
"@types/react-redux": "^7.1.23",
9495
"@types/react-router-dom": "^5.3.3",
96+
"@types/react-syntax-highlighter": "^15.5.2",
9597
"@types/redux": "^3.6.0",
9698
"@types/uuid": "^8.3.4",
9799
"@typescript-eslint/eslint-plugin": "^5.15.0",

‎src/components/appSyntaxHighlighter/AppSyntaxHighlighter.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { FunctionComponent } from 'react';
2+
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
3+
import { SyntaxHighlighterProps } from 'react-syntax-highlighter';
4+
import useAppTheme from '../../hooks/useAppTheme';
5+
// @ts-ignore
6+
import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
7+
import PrismLanguage from './types/PrismLanguage';
8+
9+
interface Props extends Omit<SyntaxHighlighterProps, 'style'> {
10+
language?: PrismLanguage;
11+
children: string | string[];
12+
}
13+
14+
const AppSyntaxHighlighter: FunctionComponent<Props> = ({ children, ...props }) => {
15+
const { isDarkMode } = useAppTheme();
16+
17+
return (
18+
<SyntaxHighlighter {...props} style={isDarkMode ? oneDark : oneLight}>
19+
{children}
20+
</SyntaxHighlighter>
21+
);
22+
};
23+
24+
export default AppSyntaxHighlighter;

‎src/components/appSyntaxHighlighter/types/PrismLanguage.ts

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
type PrismLanguage =
2+
| 'abap'
3+
| 'abnf'
4+
| 'actionscript'
5+
| 'ada'
6+
| 'agda'
7+
| 'al'
8+
| 'antlr4'
9+
| 'apacheconf'
10+
| 'apex'
11+
| 'apl'
12+
| 'applescript'
13+
| 'aql'
14+
| 'arduino'
15+
| 'arff'
16+
| 'asciidoc'
17+
| 'asm6502'
18+
| 'asmatmel'
19+
| 'aspnet'
20+
| 'autohotkey'
21+
| 'autoit'
22+
| 'avisynth'
23+
| 'avro-idl'
24+
| 'bash'
25+
| 'basic'
26+
| 'batch'
27+
| 'bbcode'
28+
| 'bicep'
29+
| 'birb'
30+
| 'bison'
31+
| 'bnf'
32+
| 'brainfuck'
33+
| 'brightscript'
34+
| 'bro'
35+
| 'bsl'
36+
| 'c'
37+
| 'cfscript'
38+
| 'chaiscript'
39+
| 'cil'
40+
| 'clike'
41+
| 'clojure'
42+
| 'cmake'
43+
| 'cobol'
44+
| 'coffeescript'
45+
| 'concurnas'
46+
| 'coq'
47+
| 'cpp'
48+
| 'crystal'
49+
| 'csharp'
50+
| 'cshtml'
51+
| 'csp'
52+
| 'css-extras'
53+
| 'css'
54+
| 'csv'
55+
| 'cypher'
56+
| 'd'
57+
| 'dart'
58+
| 'dataweave'
59+
| 'dax'
60+
| 'dhall'
61+
| 'diff'
62+
| 'django'
63+
| 'dns-zone-file'
64+
| 'docker'
65+
| 'dot'
66+
| 'ebnf'
67+
| 'editorconfig'
68+
| 'eiffel'
69+
| 'ejs'
70+
| 'elixir'
71+
| 'elm'
72+
| 'erb'
73+
| 'erlang'
74+
| 'etlua'
75+
| 'excel-formula'
76+
| 'factor'
77+
| 'false'
78+
| 'firestore-security-rules'
79+
| 'flow'
80+
| 'fortran'
81+
| 'fsharp'
82+
| 'ftl'
83+
| 'gap'
84+
| 'gcode'
85+
| 'gdscript'
86+
| 'gedcom'
87+
| 'gherkin'
88+
| 'git'
89+
| 'glsl'
90+
| 'gml'
91+
| 'gn'
92+
| 'go-module'
93+
| 'go'
94+
| 'graphql'
95+
| 'groovy'
96+
| 'haml'
97+
| 'handlebars'
98+
| 'haskell'
99+
| 'haxe'
100+
| 'hcl'
101+
| 'hlsl'
102+
| 'hoon'
103+
| 'hpkp'
104+
| 'hsts'
105+
| 'http'
106+
| 'ichigojam'
107+
| 'icon'
108+
| 'icu-message-format'
109+
| 'idris'
110+
| 'iecst'
111+
| 'ignore'
112+
| 'inform7'
113+
| 'ini'
114+
| 'io'
115+
| 'j'
116+
| 'java'
117+
| 'javadoc'
118+
| 'javadoclike'
119+
| 'javascript'
120+
| 'javastacktrace'
121+
| 'jexl'
122+
| 'jolie'
123+
| 'jq'
124+
| 'js-extras'
125+
| 'js-templates'
126+
| 'jsdoc'
127+
| 'json'
128+
| 'json5'
129+
| 'jsonp'
130+
| 'jsstacktrace'
131+
| 'jsx'
132+
| 'julia'
133+
| 'keepalived'
134+
| 'keyman'
135+
| 'kotlin'
136+
| 'kumir'
137+
| 'kusto'
138+
| 'latex'
139+
| 'latte'
140+
| 'less'
141+
| 'lilypond'
142+
| 'liquid'
143+
| 'lisp'
144+
| 'livescript'
145+
| 'llvm'
146+
| 'log'
147+
| 'lolcode'
148+
| 'lua'
149+
| 'magma'
150+
| 'makefile'
151+
| 'markdown'
152+
| 'markup-templating'
153+
| 'markup'
154+
| 'matlab'
155+
| 'maxscript'
156+
| 'mel'
157+
| 'mermaid'
158+
| 'mizar'
159+
| 'mongodb'
160+
| 'monkey'
161+
| 'moonscript'
162+
| 'n1ql'
163+
| 'n4js'
164+
| 'nand2tetris-hdl'
165+
| 'naniscript'
166+
| 'nasm'
167+
| 'neon'
168+
| 'nevod'
169+
| 'nginx'
170+
| 'nim'
171+
| 'nix'
172+
| 'nsis'
173+
| 'objectivec'
174+
| 'ocaml'
175+
| 'opencl'
176+
| 'openqasm'
177+
| 'oz'
178+
| 'parigp'
179+
| 'parser'
180+
| 'pascal'
181+
| 'pascaligo'
182+
| 'pcaxis'
183+
| 'peoplecode'
184+
| 'perl'
185+
| 'php-extras'
186+
| 'php'
187+
| 'phpdoc'
188+
| 'plsql'
189+
| 'powerquery'
190+
| 'powershell'
191+
| 'processing'
192+
| 'prolog'
193+
| 'promql'
194+
| 'properties'
195+
| 'protobuf'
196+
| 'psl'
197+
| 'pug'
198+
| 'puppet'
199+
| 'pure'
200+
| 'purebasic'
201+
| 'purescript'
202+
| 'python'
203+
| 'q'
204+
| 'qml'
205+
| 'qore'
206+
| 'qsharp'
207+
| 'r'
208+
| 'racket'
209+
| 'reason'
210+
| 'regex'
211+
| 'rego'
212+
| 'renpy'
213+
| 'rest'
214+
| 'rip'
215+
| 'roboconf'
216+
| 'robotframework'
217+
| 'ruby'
218+
| 'rust'
219+
| 'sas'
220+
| 'sass'
221+
| 'scala'
222+
| 'scheme'
223+
| 'scss'
224+
| 'shell-session'
225+
| 'smali'
226+
| 'smalltalk'
227+
| 'smarty'
228+
| 'sml'
229+
| 'solidity'
230+
| 'solution-file'
231+
| 'soy'
232+
| 'sparql'
233+
| 'splunk-spl'
234+
| 'sqf'
235+
| 'sql'
236+
| 'squirrel'
237+
| 'stan'
238+
| 'stylus'
239+
| 'swift'
240+
| 'systemd'
241+
| 't4-cs'
242+
| 't4-templating'
243+
| 't4-vb'
244+
| 'tap'
245+
| 'tcl'
246+
| 'textile'
247+
| 'toml'
248+
| 'tremor'
249+
| 'tsx'
250+
| 'tt2'
251+
| 'turtle'
252+
| 'twig'
253+
| 'typescript'
254+
| 'typoscript'
255+
| 'unrealscript'
256+
| 'uorazor'
257+
| 'uri'
258+
| 'v'
259+
| 'vala'
260+
| 'vbnet'
261+
| 'velocity'
262+
| 'verilog'
263+
| 'vhdl'
264+
| 'vim'
265+
| 'visual-basic'
266+
| 'warpscript'
267+
| 'wasm'
268+
| 'web-idl'
269+
| 'wiki'
270+
| 'wolfram'
271+
| 'wren'
272+
| 'xeora'
273+
| 'xml-doc'
274+
| 'xojo'
275+
| 'xquery'
276+
| 'yaml'
277+
| 'yang'
278+
| 'zig';
279+
280+
export default PrismLanguage;

‎src/components/flex/Flex.tsx

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ interface BaseProps extends HTMLProps<HTMLDivElement> {
99
alignContent?: CSS['alignContent'];
1010
flex?: CSS['flex'];
1111
gap?: CSS['gap'];
12+
maxWidth?: CSS['maxWidth'];
13+
maxHeight?: CSS['maxHeight'];
1214
}
1315

1416
interface PropsWithDirection extends BaseProps {
@@ -38,7 +40,21 @@ type Props = PropsWithDirection | PropsWithRow | PropsWithColumn;
3840
// : BaseProps;
3941

4042
const Flex: FunctionComponent<Props> = (props) => {
41-
const { row, column, direction, justify, align, alignContent, flex, gap, style, children, ...restProps } = props;
43+
const {
44+
row,
45+
column,
46+
direction,
47+
justify,
48+
align,
49+
alignContent,
50+
flex,
51+
gap,
52+
style,
53+
maxWidth,
54+
maxHeight,
55+
children,
56+
...restProps
57+
} = props;
4258

4359
const divStyle: CSS = useMemo(() => {
4460
return defaults(
@@ -58,11 +74,13 @@ const Flex: FunctionComponent<Props> = (props) => {
5874
alignItems: align,
5975
alignContent,
6076
flex,
61-
gap
77+
gap,
78+
maxWidth,
79+
maxHeight
6280
},
6381
style
6482
);
65-
}, [row, column, direction, justify, align, alignContent, flex, gap, style]);
83+
}, [row, column, direction, justify, align, alignContent, flex, gap, style, maxWidth, maxHeight]);
6684

6785
return (
6886
<div {...restProps} style={divStyle}>

‎src/constants/router/menuItems.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,11 @@ const menuItems: MenuItem[] = [
110110
{
111111
title: 'Articles',
112112
icon: BookFilled,
113-
routes: []
113+
routes: [
114+
{
115+
route: routes.markdownCheatSheet
116+
}
117+
]
114118
},
115119
{
116120
title: 'Other',

0 commit comments

Comments
 (0)