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

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

* Clean up

* Remove /about href

components/BackgroundSelect.js

@@ -10,7 +10,7 @@ import { parseRGBA, capitalizeFirstLetter } from '../lib/util'
 class BackgroundSelect extends React.PureComponent {
   constructor(props) {
     super(props)
-    this.state = { isVisible: false, selectedTab: 'color', mounted: false }
+    this.state = { isVisible: false, mounted: false }
     this.toggle = this.toggle.bind(this)
     this.selectTab = this.selectTab.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}>
           <WindowPointer fromLeft="15px" />
           <div className="picker-tabs">
-            {['color', 'image'].map((tab, i) => (
+            {['color', 'image'].map(tab => (
               <div
-                key={i}
+                key={tab}
                 className={`picker-tab ${this.props.mode === tab ? 'active' : ''}`}
                 onClick={this.selectTab.bind(null, tab)}
               >
@@ -94,7 +94,8 @@ class BackgroundSelect extends React.PureComponent {
             </div>
           </div>
         </div>
-        <style jsx>{`
+        <style jsx>
+          {`
             .bg-select-container {
               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)) {
             background: #fff;
           }
-        `}</style>
+          `}
+        </style>
       </div>
     )
   }

components/Button.js

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

components/Carbon.js

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

components/Collapse.js

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

components/Dropdown.js

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

components/ExportSizeSelect.js

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

components/FontSelect.js

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

components/Footer.js

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

components/Header.js

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

components/ImagePicker.js

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

components/Language.js

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

components/Meta.js

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import { THEMES, COLORS } from '../lib/constants'
+import { THEMES } from '../lib/constants'
 import Reset from './style/Reset'
 import Font from './style/Font'
 import Typography from './style/Typography'
@@ -39,11 +39,11 @@ export default () => (
       />
       <link
         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
-          key={i}
+          key={theme.id}
           rel="stylesheet"
           href={
             theme.link ||
@@ -55,10 +55,12 @@ export default () => (
     <Reset />
     <Font />
     <Typography />
-    <style jsx>{`
+    <style jsx>
+      {`
         .meta {
           display: none;
         }
-    `}</style>
+      `}
+    </style>
   </div>
 )

components/Overlay.js

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

components/Page.js

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

components/RandomImage.js

@@ -10,9 +10,8 @@ const WALLPAPER_COLLECTION_ID = 136026
 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 smallerImage = url => url.replace(/w=\d+/, 'w=240')
 
-export default class extends React.Component {
+export default class RandomImage extends React.Component {
   constructor(props) {
     super(props)
     this.state = { cacheIndex: 0, loading: false }
@@ -22,9 +21,6 @@ export default class extends React.Component {
     this.nextImage = this.nextImage.bind(this)
   }
 
-  cache = []
-  imageUrls = {}
-
   // fetch images in browser (we require window.FileReader)
   componentDidMount() {
     // 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' })
 
     // 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
     return {
@@ -48,6 +44,9 @@ export default class extends React.Component {
     }
   }
 
+  cache = []
+  imageUrls = {}
+
   selectImage() {
     this.setState({ loading: true })
     axios
@@ -85,7 +84,8 @@ export default class extends React.Component {
           <span onClick={this.nextImage}>Try Another</span>
         </div>
         <div className="image">{this.state.loading && <Spinner />}</div>
-        <style jsx>{`
+        <style jsx>
+          {`
             .image {
               width: 100%;
               height: 120px;
@@ -105,7 +105,8 @@ export default class extends React.Component {
               cursor: ${this.state.loading ? 'not-allowed' : 'pointer'};
               user-select: none;
             }
-        `}</style>
+          `}
+        </style>
       </div>
     )
   }

components/Settings.js

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

components/Slider.js

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

components/ThemeSelect.js

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

components/Toggle.js

@@ -13,10 +13,11 @@ export default class extends React.Component {
 
   render() {
     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>
         {this.props.enabled ? <Checkmark /> : null}
-        <style jsx>{`
+        <style jsx>
+          {`
             .toggle {
               display: flex;
               align-items: center;
@@ -25,7 +26,8 @@ export default class extends React.Component {
               user-select: none;
               padding: 8px;
             }
-        `}</style>
+          `}
+        </style>
       </div>
     )
   }

components/Toolbar.js

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

components/WindowPointer.js

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

components/style/Font.js

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

components/style/Reset.js

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

components/style/Typography.js

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

handlers/image.js

@@ -1,22 +1,23 @@
+/* global domtoimage */
 const PORT = parseInt(process.env.PORT, 10) || 3000
 const ARBITRARY_WAIT_TIME = 500
 
 module.exports = browser => async (req, res) => {
-  let page = await browser.newPage()
-  let state = req.body.state
+  const page = await browser.newPage()
+  const { state } = req.body
 
   if (!state) res.status(400).send()
 
   try {
     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
     await delay(ARBITRARY_WAIT_TIME)
 
     const targetElement = await page.$('#export-container')
 
-    let dataUrl = await page.evaluate(target => {
+    const dataUrl = await page.evaluate(target => {
       const config = {
         style: {
           transform: 'scale(2)',

handlers/twitter.js

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

lib/api.js

@@ -30,7 +30,7 @@ async function image(state) {
   return axios.post(`${DOMAIN}/image`, { state }).then(res => res.data.dataUrl)
 }
 
-const getGist = uid => {
+function getGist(uid) {
   return gistClient
     .get(`/gists/${uid}`)
     .then(res => res.data)
@@ -41,10 +41,10 @@ const getGist = uid => {
 
 // private
 function openTwitterUrl(twitterUrl) {
-  const width = 575,
-    height = 400
+  const width = 575
+  const height = 400
   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}`
 
   window.open(twitterUrl, 'twitter', opts)

lib/colors.js

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

lib/routing.js

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

lib/util.js

@@ -1,4 +1,5 @@
 import morph from 'morphmorph'
+
 const KEY = 'CARBON_STATE'
 
 const assign = morph.assign(KEY)
@@ -6,7 +7,9 @@ const assign = morph.assign(KEY)
 const parse = v => {
   try {
     return JSON.parse(v)
-  } catch (e) {}
+  } catch (e) {
+    // pass
+  }
 }
 
 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 fileToDataURL = blob => {
-  return new Promise(res => {
+export const fileToDataURL = blob =>
+  new Promise(res => {
     const reader = new FileReader()
     reader.onload = e => res(e.target.result)
     reader.readAsDataURL(blob)
   })
-}

pages/_document.js

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

pages/about.js

@@ -1,7 +1,4 @@
 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'
 
 export default () => (
@@ -13,7 +10,10 @@ export default () => (
           You know all of those code screenshots you see on Twitter? Although the code's
           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?
-          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>
       </div>
       <div className="mb4">
@@ -23,12 +23,11 @@ export default () => (
         <ul className="mt0 mb3">
           <li>Drop a file into the editor</li>
           <li>
-            Append a GitHub gist id to the url (<a
-              className="link"
-              href="/0db00e81d5416c339181e59481c74b59"
-            >
+            Append a GitHub gist id to the url (
+            <a className="link" href="/0db00e81d5416c339181e59481c74b59">
               example
-            </a>)
+            </a>
+            )
           </li>
           <li>Paste your code directly</li>
         </ul>
@@ -56,7 +55,8 @@ export default () => (
         </p>
       </div>
     </div>
-    <style jsx>{`
+    <style jsx>
+      {`
         p,
         li {
           color: ${COLORS.GRAY};
@@ -74,6 +74,7 @@ export default () => (
         .about {
           max-width: 632px;
         }
-    `}</style>
+      `}
+    </style>
   </Page>
 )

pages/editor.js

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

pages/index.js

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