{children}
14 |
15 |
16 |
17 |
28 |
47 |
62 | )
63 | }
64 | }
65 |
66 | export default Popout
67 |
--------------------------------------------------------------------------------
/cypress/integration/basic.js:
--------------------------------------------------------------------------------
1 | /* global cy */
2 | import { editorVisible } from '../support'
3 | describe('Basic', () => {
4 | it('Should open editor with the correct text encoding', () => {
5 | cy.visit(
6 | '/?code=%250A%252F*%2520Passing%2520Boolean%2520as%2520method%2520to%2520find%2520returns%2520the%250A%2520*%2520first%2520truthy%2520value%2520in%2520the%2520array!%250A%2520*%252F%250A%255Bfalse%252C%2520false%252C%2520%27%27%252C%2520undefined%252C%2520%27qwijo%27%252C%25200%255D.find(Boolean)%2520%252F%252F%2520%27qwijo%27'
7 | )
8 | editorVisible()
9 |
10 | cy.contains(
11 | '.container',
12 | "/* Passing Boolean as method to find returns the * first truthy value in the array! */[false, false, '', undefined, 'qwijo', 0].find(Boolean) // 'qwijo'"
13 | )
14 | })
15 |
16 | it('Should open editor with the correct text even with bad URI component', () => {
17 | cy.visit('/?code=%25')
18 | editorVisible()
19 |
20 | cy.contains('.container', '%')
21 | })
22 |
23 | it("Should contain id's for CLI integrations to use", () => {
24 | cy.get('#export-container').should('have.length', 1)
25 | cy.get('.export-container').should('have.length', 1)
26 | cy.get('#export-menu').should('have.length', 1)
27 | cy.get('#export-menu').click()
28 | cy.get('#export-png').should('have.length', 1)
29 | cy.get('#export-svg').should('have.length', 1)
30 | })
31 |
32 | /*
33 | * This test should only be run locally since it actually downloads a file
34 | * for verification.
35 | */
36 | it.skip('Should download a PNGs and SVGs', () => {
37 | cy.visit('/')
38 | editorVisible()
39 |
40 | cy.contains('span[type="button"]', 'Save Image').click()
41 | cy.get('#downshift-2-item-0').click()
42 |
43 | cy.wait(1000)
44 |
45 | cy.contains('span[type="button"]', 'Save Image').click()
46 | cy.get('#downshift-2-item-1').click()
47 |
48 | cy.wait(1000)
49 | })
50 | })
51 |
--------------------------------------------------------------------------------
/cypress/integration/background-color-spec.js:
--------------------------------------------------------------------------------
1 | /* global cy */
2 | import { editorVisible } from '../support'
3 |
4 | // usually we can visit the page before each test
5 | // but these tests use the url, which means wasted page load
6 | // so instead visit the desired url in each test
7 |
8 | describe('background color', () => {
9 | const bgColor = '.bg-color-container .bg-color'
10 | const picker = '#bg-select-pickers'
11 |
12 | const openPicker = () => {
13 | cy.get(bgColor).click()
14 | return cy.get(picker).should('be.visible')
15 | }
16 |
17 | // clicking anywhere else closes it
18 | const closePicker = () => cy.get('body').click()
19 |
20 | it('opens BG color pick', () => {
21 | cy.visit('/')
22 | openPicker()
23 | closePicker()
24 | cy.get(picker).should('not.be.visible')
25 | })
26 |
27 | it('changes background color to dark red', () => {
28 | cy.visit('/')
29 | const darkRed = '#D0021B'
30 | const darkRedTile = `[title="${darkRed}"]`
31 | openPicker()
32 | cy.get(picker)
33 | .find(darkRedTile)
34 | .click()
35 | closePicker()
36 |
37 | // changing background color triggers url change
38 | cy.url().should('contain', '?bg=')
39 |
40 | // confirm color change
41 | cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(208, 2, 27)')
42 | })
43 |
44 | it('specifies color in url', () => {
45 | cy.visit('?bg=rgb(255,0,0)')
46 | editorVisible()
47 | cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(255, 0, 0)')
48 | })
49 |
50 | it('enters neon pink', () => {
51 | cy.visit('?bg=rgb(255,0,0)')
52 | editorVisible()
53 |
54 | const pink = 'ff00ff'
55 | openPicker()
56 | .find(`input[value="FF0000"]`)
57 | .clear()
58 | .type(`${pink}{enter}`)
59 | closePicker()
60 |
61 | cy.url().should('contain', `?bg=rgba(${encodeURIComponent('255,0,255,1')}`)
62 | cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(255, 0, 255)')
63 | })
64 | })
65 |
--------------------------------------------------------------------------------
/components/ThemeSelect.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { None, BW, Sharp } from './svg/WindowThemes'
3 | import { COLORS } from '../lib/constants'
4 |
5 | const WINDOW_THEMES_MAP = { none: None, sharp: Sharp, bw: BW }
6 | export const WINDOW_THEMES = Object.keys(WINDOW_THEMES_MAP)
7 |
8 | class ThemeSelect extends React.Component {
9 | select = theme => {
10 | if (this.props.selected !== theme) {
11 | this.props.onChange(theme)
12 | }
13 | }
14 |
15 | renderThemes() {
16 | return WINDOW_THEMES.map(theme => {
17 | const Img = WINDOW_THEMES_MAP[theme]
18 | return (
19 |
26 | ![]()
27 |
44 |
45 | )
46 | })
47 | }
48 |
49 | render() {
50 | return (
51 |
52 | Theme
53 |
73 | )
74 | }
75 | }
76 |
77 | export default ThemeSelect
78 |
--------------------------------------------------------------------------------
/components/Slider.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { COLORS } from '../lib/constants'
4 |
5 | class Slider extends React.Component {
6 | static defaultProps = {
7 | onMouseDown: () => {},
8 | onMouseUp: () => {}
9 | }
10 |
11 | handleChange = e => {
12 | this.props.onChange(`${e.target.value}${this.props.usePercentage ? '%' : 'px'}`)
13 | }
14 |
15 | render() {
16 | const minValue = this.props.minValue || 0
17 | const maxValue = this.props.maxValue || 100
18 | const step = 'step' in this.props ? this.props.step : 1
19 |
20 | return (
21 | {this.renderThemes()}
54 |
72 |
22 |
30 | {this.props.label}
31 |
41 |
80 |
81 | )
82 | }
83 | }
84 |
85 | export default Slider
86 |
--------------------------------------------------------------------------------
/components/WindowControls.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useCopyTextHandler } from '@dawnlabs/tacklebox'
3 |
4 | import { COLORS } from '../lib/constants'
5 | import { Controls, ControlsBW } from './svg/Controls'
6 | import CopySVG from './svg/Copy'
7 | import CheckMark from './svg/Checkmark'
8 |
9 | const size = 24
10 |
11 | const CopyButton = React.memo(function CopyButton({ text }) {
12 | const { onClick, copied } = useCopyTextHandler(text)
13 |
14 | return (
15 |
36 | )
37 | })
38 |
39 | export default ({ theme, copyable, code }) => (
40 |
41 | {theme === 'bw' ?
88 | )
89 |
--------------------------------------------------------------------------------
/lib/util.js:
--------------------------------------------------------------------------------
1 | import morph from 'morphmorph'
2 | import omitBy from 'lodash.omitby'
3 | import { unescape } from 'escape-goat'
4 |
5 | const SETTINGS_KEY = 'CARBON_STATE'
6 | const PRESETS_KEY = 'CARBON_PRESETS'
7 | const THEMES_KEY = 'CARBON_THEMES'
8 |
9 | const createAssigner = key => {
10 | const assign = morph.assign(key)
11 |
12 | return (window, v) => assign(window, JSON.stringify(v))
13 | }
14 |
15 | export const saveSettings = createAssigner(SETTINGS_KEY)
16 | export const savePresets = createAssigner(PRESETS_KEY)
17 | export const saveThemes = createAssigner(THEMES_KEY)
18 |
19 | const parse = v => {
20 | try {
21 | return JSON.parse(v)
22 | } catch (e) {
23 | // pass
24 | }
25 | }
26 |
27 | export const toggle = stateField => state => ({ [stateField]: !state[stateField] })
28 |
29 | // https://gist.github.com/alexgibson/1704515
30 | // TODO use https://github.com/sindresorhus/escape-goat/
31 | export const escapeHtml = s => {
32 | if (typeof s === 'string') {
33 | return s
34 | .replace(//g, '>')
36 | .replace(/\//g, '/')
37 | }
38 | }
39 |
40 | export const unescapeHtml = s => {
41 | if (typeof s === 'string') {
42 | return unescape(s).replace(///g, '/')
43 | }
44 | }
45 |
46 | export const getSettings = morph.compose(
47 | parse,
48 | escapeHtml,
49 | morph.get(SETTINGS_KEY)
50 | )
51 |
52 | export const getPresets = morph.compose(
53 | parse,
54 | morph.get(PRESETS_KEY)
55 | )
56 |
57 | export const getThemes = morph.compose(
58 | parse,
59 | morph.get(THEMES_KEY)
60 | )
61 |
62 | export const clearSettings = () => localStorage.removeItem(SETTINGS_KEY)
63 |
64 | export const fileToDataURL = blob =>
65 | new Promise(res => {
66 | const reader = new FileReader()
67 | reader.onload = e => res(e.target.result)
68 | reader.readAsDataURL(blob)
69 | })
70 |
71 | export const formatCode = async code => {
72 | const prettier = await import('prettier/standalone')
73 | const babylonParser = await import('prettier/parser-babylon')
74 |
75 | return prettier.format(code, {
76 | parser: 'babylon',
77 | plugins: [babylonParser],
78 | semi: false,
79 | singleQuote: true
80 | })
81 | }
82 |
83 | export const omit = (object, keys) => omitBy(object, (_, k) => keys.indexOf(k) > -1)
84 |
85 | export const stringifyRGBA = obj => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})`
86 |
87 | export const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1)
88 |
89 | export const generateId = () =>
90 | Math.random()
91 | .toString(36)
92 | .slice(2)
93 |
--------------------------------------------------------------------------------
/components/RandomImage.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Spinner from 'react-spinner'
3 | import { useAsyncCallback } from '@dawnlabs/tacklebox'
4 |
5 | import ApiContext from './ApiContext'
6 | import PhotoCredit from './PhotoCredit'
7 |
8 | function RandomImage(props) {
9 | const cacheRef = React.useRef([])
10 | const [cacheIndex, updateIndex] = React.useState(0)
11 | const api = React.useContext(ApiContext)
12 |
13 | const [selectImage, { loading: selecting }] = useAsyncCallback(() => {
14 | const image = cacheRef.current[cacheIndex]
15 |
16 | return api.unsplash.download(image.id).then(blob => props.onChange(blob, image))
17 | })
18 |
19 | const [updateCache, { loading: updating, error, data: imgs }] = useAsyncCallback(
20 | api.unsplash.random
21 | )
22 |
23 | const needsFetch = !error && !updating && (!imgs || cacheIndex > cacheRef.current.length - 2)
24 |
25 | React.useEffect(() => {
26 | if (needsFetch) {
27 | updateCache()
28 | }
29 | }, [needsFetch, updateCache])
30 |
31 | React.useEffect(() => {
32 | if (imgs) {
33 | cacheRef.current.push(...imgs)
34 | }
35 | }, [imgs])
36 |
37 | const loading = updating || selecting
38 |
39 | const cache = cacheRef.current
40 | const photographer = cache[cacheIndex] && cache[cacheIndex].photographer
41 | const bgImage = cache[cacheIndex] && cache[cacheIndex].dataURL
42 | return (
43 |
43 |
44 |
45 | {copyable && (
46 |
47 |
49 | )}
50 |
87 |
44 |
79 | )
80 | }
81 |
82 | export default RandomImage
83 |
--------------------------------------------------------------------------------
/components/svg/Settings.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default () => (
4 |
12 | )
13 |
--------------------------------------------------------------------------------
/components/svg/Language.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default () => (
4 |
10 | )
11 |
--------------------------------------------------------------------------------
/static/themes/verminal.css:
--------------------------------------------------------------------------------
1 | /*
2 | Name: verminal 1.0.0
3 | Author: Vernon de Goede (http://github.com/vernondegoede)
4 | */
5 |
6 | .CodeMirror.cm-s-verminal {
7 | background: rgba(0, 0, 0, 0.85);
8 | color: white;
9 | font-size: 12px;
10 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
11 | 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
12 | }
13 |
14 | @supports ((-webkit-backdrop-filter: blur(3em)) or (backdrop-filter: blur(3em))) {
15 | .CodeMirror.cm-s-verminal {
16 | -webkit-backdrop-filter: blur(4em);
17 | backdrop-filter: blur(4em);
18 | background: rgba(0, 0, 0, 0.70);
19 | }
20 | }
21 |
22 | /* basic syntax */
23 | .cm-s-verminal .cm-header {
24 | color: #e06c75;
25 | }
26 | .cm-s-verminal .cm-quote {
27 | color: #5c6370;
28 | font-style: italic;
29 | }
30 | .cm-s-verminal .cm-negative {
31 | color: #e06c75;
32 | }
33 | .cm-s-verminal .cm-positive {
34 | color: #e06c75;
35 | }
36 | .cm-s-verminal .cm-strong {
37 | color: #d19a66;
38 | font-weight: bold;
39 | }
40 | .cm-s-verminal .cm-header .cm-strong {
41 | color: #d19a66;
42 | font-weight: bold;
43 | }
44 | .cm-s-verminal .cm-em {
45 | color: #c678dd;
46 | font-style: italic;
47 | }
48 | .cm-s-verminal .cm-header .cm-em {
49 | color: #c678dd;
50 | font-style: italic;
51 | }
52 | .cm-s-verminal .cm-tag {
53 | color: #e06c75;
54 | }
55 | .cm-s-verminal .cm-attribute {
56 | color: #d19a66;
57 | }
58 | .cm-s-verminal .cm-link {
59 | color: #98c379;
60 | border-bottom: solid 1px #98c379;
61 | }
62 | .cm-s-verminal .cm-builtin {
63 | color: #e06c75;
64 | }
65 | .cm-s-verminal .cm-keyword {
66 | color: #9AE1FF;
67 | }
68 | .cm-s-verminal .cm-def {
69 | color: #34B7FF;
70 | }
71 | .cm-s-verminal .cm-atom {
72 | color: #d19a66;
73 | }
74 | .cm-s-verminal .cm-number {
75 | color: #d19a66;
76 | }
77 | .cm-s-verminal .cm-property {
78 | color: #0af;
79 | }
80 | .cm-s-verminal .cm-qualifier {
81 | color: #d19a66;
82 | }
83 | .cm-s-verminal .cm-variable {
84 | color: #ff9ba3;
85 | }
86 | .cm-s-verminal .cm-variable-2 {
87 | color: #fff;
88 | }
89 | .cm-s-verminal .cm-string {
90 | color: #98c379;
91 | }
92 | .cm-s-verminal .cm-punctuation {
93 | color: #abb2bf;
94 | }
95 | .cm-s-verminal .cm-operator {
96 | color: #FA78C3;
97 | }
98 |
99 | .cm-s-verminal .cm-meta {
100 | color: #abb2bf;
101 | }
102 | .cm-s-verminal .cm-bracket {
103 | color: #abb2bf;
104 | }
105 | .cm-s-verminal .cm-comment {
106 | color: #5c6370;
107 | font-style: italic;
108 | }
109 | .cm-s-verminal .cm-error {
110 | color: #e06c75;
111 | }
112 |
113 | .cm-s-verminal .CodeMirror-linenumber,
114 | .cm-s-verminal .CodeMirror-linenumbers {
115 | color: #616161 !important;
116 | background-color: transparent;
117 | }
118 |
--------------------------------------------------------------------------------
/components/Meta.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Head from 'next/head'
3 | import { THEMES, THEMES_HASH } from '../lib/constants'
4 | import Reset from './style/Reset'
5 | import Font from './style/Font'
6 | import Typography from './style/Typography'
7 |
8 | const LOCAL_STYLESHEETS = ['one-light', 'one-dark', 'verminal', 'night-owl', 'nord']
9 | const CDN_STYLESHEETS = THEMES.filter(t => LOCAL_STYLESHEETS.indexOf(t.id) < 0)
10 |
11 | export function Link({ href }) {
12 | return (
13 |
14 |
15 |
16 |
17 | )
18 | }
19 |
20 | export const StylesheetLink = ({ theme }) => {
21 | let href
22 | if (LOCAL_STYLESHEETS.indexOf(theme) > -1) {
23 | href = `/static/themes/${theme}.css`
24 | } else {
25 | const themeDef = THEMES_HASH[theme]
26 | href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/theme/${themeDef &&
27 | (themeDef.link || themeDef.id)}.min.css`
28 | }
29 |
30 | return
31 | }
32 |
33 | export const CodeMirrorLink = () => (
34 |
35 | )
36 |
37 | const title = 'Carbon'
38 | const description =
39 | 'Carbon is the easiest way to create and share beautiful images of your source code.'
40 | export const MetaTags = React.memo(() => (
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
45 |
46 | Use Image
47 |
48 | updateIndex(i => i + 1)}>
49 | Try Another
50 |
51 |
52 | {loading &&
53 | {photographer &&
36 | {this.props.children(item)}
37 | {this.props.selected === item.id ?
59 | ))
60 | }
61 |
62 | render() {
63 | const { items, selected, title, children } = this.props
64 | const { isVisible } = this.state
65 |
66 | const selectedItem = items.filter(item => item.id === selected)[0] || {}
67 |
68 | return (
69 |
70 |
102 | )
103 | }
104 | }
105 |
106 | export default ListSetting
107 |
--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
6 |
7 | ## Our Standards
8 |
9 | Examples of behavior that contributes to creating a positive environment include:
10 |
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 |
17 | Examples of unacceptable behavior by participants include:
18 |
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 |
25 | ## Our Responsibilities
26 |
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 |
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 |
31 | ## Scope
32 |
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 |
35 | ## Enforcement
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hi@dawnlabs.io. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 |
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 |
41 | ## Attribution
42 |
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 |
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "carbon",
3 | "version": "3.9.8",
4 | "main": "index.js",
5 | "license": "MIT",
6 | "scripts": {
7 | "dev": "next",
8 | "build": "next build",
9 | "start": "next start",
10 | "export": "next export",
11 | "test": "npm run cy:run --",
12 | "deploy": "now",
13 | "prettier": "prettier --config .prettierrc --write {.,components,lib,pages}/*.js {components,lib,pages,packages}/**/*.js",
14 | "lint": "eslint .",
15 | "contrib:add": "all-contributors add",
16 | "contrib:build": "all-contributors generate",
17 | "cy:run": "cypress run",
18 | "cy:open": "cypress open",
19 | "now-build": "cross-env NODE_ENV=production yarn build && yarn export -o dist"
20 | },
21 | "dependencies": {
22 | "@dawnlabs/tacklebox": "^0.0.6",
23 | "axios": "^0.18.0",
24 | "codemirror": "^5.42.2",
25 | "codemirror-graphql": "^0.8.3",
26 | "codemirror-mode-elixir": "^1.1.2",
27 | "cross-env": "^5.2.0",
28 | "dom-to-image": "^2.5.2",
29 | "downshift": "^3.2.2",
30 | "dropperx": "^1.0.1",
31 | "escape-goat": "^1.3.0",
32 | "graphql": "^14.1.1",
33 | "highlight.js": "^9.14.2",
34 | "lodash.debounce": "^4.0.8",
35 | "lodash.omitby": "^4.6.0",
36 | "match-sorter": "^2.3.0",
37 | "morphmorph": "^0.1.0",
38 | "ms": "^2.0.0",
39 | "next": "^8.0.3",
40 | "next-offline": "^3.3.6",
41 | "prettier": "^1.16.4",
42 | "react": "^16.8.3",
43 | "react-click-outside": "^3.0.0",
44 | "react-codemirror2": "^5.1.0",
45 | "react-color": "^2.17.0",
46 | "react-copy-to-clipboard": "^5.0.1",
47 | "react-dom": "^16.8.3",
48 | "react-image-crop": "^6.0.16",
49 | "react-spinner": "^0.2.7",
50 | "react-syntax-highlight": "^15.3.1",
51 | "tohash": "^1.0.2",
52 | "url": "^0.11.0"
53 | },
54 | "devDependencies": {
55 | "all-contributors-cli": "^6.0.0",
56 | "babel-eslint": "^10.0.1",
57 | "clipboardy": "^1.2.3",
58 | "cypress": "^3.1.5",
59 | "eslint": "^5.13.0",
60 | "eslint-plugin-import": "^2.16.0",
61 | "eslint-plugin-jsx-a11y": "^6.2.1",
62 | "eslint-plugin-react": "^7.12.3",
63 | "eslint-plugin-react-hooks": "^1.4.0",
64 | "husky": "^1.3.1",
65 | "lint-staged": "^8.1.3",
66 | "now": "^14.0.0",
67 | "wait-on": "^3.2.0"
68 | },
69 | "lint-staged": {
70 | "*.js": [
71 | "npm run lint",
72 | "prettier --config .prettierrc --write",
73 | "git add"
74 | ]
75 | },
76 | "greenkeeper": {
77 | "groups": {
78 | "app": {
79 | "packages": [
80 | "package.json"
81 | ],
82 | "ignore": [
83 | "graphql",
84 | "webpack"
85 | ]
86 | },
87 | "integrations": {
88 | "packages": [
89 | "packages/gatsby-remark-embed-carbon/package.json"
90 | ]
91 | }
92 | }
93 | },
94 | "description": "Create and share beautiful images of your source code",
95 | "repository": {
96 | "type": "git",
97 | "url": "git+https://github.com/dawnlabs/carbon.git"
98 | },
99 | "author": "Dawn Labs <@dawnlabs>",
100 | "bugs": {
101 | "url": "https://github.com/dawnlabs/carbon/issues"
102 | },
103 | "homepage": "https://dawnlabs.io/carbon",
104 | "husky": {
105 | "hooks": {
106 | "pre-commit": "npm run contrib:build && git add README.md && lint-staged"
107 | }
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/static/themes/nord.css:
--------------------------------------------------------------------------------
1 | /*
2 | Name: nord 1.1.1
3 | Author: Arctic Ice Studio (https://github.com/arcticicestudio/)
4 | Original VS Code Theme (https://github.com/arcticicestudio/nord-visual-studio-code)
5 | */
6 | /* basic */
7 | .CodeMirror.cm-s-nord {
8 | color: #d8dee9;
9 | background-color: #2e3440;
10 | }
11 | .cm-s-nord .CodeMirror-selected {
12 | background-color: rgba(67, 76, 94, 0.8);
13 | }
14 | .cm-s-nord .CodeMirror-gutter,
15 | .cm-s-nord .CodeMirror-gutters {
16 | border: none;
17 | background-color: #2e3440;
18 | }
19 | .cm-s-nord .CodeMirror-linenumber,
20 | .cm-s-nord .CodeMirror-linenumbers {
21 | color: rgba(216, 222, 233, 0.4) !important;
22 | background-color: transparent;
23 | }
24 | .cm-s-nord .CodeMirror-lines {
25 | color: #d8dee9 !important;
26 | background-color: transparent;
27 | }
28 | .cm-s-nord .CodeMirror-cursor {
29 | border-left: 2px solid #d8dee9 !important;
30 | }
31 | /* addon: edit/machingbrackets.js & addon: edit/matchtags.js */
32 | .cm-s-nord .CodeMirror-matchingbracket,
33 | .cm-s-nord .CodeMirror-matchingtag {
34 | border-bottom: 2px solid #81A1C1;
35 | color: #d8dee9 !important;
36 | background-color: transparent;
37 | }
38 | .cm-s-nord .CodeMirror-nonmatchingbracket {
39 | border-bottom: 2px solid #bf616a;
40 | color: #d8dee9 !important;
41 | background-color: transparent;
42 | }
43 | /* addon: fold/foldgutter.js */
44 | .cm-s-nord .CodeMirror-foldmarker,
45 | .cm-s-nord .CodeMirror-foldgutter,
46 | .cm-s-nord .CodeMirror-foldgutter-open,
47 | .cm-s-nord .CodeMirror-foldgutter-folded {
48 | border: none;
49 | text-shadow: none;
50 | color: #d8dee9 !important;
51 | background-color: transparent;
52 | }
53 | /* addon: selection/active-line.js */
54 | .cm-s-nord .CodeMirror-activeline-background {
55 | background-color: rgba(67, 76, 94, 0.32);
56 | }
57 | /* basic syntax */
58 | .cm-s-nord .cm-attribute {
59 | color: #8FBCBB;
60 | }
61 | .cm-s-nord .cm-keyword {
62 | color: #81A1C1;
63 | }
64 | .cm-s-nord .cm-def {
65 | color: #D8DEE9;
66 | }
67 | .cm-s-nord .cm-atom {
68 | color: #81A1C1;
69 | }
70 | .cm-s-nord .cm-number {
71 | color: #B48EAD;
72 | }
73 | .cm-s-nord .cm-property {
74 | color: #D8DEE9;
75 | }
76 | .cm-s-nord .cm-qualifier {
77 | color: #88C0D0;
78 | }
79 | .cm-s-nord .cm-variable,
80 | .cm-s-nord .cm-variable-2 {
81 | color: #88C0D0;
82 | }
83 | .cm-s-nord .cm-variable-3 {
84 | color: #D8DEE9;
85 | }
86 | .cm-s-nord .cm-string,
87 | .cm-s-nord .cm-string-2 {
88 | color: #A3BE8C;
89 | }
90 | .cm-s-nord .cm-operator {
91 | color: #81A1C1;
92 | }
93 | .cm-s-nord .cm-meta {
94 | color: #81A1C1;
95 | }
96 | .cm-s-nord .cm-comment {
97 | color: #4C566A;
98 | }
99 | .cm-s-nord .cm-error {
100 | color: #bf616a;
101 | }
102 | /* markdown */
103 | .cm-s-nord .cm-header {
104 | color: #88C0D0;
105 | }
106 | .cm-s-nord .cm-quote {
107 | color: #4C566A;
108 | }
109 | .cm-s-nord .cm-link {
110 | color: #88C0D0;
111 | text-decoration: none;
112 | }
113 | .cm-s-nord .cm-url {
114 | color: #d8dee9;
115 | text-decoration: underline;
116 | }
117 | .cm-s-nord .cm-strong {
118 | font-weight: bold;
119 | }
120 | .cm-s-nord .cm-em {
121 | font-style: italic;
122 | }
123 | /* diff */
124 | .cm-s-nord .cm-negative {
125 | color: #bf616a;
126 | }
127 | .cm-s-nord .cm-positive {
128 | color: #a3be8c;
129 | }
130 | /* html */
131 | .cm-s-nord .cm-tag {
132 | color: #81A1C1;
133 | }
134 |
--------------------------------------------------------------------------------
/lib/api.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import debounce from 'lodash.debounce'
3 | import ms from 'ms'
4 |
5 | import { fileToDataURL } from './util'
6 |
7 | const client = axios.create({
8 | baseURL: `${
9 | process.env.API_URL || process.env.NODE_ENV === 'production' ? '' : 'http://localhost:4000'
10 | }/api`
11 | })
12 |
13 | const RATE_LIMIT_CODE = 420
14 |
15 | const gistClient = axios.create({
16 | baseURL: 'https://api.github.com',
17 | timeout: 5000,
18 | headers: {
19 | Accept: 'application/vnd.github.v3+json',
20 | 'Content-Type': 'application/json'
21 | }
22 | })
23 |
24 | function tweet(content, encodedImage) {
25 | const processedData = encodedImage.split(',')[1]
26 |
27 | return client
28 | .post('/twitter', {
29 | imageData: processedData,
30 | altText: content
31 | })
32 | .then(res => res.data.url)
33 | .then(url => encodeURIComponent(`Built with #Carbon, by @dawn_labs ${url}`))
34 | .then(uri => `https://twitter.com/intent/tweet?text=${uri}`)
35 | .then(openTwitterUrl)
36 | .catch(checkIfRateLimited)
37 | }
38 |
39 | function image(state) {
40 | return client.post('/image', { state }).then(res => res.data)
41 | }
42 |
43 | // ~ makes the file come later alphabetically, which is how gists are sorted
44 | const CARBON_STORAGE_KEY = '~carbon.json'
45 | function getGist(uid) {
46 | return gistClient
47 | .get(`/gists/${uid}`)
48 | .then(res => res.data)
49 | .then(({ owner, files }) => {
50 | let config
51 | if (files[CARBON_STORAGE_KEY]) {
52 | try {
53 | config = JSON.parse(files[CARBON_STORAGE_KEY].content)
54 | } catch (error) {
55 | // pass
56 | }
57 | }
58 |
59 | const otherFiles = Object.keys(files).filter(key => key !== CARBON_STORAGE_KEY)
60 |
61 | const snippet = files[otherFiles[0]]
62 |
63 | return {
64 | code: snippet.content,
65 | language: snippet.language,
66 | owner,
67 | config
68 | }
69 | })
70 | }
71 |
72 | // private
73 | function openTwitterUrl(twitterUrl) {
74 | const width = 575
75 | const height = 400
76 | const left = (window.outerWidth - width) / 2
77 | const top = (window.outerHeight - height) / 2
78 | const opts = `status=1,width=${width},height=${height},top=${top},left=${left}`
79 |
80 | window.open(twitterUrl, 'twitter', opts)
81 | }
82 |
83 | function checkIfRateLimited(err) {
84 | if (err.response.status === RATE_LIMIT_CODE) {
85 | alert(
86 | "Oh no! Looks like to many people are trying to tweet right now and we've been rate limited. Try again soon or save and upload manually!"
87 | )
88 | return
89 | }
90 |
91 | throw err
92 | }
93 |
94 | const downloadThumbnailImage = img => {
95 | return client
96 | .get(img.url.replace('http://', 'https://'), { responseType: 'blob' })
97 | .then(res => res.data)
98 | .then(fileToDataURL)
99 | .then(dataURL => Object.assign(img, { dataURL }))
100 | }
101 |
102 | const unsplash = {
103 | download(id) {
104 | return client
105 | .get(`/unsplash/download/${id}`)
106 | .then(res => res.data.url)
107 | .then(url => client.get(url, { responseType: 'blob' }))
108 | .then(res => res.data)
109 | },
110 | async random() {
111 | const imageUrls = await client.get('/unsplash/random')
112 | return Promise.all(imageUrls.data.map(downloadThumbnailImage))
113 | }
114 | }
115 |
116 | export default {
117 | gist: {
118 | get: getGist
119 | },
120 | tweet: debounce(tweet, ms('5s'), { leading: true, trailing: false }),
121 | image: debounce(image, ms('5s'), { leading: true, trailing: false }),
122 | unsplash,
123 | downloadThumbnailImage
124 | }
125 |
--------------------------------------------------------------------------------
/static/themes/one-dark.css:
--------------------------------------------------------------------------------
1 | /*
2 | Name: one-dark 1.1.1
3 | Author: Török Ádám (http://github.com/Aerobird98)
4 | Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax)
5 | */
6 | /* basic */
7 | .CodeMirror.cm-s-one-dark {
8 | font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
9 | font-weight: 350;
10 | font-size: 18px;
11 | color: #abb2bf;
12 | background-color: #282c34;
13 | }
14 | .cm-s-one-dark .CodeMirror-selected {background-color: #3e4451;}
15 | .cm-s-one-dark .CodeMirror-gutter,
16 | .cm-s-one-dark .CodeMirror-gutters {
17 | border: none;
18 | background-color: #282c34;
19 | }
20 | .cm-s-one-dark .CodeMirror-linenumber,
21 | .cm-s-one-dark .CodeMirror-linenumbers {
22 | color: #5c6370 !important;
23 | background-color: transparent;
24 | }
25 | .cm-s-one-dark .CodeMirror-lines {
26 | color: #abb2bf !important;
27 | background-color: transparent;
28 | }
29 | .cm-s-one-dark .CodeMirror-cursor {border-left: 2px solid #56b6c2 !important;}
30 | /* addon: edit/machingbrackets.js & addon: edit/matchtags.js */
31 | .cm-s-one-dark .CodeMirror-matchingbracket,
32 | .cm-s-one-dark .CodeMirror-matchingtag {
33 | border-bottom: 2px solid #56b6c2;
34 | color: #abb2bf !important;
35 | background-color: transparent;
36 | }
37 | .cm-s-one-dark .CodeMirror-nonmatchingbracket {
38 | border-bottom: 2px solid #e06c75;
39 | color: #abb2bf !important;
40 | background-color: transparent;
41 | }
42 | /* addon: fold/foldgutter.js */
43 | .cm-s-one-dark .CodeMirror-foldmarker,
44 | .cm-s-one-dark .CodeMirror-foldgutter,
45 | .cm-s-one-dark .CodeMirror-foldgutter-open,
46 | .cm-s-one-dark .CodeMirror-foldgutter-folded {
47 | border: none;
48 | text-shadow: none;
49 | color: #5c6370 !important;
50 | background-color: transparent;
51 | }
52 | /* addon: selection/active-line.js */
53 | .cm-s-one-dark .CodeMirror-activeline-background {background-color: rgba(153, 187, 255, 0.04);}
54 | /* basic syntax */
55 | .cm-s-one-dark .cm-header {color: #e06c75;}
56 | .cm-s-one-dark .cm-quote {color: #5c6370;font-style: italic;}
57 | .cm-s-one-dark .cm-negative {color: #e06c75;}
58 | .cm-s-one-dark .cm-positive {color: #e06c75;}
59 | .cm-s-one-dark .cm-strong {color: #d19a66;font-weight: bold;}
60 | .cm-s-one-dark .cm-header .cm-strong {color: #d19a66;font-weight: bold;}
61 | .cm-s-one-dark .cm-em {color: #c678dd;font-style: italic;}
62 | .cm-s-one-dark .cm-header .cm-em {color: #c678dd;font-style: italic;}
63 | .cm-s-one-dark .cm-tag {color: #e06c75;}
64 | .cm-s-one-dark .cm-attribute {color: #d19a66;}
65 | .cm-s-one-dark .cm-link {color: #98c379;border-bottom: solid 1px #98c379;}
66 | .cm-s-one-dark .cm-builtin {color: #e06c75;}
67 | .cm-s-one-dark .cm-keyword {color: #c678dd;}
68 | .cm-s-one-dark .cm-def {color: #e5c07b;} /* original: #d19a66; */
69 | .cm-s-one-dark .cm-atom {color: #d19a66;}
70 | .cm-s-one-dark .cm-number {color: #d19a66;}
71 | .cm-s-one-dark .cm-property {color: #56b6c2;} /* original: #abb2bf */
72 | .cm-s-one-dark .cm-qualifier {color: #d19a66;}
73 | .cm-s-one-dark .cm-variable {color: #e06c75;}
74 | .cm-s-one-dark .cm-string {color: #98c379;}
75 | .cm-s-one-dark .cm-punctuation {color: #abb2bf;}
76 | .cm-s-one-dark .cm-operator {color: #56b6c2;} /* original: #abb2bf */
77 | .cm-s-one-dark .cm-meta {color: #abb2bf;}
78 | .cm-s-one-dark .cm-bracket {color: #abb2bf;}
79 | .cm-s-one-dark .cm-comment {color: #5c6370;font-style: italic;}
80 | .cm-s-one-dark .cm-error {color: #e06c75;}
81 | /* css syntax corrections */
82 | .cm-s-one-dark .cm-m-css.cm-variable {color: #828997;}
83 | .cm-s-one-dark .cm-m-css.cm-property {color: #abb2bf;}
84 | .cm-s-one-dark .cm-m-css.cm-atom {color: #56b6c2;}
85 | .cm-s-one-dark .cm-m-css.cm-builtin {color: #56b6c2;}
86 | /* lua syntax corrections */
87 | .cm-s-one-dark .cm-m-lua.cm-variable {color: #56b6c2;}
--------------------------------------------------------------------------------
/static/themes/one-light.css:
--------------------------------------------------------------------------------
1 | /*
2 | Name: one-light 1.1.1
3 | Author: zhao zhang (http://github.com/loatheb)
4 | Original Atom One Light Theme (https://github.com/atom/one-light-ui & https://github.com/atom/one-light-syntax)
5 | */
6 | /* basic */
7 | .CodeMirror.cm-s-one-light {
8 | font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
9 | font-weight: 350;
10 | font-size: 18px;
11 | color: #383a42;
12 | background-color: #fafafa;
13 | }
14 |
15 | .cm-s-one-light .CodeMirror-selected {
16 | background-color: #c3c3c3;
17 | }
18 |
19 | .cm-s-one-light .CodeMirror-gutter,
20 | .cm-s-one-light .CodeMirror-gutters {
21 | border: none;
22 | background-color: #fafafa;
23 | }
24 |
25 | .cm-s-one-light .CodeMirror-linenumber,
26 | .cm-s-one-light .CodeMirror-linenumbers {
27 | color: #929292 !important;
28 | background-color: transparent;
29 | }
30 |
31 | .cm-s-one-light .CodeMirror-lines {
32 | color: #27292f !important;
33 | background-color: transparent;
34 | }
35 |
36 | .cm-s-one-light .CodeMirror-cursor {
37 | border-left: 2px solid #526fff !important;
38 | }
39 |
40 | /* basic syntax */
41 | .cm-s-one-light .cm-header {
42 | color: #e45649;
43 | }
44 |
45 | .cm-s-one-light .cm-quote {
46 | color: #a0a1a7;
47 | font-style: italic;
48 | }
49 |
50 | .cm-s-one-light .cm-negative {
51 | color: #e45649;
52 | }
53 |
54 | .cm-s-one-light .cm-positive {
55 | color: #e45649;
56 | }
57 |
58 | .cm-s-one-light .cm-strong {
59 | color: #986801;
60 | font-weight: bold;
61 | }
62 |
63 | .cm-s-one-light .cm-header .cm-strong {
64 | color: #986801;
65 | font-weight: bold;
66 | }
67 |
68 | .cm-s-one-light .cm-em {
69 | color: #a626a4;
70 | font-style: italic;
71 | }
72 |
73 | .cm-s-one-light .cm-header .cm-em {
74 | color: #a626a4;
75 | font-style: italic;
76 | }
77 |
78 | .cm-s-one-light .cm-tag {
79 | color: #e45649;
80 | }
81 |
82 | .cm-s-one-light .cm-attribute {
83 | color: #d19a66;
84 | }
85 |
86 | .cm-s-one-light .cm-link {
87 | color: #4078f2;
88 | border-bottom: solid 1px #4078f2;
89 | }
90 |
91 | .cm-s-one-light .cm-string.cm-url {
92 | color: #0184bc;
93 | border-bottom: solid 1px #0184bc;
94 | }
95 |
96 | .cm-s-one-light .cm-builtin {
97 | color: #e45649;
98 | }
99 |
100 | .cm-s-one-light .cm-keyword {
101 | color: #a626a4;
102 | }
103 |
104 | .cm-s-one-light .cm-def {
105 | color: #4078f2;
106 | }
107 |
108 | .cm-s-one-light .cm-atom {
109 | color: #d19a66;
110 | }
111 |
112 | .cm-s-one-light .cm-number {
113 | color: #986801;
114 | }
115 |
116 | .cm-s-one-light .cm-property {
117 | color: #4078f2;
118 | }
119 |
120 | .cm-s-one-light .cm-qualifier {
121 | color: #986801;
122 | }
123 |
124 | .cm-s-one-light .cm-variable {
125 | color: #e06c75;
126 | }
127 |
128 | .cm-s-one-light .cm-variable-2 {
129 | color: #e45649;
130 | }
131 |
132 | .cm-s-one-light .cm-string {
133 | color: #50a14f;
134 | }
135 |
136 | .cm-s-one-light .cm-punctuation {
137 | color: #383a42;
138 | }
139 |
140 | .cm-s-one-light .cm-operator {
141 | color: #0184bc;
142 | }
143 |
144 | .cm-s-one-light .cm-meta {
145 | color: #383a42;
146 | }
147 |
148 | .cm-s-one-light .cm-bracket {
149 | color: #383a42;
150 | }
151 |
152 | .cm-s-one-light .cm-comment {
153 | color: #a0a1a7;
154 | font-style: italic;
155 | }
156 |
157 | .cm-s-one-light .cm-error {
158 | color: #e06c75;
159 | }
160 |
161 | /* css syntax corrections */
162 | .cm-s-one-light .cm-m-css.cm-variable {
163 | color: #828997;
164 | }
165 |
166 | .cm-s-one-light .cm-m-css.cm-property {
167 | color: #383a42;
168 | }
169 |
170 | .cm-s-one-light .cm-m-css.cm-atom {
171 | color: #0184bc;
172 | }
173 |
174 | .cm-s-one-light .cm-m-css.cm-builtin {
175 | color: #56b6c2;
176 | }
177 |
--------------------------------------------------------------------------------
/pages/about.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Page from '../components/Page'
3 |
4 | export default () => (
5 |
76 | {title}
77 | {children(selectedItem)}
78 |
79 | {this.renderListItems()}
80 |
101 |
7 |
78 |
103 |
8 |
19 | What does this do?
9 |10 | You know all of those code screenshots you see on Twitter? Although the code's 11 | usually impressive, we saw room for improvement in the aesthetic department. Carbon is the 12 | easiest way to create beautiful images of your source code. So what are you waiting for? 13 | Go impress all of your followers with your newfound design prowess.{' '} 14 | 15 | 🎨 16 | 17 |
18 |
20 |
69 | How do I use it?
21 |Import
22 |There are a few different ways to import code into Carbon:
23 |-
24 |
- Drop a file into the editor 25 |
- 26 | Append a GitHub gist id to the url ( 27 | 28 | example 29 | 30 | ) 31 | 32 |
- Paste your code directly 33 |
Customization
35 |36 | Once you've got all of your code into Carbon, you can customize your image by 37 | changing the syntax theme, background color/image, window theme, or padding. 38 |
39 |40 | You can even drop an image file onto the editor to set the background to that image. Give 41 | it a try! 42 |
43 |Export/Sharing
44 |45 | After you've customized your image you can Tweet a link to the image, or save it 46 | directly. 47 |
48 |49 | If you use the 'Tweet' button, Carbon will automatically make your image 50 | accessible. However, if you want to manually tweet your carbon image, please check out ( 51 | 52 | how to make your Twitter images accessible 53 | 54 | ). 55 |
56 |57 | If you include a Carbon image in a post, the source code will be invisible to assistive 58 | technology — it will not be possible to enlarge or copy it, etc. Please, think about 59 | adding another element with the source code as text, like ( 60 | 64 | an HTML Details Element 65 | 66 | ) below the image. 67 |
68 |
70 |
77 | I want to make this better.
71 |72 | 73 | Please do. 74 | 75 |
76 |
31 |
43 |
65 |
137 |
138 | )
139 | }
140 | }
141 |
142 | export default managePopout(BackgroundSelect)
143 |
--------------------------------------------------------------------------------
/components/Themes/ThemeCreate.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Input from '../Input'
4 | import Button from '../Button'
5 | import ListSetting from '../ListSetting'
6 | import Popout from '../Popout'
7 | import ColorPicker from '../ColorPicker'
8 | import { HIGHLIGHT_KEYS, COLORS } from '../../lib/constants'
9 | import { capitalize } from '../../lib/util'
10 |
11 | const colorPickerStyle = {
12 | backgroundColor: COLORS.BLACK,
13 | padding: 0,
14 | margin: '4px'
15 | }
16 |
17 | const colorPresets = []
18 |
19 | const HighlightPicker = ({ title, onChange, color }) => (
20 |
32 |
37 |
33 |
34 |
35 |
36 |
44 | {['color', 'image'].map(tab => (
45 |
56 |
52 | {capitalize(tab)}
53 |
54 | ))}
55 |
57 |
64 |
58 |
60 |
61 |
63 |
21 |
48 | )
49 |
50 | const ThemeCreate = ({
51 | theme,
52 | themes,
53 | highlights,
54 | name,
55 | preset,
56 | selected,
57 | createTheme,
58 | applyPreset,
59 | updateName,
60 | selectHighlight,
61 | updateHighlight
62 | }) => (
63 |
22 | {title}
23 |
24 |
65 |
122 | {selected && (
123 |
66 | Name
67 |
75 |
76 |
77 |
84 | {({ name }) => {name}}
85 |
86 |
87 |
88 | {HIGHLIGHT_KEYS.map(key => (
89 |
109 |
121 |
90 |
106 |
107 | ))}
108 |
22 |
60 | )
61 | })
62 |
63 | const arrowButtonStyle = {
64 | position: 'absolute',
65 | top: 0,
66 | right: '16px',
67 | height: '100%'
68 | }
69 |
70 | const Presets = React.memo(
71 | ({ show, create, toggle, undo, presets, selected, remove, apply, applied, contentRef }) => {
72 | const customPresetsLength = presets.length - DEFAULT_PRESETS.length
73 |
74 | const disabledCreate = selected != null
75 |
76 | return (
77 |
78 |
181 | )
182 | }
183 | )
184 |
185 | export default Presets
186 |
--------------------------------------------------------------------------------
/components/style/Font.js:
--------------------------------------------------------------------------------
1 | /*
2 | * See https://developers.google.com/web/updates/2016/02/font-display and
3 | * https://css-tricks.com/font-display-masses/#article-header-id-2
4 | * for `font-display` information
5 | */
6 | import React from 'react'
7 |
8 | export default () => (
9 |
157 | )
158 |
--------------------------------------------------------------------------------
/components/ExportMenu.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { withRouter } from 'next/router'
3 | import { useCopyTextHandler, useOnline } from '@dawnlabs/tacklebox'
4 |
5 | import { COLORS, EXPORT_SIZES } from '../lib/constants'
6 | import Button from './Button'
7 | import Input from './Input'
8 | import Popout, { managePopout } from './Popout'
9 |
10 | const toIFrame = url =>
11 | `
16 | `
17 |
18 | const MAX_PAYLOAD_SIZE = 5e6 // bytes
19 | function verifyPayloadSize(str) {
20 | if (typeof str !== 'string') return true
21 |
22 | return new Blob([str]).size < MAX_PAYLOAD_SIZE
23 | }
24 |
25 | const CopyEmbed = withRouter(
26 | React.memo(
27 | ({ router: { asPath } }) => {
28 | const { onClick, copied } = useCopyTextHandler(toIFrame(asPath))
29 |
30 | return (
31 |
34 | )
35 | },
36 | (prevProps, nextProps) => prevProps.router.asPath === nextProps.router.asPath
37 | )
38 | )
39 |
40 | const popoutStyle = { width: '280px', right: 0 }
41 |
42 | class ExportMenu extends React.PureComponent {
43 | handleInputChange = ({ target: { name, value } }) => this.props.onChange(name, value)
44 |
45 | handleExportSizeChange = selectedSize => () => this.props.onChange('exportSize', selectedSize)
46 |
47 | handleExport = format => () => this.props.export(format)
48 |
49 | render() {
50 | const { exportSize, filename, isVisible, toggleVisibility, disablePNG } = this.props
51 |
52 | return (
53 |
181 | )
182 | }
183 | }
184 |
185 | export default managePopout(function({ backgroundImage, ...props }) {
186 | const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage])
187 | const online = useOnline()
188 |
189 | const [isSafari, setSafari] = React.useState(false)
190 | React.useEffect(() => {
191 | setSafari(
192 | window.navigator &&
193 | window.navigator.userAgent.indexOf('Safari') !== -1 &&
194 | window.navigator.userAgent.indexOf('Chrome') === -1
195 | )
196 | }, [])
197 |
198 | const disablePNG = isSafari && (tooLarge || !online)
199 |
200 | return
79 | Presets
80 | {show && (
81 |
92 | )}
93 |
96 |
97 | {show && (
98 |
99 | {presets
100 | .filter(p => p.custom)
101 | .map(preset => (
102 |
117 | )}
118 | {show && applied && (
119 |
120 | Preset applied!
121 |
131 |
132 | )}
133 |
180 |
17 | {children}
18 | {item.custom && !isSelected && (
19 |
39 | )
40 |
41 | const themeIcon =
20 |
22 | )}
23 |
38 |
158 |
254 | )
255 | }
256 | }
257 |
258 | export default managePopout(Themes)
259 |
--------------------------------------------------------------------------------
/components/Carbon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import dynamic from 'next/dynamic'
3 | import * as hljs from 'highlight.js'
4 | import debounce from 'lodash.debounce'
5 | import ms from 'ms'
6 | import { Controlled as CodeMirror } from 'react-codemirror2'
7 | import SpinnerWrapper from './SpinnerWrapper'
8 |
9 | import WindowControls from './WindowControls'
10 | import {
11 | COLORS,
12 | LANGUAGE_MODE_HASH,
13 | LANGUAGE_NAME_HASH,
14 | THEMES_HASH,
15 | DEFAULT_SETTINGS
16 | } from '../lib/constants'
17 |
18 | const Watermark = dynamic(() => import('./svg/Watermark'), {
19 | loading: () => null
20 | })
21 |
22 | class Carbon extends React.PureComponent {
23 | static defaultProps = {
24 | onAspectRatioChange: () => {},
25 | onChange: () => {}
26 | }
27 |
28 | componentDidMount() {
29 | const node = this.props.innerRef.current
30 | this.mo = new MutationObserver(() => {
31 | const ratio = node.clientWidth / node.clientHeight
32 | this.props.onAspectRatioChange(ratio)
33 | })
34 | this.mo.observe(node, { attributes: true, childList: true, subtree: true })
35 | }
36 |
37 | componentWillUnmount() {
38 | this.mo.disconnect()
39 | }
40 |
41 | handleLanguageChange = debounce(
42 | (newCode, language) => {
43 | if (language === 'auto') {
44 | // try to set the language
45 | const detectedLanguage = hljs.highlightAuto(newCode).language
46 | const languageMode =
47 | LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage]
48 |
49 | if (languageMode) {
50 | return languageMode.mime || languageMode.mode
51 | }
52 | }
53 |
54 | return language
55 | },
56 | ms('300ms'),
57 | {
58 | leading: true,
59 | trailing: true
60 | }
61 | )
62 |
63 | onBeforeChange = (editor, meta, code) => {
64 | if (!this.props.readOnly) {
65 | this.props.onChange(code)
66 | }
67 | }
68 |
69 | render() {
70 | const config = { ...DEFAULT_SETTINGS, ...this.props.config }
71 |
72 | const languageMode = this.handleLanguageChange(this.props.children, config.language)
73 |
74 | const options = {
75 | lineNumbers: config.lineNumbers,
76 | mode: languageMode || 'plaintext',
77 | theme: config.theme,
78 | scrollBarStyle: null,
79 | viewportMargin: Infinity,
80 | lineWrapping: true,
81 | extraKeys: {
82 | 'Shift-Tab': 'indentLess'
83 | },
84 | // negative values removes the cursor, undefined means default (530)
85 | cursorBlinkRate: this.props.readOnly ? -1 : undefined,
86 | // needs to be able to refresh every 16ms to hit 60 frames / second
87 | pollInterval: 16
88 | }
89 | const backgroundImage =
90 | (this.props.config.backgroundImage && this.props.config.backgroundImageSelection) ||
91 | this.props.config.backgroundImage
92 |
93 | const content = (
94 |
95 | {config.windowControls ? (
96 |
220 | )
221 |
222 | return (
223 |
110 |
111 |
112 |
113 |
114 |
219 |
224 |
249 | )
250 | }
251 | }
252 |
253 | export default React.forwardRef((props, ref) =>
225 | {content}
226 |
227 |
228 |
248 |
137 | {children}
138 |
149 |
150 | )
151 | }
152 |
153 | const DropdownIcon = ({ children, isOpen }) => {
154 | if (children) {
155 | return (
156 |
157 | {children}
158 |
174 |
175 | )
176 | } else {
177 | return null
178 | }
179 | }
180 |
181 | const SelectedItem = ({
182 | getToggleButtonProps,
183 | getInputProps,
184 | children,
185 | isOpen,
186 | color,
187 | hasIcon,
188 | disabled
189 | }) => {
190 | const itemColor = color || COLORS.SECONDARY
191 |
192 | return (
193 |
197 |
201 |
202 |
204 |
243 |
244 | )
245 | }
246 |
247 | const ListItems = ({ children, color }) => {
248 | return (
249 | -
250 | {children}
251 |
262 |
157 |
186 |
248 | )
249 |
250 | if (this.props.imageDataURL) {
251 | content = (
252 |
158 | Upload a background image:
159 |
165 |
171 | {this.state.mode === 'file' ? (
172 |
177 | ) : (
178 |
182 | )}
183 | {this.state.error && {this.state.error}}
184 |
185 | 186 |
187 |
188 | Or use a random Unsplash image:
189 |
190 |
192 |
247 |
253 |
310 | )
311 | }
312 |
313 | return (
314 |
254 |
270 |
309 |
255 | Background image
256 |
257 |
258 |
315 |
316 | {content}
317 |
324 |
325 | )
326 | }
327 | }
328 |
--------------------------------------------------------------------------------
/lib/colors.js:
--------------------------------------------------------------------------------
1 | export const colors = new Set([
2 | 'indian red',
3 | 'crimson',
4 | 'lightpink',
5 | 'lightpink 1',
6 | 'lightpink 2',
7 | 'lightpink 3',
8 | 'lightpink 4',
9 | 'pink',
10 | 'pink 1',
11 | 'pink 2',
12 | 'pink 3',
13 | 'pink 4',
14 | 'palevioletred',
15 | 'palevioletred 1',
16 | 'palevioletred 2',
17 | 'palevioletred 3',
18 | 'palevioletred 4',
19 | 'lavenderblush 1',
20 | 'lavenderblush',
21 | 'lavenderblush 2',
22 | 'lavenderblush 3',
23 | 'lavenderblush 4',
24 | 'violetred 1',
25 | 'violetred 2',
26 | 'violetred 3',
27 | 'violetred 4',
28 | 'hotpink',
29 | 'hotpink 1',
30 | 'hotpink 2',
31 | 'hotpink 3',
32 | 'hotpink 4',
33 | 'raspberry',
34 | 'deeppink 1',
35 | 'deeppink',
36 | 'deeppink 2',
37 | 'deeppink 3',
38 | 'deeppink 4',
39 | 'maroon 1',
40 | 'maroon 2',
41 | 'maroon 3',
42 | 'maroon 4',
43 | 'mediumvioletred',
44 | 'violetred',
45 | 'orchid',
46 | 'orchid 1',
47 | 'orchid 2',
48 | 'orchid 3',
49 | 'orchid 4',
50 | 'thistle',
51 | 'thistle 1',
52 | 'thistle 2',
53 | 'thistle 3',
54 | 'thistle 4',
55 | 'plum 1',
56 | 'plum 2',
57 | 'plum 3',
58 | 'plum 4',
59 | 'plum',
60 | 'violet',
61 | 'magenta',
62 | 'fuchsia',
63 | 'magenta 2',
64 | 'magenta 3',
65 | 'magenta 4',
66 | 'darkmagenta',
67 | 'purple',
68 | 'mediumorchid',
69 | 'mediumorchid 1',
70 | 'mediumorchid 2',
71 | 'mediumorchid 3',
72 | 'mediumorchid 4',
73 | 'darkviolet',
74 | 'darkorchid',
75 | 'darkorchid 1',
76 | 'darkorchid 2',
77 | 'darkorchid 3',
78 | 'darkorchid 4',
79 | 'indigo',
80 | 'blueviolet',
81 | 'purple 1',
82 | 'purple 2',
83 | 'purple 3',
84 | 'purple 4',
85 | 'mediumpurple',
86 | 'mediumpurple 1',
87 | 'mediumpurple 2',
88 | 'mediumpurple 3',
89 | 'mediumpurple 4',
90 | 'darkslateblue',
91 | 'lightslateblue',
92 | 'mediumslateblue',
93 | 'slateblue',
94 | 'slateblue 1',
95 | 'slateblue 2',
96 | 'slateblue 3',
97 | 'slateblue 4',
98 | 'ghostwhite',
99 | 'lavender',
100 | 'blue',
101 | 'blue 2',
102 | 'blue 3',
103 | 'mediumblue',
104 | 'blue 4',
105 | 'darkblue',
106 | 'navy',
107 | 'midnightblue',
108 | 'cobalt',
109 | 'royalblue',
110 | 'royalblue 1',
111 | 'royalblue 2',
112 | 'royalblue 3',
113 | 'royalblue 4',
114 | 'cornflowerblue',
115 | 'lightsteelblue',
116 | 'lightsteelblue 1',
117 | 'lightsteelblue 2',
118 | 'lightsteelblue 3',
119 | 'lightsteelblue 4',
120 | 'lightslategray',
121 | 'slategray',
122 | 'slategray 1',
123 | 'slategray 2',
124 | 'slategray 3',
125 | 'slategray 4',
126 | 'dodgerblue 1',
127 | 'dodgerblue',
128 | 'dodgerblue 2',
129 | 'dodgerblue 3',
130 | 'dodgerblue 4',
131 | 'aliceblue',
132 | 'steelblue',
133 | 'steelblue 1',
134 | 'steelblue 2',
135 | 'steelblue 3',
136 | 'steelblue 4',
137 | 'lightskyblue',
138 | 'lightskyblue 1',
139 | 'lightskyblue 2',
140 | 'lightskyblue 3',
141 | 'lightskyblue 4',
142 | 'skyblue 1',
143 | 'skyblue 2',
144 | 'skyblue 3',
145 | 'skyblue 4',
146 | 'skyblue',
147 | 'deepskyblue 1',
148 | 'deepskyblue',
149 | 'deepskyblue 2',
150 | 'deepskyblue 3',
151 | 'deepskyblue 4',
152 | 'peacock',
153 | 'lightblue',
154 | 'lightblue 1',
155 | 'lightblue 2',
156 | 'lightblue 3',
157 | 'lightblue 4',
158 | 'powderblue',
159 | 'cadetblue 1',
160 | 'cadetblue 2',
161 | 'cadetblue 3',
162 | 'cadetblue 4',
163 | 'turquoise 1',
164 | 'turquoise 2',
165 | 'turquoise 3',
166 | 'turquoise 4',
167 | 'cadetblue',
168 | 'darkturquoise',
169 | 'azure 1',
170 | 'azure',
171 | 'azure 2',
172 | 'azure 3',
173 | 'azure 4',
174 | 'lightcyan 1',
175 | 'lightcyan',
176 | 'lightcyan 2',
177 | 'lightcyan 3',
178 | 'lightcyan 4',
179 | 'paleturquoise 1',
180 | 'paleturquoise 2',
181 | 'paleturquoise',
182 | 'paleturquoise 3',
183 | 'paleturquoise 4',
184 | 'darkslategray',
185 | 'darkslategray 1',
186 | 'darkslategray 2',
187 | 'darkslategray 3',
188 | 'darkslategray 4',
189 | 'cyan',
190 | 'aqua',
191 | 'cyan 2',
192 | 'cyan 3',
193 | 'cyan 4',
194 | 'darkcyan',
195 | 'teal',
196 | 'mediumturquoise',
197 | 'lightseagreen',
198 | 'manganeseblue',
199 | 'turquoise',
200 | 'coldgrey',
201 | 'turquoiseblue',
202 | 'aquamarine 1',
203 | 'aquamarine',
204 | 'aquamarine 2',
205 | 'aquamarine 3',
206 | 'mediumaquamarine',
207 | 'aquamarine 4',
208 | 'mediumspringgreen',
209 | 'mintcream',
210 | 'springgreen',
211 | 'springgreen 1',
212 | 'springgreen 2',
213 | 'springgreen 3',
214 | 'mediumseagreen',
215 | 'seagreen 1',
216 | 'seagreen 2',
217 | 'seagreen 3',
218 | 'seagreen 4',
219 | 'seagreen',
220 | 'emeraldgreen',
221 | 'mint',
222 | 'cobaltgreen',
223 | 'honeydew 1',
224 | 'honeydew',
225 | 'honeydew 2',
226 | 'honeydew 3',
227 | 'honeydew 4',
228 | 'darkseagreen',
229 | 'darkseagreen 1',
230 | 'darkseagreen 2',
231 | 'darkseagreen 3',
232 | 'darkseagreen 4',
233 | 'palegreen',
234 | 'palegreen 1',
235 | 'palegreen 2',
236 | 'lightgreen',
237 | 'palegreen 3',
238 | 'palegreen 4',
239 | 'limegreen',
240 | 'forestgreen',
241 | 'green 1',
242 | 'lime',
243 | 'green 2',
244 | 'green 3',
245 | 'green 4',
246 | 'green',
247 | 'darkgreen',
248 | 'sapgreen',
249 | 'lawngreen',
250 | 'chartreuse 1',
251 | 'chartreuse',
252 | 'chartreuse 2',
253 | 'chartreuse 3',
254 | 'chartreuse 4',
255 | 'greenyellow',
256 | 'darkolivegreen 1',
257 | 'darkolivegreen 2',
258 | 'darkolivegreen 3',
259 | 'darkolivegreen 4',
260 | 'darkolivegreen',
261 | 'olivedrab',
262 | 'olivedrab 1',
263 | 'olivedrab 2',
264 | 'olivedrab 3',
265 | 'yellowgreen',
266 | 'olivedrab 4',
267 | 'ivory 1',
268 | 'ivory',
269 | 'ivory 2',
270 | 'ivory 3',
271 | 'ivory 4',
272 | 'beige',
273 | 'lightyellow 1',
274 | 'lightyellow',
275 | 'lightyellow 2',
276 | 'lightyellow 3',
277 | 'lightyellow 4',
278 | 'lightgoldenrodyellow',
279 | 'yellow 1',
280 | 'yellow',
281 | 'yellow 2',
282 | 'yellow 3',
283 | 'yellow 4',
284 | 'warmgrey',
285 | 'olive',
286 | 'darkkhaki',
287 | 'khaki 1',
288 | 'khaki 2',
289 | 'khaki 3',
290 | 'khaki 4',
291 | 'khaki',
292 | 'palegoldenrod',
293 | 'lemonchiffon 1',
294 | 'lemonchiffon',
295 | 'lemonchiffon 2',
296 | 'lemonchiffon 3',
297 | 'lemonchiffon 4',
298 | 'lightgoldenrod 1',
299 | 'lightgoldenrod 2',
300 | 'lightgoldenrod 3',
301 | 'lightgoldenrod 4',
302 | 'banana',
303 | 'gold 1',
304 | 'gold',
305 | 'gold 2',
306 | 'gold 3',
307 | 'gold 4',
308 | 'cornsilk 1',
309 | 'cornsilk',
310 | 'cornsilk 2',
311 | 'cornsilk 3',
312 | 'cornsilk 4',
313 | 'goldenrod',
314 | 'goldenrod 1',
315 | 'goldenrod 2',
316 | 'goldenrod 3',
317 | 'goldenrod 4',
318 | 'darkgoldenrod',
319 | 'darkgoldenrod 1',
320 | 'darkgoldenrod 2',
321 | 'darkgoldenrod 3',
322 | 'darkgoldenrod 4',
323 | 'orange 1',
324 | 'orange',
325 | 'orange 2',
326 | 'orange 3',
327 | 'orange 4',
328 | 'floralwhite',
329 | 'oldlace',
330 | 'wheat',
331 | 'wheat 1',
332 | 'wheat 2',
333 | 'wheat 3',
334 | 'wheat 4',
335 | 'moccasin',
336 | 'papayawhip',
337 | 'blanchedalmond',
338 | 'navajowhite 1',
339 | 'navajowhite',
340 | 'navajowhite 2',
341 | 'navajowhite 3',
342 | 'navajowhite 4',
343 | 'eggshell',
344 | 'tan',
345 | 'brick',
346 | 'cadmiumyellow',
347 | 'antiquewhite',
348 | 'antiquewhite 1',
349 | 'antiquewhite 2',
350 | 'antiquewhite 3',
351 | 'antiquewhite 4',
352 | 'burlywood',
353 | 'burlywood 1',
354 | 'burlywood 2',
355 | 'burlywood 3',
356 | 'burlywood 4',
357 | 'bisque 1',
358 | 'bisque',
359 | 'bisque 2',
360 | 'bisque 3',
361 | 'bisque 4',
362 | 'melon',
363 | 'carrot',
364 | 'darkorange',
365 | 'darkorange 1',
366 | 'darkorange 2',
367 | 'darkorange 3',
368 | 'darkorange 4',
369 | 'tan 1',
370 | 'tan 2',
371 | 'tan 3',
372 | 'peru',
373 | 'tan 4',
374 | 'linen',
375 | 'peachpuff 1',
376 | 'peachpuff',
377 | 'peachpuff 2',
378 | 'peachpuff 3',
379 | 'peachpuff 4',
380 | 'seashell 1',
381 | 'seashell',
382 | 'seashell 2',
383 | 'seashell 3',
384 | 'seashell 4',
385 | 'sandybrown',
386 | 'rawsienna',
387 | 'chocolate',
388 | 'chocolate 1',
389 | 'chocolate 2',
390 | 'chocolate 3',
391 | 'chocolate 4',
392 | 'saddlebrown',
393 | 'ivoryblack',
394 | 'flesh',
395 | 'cadmiumorange',
396 | 'burntsienna',
397 | 'sienna',
398 | 'sienna 1',
399 | 'sienna 2',
400 | 'sienna 3',
401 | 'sienna 4',
402 | 'lightsalmon 1',
403 | 'lightsalmon',
404 | 'lightsalmon 2',
405 | 'lightsalmon 3',
406 | 'lightsalmon 4',
407 | 'coral',
408 | 'orangered 1',
409 | 'orangered',
410 | 'orangered 2',
411 | 'orangered 3',
412 | 'orangered 4',
413 | 'sepia',
414 | 'darksalmon',
415 | 'salmon 1',
416 | 'salmon 2',
417 | 'salmon 3',
418 | 'salmon 4',
419 | 'coral 1',
420 | 'coral 2',
421 | 'coral 3',
422 | 'coral 4',
423 | 'burntumber',
424 | 'tomato 1',
425 | 'tomato',
426 | 'tomato 2',
427 | 'tomato 3',
428 | 'tomato 4',
429 | 'salmon',
430 | 'mistyrose 1',
431 | 'mistyrose',
432 | 'mistyrose 2',
433 | 'mistyrose 3',
434 | 'mistyrose 4',
435 | 'snow 1',
436 | 'snow',
437 | 'snow 2',
438 | 'snow 3',
439 | 'snow 4',
440 | 'rosybrown',
441 | 'rosybrown 1',
442 | 'rosybrown 2',
443 | 'rosybrown 3',
444 | 'rosybrown 4',
445 | 'lightcoral',
446 | 'indianred',
447 | 'indianred 1',
448 | 'indianred 2',
449 | 'indianred 4',
450 | 'indianred 3',
451 | 'brown',
452 | 'brown 1',
453 | 'brown 2',
454 | 'brown 3',
455 | 'brown 4',
456 | 'firebrick',
457 | 'firebrick 1',
458 | 'firebrick 2',
459 | 'firebrick 3',
460 | 'firebrick 4',
461 | 'red 1',
462 | 'red',
463 | 'red 2',
464 | 'red 3',
465 | 'red 4',
466 | 'darkred',
467 | 'maroon',
468 | 'sgi beet',
469 | 'sgi slateblue',
470 | 'sgi lightblue',
471 | 'sgi teal',
472 | 'sgi chartreuse',
473 | 'sgi olivedrab',
474 | 'sgi brightgray',
475 | 'sgi salmon',
476 | 'sgi darkgray',
477 | 'sgi gray 12',
478 | 'sgi gray 16',
479 | 'sgi gray 32',
480 | 'sgi gray 36',
481 | 'sgi gray 52',
482 | 'sgi gray 56',
483 | 'sgi lightgray',
484 | 'sgi gray 72',
485 | 'sgi gray 76',
486 | 'sgi gray 92',
487 | 'sgi gray 96',
488 | 'white',
489 | 'white smoke',
490 | 'gray 96',
491 | 'gainsboro',
492 | 'lightgrey',
493 | 'silver',
494 | 'darkgray',
495 | 'gray',
496 | 'dimgray',
497 | 'gray 42',
498 | 'black',
499 | 'gray 99',
500 | 'gray 98',
501 | 'gray 97',
502 | 'gray 95',
503 | 'gray 94',
504 | 'gray 93',
505 | 'gray 92',
506 | 'gray 91',
507 | 'gray 90',
508 | 'gray 89',
509 | 'gray 88',
510 | 'gray 87',
511 | 'gray 86',
512 | 'gray 85',
513 | 'gray 84',
514 | 'gray 83',
515 | 'gray 82',
516 | 'gray 81',
517 | 'gray 80',
518 | 'gray 79',
519 | 'gray 78',
520 | 'gray 77',
521 | 'gray 76',
522 | 'gray 75',
523 | 'gray 74',
524 | 'gray 73',
525 | 'gray 72',
526 | 'gray 71',
527 | 'gray 70',
528 | 'gray 69',
529 | 'gray 68',
530 | 'gray 67',
531 | 'gray 66',
532 | 'gray 65',
533 | 'gray 64',
534 | 'gray 63',
535 | 'gray 62',
536 | 'gray 61',
537 | 'gray 60',
538 | 'gray 59',
539 | 'gray 58',
540 | 'gray 57',
541 | 'gray 56',
542 | 'gray 55',
543 | 'gray 54',
544 | 'gray 53',
545 | 'gray 52',
546 | 'gray 51',
547 | 'gray 50',
548 | 'gray 49',
549 | 'gray 48',
550 | 'gray 47',
551 | 'gray 46',
552 | 'gray 45',
553 | 'gray 44',
554 | 'gray 43',
555 | 'gray 40',
556 | 'gray 39',
557 | 'gray 38',
558 | 'gray 37',
559 | 'gray 36',
560 | 'gray 35',
561 | 'gray 34',
562 | 'gray 33',
563 | 'gray 32',
564 | 'gray 31',
565 | 'gray 30',
566 | 'gray 29',
567 | 'gray 28',
568 | 'gray 27',
569 | 'gray 26',
570 | 'gray 25',
571 | 'gray 24',
572 | 'gray 23',
573 | 'gray 22',
574 | 'gray 21',
575 | 'gray 20',
576 | 'gray 19',
577 | 'gray 18',
578 | 'gray 17',
579 | 'gray 16',
580 | 'gray 15',
581 | 'gray 14',
582 | 'gray 13',
583 | 'gray 12',
584 | 'gray 11',
585 | 'gray 10',
586 | 'gray 9',
587 | 'gray 8',
588 | 'gray 7',
589 | 'gray 6',
590 | 'gray 5',
591 | 'gray 4',
592 | 'gray 3',
593 | 'gray 2',
594 | 'gray 1',
595 | 'whitesmoke'
596 | ])
597 |
598 | export const validateColor = (str = '') =>
599 | /#\d{3,6}|rgba{0,1}\(.*?\)/gi.test(str) || colors.has(str.toLowerCase())
600 |
--------------------------------------------------------------------------------