1
|
{"version":3,"sources":["lib/Benzin/Benzin.tsx","lib/Markdown/CodeBlock.tsx","lib/Markdown/InlineCode.tsx","lib/Markdown/Heading.tsx","lib/Markdown/Image.tsx","lib/Markdown/Markdown.tsx","demo/Header/Header.tsx","demo/Window/WindowSurface.tsx","demo/Window/Window.tsx","demo/content.md","assets/icon.svg","index.tsx"],"names":["benzinTheme","createMuiTheme","palette","type","primary","main","orange","secondary","purple","background","default","paper","elevation1","elevation2","elevation3","text","Benzin","children","ThemeProvider","theme","CssBaseline","useStyles","makeStyles","root","padding","spacing","overflowX","fontFamily","scrollbarColor","CodeBlock","value","classes","Paper","variant","className","borderRadius","InlineCode","Heading","level","adjustedLevel","Typography","Divider","Image","src","alt","style","maxWidth","maxHeight","WrappedInlineCode","context","startsWith","symbol","slice","Markdown","url","source","plugins","useState","markdown","setMarkdown","useEffect","axios","get","then","response","data","sanitized","line","baseUrl","replace","match","resolveUrls","lastIndexOf","renderers","heading","code","link","Link","image","inlineCode","emoji","allowDangerousHtml","color","paddingLeft","logo","margin","tab","flexDirection","fontSize","marginRight","marginBottom","Header","contents","page","setPage","AppBar","position","Toolbar","icon","title","Tabs","onChange","event","newPage","Object","keys","map","item","Tab","label","surface","display","overflowY","dark","light","WindowSurface","size","header","Window","name","height","bottom","width","left","right","window","promoButton","justifyContent","marginTop","Icon","headerContents","home","dotfiles","custom","pageMap","CustomPage","setUrl","inputEl","useRef","TextField","fullWidth","inputRef","Button","onClick","current","LivePreviewPage","setLivePreviewData","href","multiline","App","livePreviewData","fileName","primaryWindowContent","tryButton","content","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.9b2feb9e.chunk.js","sourcesContent":["import React from 'react';\nimport orange from '@material-ui/core/colors/orange';\nimport purple from '@material-ui/core/colors/purple';\nimport { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';\nimport { CssBaseline } from '@material-ui/core';\nimport 'typeface-roboto';\n\n\ndeclare module '@material-ui/core/styles/createPalette' {\n interface TypeBackground {\n elevation1: string;\n elevation2: string;\n elevation3: string;\n }\n}\n\n\nconst benzinTheme = createMuiTheme({\n palette: {\n type: 'dark',\n primary: {\n main: orange[400],\n },\n secondary: {\n main: purple[500],\n },\n background: {\n default: '#121212',\n paper: '#1e1e1e',\n elevation1: '#1e1e1e',\n elevation2: '#232323',\n elevation3: '#252525',\n },\n text: {\n primary: '#f4f4f4',\n secondary: 'rgba(255, 255, 255, 0.6)',\n },\n },\n});\n\n\nconst Benzin: React.FC = ({ children }) => (\n <ThemeProvider theme={benzinTheme}>\n <CssBaseline />\n {children}\n </ThemeProvider>\n);\n\n\nexport default Benzin;\n\n","import React from 'react';\nimport { Paper, makeStyles } from '@material-ui/core';\n\ninterface PropTypes {\n value: string;\n}\n\nconst useStyles = makeStyles(theme => ({\n root: {\n background: theme.palette.background.default,\n padding: theme.spacing(1),\n overflowX: 'auto',\n fontFamily: 'Monospace',\n scrollbarColor: 'auto',\n },\n}));\n\nconst CodeBlock: React.FC<PropTypes> = ({ value }) => {\n const classes = useStyles();\n return (\n <Paper variant=\"outlined\" className={classes.root}>\n <pre>\n {value}\n </pre>\n </Paper>\n );\n};\n\nexport default CodeBlock;\n\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n background: theme.palette.background.default,\n borderRadius: theme.spacing(0.5),\n padding: theme.spacing(0.5),\n fontFamily: 'Monospace',\n },\n}));\n\nconst InlineCode: React.FC = ({ children }) => {\n const classes = useStyles();\n return <span className={classes.root}>{children}</span>;\n};\n\nexport default InlineCode;\n","import React from 'react';\nimport { Typography, Divider, makeStyles } from '@material-ui/core';\n\ninterface PropTypes {\n level: number;\n}\n\ntype Variant = 'h3' | 'h4' | 'h5' | 'h6';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(2, 0, 1, 0),\n },\n}));\n\nconst Heading: React.FC<PropTypes> = ({ children, level }) => {\n const classes = useStyles();\n\n let adjustedLevel = level + 2; // Make everything smaller\n if (adjustedLevel > 6) adjustedLevel = 6;\n\n const variant: Variant = `h${adjustedLevel}` as Variant;\n\n return (\n <div className={classes.root}>\n <Typography variant={variant}>{children}</Typography>\n <Divider variant=\"middle\" />\n </div>\n );\n};\n\nexport default Heading;\n\n","import React from 'react';\n\ninterface PropTypes {\n src: string;\n alt: string;\n}\n\nconst Image: React.FC<PropTypes> = ({ src, alt }) => {\n return <img src={src} alt={alt} style={{ maxWidth: '100%', maxHeight: '100%' }} />;\n};\n\nexport default Image;\n","import React, { useState, useEffect } from 'react';\nimport { Link, Typography } from '@material-ui/core';\nimport axios from 'axios';\nimport ReactMarkdown from 'react-markdown';\nimport emoji from 'remark-gemoji';\n\nimport CodeBlock from './CodeBlock';\nimport InlineCode from './InlineCode';\nimport Heading from './Heading';\nimport Image from './Image';\n\ninterface PropTypes {\n source?: string;\n url?: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n context?: Record<string, any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plugins?: any[]\n}\n\nconst resolveUrls = (line: string, baseUrl: string): string => line.replace(\n /src=\"(?!http)(.*)\"[\\s>]/,\n (match, url) => `src=\"${baseUrl}/${url}?sanitize=true\"`,\n).replace(\n /\\[(.*\\]?.*)\\]\\((?!http)(.+?)\\)/g,\n (match, text, url) => `[${text}](${baseUrl}/${url})`,\n);\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst WrappedInlineCode = (context: Record<string, any>): React.FC => ({ children }) => {\n if (typeof children === 'string' && children?.startsWith('$')) {\n const symbol = children.slice(1);\n return context[symbol] || null;\n }\n return <InlineCode>{children}</InlineCode>;\n};\n\nconst Markdown: React.FC<PropTypes> = ({\n children,\n url,\n source,\n context = {},\n plugins = [],\n}) => {\n const [markdown, setMarkdown] = useState<string>(source || '');\n\n useEffect(() => {\n if (url) axios.get(url).then(response => setMarkdown(response.data));\n }, [url]);\n\n useEffect(() => {\n if (source) setMarkdown(source);\n }, [source]);\n\n useEffect(() => {\n if (children && typeof children === 'string') setMarkdown(children);\n }, [children]);\n\n const baseUrl = url?.slice(0, url.lastIndexOf('/')) || '';\n const sanitized = resolveUrls(markdown, baseUrl);\n\n const renderers = {\n heading: Heading,\n code: CodeBlock,\n link: Link,\n image: Image,\n inlineCode: WrappedInlineCode(context),\n };\n\n return (\n <Typography>\n <ReactMarkdown\n source={sanitized}\n renderers={renderers}\n plugins={[emoji, ...plugins]}\n allowDangerousHtml\n />\n </Typography>\n );\n};\n\n\nexport default Markdown;\n\n","import React from 'react';\n\nimport {\n AppBar,\n Tabs,\n Tab,\n Typography,\n Toolbar,\n} from '@material-ui/core';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\n\ninterface PropTypes {\n logo: {\n icon: React.ReactNode;\n title: string;\n };\n contents: {\n [key: string]: React.ReactNode | null;\n };\n page: string;\n setPage: (newPage: string) => void;\n}\n\nconst useStyles = makeStyles(theme => ({\n root: {\n background: theme.palette.background.elevation2,\n color: theme.palette.text.primary,\n paddingLeft: theme.spacing(3),\n },\n logo: {\n margin: theme.spacing(0, 3, 0, 1),\n },\n tab: {\n '& .MuiTab-wrapper': {\n padding: theme.spacing(2),\n flexDirection: 'row',\n fontSize: '0.8125rem',\n '& svg': {\n marginRight: theme.spacing(1),\n marginBottom: '0 !important',\n },\n },\n },\n}));\n\n\nconst Header: React.FC<PropTypes> = ({\n logo, contents, page, setPage,\n}) => {\n const classes = useStyles();\n\n const handleChange = (event: React.ChangeEvent<unknown>, newPage: string): void => {\n setPage(newPage);\n };\n\n return (\n <AppBar position=\"sticky\" className={classes.root}>\n <Toolbar>\n {logo.icon}\n <Typography variant=\"h5\" className={classes.logo} color=\"primary\">\n {logo.title}\n </Typography>\n <Tabs onChange={handleChange} value={page}>\n {contents && Object.keys(contents).map((item: string) => (\n <Tab\n label={item}\n icon={contents[item] as JSX.Element}\n value={item}\n className={classes.tab}\n key={item}\n />\n ))}\n </Tabs>\n </Toolbar>\n </AppBar>\n );\n};\n\nexport default Header;\n","import React from 'react';\n\nimport { Paper, makeStyles } from '@material-ui/core';\n\nimport { SurfaceSize, SurfacePosition } from './types';\n\n\ninterface PropTypes {\n size: SurfaceSize;\n position: SurfacePosition;\n}\n\n\nconst useStyles = makeStyles(theme => ({\n surface: {\n position: 'absolute',\n display: 'flex',\n flexDirection: 'column',\n overflowY: 'auto',\n scrollbarColor: `${theme.palette.secondary.dark} ${theme.palette.secondary.light}`,\n\n '& a.MuiTypography-root': {\n color: theme.palette.primary.light,\n },\n },\n}));\n\n\nconst WindowSurface: React.FC<PropTypes> = ({ size, position, children }) => {\n const classes = useStyles();\n\n return (\n <Paper\n variant=\"outlined\"\n style={{ ...size, ...position }}\n className={classes.surface}\n >\n {children}\n </Paper>\n );\n};\n\n\nexport default WindowSurface;\n","import React from 'react';\n\nimport { Typography, Divider, makeStyles } from '@material-ui/core';\n\nimport WindowSurface from './WindowSurface';\nimport { SurfaceSize, SurfacePosition } from './types';\n\n\ninterface PropTypes {\n type: 'primary' | 'secondary' | 'mono';\n name?: string;\n}\n\n\nconst useStyles = makeStyles(theme => ({\n header: {\n padding: theme.spacing(1, 0, 1, 2),\n background: theme.palette.background.elevation2,\n },\n}));\n\n\nconst Window: React.FC<PropTypes> = ({ type, name, children }) => {\n const classes = useStyles();\n\n const size: SurfaceSize = {\n height: '85vh',\n };\n\n const position: SurfacePosition = {\n bottom: '3vh',\n };\n\n if (type === 'primary') {\n size.width = '63vw';\n position.left = '2vw';\n } else if (type === 'secondary') {\n size.width = '31vw';\n position.right = '2vw';\n } else if (type === 'mono') {\n position.left = '2vw';\n position.right = '2vw';\n }\n\n return (\n <WindowSurface\n size={size}\n position={position}\n >\n {name\n && (\n <div>\n <Typography variant=\"h5\" className={classes.header}>{name}</Typography>\n <Divider />\n </div>\n )}\n {children}\n </WindowSurface>\n );\n};\n\nexport default Window;\n","export default __webpack_public_path__ + \"static/media/content.b312f0cd.md\";","export default __webpack_public_path__ + \"static/media/icon.50d2b01a.svg\";","import React, { useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n makeStyles,\n TextField,\n Button,\n Link,\n} from '@material-ui/core';\nimport {\n Benzin,\n Markdown,\n Heading,\n} from './lib';\n\nimport Header from './demo/Header/Header';\nimport Window from './demo/Window/Window';\nimport content from './demo/content.md';\nimport icon from './assets/icon.svg';\n\nconst useStyles = makeStyles(theme => ({\n window: {\n padding: theme.spacing(4),\n },\n promoButton: {\n display: 'flex',\n justifyContent: 'center',\n marginTop: theme.spacing(4),\n },\n}));\n\n\nconst Icon = <img src={icon} width=\"32px\" height=\"37px\" alt=\"logo\" />;\n\nconst headerContents = {\n home: null,\n dotfiles: null,\n 'material-ui': null,\n custom: null,\n 'live preview': null,\n};\n\nconst pageMap: Record<string, string> = {\n home: 'https://raw.githubusercontent.com/eug-vs/react-benzin/develop/README.md',\n 'material-ui': 'https://raw.githubusercontent.com/mui-org/material-ui/master/README.md',\n dotfiles: 'https://raw.githubusercontent.com/eug-vs/dotfiles/master/.github/README.md',\n};\n\n\nconst CustomPage: React.FC = () => {\n const [url, setUrl] = useState<string>('');\n const inputEl = useRef<HTMLInputElement>(null);\n\n const handleParseUrl = (): void => {\n setUrl(inputEl.current?.value || '');\n };\n\n return (\n <>\n <Heading level={2}>Render custom markdown document</Heading>\n <p>\n This should be a link to a valid markdown file. Response should give the file contents.\n If you copy README file from GitHub, make sure you provide link to raw view.\n </p>\n <p>\n <TextField\n fullWidth\n inputRef={inputEl}\n variant=\"outlined\"\n color=\"secondary\"\n label=\"Markdown url\"\n />\n </p>\n <Button variant=\"contained\" color=\"secondary\" onClick={handleParseUrl}>\n Render!\n </Button>\n <Markdown url={url} />\n </>\n );\n};\n\ninterface LivePropTypes {\n setLivePreviewData: (livePreviewData: string) => void;\n}\n\nconst LivePreviewPage: React.FC<LivePropTypes> = ({ setLivePreviewData }) => {\n const inputEl = useRef<HTMLInputElement>(null);\n\n const handleRender = (): void => {\n setLivePreviewData(inputEl.current?.value || '');\n };\n\n return (\n <>\n <Heading level={2}>Markdown live preview</Heading>\n <p>\n Start typing and see your text rendered on the left window!\n You can find the list of all Markdown features\n {' '}\n <Link href=\"https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet\">\n here\n </Link>\n . (some of them are yet in progress).\n We recommend starting with # Header.\n </p>\n <p>\n <TextField\n fullWidth\n multiline\n inputRef={inputEl}\n variant=\"outlined\"\n color=\"primary\"\n label=\"Markdown\"\n onChange={handleRender}\n />\n </p>\n </>\n );\n};\n\n\nconst App: React.FC = () => {\n const classes = useStyles();\n const [page, setPage] = useState<string>('home');\n const [livePreviewData, setLivePreviewData] = useState<string>('');\n\n const handleGoLivePreview = (): void => {\n setPage('live preview');\n };\n\n const url = pageMap[page];\n const fileName = url?.slice(url.lastIndexOf('/') + 1);\n\n let primaryWindowContent = <Markdown url={url} />;\n if (page === 'custom') primaryWindowContent = <CustomPage />;\n else if (page === 'live preview') {\n primaryWindowContent = <Markdown source={livePreviewData || '# Start typing in the right window!'} />;\n }\n\n const tryButton = (\n <p className={classes.promoButton}>\n <Button\n variant=\"contained\"\n color=\"primary\"\n size=\"large\"\n onClick={handleGoLivePreview}\n >\n Try it yourself!\n </Button>\n </p>\n );\n\n return (\n <Benzin>\n <Header\n logo={{\n icon: Icon,\n title: 'BENZIN',\n }}\n contents={headerContents}\n page={page}\n setPage={setPage}\n />\n <Window type=\"primary\">\n <div className={classes.window}>{primaryWindowContent}</div>\n </Window>\n <Window type=\"secondary\" name=\"Feature preview\">\n <div className={classes.window}>\n {\n (page === 'live preview')\n ? <LivePreviewPage setLivePreviewData={setLivePreviewData} />\n : <Markdown url={content} context={{ tryButton, fileName }} />\n }\n </div>\n </Window>\n </Benzin>\n );\n};\n\n\nReactDOM.render(<App />, document.getElementById('root'));\n\n"],"sourceRoot":""}
|
