hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Lint and fix issues, don't add linting yet though (#293)

Browse Source 
* Lint and fix issue, don't add linting yet though

* Clean up

* Remove /about href
main
Michael Fix 7 years ago committed by GitHub
parent 083a0e8441
commit 5a4cdd7d7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 1279 additions and 1228 deletions
Show Stats Download Patch File Download Diff File

12
components/BackgroundSelect.js
Unescape Escape View File

@ -10,7 +10,7 @@ import { parseRGBA, capitalizeFirstLetter } from '../lib/util'
class BackgroundSelect extends React.PureComponent { class BackgroundSelect extends React.PureComponent {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { isVisible: false, selectedTab: 'color', mounted: false } this.state = { isVisible: false, mounted: false }
this.toggle = this.toggle.bind(this) this.toggle = this.toggle.bind(this)
this.selectTab = this.selectTab.bind(this) this.selectTab = this.selectTab.bind(this)
this.handlePickColor = this.handlePickColor.bind(this) this.handlePickColor = this.handlePickColor.bind(this)
@ -69,9 +69,9 @@ class BackgroundSelect extends React.PureComponent {
<div className="bg-select-pickers" hidden={!this.state.isVisible}> <div className="bg-select-pickers" hidden={!this.state.isVisible}>
<WindowPointer fromLeft="15px" /> <WindowPointer fromLeft="15px" />
<div className="picker-tabs"> <div className="picker-tabs">
{['color', 'image'].map((tab, i) => ( {['color', 'image'].map(tab => (
<div <div
key={i} key={tab}
className={`picker-tab ${this.props.mode === tab ? 'active' : ''}`} className={`picker-tab ${this.props.mode === tab ? 'active' : ''}`}
onClick={this.selectTab.bind(null, tab)} onClick={this.selectTab.bind(null, tab)}
> >
@ -94,7 +94,8 @@ class BackgroundSelect extends React.PureComponent {
</div> </div>
</div> </div>
</div> </div>
<style jsx>{` <style jsx>
{`
.bg-select-container { .bg-select-container {
height: 100%; height: 100%;
} }
@ -205,7 +206,8 @@ class BackgroundSelect extends React.PureComponent {
.bg-select-pickers :global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) { .bg-select-pickers :global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) {
background: #fff; background: #fff;
} }
`}</style> `}
</style>
</div> </div>
) )
} }

6
components/Button.js
Unescape Escape View File

@ -12,7 +12,8 @@ export default props => (
}} }}
> >
<span>{props.title}</span> <span>{props.title}</span>
<style jsx>{` <style jsx>
{`
button { button {
cursor: pointer; cursor: pointer;
outline: none; outline: none;
@ -30,6 +31,7 @@ export default props => (
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;
} }
`}</style> `}
</style>
</button> </button>
) )

23
components/Carbon.js
Unescape Escape View File

@ -1,23 +1,14 @@
import { EOL } from 'os'
import * as hljs from 'highlight.js' import * as hljs from 'highlight.js'
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import Spinner from 'react-spinner' import Spinner from 'react-spinner'
import ResizeObserver from 'resize-observer-polyfill' import ResizeObserver from 'resize-observer-polyfill'
import toHash from 'tohash'
import debounce from 'lodash.debounce' import debounce from 'lodash.debounce'
import ms from 'ms' import ms from 'ms'
import WindowControls from '../components/WindowControls' import WindowControls from '../components/WindowControls'
import Watermark from '../components/svg/Watermark' import Watermark from '../components/svg/Watermark'
import CodeMirror from '../lib/react-codemirror' import CodeMirror from '../lib/react-codemirror'
import { import { COLORS, LANGUAGE_MODE_HASH, LANGUAGE_NAME_HASH, DEFAULT_SETTINGS } from '../lib/constants'
COLORS,
DEFAULT_LANGUAGE,
LANGUAGES,
LANGUAGE_MODE_HASH,
LANGUAGE_NAME_HASH,
DEFAULT_SETTINGS
} from '../lib/constants'
class Carbon extends PureComponent { class Carbon extends PureComponent {
constructor(props) { constructor(props) {
@ -130,7 +121,8 @@ class Carbon extends PureComponent {
<div className="alpha eliminateOnRender" /> <div className="alpha eliminateOnRender" />
<div className="bg" /> <div className="bg" />
</div> </div>
<style jsx>{` <style jsx>
{`
#container { #container {
position: relative; position: relative;
min-width: ${config.widthAdjustment ? '90px' : '680px'}; min-width: ${config.widthAdjustment ? '90px' : '680px'};
@ -243,7 +235,8 @@ class Carbon extends PureComponent {
#container :global(.window-controls + .CodeMirror__container > .CodeMirror) { #container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
padding-top: 48px; padding-top: 48px;
} }
`}</style> `}
</style>
</div> </div>
) )
} }
@ -254,7 +247,8 @@ class Carbon extends PureComponent {
{content} {content}
<div id="twitter-png-fix" /> <div id="twitter-png-fix" />
</div> </div>
<style jsx>{` <style jsx>
{`
#section, #section,
#export-container { #export-container {
height: 100%; height: 100%;
@ -271,7 +265,8 @@ class Carbon extends PureComponent {
width: 100%; width: 100%;
background: rgba(0, 0, 0, 0.01); background: rgba(0, 0, 0, 0.01);
} }
`}</style> `}
</style>
</div> </div>
) )
} }

1
components/Collapse.js
Unescape Escape View File

