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","Markdown","data","url","context","useState","markdown","setMarkdown","axios","get","then","response","useEffect","sanitized","line","baseUrl","replace","match","resolveUrls","slice","lastIndexOf","renderers","heading","code","link","Link","image","inlineCode","startsWith","symbol","source","plugins","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.697aa37d.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 data?: string;\n url?: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n context?: Record<string, 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\nconst Markdown: React.FC<PropTypes> = ({ data, url, context = {} }) => {\n const [markdown, setMarkdown] = useState<string>(data || '');\n\n if (url) axios.get(url).then(response => setMarkdown(response.data));\n\n useEffect(() => {\n if (!url) setMarkdown(data || '');\n }, [data, url]);\n\n const baseUrl = url?.slice(0, url.lastIndexOf('/')) || '';\n const sanitized = resolveUrls(markdown, baseUrl);\n\n const WrappedInlineCode: 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\n const renderers = {\n heading: Heading,\n code: CodeBlock,\n link: Link,\n image: Image,\n inlineCode: WrappedInlineCode,\n };\n\n return (\n <Typography>\n <ReactMarkdown\n source={sanitized}\n renderers={renderers}\n plugins={[emoji]}\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.013c8163.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 data={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":""}
|
