Loading...
;\n }\n return \n {({ className, style, tokens, getLineProps, getTokenProps }) => (\n \n {cleanTokens(tokens).map((line, i) => {\n let lineClass = {};\n\n let isDiff = false;\n\n if (line[0] && line[0].content.length && line[0].content[0] === '+') {\n lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' };\n isDiff = true;\n } else if (line[0] && line[0].content.length && line[0].content[0] === '-') {\n lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' };\n isDiff = true;\n } else if (line[0] && line[0].content === '' && line[1] && line[1].content === '+') {\n lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' };\n isDiff = true;\n } else if (line[0] && line[0].content === '' && line[1] && line[1].content === '-') {\n lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' };\n isDiff = true;\n }\n const lineProps = getLineProps({ line, key: i });\n\n lineProps.style = lineClass;\n const diffStyle = {\n userSelect: 'none',\n MozUserSelect: '-moz-none',\n WebkitUserSelect: 'none',\n };\n\n let splitToken;\n\n return (\n \n {line.map((token, key) => {\n if (isDiff) {\n if (\n (key === 0 || key === 1) &\n (token.content.charAt(0) === '+' || token.content.charAt(0) === '-')\n ) {\n if (token.content.length > 1) {\n splitToken = {\n types: ['template-string', 'string'],\n content: token.content.slice(1),\n };\n const firstChar = {\n types: ['operator'],\n content: token.content.charAt(0),\n };\n\n return (\n \n \n \n \n );\n } else {\n return ;\n }\n }\n }\n return ;\n })}\n
\n );\n })}\n \n )}\n \n );\n }\n};\n\nexport default CodeBlock;\n","import colorfn from 'color';\n\nexport const increaseIntensivity = (color, factor) => {\n const clr = colorfn(color);\n const intensified = clr.isDark() ? clr.darken(factor) : clr.lighten(factor);\n return intensified.hex();\n};\n\nexport const decreaseIntensivity = (color, factor) => {\n const clr = colorfn(color);\n const luminStd = 1 / clr.luminosity();\n const fc = luminStd > 6 ? factor * 6 : factor * luminStd;\n const intensified = clr.isDark() ? clr.lighten(fc) : clr.darken(fc);\n return intensified.hex();\n};\n\nexport const grayscaleCompatible = (color) => {\n return increaseIntensivity(colorfn(color).negate().grayscale().hex(), 0.7);\n};","import React from 'react';\nimport styled from '@emotion/styled';\nimport { useTheme } from 'emotion-theming';\nimport { Download } from 'react-feather';\nimport emoji from '../../utils/emoji';\nimport { decreaseIntensivity } from '../../utils/colors';\nimport Card from './card';\n\nconst DownloadCard = styled(Card)`\n cursor: pointer;\n flex-direction: row;\n align-items: center;\n &:hover {\n border: 1px solid ${(props) => props.theme.colors.primary};\n }\n`;\n\nconst DownloadPath = styled.div`\n color: ${(props) => decreaseIntensivity(props.theme.colors.fontLight, 0.25)};\n font-size: 9pt;\n padding-left: 16px;\n text-align: right;\n`;\n\nconst Title = styled.div`\n padding: 0 14px;\n color: ${(props) => props.theme.colors.primary};\n font-size: 12pt;\n font-weight: 500;\n flex: 1;\n`;\n\nexport default ({ title, url }) => {\n const theme = useTheme();\n const splitted = url.split('/')\n const filename = splitted[splitted.length - 1]\n return (\n