@ -1,6 +1,5 @@
import React from 'react' import React from 'react'
import Toggle from './Toggle' import Toggle from './Toggle'
import Arrowdown from './svg/Arrowdown'
class Collapse extends React.Component { class Collapse extends React.Component {
constructor(props) { constructor(props) {

37
components/Dropdown.js
Unescape Escape View File

@ -10,13 +10,10 @@ class Dropdown extends PureComponent {
inputValue: this.props.selected.name, inputValue: this.props.selected.name,
itemsToShow: this.props.list itemsToShow: this.props.list
} }
userInputtedValue = ''
onUserAction = changes => { onUserAction = changes => {
this.setState(({ inputValue, itemsToShow }) => { this.setState(({ inputValue, itemsToShow }) => {
const clearUserInput = changes.hasOwnProperty('isOpen') if (Object.prototype.hasOwnProperty.call(changes, 'inputValue')) {
if (changes.hasOwnProperty('inputValue')) {
if (changes.type === Downshift.stateChangeTypes.keyDownEscape) { if (changes.type === Downshift.stateChangeTypes.keyDownEscape) {
inputValue = this.userInputtedValue inputValue = this.userInputtedValue
} else { } else {
@ -30,7 +27,7 @@ class Dropdown extends PureComponent {
: this.props.list : this.props.list
if ( if (
changes.hasOwnProperty('highlightedIndex') && Object.prototype.hasOwnProperty.call(changes, 'highlightedIndex') &&
(changes.type === Downshift.stateChangeTypes.keyDownArrowUp || (changes.type === Downshift.stateChangeTypes.keyDownArrowUp ||
changes.type === Downshift.stateChangeTypes.keyDownArrowDown) changes.type === Downshift.stateChangeTypes.keyDownArrowDown)
) { ) {
@ -38,7 +35,7 @@ class Dropdown extends PureComponent {
this.props.onChange(itemsToShow[changes.highlightedIndex]) this.props.onChange(itemsToShow[changes.highlightedIndex])
} }
if (changes.hasOwnProperty('isOpen')) { if (Object.prototype.hasOwnProperty.call(changes, 'isOpen')) {
this.userInputtedValue = '' this.userInputtedValue = ''
// clear on open // clear on open
@ -56,6 +53,8 @@ class Dropdown extends PureComponent {
}) })
} }
userInputtedValue = ''
render() { render() {
const { button, color, list, selected, onChange } = this.props const { button, color, list, selected, onChange } = this.props
@ -122,13 +121,15 @@ const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
return ( return (
<div {...rest} ref={innerRef} className="dropdown-container"> <div {...rest} ref={innerRef} className="dropdown-container">
{children} {children}
<style jsx>{` <style jsx>
{`
.dropdown-container { .dropdown-container {
min-width: ${minWidth}px; min-width: ${minWidth}px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
`}</style> `}
</style>
</div> </div>
) )
} }
@ -150,10 +151,11 @@ const SelectedItem = ({ getButtonProps, getInputProps, children, isOpen, color,
className="dropdown-display-text" className="dropdown-display-text"
/> />
)} )}
<div role="button" className={`dropdown-arrow`}> <div role="button" className="dropdown-arrow">
<ArrowDown fill={itemColor} /> <ArrowDown fill={itemColor} />
</div> </div>
<style jsx>{` <style jsx>
{`
.dropdown-display { .dropdown-display {
display: flex; display: flex;
align-items: center; align-items: center;
@ -183,7 +185,8 @@ const SelectedItem = ({ getButtonProps, getInputProps, children, isOpen, color,
.is-open > .dropdown-arrow { .is-open > .dropdown-arrow {
transform: rotate(180deg); transform: rotate(180deg);
} }
`}</style> `}
</style>
</span> </span>
) )
} }
@ -192,7 +195,8 @@ const ListItems = ({ children, color }) => {
return ( return (
<ul role="listbox" className="dropdown-list"> <ul role="listbox" className="dropdown-list">
{children} {children}
<style jsx>{` <style jsx>
{`
.dropdown-list { .dropdown-list {
margin-top: -1px; margin-top: -1px;
border: 1px solid ${color || COLORS.SECONDARY}; border: 1px solid ${color || COLORS.SECONDARY};
@ -200,7 +204,8 @@ const ListItems = ({ children, color }) => {
max-height: 350px; max-height: 350px;
overflow-y: scroll; overflow-y: scroll;
} }
`}</style> `}
</style>
</ul> </ul>
) )
} }
@ -212,7 +217,8 @@ const ListItem = ({ children, color, isHighlighted, isSelected, ...rest }) => {
<li {...rest} role="option" className="dropdown-list-item"> <li {...rest} role="option" className="dropdown-list-item">
<span className="dropdown-list-item-text">{children}</span> <span className="dropdown-list-item-text">{children}</span>
{isSelected ? <CheckMark /> : null} {isSelected ? <CheckMark /> : null}
<style jsx>{` <style jsx>
{`
.dropdown-list-item { .dropdown-list-item {
display: flex; display: flex;
align-items: center; align-items: center;
@ -232,7 +238,8 @@ const ListItem = ({ children, color, isHighlighted, isSelected, ...rest }) => {
flex-grow: 1; flex-grow: 1;
color: ${itemColor}; color: ${itemColor};
} }
`}</style> `}
</style>
</li> </li>
) )
} }

27
components/ExportSizeSelect.js
Unescape Escape View File

@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import { COLORS } from '../lib/constants'
import Checkmark from './svg/Checkmark' import Checkmark from './svg/Checkmark'
import { EXPORT_SIZES } from '../lib/constants' import { EXPORT_SIZES, COLORS } from '../lib/constants'
export default class extends React.Component { export default class extends React.Component {
constructor(props) { constructor(props) {
@ -22,12 +21,16 @@ export default class extends React.Component {
} }
renderExportSizes() { renderExportSizes() {
return EXPORT_SIZES.map((exportSize, i) => { return EXPORT_SIZES.map(exportSize => (
return ( <div
<div className="list-item" key={i} onClick={this.select.bind(null, exportSize.id)}> className="list-item"
key={exportSize.id}
onClick={this.select.bind(null, exportSize.id)}
>
<span style={{ ExportSize: exportSize.id }}>{exportSize.name}</span> <span style={{ ExportSize: exportSize.id }}>{exportSize.name}</span>
{this.props.selected === exportSize.id ? <Checkmark /> : null} {this.props.selected === exportSize.id ? <Checkmark /> : null}
<style jsx>{` <style jsx>
{`
.list-item { .list-item {
display: flex; display: flex;
align-items: center; align-items: center;
@ -44,10 +47,10 @@ export default class extends React.Component {
.list-item:last-of-type { .list-item:last-of-type {
border-bottom: none; border-bottom: none;
} }
`}</style> `}
</style>
</div> </div>
) ))
})
} }
render() { render() {
@ -63,7 +66,8 @@ export default class extends React.Component {
<span style={{ exportSize: selectedExportSize.id }}>{selectedExportSize.name}</span> <span style={{ exportSize: selectedExportSize.id }}>{selectedExportSize.name}</span>
</div> </div>
<div className="list">{this.renderExportSizes()}</div> <div className="list">{this.renderExportSizes()}</div>
<style jsx>{` <style jsx>
{`
.display { .display {
display: flex; display: flex;
align-items: center; align-items: center;
@ -81,7 +85,8 @@ export default class extends React.Component {
.is-visible + .list { .is-visible + .list {
display: block; display: block;
} }
`}</style> `}
</style>
</div> </div>
) )
} }

16
components/FontSelect.js
Unescape Escape View File

@ -21,11 +21,12 @@ export default class extends React.Component {
} }
renderListItems() { renderListItems() {
return FONTS.map((font, i) => ( return FONTS.map(font => (
<div className="list-item" key={i} onClick={this.select.bind(null, font.id)}> <div className="list-item" key={font.id} onClick={this.select.bind(null, font.id)}>
<span style={{ fontFamily: font.id }}>{font.name}</span> <span style={{ fontFamily: font.id }}>{font.name}</span>
{this.props.selected === font.id ? <Checkmark /> : null} {this.props.selected === font.id ? <Checkmark /> : null}
<style jsx>{` <style jsx>
{`
.list-item { .list-item {
display: flex; display: flex;
align-items: center; align-items: center;
@ -42,7 +43,8 @@ export default class extends React.Component {
.list-item:last-of-type { .list-item:last-of-type {
border-bottom: none; border-bottom: none;
} }
`}</style> `}
</style>
</div> </div>
)) ))
} }
@ -59,7 +61,8 @@ export default class extends React.Component {
<span style={{ fontFamily: selectedFont.id }}>{selectedFont.name}</span> <span style={{ fontFamily: selectedFont.id }}>{selectedFont.name}</span>
</div> </div>
<div className="list">{this.renderListItems()}</div> <div className="list">{this.renderListItems()}</div>
<style jsx>{` <style jsx>
{`
.display { .display {
display: flex; display: flex;
align-items: center; align-items: center;
@ -77,7 +80,8 @@ export default class extends React.Component {
.is-visible + .list { .is-visible + .list {
display: block; display: block;
} }
`}</style> `}
</style>
</div> </div>
) )
} }

8
components/Footer.js
Unescape Escape View File

@ -4,7 +4,7 @@ import { COLORS } from '../lib/constants'
const Footer = () => ( const Footer = () => (
<footer role="contentinfo" className="mt3"> <footer role="contentinfo" className="mt3">
<nav role="navigation" className="mt3"> <nav className="mt3">
<Link href="/about"> <Link href="/about">
<a className="link">about</a> <a className="link">about</a>
</Link> </Link>
@ -22,7 +22,8 @@ const Footer = () => (
</a>{' '} </a>{' '}
¬ ¬
</div> </div>
<style jsx>{` <style jsx>
{`
footer { footer {
font-size: 14px; font-size: 14px;
} }
@ -48,7 +49,8 @@ const Footer = () => (
.dawn-link:hover { .dawn-link:hover {
color: #fff; color: #fff;
} }
`}</style> `}
</style>
</footer> </footer>
) )

6
components/Header.js
Unescape Escape View File

@ -14,7 +14,8 @@ const Header = ({ enableHeroText }) => (
</h2> </h2>
) : null} ) : null}
</div> </div>
<style jsx>{` <style jsx>
{`
.header { .header {
width: 656px; width: 656px;
} }
@ -32,7 +33,8 @@ const Header = ({ enableHeroText }) => (
h2 { h2 {
text-align: center; text-align: center;
} }
`}</style> `}
</style>
</header> </header>
) )

68
components/ImagePicker.js
Unescape Escape View File

@ -1,9 +1,7 @@
import React from 'react' import React from 'react'
import ReactCrop, { makeAspectCrop } from 'react-image-crop' import ReactCrop, { makeAspectCrop } from 'react-image-crop'
import Slider from './Slider'
import RandomImage from './RandomImage' import RandomImage from './RandomImage'
import { COLORS } from '../lib/constants'
import { fileToDataURL } from '../lib/util' import { fileToDataURL } from '../lib/util'
const getCroppedImg = (imageDataURL, pixelCrop) => { const getCroppedImg = (imageDataURL, pixelCrop) => {
@ -12,7 +10,7 @@ const getCroppedImg = (imageDataURL, pixelCrop) => {
canvas.height = pixelCrop.height canvas.height = pixelCrop.height
const ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
return new Promise((resolve, reject) => { return new Promise(resolve => {
const image = new Image() const image = new Image()
image.src = imageDataURL image.src = imageDataURL
image.onload = () => { image.onload = () => {
@ -47,7 +45,7 @@ export default class extends React.Component {
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (this.state.crop && this.props.aspectRatio != nextProps.aspectRatio) { if (this.state.crop && this.props.aspectRatio !== nextProps.aspectRatio) {
// update crop for editor container aspect-ratio change // update crop for editor container aspect-ratio change
this.setState({ this.setState({
crop: makeAspectCrop( crop: makeAspectCrop(
@ -61,20 +59,17 @@ export default class extends React.Component {
} }
} }
selectImage(e) { async onDragEnd() {
const file = e.target ? e.target.files[0] : e if (this.state.pixelCrop) {
const croppedImg = await getCroppedImg(this.props.imageDataURL, this.state.pixelCrop)
return fileToDataURL(file).then(dataURL => this.props.onChange({ backgroundImageSelection: croppedImg })
this.props.onChange({ backgroundImage: dataURL, backgroundImageSelection: null }) }
)
} }
removeImage() { onCropChange(crop, pixelCrop) {
this.setState(INITIAL_STATE, () => { this.setState({
this.props.onChange({ crop: { ...crop, aspect: this.props.aspectRatio },
backgroundImage: null, pixelCrop
backgroundImageSelection: null
})
}) })
} }
@ -93,18 +88,21 @@ export default class extends React.Component {
}) })
} }
onCropChange(crop, pixelCrop) { selectImage(e) {
this.setState({ const file = e.target ? e.target.files[0] : e
crop: { ...crop, aspect: this.props.aspectRatio },
pixelCrop
})
}
async onDragEnd() { return fileToDataURL(file).then(dataURL =>
if (this.state.pixelCrop) { this.props.onChange({ backgroundImage: dataURL, backgroundImageSelection: null })
const croppedImg = await getCroppedImg(this.props.imageDataURL, this.state.pixelCrop) )
this.props.onChange({ backgroundImageSelection: croppedImg })
} }
removeImage() {
this.setState(INITIAL_STATE, () => {
this.props.onChange({
backgroundImage: null,
backgroundImageSelection: null
})
})
} }
render() { render() {
@ -125,7 +123,8 @@ export default class extends React.Component {
</span> </span>
<RandomImage onChange={this.selectImage} /> <RandomImage onChange={this.selectImage} />
</div> </div>
<style jsx>{` <style jsx>
{`
.choose-image, .choose-image,
.random-image { .random-image {
padding: 8px; padding: 8px;
@ -149,7 +148,8 @@ export default class extends React.Component {
border-bottom: none; border-bottom: none;
margin-bottom: 0; margin-bottom: 0;
} }
`}</style> `}
</style>
</div> </div>
) )
@ -174,7 +174,8 @@ export default class extends React.Component {
keepSelection keepSelection
/> />
</div> </div>
<style jsx>{` <style jsx>
{`
.settings-container img { .settings-container img {
width: 100%; width: 100%;
} }
@ -198,7 +199,8 @@ export default class extends React.Component {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
`}</style> `}
</style>
</div> </div>
) )
} }
@ -206,11 +208,13 @@ export default class extends React.Component {
return ( return (
<div> <div>
<div className="image-picker-container">{content}</div> <div className="image-picker-container">{content}</div>
<style jsx>{` <style jsx>
{`
.image-picker-container { .image-picker-container {
font-size: 12px; font-size: 12px;
} }
`}</style> `}
</style>
</div> </div>
) )
} }

1
components/Language.js
Unescape Escape View File

@ -1,5 +1,4 @@
import React from 'react' import React from 'react'
import { Controls, ControlsBW } from './svg/Controls'
export default ({ language }) => ( export default ({ language }) => (
<div className="language"> <div className="language">

14
components/Meta.js
Unescape Escape View File

@ -1,5 +1,5 @@
import Head from 'next/head' import Head from 'next/head'
import { THEMES, COLORS } from '../lib/constants' import { THEMES } from '../lib/constants'
import Reset from './style/Reset' import Reset from './style/Reset'
import Font from './style/Font' import Font from './style/Font'
import Typography from './style/Typography' import Typography from './style/Typography'
@ -39,11 +39,11 @@ export default () => (
/> />
<link <link
rel="stylesheet" rel="stylesheet"
href={`//cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/solarized.min.css`} href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/solarized.min.css"
/> />
{THEMES.filter(t => t.hasStylesheet !== false).map((theme, i) => ( {THEMES.filter(t => t.hasStylesheet !== false).map(theme => (
<link <link
key={i} key={theme.id}
rel="stylesheet" rel="stylesheet"
href={ href={
theme.link || theme.link ||
@ -55,10 +55,12 @@ export default () => (
<Reset /> <Reset />
<Font /> <Font />
<Typography /> <Typography />
<style jsx>{` <style jsx>
{`
.meta { .meta {
display: none; display: none;
} }
`}</style> `}
</style>
</div> </div>
) )

6
components/Overlay.js
Unescape Escape View File

@ -2,7 +2,8 @@ const Overlay = props => (
<div className="dnd-container"> <div className="dnd-container">
{props.isOver ? <div className="dnd-overlay">{props.title}</div> : null} {props.isOver ? <div className="dnd-overlay">{props.title}</div> : null}
{props.children} {props.children}
<style jsx>{` <style jsx>
{`
.dnd-container { .dnd-container {
position: relative; position: relative;
} }
@ -20,7 +21,8 @@ const Overlay = props => (
left: 0; left: 0;
background: rgba(0, 0, 0, 0.85); background: rgba(0, 0, 0, 0.85);
} }
`}</style> `}
</style>
</div> </div>
) )

6
components/Page.js
Unescape Escape View File

@ -11,13 +11,15 @@ export default ({ children, enableHeroText }) => (
<Footer /> <Footer />
<style jsx>{` <style jsx>
{`
.main { .main {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
`}</style> `}
</style>
</main> </main>
) )

17
components/RandomImage.js
Unescape Escape View File

@ -10,9 +10,8 @@ const WALLPAPER_COLLECTION_ID = 136026
const RANDOM_WALLPAPER_URL = `https://source.unsplash.com/collection/${WALLPAPER_COLLECTION_ID}/240x320` const RANDOM_WALLPAPER_URL = `https://source.unsplash.com/collection/${WALLPAPER_COLLECTION_ID}/240x320`
const largerImage = url => url.replace(/w=\d+/, 'w=1920').replace(/&h=\d+/, '') const largerImage = url => url.replace(/w=\d+/, 'w=1920').replace(/&h=\d+/, '')
const smallerImage = url => url.replace(/w=\d+/, 'w=240')
export default class extends React.Component { export default class RandomImage extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { cacheIndex: 0, loading: false } this.state = { cacheIndex: 0, loading: false }
@ -22,9 +21,6 @@ export default class extends React.Component {
this.nextImage = this.nextImage.bind(this) this.nextImage = this.nextImage.bind(this)
} }
cache = []
imageUrls = {}
// fetch images in browser (we require window.FileReader) // fetch images in browser (we require window.FileReader)
componentDidMount() { componentDidMount() {
// clear cache when remounted // clear cache when remounted
@ -39,7 +35,7 @@ export default class extends React.Component {
const res = await axios.get(`${RANDOM_WALLPAPER_URL}?sig=${sig}`, { responseType: 'blob' }) const res = await axios.get(`${RANDOM_WALLPAPER_URL}?sig=${sig}`, { responseType: 'blob' })
// image already in cache? // image already in cache?
if (this.imageUrls[res.request.responseURL]) return if (this.imageUrls[res.request.responseURL]) return undefined
this.imageUrls[res.request.responseURL] = true this.imageUrls[res.request.responseURL] = true
return { return {
@ -48,6 +44,9 @@ export default class extends React.Component {
} }
} }
cache = []
imageUrls = {}
selectImage() { selectImage() {
this.setState({ loading: true }) this.setState({ loading: true })
axios axios
@ -85,7 +84,8 @@ export default class extends React.Component {
<span onClick={this.nextImage}>Try Another</span> <span onClick={this.nextImage}>Try Another</span>
</div> </div>
<div className="image">{this.state.loading && <Spinner />}</div> <div className="image">{this.state.loading && <Spinner />}</div>
<style jsx>{` <style jsx>
{`
.image { .image {
width: 100%; width: 100%;
height: 120px; height: 120px;
@ -105,7 +105,8 @@ export default class extends React.Component {
cursor: ${this.state.loading ? 'not-allowed' : 'pointer'}; cursor: ${this.state.loading ? 'not-allowed' : 'pointer'};
user-select: none; user-select: none;
} }
`}</style> `}
</style>
</div> </div>
) )
} }

6
components/Settings.js
Unescape Escape View File

@ -116,7 +116,8 @@ class Settings extends React.Component {
/> />
</Collapse> </Collapse>
</div> </div>
<style jsx>{` <style jsx>
{`
.settings-container { .settings-container {
display: flex; display: flex;
position: relative; position: relative;
@ -171,7 +172,8 @@ class Settings extends React.Component {
.settings-settings > :global(.collapse) { .settings-settings > :global(.collapse) {
border-bottom: none; border-bottom: none;
} }
`}</style> `}
</style>
</div> </div>
) )
} }

8
components/Slider.js
Unescape Escape View File

@ -27,13 +27,14 @@ export default class extends React.Component {
<div <div
className="slider-bg" className="slider-bg"
style={{ style={{
transform: `translate3d(${(parseInt(this.props.value) - minValue) * transform: `translate3d(${(parseInt(this.props.value, 10) - minValue) *
1.0 / 1.0 /
(maxValue - minValue) * (maxValue - minValue) *
100}%, 0px, 0px)` 100}%, 0px, 0px)`
}} }}
/> />
<style jsx>{` <style jsx>
{`
.slider { .slider {
position: relative; position: relative;
height: 32px; height: 32px;
@ -69,7 +70,8 @@ export default class extends React.Component {
width: 100%; width: 100%;
background: rgba(255, 255, 255, 0.165); background: rgba(255, 255, 255, 0.165);
} }
`}</style> `}
</style>
</div> </div>
) )
} }

16
components/ThemeSelect.js
Unescape Escape View File

@ -18,16 +18,17 @@ export default class extends React.Component {
} }
renderThemes() { renderThemes() {
return WINDOW_THEMES.map((theme, i) => { return WINDOW_THEMES.map(theme => {
const Img = WINDOW_THEMES_MAP[theme] const Img = WINDOW_THEMES_MAP[theme]
return ( return (
<div <div
className={`theme ${this.props.selected === theme ? 'selected' : ''}`} className={`theme ${this.props.selected === theme ? 'selected' : ''}`}
key={i} key={theme}
onClick={this.select.bind(null, theme)} onClick={this.select.bind(null, theme)}
> >
<Img /> <Img />
<style jsx>{` <style jsx>
{`
.theme { .theme {
cursor: pointer; cursor: pointer;
margin-right: 8px; margin-right: 8px;
@ -41,7 +42,8 @@ export default class extends React.Component {
border-radius: 3px; border-radius: 3px;
border: solid 2px ${COLORS.SECONDARY}; border: solid 2px ${COLORS.SECONDARY};
} }
`}</style> `}
</style>
</div> </div>
) )
}) })
@ -52,7 +54,8 @@ export default class extends React.Component {
<div className="window-theme"> <div className="window-theme">
<span className="label">Window theme</span> <span className="label">Window theme</span>
<div className="themes">{this.renderThemes()}</div> <div className="themes">{this.renderThemes()}</div>
<style jsx>{` <style jsx>
{`
.window-theme { .window-theme {
padding: 8px; padding: 8px;
} }
@ -67,7 +70,8 @@ export default class extends React.Component {
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
} }
`}</style> `}
</style>
</div> </div>
) )
} }

8
components/Toggle.js
Unescape Escape View File

@ -13,10 +13,11 @@ export default class extends React.Component {
render() { render() {
return ( return (
<div className={'toggle ' + this.props.className} onClick={this.toggle}> <div className={`toggle ${this.props.className}`} onClick={this.toggle}>
<span className="label">{this.props.label}</span> <span className="label">{this.props.label}</span>
{this.props.enabled ? <Checkmark /> : null} {this.props.enabled ? <Checkmark /> : null}
<style jsx>{` <style jsx>
{`
.toggle { .toggle {
display: flex; display: flex;
align-items: center; align-items: center;
@ -25,7 +26,8 @@ export default class extends React.Component {
user-select: none; user-select: none;
padding: 8px; padding: 8px;
} }
`}</style> `}
</style>
</div> </div>
) )
} }

7
components/Toolbar.js
Unescape Escape View File

@ -1,8 +1,10 @@
import React from 'react' import React from 'react'
const Toolbar = props => ( const Toolbar = props => (
<div id="toolbar"> <div id="toolbar">
{props.children} {props.children}
<style jsx>{` <style jsx>
{`
#toolbar { #toolbar {
width: 100%; width: 100%;
height: 40px; // TODO fix height: 40px; // TODO fix
@ -21,7 +23,8 @@ const Toolbar = props => (
#toolbar > :global(div):last-child { #toolbar > :global(div):last-child {
margin-right: 0px; margin-right: 0px;
} }
`}</style> `}
</style>
</div> </div>
) )

6
components/WindowPointer.js
Unescape Escape View File

@ -3,7 +3,8 @@ import React from 'react'
export default ({ fromLeft }) => ( export default ({ fromLeft }) => (
<div style={{ left: fromLeft }}> <div style={{ left: fromLeft }}>
<div className="window-pointer" /> <div className="window-pointer" />
<style jsx>{` <style jsx>
{`
.window-pointer { .window-pointer {
width: 0px; width: 0px;
height: 0px; height: 0px;
@ -14,6 +15,7 @@ export default ({ fromLeft }) => (
top: -5px; top: -5px;
left: 15px; left: 15px;
} }
`}</style> `}
</style>
</div> </div>
) )

26
components/style/Font.js
Unescape Escape View File

@ -1,5 +1,6 @@
export default () => ( export default () => (
<style jsx global>{` <style jsx global>
{`
@font-face { @font-face {
font-family: 'Iosevka'; font-family: 'Iosevka';
src: url('//cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-iosevka-term-bold.woff') src: url('//cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-iosevka-term-bold.woff')
@ -36,8 +37,8 @@ export default () => (
src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'), src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'),
url(//fonts.gstatic.com/s/anonymouspro/v11/Zhfjj_gat3waL4JSju74E3n3cbdKJftHIk87C9ihfO8.woff2) url(//fonts.gstatic.com/s/anonymouspro/v11/Zhfjj_gat3waL4JSju74E3n3cbdKJftHIk87C9ihfO8.woff2)
format('woff2'); format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, unicode-range: U + 0000-00ff, U + 0131, U + 0152-0153, U + 02bb-02bc, U + 02c6, U + 02da,
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215; U + 02dc, U + 2000-206f, U + 2074, U + 20ac, U + 2122, U + 2212, U + 2215;
} }
/* latin */ /* latin */
@ -48,8 +49,8 @@ export default () => (
src: local('Droid Sans Mono Regular'), local('DroidSansMono-Regular'), src: local('Droid Sans Mono Regular'), local('DroidSansMono-Regular'),
url(//fonts.gstatic.com/s/droidsansmono/v9/ns-m2xQYezAtqh7ai59hJVlgUn8GogvcKKzoM9Dh-4E.woff2) url(//fonts.gstatic.com/s/droidsansmono/v9/ns-m2xQYezAtqh7ai59hJVlgUn8GogvcKKzoM9Dh-4E.woff2)
format('woff2'); format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, unicode-range: U + 0000-00ff, U + 0131, U + 0152-0153, U + 02bb-02bc, U + 02c6, U + 02da,
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215; U + 02dc, U + 2000-206f, U + 2074, U + 20ac, U + 2122, U + 2212, U + 2215;
} }
/* latin */ /* latin */
@ -60,8 +61,8 @@ export default () => (
src: local('Inconsolata Regular'), local('Inconsolata-Regular'), src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
url(//fonts.gstatic.com/s/inconsolata/v16/BjAYBlHtW3CJxDcjzrnZCIgp9Q8gbYrhqGlRav_IXfk.woff2) url(//fonts.gstatic.com/s/inconsolata/v16/BjAYBlHtW3CJxDcjzrnZCIgp9Q8gbYrhqGlRav_IXfk.woff2)
format('woff2'); format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, unicode-range: U + 0000-00ff, U + 0131, U + 0152-0153, U + 02bb-02bc, U + 02c6, U + 02da,
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215; U + 02dc, U + 2000-206f, U + 2074, U + 20ac, U + 2122, U + 2212, U + 2215;
} }
/* latin */ /* latin */
@ -72,8 +73,8 @@ export default () => (
src: local('Source Code Pro'), local('SourceCodePro-Regular'), src: local('Source Code Pro'), local('SourceCodePro-Regular'),
url(//fonts.gstatic.com/s/sourcecodepro/v7/mrl8jkM18OlOQN8JLgasD5bPFduIYtoLzwST68uhz_Y.woff2) url(//fonts.gstatic.com/s/sourcecodepro/v7/mrl8jkM18OlOQN8JLgasD5bPFduIYtoLzwST68uhz_Y.woff2)
format('woff2'); format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, unicode-range: U + 0000-00ff, U + 0131, U + 0152-0153, U + 02bb-02bc, U + 02c6, U + 02da,
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215; U + 02dc, U + 2000-206f, U + 2074, U + 20ac, U + 2122, U + 2212, U + 2215;
} }
/* latin */ /* latin */
@ -84,8 +85,9 @@ export default () => (
src: local('Ubuntu Mono'), local('UbuntuMono-Regular'), src: local('Ubuntu Mono'), local('UbuntuMono-Regular'),
url(//fonts.gstatic.com/s/ubuntumono/v7/ViZhet7Ak-LRXZMXzuAfkYgp9Q8gbYrhqGlRav_IXfk.woff2) url(//fonts.gstatic.com/s/ubuntumono/v7/ViZhet7Ak-LRXZMXzuAfkYgp9Q8gbYrhqGlRav_IXfk.woff2)
format('woff2'); format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, unicode-range: U + 0000-00ff, U + 0131, U + 0152-0153, U + 02bb-02bc, U + 02c6, U + 02da,
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215; U + 02dc, U + 2000-206f, U + 2074, U + 20ac, U + 2122, U + 2212, U + 2215;
} }
`}</style> `}
</style>
) )

6
components/style/Reset.js
Unescape Escape View File

@ -1,7 +1,8 @@
import { COLORS } from '../../lib/constants' import { COLORS } from '../../lib/constants'
export default () => ( export default () => (
<style jsx global>{` <style jsx global>
{`
/* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 v2.0 | 20110126
License: none (public domain) License: none (public domain)
@ -191,5 +192,6 @@ export default () => (
color: ${COLORS.PRIMARY}; color: ${COLORS.PRIMARY};
background: none; background: none;
} }
`}</style> `}
</style>
) )

6
components/style/Typography.js
Unescape Escape View File

@ -1,5 +1,6 @@
export default () => ( export default () => (
<style jsx global>{` <style jsx global>
{`
/* https://github.com/jxnblk/type-system /* https://github.com/jxnblk/type-system
Brent Jackson Brent Jackson
License: MIT License: MIT
@ -174,5 +175,6 @@ export default () => (
.bold { .bold {
font-weight: bold; font-weight: bold;
} }
`}</style> `}
</style>
) )

9
handlers/image.js
Unescape Escape View File

@ -1,22 +1,23 @@
/* global domtoimage */
const PORT = parseInt(process.env.PORT, 10) || 3000 const PORT = parseInt(process.env.PORT, 10) || 3000
const ARBITRARY_WAIT_TIME = 500 const ARBITRARY_WAIT_TIME = 500
module.exports = browser => async (req, res) => { module.exports = browser => async (req, res) => {
let page = await browser.newPage() const page = await browser.newPage()
let state = req.body.state const { state } = req.body
if (!state) res.status(400).send() if (!state) res.status(400).send()
try { try {
await page.goto(`http://localhost:${PORT}?state=${state}`) await page.goto(`http://localhost:${PORT}?state=${state}`)
await page.addScriptTag({ path: `./lib/customDomToImage.js` }) await page.addScriptTag({ path: './lib/customDomToImage.js' })
// wait for page to detect language // wait for page to detect language
await delay(ARBITRARY_WAIT_TIME) await delay(ARBITRARY_WAIT_TIME)
const targetElement = await page.$('#export-container') const targetElement = await page.$('#export-container')
let dataUrl = await page.evaluate(target => { const dataUrl = await page.evaluate(target => {
const config = { const config = {
style: { style: {
transform: 'scale(2)', transform: 'scale(2)',

4
handlers/twitter.js
Unescape Escape View File

@ -30,7 +30,7 @@ const respondFail = (res, err) => {
} }
console.error(`Error: ${err.message || JSON.stringify(err, null, 2)}`) console.error(`Error: ${err.message || JSON.stringify(err, null, 2)}`)
res.status(500).send() return res.status(500).send()
} }
module.exports = (req, res) => { module.exports = (req, res) => {
@ -38,7 +38,7 @@ module.exports = (req, res) => {
return res.status(400).send() return res.status(400).send()
} }
uploadImage(req.body.data) return uploadImage(req.body.data)
.then(uploadTweet) .then(uploadTweet)
.then(extractImageUrl) .then(extractImageUrl)
.then(respondSuccess.bind(null, res)) .then(respondSuccess.bind(null, res))

8
lib/api.js
Unescape Escape View File

@ -30,7 +30,7 @@ async function image(state) {
return axios.post(`${DOMAIN}/image`, { state }).then(res => res.data.dataUrl) return axios.post(`${DOMAIN}/image`, { state }).then(res => res.data.dataUrl)
} }
const getGist = uid => { function getGist(uid) {
return gistClient return gistClient
.get(`/gists/${uid}`) .get(`/gists/${uid}`)
.then(res => res.data) .then(res => res.data)
@ -41,10 +41,10 @@ const getGist = uid => {
// private // private
function openTwitterUrl(twitterUrl) { function openTwitterUrl(twitterUrl) {
const width = 575, const width = 575
height = 400 const height = 400
const left = (window.outerWidth - width) / 2 const left = (window.outerWidth - width) / 2
const right = (window.outerHeight - height) / 2 const top = (window.outerHeight - height) / 2
const opts = `status=1,width=${width},height=${height},top=${top},left=${left}` const opts = `status=1,width=${width},height=${height},top=${top},left=${left}`
window.open(twitterUrl, 'twitter', opts) window.open(twitterUrl, 'twitter', opts)

7
lib/colors.js
Unescape Escape View File

@ -1,4 +1,4 @@
const colors = new Set([ export const colors = new Set([
'indian red', 'indian red',
'crimson', 'crimson',
'lightpink', 'lightpink',
@ -595,6 +595,5 @@ const colors = new Set([
'whitesmoke' 'whitesmoke'
]) ])
export const validateColor = (str = '') => { export const validateColor = (str = '') =>
return /#\d{3,6}|rgba{0,1}\(.*?\)/gi.test(str) || colors.has(str.toLowerCase()) /#\d{3,6}|rgba{0,1}\(.*?\)/gi.test(str) || colors.has(str.toLowerCase())
}

7
lib/routing.js
Unescape Escape View File

@ -73,7 +73,8 @@ const keysToQuery = keys =>
export const getQueryStringState = query => { export const getQueryStringState = query => {
if (query.state) { if (query.state) {
return deserializeState(query.state) return deserializeState(query.state)
} else { }
const state = mapper.map(mappings, query) const state = mapper.map(mappings, query)
deserializeCode(state) deserializeCode(state)
@ -83,12 +84,10 @@ export const getQueryStringState = query => {
return state return state
} }
}
export const updateQueryString = state => { export const updateQueryString = state => {
// If react_perf is set as a queryParm, don't update
if (history.location.search.indexOf('react_perf') < 0) { if (history.location.search.indexOf('react_perf') < 0) {
let mappedState = mapper.map(reverseMappings, state) const mappedState = mapper.map(reverseMappings, state)
serializeCode(mappedState) serializeCode(mappedState)
history.replace({ history.replace({

10
lib/util.js
Unescape Escape View File

@ -1,4 +1,5 @@
import morph from 'morphmorph' import morph from 'morphmorph'
const KEY = 'CARBON_STATE' const KEY = 'CARBON_STATE'
const assign = morph.assign(KEY) const assign = morph.assign(KEY)
@ -6,7 +7,9 @@ const assign = morph.assign(KEY)
const parse = v => { const parse = v => {
try { try {
return JSON.parse(v) return JSON.parse(v)
} catch (e) {} } catch (e) {
// pass
}
} }
const escapeHtml = s => { const escapeHtml = s => {
@ -27,10 +30,9 @@ export const capitalizeFirstLetter = s => s.charAt(0).toUpperCase() + s.slice(1)
export const range = n => [...Array(n).keys()] export const range = n => [...Array(n).keys()]
export const fileToDataURL = blob => { export const fileToDataURL = blob =>
return new Promise(res => { new Promise(res => {
const reader = new FileReader() const reader = new FileReader()
reader.onload = e => res(e.target.result) reader.onload = e => res(e.target.result)
reader.readAsDataURL(blob) reader.readAsDataURL(blob)
}) })
}

1
pages/_document.js
Unescape Escape View File

@ -1,4 +1,5 @@
import Document, { Head, Main, NextScript } from 'next/document' import Document, { Head, Main, NextScript } from 'next/document'
export default class extends Document { export default class extends Document {
render() { render() {
return ( return (

23
pages/about.js
Unescape Escape View File

@ -1,7 +1,4 @@
import Page from '../components/Page' import Page from '../components/Page'
import Meta from '../components/Meta'
import Header from '../components/Header'
import Footer from '../components/Footer'
import { COLORS } from '../lib/constants' import { COLORS } from '../lib/constants'
export default () => ( export default () => (
@ -13,7 +10,10 @@ export default () => (
You know all of those code screenshots you see on Twitter? Although the code&apos;s You know all of those code screenshots you see on Twitter? Although the code&apos;s
usually impressive, we saw room for improvement in the aesthetic department. Carbon is the usually impressive, we saw room for improvement in the aesthetic department. Carbon is the
easiest way to create beautiful images of your source code. So what are you waiting for? easiest way to create beautiful images of your source code. So what are you waiting for?
Go impress all of your followers with your newfound design prowess. <span>🎨</span> Go impress all of your followers with your newfound design prowess.{' '}
<span role="img" aria-label="Palette">
🎨
</span>
</p> </p>
</div> </div>
<div className="mb4"> <div className="mb4">
@ -23,12 +23,11 @@ export default () => (
<ul className="mt0 mb3"> <ul className="mt0 mb3">
<li>Drop a file into the editor</li> <li>Drop a file into the editor</li>
<li> <li>
Append a GitHub gist id to the url (<a Append a GitHub gist id to the url (
className="link" <a className="link" href="/0db00e81d5416c339181e59481c74b59">
href="/0db00e81d5416c339181e59481c74b59"
>
example example
</a>) </a>
)
</li> </li>
<li>Paste your code directly</li> <li>Paste your code directly</li>
</ul> </ul>
@ -56,7 +55,8 @@ export default () => (
</p> </p>
</div> </div>
</div> </div>
<style jsx>{` <style jsx>
{`
p, p,
li { li {
color: ${COLORS.GRAY}; color: ${COLORS.GRAY};
@ -74,6 +74,7 @@ export default () => (
.about { .about {
max-width: 632px; max-width: 632px;
} }
`}</style> `}
</style>
</Page> </Page>
) )

14
pages/editor.js
Unescape Escape View File

@ -14,7 +14,6 @@ import Settings from '../components/Settings'
import Toolbar from '../components/Toolbar' import Toolbar from '../components/Toolbar'
import Overlay from '../components/Overlay' import Overlay from '../components/Overlay'
import Carbon from '../components/Carbon' import Carbon from '../components/Carbon'
import ArrowDown from '../components/svg/Arrowdown'
import api from '../lib/api' import api from '../lib/api'
import { import {
THEMES, THEMES,
@ -23,14 +22,11 @@ import {
LANGUAGE_MIME_HASH, LANGUAGE_MIME_HASH,
LANGUAGE_MODE_HASH, LANGUAGE_MODE_HASH,
LANGUAGE_NAME_HASH, LANGUAGE_NAME_HASH,
DEFAULT_LANGUAGE,
DEFAULT_THEME, DEFAULT_THEME,
DEFAULT_EXPORT_SIZE, DEFAULT_EXPORT_SIZE,
COLORS, COLORS,
EXPORT_SIZES,
EXPORT_SIZES_HASH, EXPORT_SIZES_HASH,
DEFAULT_CODE, DEFAULT_CODE,
DEFAULT_BG_COLOR,
DEFAULT_SETTINGS DEFAULT_SETTINGS
} from '../lib/constants' } from '../lib/constants'
import { getQueryStringState, updateQueryString, serializeState } from '../lib/routing' import { getQueryStringState, updateQueryString, serializeState } from '../lib/routing'
@ -108,8 +104,8 @@ class Editor extends React.Component {
getCarbonImage({ format, type } = { format: 'png' }) { getCarbonImage({ format, type } = { format: 'png' }) {
// if safari, get image from api // if safari, get image from api
if ( if (
navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Safari') !== -1 &&
navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Chrome') === -1 &&
format === 'png' format === 'png'
) { ) {
const encodedState = serializeState(this.state) const encodedState = serializeState(this.state)
@ -266,7 +262,8 @@ class Editor extends React.Component {
)} )}
</ReadFileDropContainer> </ReadFileDropContainer>
</div> </div>
<style jsx>{` <style jsx>
{`
#editor { #editor {
background: ${COLORS.BLACK}; background: ${COLORS.BLACK};
border: 3px solid ${COLORS.SECONDARY}; border: 3px solid ${COLORS.SECONDARY};
@ -278,7 +275,8 @@ class Editor extends React.Component {
display: flex; display: flex;
margin-left: auto; margin-left: auto;
} }
`}</style> `}
</style>
</Page> </Page>
) )
} }

1
pages/index.js
Unescape Escape View File

@ -1,2 +1,3 @@
import Editor from './editor' import Editor from './editor'
export default Editor export default Editor

Write Preview
Loading…
Cancel
Save