diff --git a/.prettierrc b/.prettierrc index 8f362ba..d9188f5 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { singleQuote: true, - printWidth: 100 + printWidth: 100, + semi: false } diff --git a/components/Button.js b/components/Button.js index d2994ef..b27026a 100644 --- a/components/Button.js +++ b/components/Button.js @@ -1,5 +1,5 @@ -import React from 'react'; -import { COLORS } from '../lib/constants'; +import React from 'react' +import { COLORS } from '../lib/constants' export default props => ( -); +) diff --git a/components/Carbon.js b/components/Carbon.js index 2a08d27..8a99145 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -1,14 +1,14 @@ -import { EOL } from 'os'; -import * as hljs from 'highlight.js'; -import React from 'react'; -import domtoimage from 'dom-to-image'; -import CodeMirror from 'react-codemirror'; -import Spinner from 'react-spinner'; -import toHash from 'tohash'; -import WindowControls from '../components/WindowControls'; -import { COLORS, DEFAULT_LANGUAGE, LANGUAGES } from '../lib/constants'; - -const LANGUAGE_HASH = toHash(LANGUAGES, 'module'); +import { EOL } from 'os' +import * as hljs from 'highlight.js' +import React from 'react' +import domtoimage from 'dom-to-image' +import CodeMirror from 'react-codemirror' +import Spinner from 'react-spinner' +import toHash from 'tohash' +import WindowControls from '../components/WindowControls' +import { COLORS, DEFAULT_LANGUAGE, LANGUAGES } from '../lib/constants' + +const LANGUAGE_HASH = toHash(LANGUAGES, 'module') const DEFAULT_SETTINGS = { paddingVertical: '50px', @@ -18,56 +18,56 @@ const DEFAULT_SETTINGS = { background: '#fed0ec', theme: 'seti', language: DEFAULT_LANGUAGE -}; +} class Carbon extends React.Component { constructor(props) { - super(props); + super(props) this.state = { loading: true, language: props.config.language - }; + } - this.handleLanguageChange = this.handleLanguageChange.bind(this); - this.codeUpdated = this.codeUpdated.bind(this); + this.handleLanguageChange = this.handleLanguageChange.bind(this) + this.codeUpdated = this.codeUpdated.bind(this) } componentDidMount() { this.setState({ loading: false - }); + }) - this.handleLanguageChange(this.props.children); + this.handleLanguageChange(this.props.children) } componentWillReceiveProps(newProps) { - this.handleLanguageChange(newProps.children, { customProps: newProps }); + this.handleLanguageChange(newProps.children, { customProps: newProps }) } codeUpdated(newCode) { - this.handleLanguageChange(newCode); - this.props.updateCode(newCode); + this.handleLanguageChange(newCode) + this.props.updateCode(newCode) } handleLanguageChange(newCode, config) { - const props = (config && config.customProps) || this.props; + const props = (config && config.customProps) || this.props if (props.config.language === 'auto') { // try to set the language - const detectedLanguage = hljs.highlightAuto(newCode).language; - const languageModule = LANGUAGE_HASH[detectedLanguage]; + const detectedLanguage = hljs.highlightAuto(newCode).language + const languageModule = LANGUAGE_HASH[detectedLanguage] if (languageModule) { - this.setState({ language: languageModule.module }); + this.setState({ language: languageModule.module }) } } else { - this.setState({ language: props.config.language }); + this.setState({ language: props.config.language }) } } render() { - const config = Object.assign(DEFAULT_SETTINGS, this.props.config); + const config = Object.assign(DEFAULT_SETTINGS, this.props.config) const options = { lineNumbers: false, @@ -76,13 +76,13 @@ class Carbon extends React.Component { scrollBarStyle: null, viewportMargin: Infinity, lineWrapping: true - }; + } // create styles const containerStyle = { background: config.background, padding: `${config.paddingVertical} ${config.paddingHorizontal}` - }; + } // set content to spinner if loading, else editor let content = ( @@ -96,7 +96,7 @@ class Carbon extends React.Component { `} - ); + ) if (this.state.loading === false) { content = (
@@ -150,7 +150,7 @@ class Carbon extends React.Component { } `}
- ); + ) } return ( @@ -165,8 +165,8 @@ class Carbon extends React.Component { } `} - ); + ) } } -export default Carbon; +export default Carbon diff --git a/components/ColorPicker.js b/components/ColorPicker.js index ee7d100..381038c 100644 --- a/components/ColorPicker.js +++ b/components/ColorPicker.js @@ -1,27 +1,27 @@ -import React from 'react'; -import enhanceWithClickOutside from 'react-click-outside'; -import { TwitterPicker } from 'react-color'; -import WindowPointer from './WindowPointer'; -import { COLORS } from '../lib/constants'; +import React from 'react' +import enhanceWithClickOutside from 'react-click-outside' +import { TwitterPicker } from 'react-color' +import WindowPointer from './WindowPointer' +import { COLORS } from '../lib/constants' class ColorPicker extends React.Component { constructor() { - super(); - this.state = { isVisible: false }; - this.toggle = this.toggle.bind(this); - this.handlePickColor = this.handlePickColor.bind(this); + super() + this.state = { isVisible: false } + this.toggle = this.toggle.bind(this) + this.handlePickColor = this.handlePickColor.bind(this) } toggle() { - this.setState({ isVisible: !this.state.isVisible }); + this.setState({ isVisible: !this.state.isVisible }) } handleClickOutside() { - this.setState({ isVisible: false }); + this.setState({ isVisible: false }) } handlePickColor(color) { - this.props.onChange(color.hex); + this.props.onChange(color.hex) } render() { @@ -104,8 +104,8 @@ class ColorPicker extends React.Component { } `} - ); + ) } } -export default enhanceWithClickOutside(ColorPicker); +export default enhanceWithClickOutside(ColorPicker) diff --git a/components/Dropdown.js b/components/Dropdown.js index 123d74e..d1dc05e 100644 --- a/components/Dropdown.js +++ b/components/Dropdown.js @@ -1,33 +1,33 @@ -import React from 'react'; -import enhanceWithClickOutside from 'react-click-outside'; -import ArrowDown from './svg/Arrowdown'; -import Checkmark from './svg/Checkmark'; -import { COLORS } from '../lib/constants'; +import React from 'react' +import enhanceWithClickOutside from 'react-click-outside' +import ArrowDown from './svg/Arrowdown' +import Checkmark from './svg/Checkmark' +import { COLORS } from '../lib/constants' class Dropdown extends React.Component { constructor(props) { - super(); + super() this.state = { isVisible: false, selected: props.selected || props.list[0] - }; - this.select = this.select.bind(this); - this.toggle = this.toggle.bind(this); + } + this.select = this.select.bind(this) + this.toggle = this.toggle.bind(this) } select(item) { if (this.state.selected !== item) { - this.props.onChange(item); - this.setState({ selected: item }); + this.props.onChange(item) + this.setState({ selected: item }) } } toggle() { - this.setState({ isVisible: !this.state.isVisible }); + this.setState({ isVisible: !this.state.isVisible }) } handleClickOutside() { - this.setState({ isVisible: false }); + this.setState({ isVisible: false }) } renderListItems() { @@ -52,7 +52,7 @@ class Dropdown extends React.Component { } `} - )); + )) } render() { @@ -60,7 +60,7 @@ class Dropdown extends React.Component { const MIN_WIDTH = this.props.list.reduce( (max, { name }) => (name.length > max ? name.length : max), 0 - ); + ) return (
- ); + ) } } -export default enhanceWithClickOutside(Dropdown); +export default enhanceWithClickOutside(Dropdown) diff --git a/components/Footer.js b/components/Footer.js index 3f1ea05..ee1a7b0 100644 --- a/components/Footer.js +++ b/components/Footer.js @@ -1,6 +1,6 @@ -import React from 'react'; -import Link from 'next/link'; -import { COLORS } from '../lib/constants'; +import React from 'react' +import Link from 'next/link' +import { COLORS } from '../lib/constants' const Footer = props => (
@@ -47,6 +47,6 @@ const Footer = props => ( } `}
-); +) -export default Footer; +export default Footer diff --git a/components/Header.js b/components/Header.js index 7cf90bb..6d8cb38 100644 --- a/components/Header.js +++ b/components/Header.js @@ -1,5 +1,5 @@ -import React from 'react'; -import Logo from './svg/Logo'; +import React from 'react' +import Logo from './svg/Logo' const Header = ({ enableHeroText }) => (
@@ -34,6 +34,6 @@ const Header = ({ enableHeroText }) => ( } `}
-); +) -export default Header; +export default Header diff --git a/components/Language.js b/components/Language.js index 096ff48..ffc18cf 100644 --- a/components/Language.js +++ b/components/Language.js @@ -1,5 +1,5 @@ -import React from 'react'; -import { Controls, ControlsBW } from './svg/Controls'; +import React from 'react' +import { Controls, ControlsBW } from './svg/Controls' export default ({ language }) => (
@@ -19,4 +19,4 @@ export default ({ language }) => ( `}
-); +) diff --git a/components/Meta.js b/components/Meta.js index b9722a3..dd768d7 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -1,7 +1,7 @@ -import Head from 'next/head'; -import { THEMES_ARRAY, COLORS } from '../lib/constants'; -import Reset from './style/Reset'; -import Typography from './style/Typography'; +import Head from 'next/head' +import { THEMES_ARRAY, COLORS } from '../lib/constants' +import Reset from './style/Reset' +import Typography from './style/Typography' export default () => (
@@ -52,4 +52,4 @@ export default () => ( } `}
-); +) diff --git a/components/Overlay.js b/components/Overlay.js index 330d572..353cd12 100644 --- a/components/Overlay.js +++ b/components/Overlay.js @@ -22,6 +22,6 @@ const Overlay = props => ( } `} -); +) -export default Overlay; +export default Overlay diff --git a/components/Page.js b/components/Page.js index 84bd2a8..e08d49e 100644 --- a/components/Page.js +++ b/components/Page.js @@ -1,7 +1,7 @@ -import React from 'react'; -import Meta from './Meta'; -import Header from './Header'; -import Footer from './Footer'; +import React from 'react' +import Meta from './Meta' +import Header from './Header' +import Footer from './Footer' export default ({ children, enableHeroText }) => (
@@ -20,4 +20,4 @@ export default ({ children, enableHeroText }) => ( } `}
-); +) diff --git a/components/Settings.js b/components/Settings.js index d5fe395..71f8aab 100644 --- a/components/Settings.js +++ b/components/Settings.js @@ -1,27 +1,27 @@ -import React from 'react'; -import enhanceWithClickOutside from 'react-click-outside'; -import SettingsIcon from './svg/Settings'; -import ThemeSelect from './ThemeSelect'; -import Slider from './Slider'; -import Toggle from './Toggle'; -import WindowPointer from './WindowPointer'; -import { COLORS } from '../lib/constants'; +import React from 'react' +import enhanceWithClickOutside from 'react-click-outside' +import SettingsIcon from './svg/Settings' +import ThemeSelect from './ThemeSelect' +import Slider from './Slider' +import Toggle from './Toggle' +import WindowPointer from './WindowPointer' +import { COLORS } from '../lib/constants' class Settings extends React.Component { constructor(props) { - super(); + super() this.state = { isVisible: false - }; - this.toggle = this.toggle.bind(this); + } + this.toggle = this.toggle.bind(this) } toggle() { - this.setState({ isVisible: !this.state.isVisible }); + this.setState({ isVisible: !this.state.isVisible }) } handleClickOutside() { - this.setState({ isVisible: false }); + this.setState({ isVisible: false }) } render() { @@ -108,8 +108,8 @@ class Settings extends React.Component { } `} - ); + ) } } -export default enhanceWithClickOutside(Settings); +export default enhanceWithClickOutside(Settings) diff --git a/components/Slider.js b/components/Slider.js index 4013dd6..39ed6a7 100644 --- a/components/Slider.js +++ b/components/Slider.js @@ -1,21 +1,21 @@ -import React from 'react'; +import React from 'react' export default class extends React.Component { constructor(props) { - super(); - this.state = { value: props.initialValue || 0 }; - this.handleChange = this.handleChange.bind(this); + super() + this.state = { value: props.initialValue || 0 } + this.handleChange = this.handleChange.bind(this) } handleChange(e) { this.setState({ value: e.target.value }, () => { - this.props.onChange(`${this.state.value}px`); - }); + this.props.onChange(`${this.state.value}px`) + }) } render() { - const minValue = this.props.minValue || 0; - const maxValue = this.props.maxValue || 100; + const minValue = this.props.minValue || 0 + const maxValue = this.props.maxValue || 100 return (
@@ -70,6 +70,6 @@ export default class extends React.Component { } `}
- ); + ) } } diff --git a/components/ThemeSelect.js b/components/ThemeSelect.js index e2be80b..d051bcf 100644 --- a/components/ThemeSelect.js +++ b/components/ThemeSelect.js @@ -1,27 +1,27 @@ -import React from 'react'; -import { None, BW, Sharp } from './svg/WindowThemes'; -import { COLORS } from '../lib/constants'; +import React from 'react' +import { None, BW, Sharp } from './svg/WindowThemes' +import { COLORS } from '../lib/constants' -const WINDOW_THEMES_MAP = { none: None, sharp: Sharp, bw: BW }; -export const WINDOW_THEMES = Object.keys(WINDOW_THEMES_MAP); +const WINDOW_THEMES_MAP = { none: None, sharp: Sharp, bw: BW } +export const WINDOW_THEMES = Object.keys(WINDOW_THEMES_MAP) export default class extends React.Component { constructor(props) { - super(); - this.state = { selected: props.selected || WINDOW_THEMES[0] }; - this.select = this.select.bind(this); + super() + this.state = { selected: props.selected || WINDOW_THEMES[0] } + this.select = this.select.bind(this) } select(theme) { if (this.state.selected !== theme) { - this.props.onChange(theme); - this.setState({ selected: theme }); + this.props.onChange(theme) + this.setState({ selected: theme }) } } renderThemes() { return WINDOW_THEMES.map((theme, i) => { - const Img = WINDOW_THEMES_MAP[theme]; + const Img = WINDOW_THEMES_MAP[theme] return (
- ); - }); + ) + }) } render() { @@ -71,6 +71,6 @@ export default class extends React.Component { } `} - ); + ) } } diff --git a/components/Toggle.js b/components/Toggle.js index aeb01b5..27ebb28 100644 --- a/components/Toggle.js +++ b/components/Toggle.js @@ -1,17 +1,17 @@ -import React from 'react'; -import Checkmark from './svg/Checkmark'; +import React from 'react' +import Checkmark from './svg/Checkmark' export default class extends React.Component { constructor(props) { - super(); - this.state = { isEnabled: props.enabled || false }; - this.toggle = this.toggle.bind(this); + super() + this.state = { isEnabled: props.enabled || false } + this.toggle = this.toggle.bind(this) } toggle() { this.setState({ isEnabled: !this.state.isEnabled }, () => { - this.props.onChange(this.state.isEnabled); - }); + this.props.onChange(this.state.isEnabled) + }) } render() { @@ -30,6 +30,6 @@ export default class extends React.Component { } `} - ); + ) } } diff --git a/components/Toolbar.js b/components/Toolbar.js index f188c90..869d64f 100644 --- a/components/Toolbar.js +++ b/components/Toolbar.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from 'react' const Toolbar = props => (
{props.children} @@ -23,6 +23,6 @@ const Toolbar = props => ( } `}
-); +) -export default Toolbar; +export default Toolbar diff --git a/components/WindowControls.js b/components/WindowControls.js index fa8ff02..c049064 100644 --- a/components/WindowControls.js +++ b/components/WindowControls.js @@ -1,5 +1,5 @@ -import React from 'react'; -import { Controls, ControlsBW } from './svg/Controls'; +import React from 'react' +import { Controls, ControlsBW } from './svg/Controls' export default ({ theme }) => (
@@ -16,4 +16,4 @@ export default ({ theme }) => ( `}
-); +) diff --git a/components/WindowPointer.js b/components/WindowPointer.js index e0c78da..8bea34f 100644 --- a/components/WindowPointer.js +++ b/components/WindowPointer.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from 'react' export default ({ fromLeft }) => (
@@ -16,4 +16,4 @@ export default ({ fromLeft }) => ( } `}
-); +) diff --git a/components/style/Reset.js b/components/style/Reset.js index 08621d1..337b551 100644 --- a/components/style/Reset.js +++ b/components/style/Reset.js @@ -1,4 +1,4 @@ -import { COLORS } from '../../lib/constants'; +import { COLORS } from '../../lib/constants' export default () => ( -); +) diff --git a/components/style/Typography.js b/components/style/Typography.js index 267348d..dd5a8dd 100644 --- a/components/style/Typography.js +++ b/components/style/Typography.js @@ -175,4 +175,4 @@ export default () => ( font-weight: bold; } `} -); +) diff --git a/components/svg/Arrowdown.js b/components/svg/Arrowdown.js index bd044e9..ba46d99 100644 --- a/components/svg/Arrowdown.js +++ b/components/svg/Arrowdown.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from 'react' export default () => ( @@ -9,4 +9,4 @@ export default () => ( transform="translate(-89 -14)" /> -); +) diff --git a/components/svg/Checkmark.js b/components/svg/Checkmark.js index 1ae50e4..a00ce89 100644 --- a/components/svg/Checkmark.js +++ b/components/svg/Checkmark.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from 'react' export default () => ( @@ -8,4 +8,4 @@ export default () => ( points="2.852 5.016 8.275 0 9 .67 2.852 6.344 0 3.711 .713 3.042" /> -); +) diff --git a/components/svg/Controls.js b/components/svg/Controls.js index 407a6b2..36a5d0b 100644 --- a/components/svg/Controls.js +++ b/components/svg/Controls.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from 'react' export const Controls = () => ( @@ -8,7 +8,7 @@ export const Controls = () => ( -); +) export const ControlsBW = () => ( @@ -18,4 +18,4 @@ export const ControlsBW = () => ( -); +) diff --git a/components/svg/Logo.js b/components/svg/Logo.js index c4e8b36..ad25f20 100644 --- a/components/svg/Logo.js +++ b/components/svg/Logo.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from 'react' export default () => ( @@ -6,4 +6,4 @@ export default () => ( -); +) diff --git a/components/svg/Settings.js b/components/svg/Settings.js index 260444e..febf145 100644 --- a/components/svg/Settings.js +++ b/components/svg/Settings.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from 'react' export default () => ( @@ -9,4 +9,4 @@ export default () => ( transform="translate(-191 -357)" /> -); +) diff --git a/components/svg/WindowThemes.js b/components/svg/WindowThemes.js index 57cffb1..c5c0958 100644 --- a/components/svg/WindowThemes.js +++ b/components/svg/WindowThemes.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from 'react' export const Sharp = () => ( ( -); +) export const BW = () => ( ( -); +) export const None = () => ( ( -); +) diff --git a/handlers/twitter.js b/handlers/twitter.js index 2d441e5..e72b7c8 100644 --- a/handlers/twitter.js +++ b/handlers/twitter.js @@ -1,46 +1,46 @@ -const Twitter = require('twitter'); -const morph = require('morphmorph'); +const Twitter = require('twitter') +const morph = require('morphmorph') -const RATE_LIMIT_CODE = 420; +const RATE_LIMIT_CODE = 420 const client = new Twitter({ consumer_key: process.env.TWITTER_CONSUMER_KEY, consumer_secret: process.env.TWITTER_CONSUMER_SECRET, access_token_key: process.env.TWITTER_ACCESS_TOKEN_KEY, access_token_secret: process.env.TWITTER_ACCESS_TOKEN_SECRET -}); +}) -const uploadImage = data => client.post('media/upload', { media_data: data }); +const uploadImage = data => client.post('media/upload', { media_data: data }) const uploadTweet = (media = {}) => client.post('statuses/update', { status: `Carbon Copy #${media.media_id_string.slice(0, 8)}`, media_ids: media.media_id_string - }); + }) -const extractImageUrl = morph.get('entities.media.0.display_url'); -const extractErrorCode = morph.get('0.code'); +const extractImageUrl = morph.get('entities.media.0.display_url') +const extractErrorCode = morph.get('0.code') -const respondSuccess = (res, url) => res.json({ url }); +const respondSuccess = (res, url) => res.json({ url }) const respondFail = (res, err) => { - const errorCode = extractErrorCode(err); + const errorCode = extractErrorCode(err) // check for rate limit if (errorCode === RATE_LIMIT_CODE) { - return res.status(420).send(); + return res.status(420).send() } - console.error(`Error: ${err.message || JSON.stringify(err, null, 2)}`); - res.status(500).send(); -}; + console.error(`Error: ${err.message || JSON.stringify(err, null, 2)}`) + res.status(500).send() +} module.exports = (req, res) => { if (!req.body.data) { - return res.status(400).send(); + return res.status(400).send() } uploadImage(req.body.data) .then(uploadTweet) .then(extractImageUrl) .then(respondSuccess.bind(null, res)) - .catch(respondFail.bind(null, res)); -}; + .catch(respondFail.bind(null, res)) +} diff --git a/lib/api.js b/lib/api.js index 260ead4..ec2d845 100644 --- a/lib/api.js +++ b/lib/api.js @@ -1,9 +1,9 @@ -import axios from 'axios'; -import debounce from 'lodash.debounce'; -import ms from 'ms'; +import axios from 'axios' +import debounce from 'lodash.debounce' +import ms from 'ms' -const DOMAIN = process.browser ? document.location.origin : ''; -const RATE_LIMIT_CODE = 420; +const DOMAIN = process.browser ? document.location.origin : '' +const RATE_LIMIT_CODE = 420 const gistClient = axios.create({ baseURL: 'https://api.github.com', @@ -12,10 +12,10 @@ const gistClient = axios.create({ Accept: 'application/vnd.github.v3+json', 'Content-Type': 'application/json' } -}); +}) async function tweet(encodedImage) { - const processedData = encodedImage.split(',')[1]; + const processedData = encodedImage.split(',')[1] return axios .post(`${DOMAIN}/twitter`, { data: processedData }) @@ -23,42 +23,42 @@ async function tweet(encodedImage) { .then(url => encodeURIComponent(`Built with #Carbon, by @dawn_labs ${url}`)) .then(uri => `https://twitter.com/intent/tweet?text=${uri}`) .then(openTwitterUrl) - .catch(checkIfRateLimited); + .catch(checkIfRateLimited) } const getGist = id => { - const uid = id.split('/').pop(); + const uid = id.split('/').pop() return gistClient .get(`/gists/${uid}`) .then(res => res.data) .then(gist => gist.files) .then(files => files[Object.keys(files)[0]]) - .then(file => file.content); -}; + .then(file => file.content) +} // private function openTwitterUrl(twitterUrl) { const width = 575, - height = 400; - const left = (window.outerWidth - width) / 2; - const right = (window.outerHeight - height) / 2; - const opts = `status=1,width=${width},height=${height},top=${top},left=${left}`; + height = 400 + const left = (window.outerWidth - width) / 2 + const right = (window.outerHeight - height) / 2 + const opts = `status=1,width=${width},height=${height},top=${top},left=${left}` - window.open(twitterUrl, 'twitter', opts); + window.open(twitterUrl, 'twitter', opts) } function checkIfRateLimited(err) { if (err.response.status === RATE_LIMIT_CODE) { alert( "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!" - ); - return; + ) + return } - throw err; + throw err } export default { getGist, tweet: debounce(tweet, ms('5s'), { leading: true, trailing: true }) -}; +} diff --git a/lib/constants.js b/lib/constants.js index 353753d..d45ec6b 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -1,4 +1,4 @@ -import toHash from 'tohash'; +import toHash from 'tohash' export const THEMES_ARRAY = [ { @@ -67,9 +67,9 @@ export const THEMES_ARRAY = [ id: 'zenburn', name: 'Zenburn' } -]; +] -export const THEMES = toHash(THEMES_ARRAY); +export const THEMES = toHash(THEMES_ARRAY) export const LANGUAGES = [ { @@ -277,16 +277,16 @@ export const LANGUAGES = [ name: 'YAML', module: 'yaml' } -]; +] -export const DEFAULT_LANGUAGE = 'auto'; +export const DEFAULT_LANGUAGE = 'auto' export const COLORS = { BLACK: '#121212', PRIMARY: '#F8E81C', SECONDARY: '#fff', GRAY: '#858585' -}; +} export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) @@ -298,14 +298,14 @@ const unfold = (f, seed) => { return res ? go(f, res[1], acc.concat([res[0]])) : acc } return go(f, seed, []) -}`; +}` if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') { LANGUAGES.filter(language => language.module !== 'auto').forEach(language => { if (language.module) { !language.custom ? require(`codemirror/mode/${language.module}/${language.module}`) - : require(`./customModes/${language.module}`); + : require(`./customModes/${language.module}`) } - }); + }) } diff --git a/lib/customModes/kotlin.js b/lib/customModes/kotlin.js index 1fde064..56ea638 100644 --- a/lib/customModes/kotlin.js +++ b/lib/customModes/kotlin.js @@ -1,203 +1,203 @@ -const CodeMirror = require('codemirror'); +const CodeMirror = require('codemirror') CodeMirror.defineMode('kotlin', function(config, parserConfig) { function words(str) { var obj = {}, - words = str.split(' '); - for (var i = 0; i < words.length; ++i) obj[words[i]] = true; - return obj; + words = str.split(' ') + for (var i = 0; i < words.length; ++i) obj[words[i]] = true + return obj } - var multiLineStrings = parserConfig.multiLineStrings; + var multiLineStrings = parserConfig.multiLineStrings var keywords = words( 'package continue return object while break class data trait throw super ' + 'when type this else This try val var fun for is in if do as true false null get set ' + 'import where by get set abstract enum open annotation override private public internal ' + 'protected catch out vararg inline finally final ref const' - ); - var blockKeywords = words('catch class do else finally for if where try while enum'); - var atoms = words('null true false this'); + ) + var blockKeywords = words('catch class do else finally for if where try while enum') + var atoms = words('null true false this') var builtins = words( 'Int Double Float Long Short Byte IntArray ShortArray ByteArray String Boolean List Set ' + 'Map MutableList MutableSet print println shl shr ushr and or xor inv ' - ); + ) - var curPunc; + var curPunc function tokenBase(stream, state) { - var ch = stream.next(); + var ch = stream.next() if (ch == '"' || ch == "'") { - return startString(ch, stream, state); + return startString(ch, stream, state) } // Wildcard import w/o trailing semicolon (import smth.*) if (ch == '.' && stream.eat('*')) { - return 'word'; + return 'word' } if (/[\[\]{}\(\),;\:\.]/.test(ch)) { - curPunc = ch; - return null; + curPunc = ch + return null } if (/\d/.test(ch)) { if (stream.eat(/eE/)) { - stream.eat(/\+\-/); - stream.eatWhile(/\d/); + stream.eat(/\+\-/) + stream.eatWhile(/\d/) } - return 'number'; + return 'number' } if (ch == '/') { if (stream.eat('*')) { - state.tokenize.push(tokenComment); - return tokenComment(stream, state); + state.tokenize.push(tokenComment) + return tokenComment(stream, state) } if (stream.eat('/')) { - stream.skipToEnd(); - return 'comment'; + stream.skipToEnd() + return 'comment' } if (expectExpression(state.lastToken)) { - return startString(ch, stream, state); + return startString(ch, stream, state) } } // Commented if (ch == '-' && stream.eat('>')) { - curPunc = '->'; - return null; + curPunc = '->' + return null } if (/[\-+*&%=<>!?|\/~]/.test(ch)) { - stream.eatWhile(/[\-+*&%=<>|~]/); - return 'operator'; + stream.eatWhile(/[\-+*&%=<>|~]/) + return 'operator' } - stream.eatWhile(/[\w\$_]/); + stream.eatWhile(/[\w\$_]/) - var cur = stream.current(); + var cur = stream.current() if (atoms.propertyIsEnumerable(cur)) { - return 'atom'; + return 'atom' } if (keywords.propertyIsEnumerable(cur)) { - if (blockKeywords.propertyIsEnumerable(cur)) curPunc = 'newstatement'; - return 'keyword'; + if (blockKeywords.propertyIsEnumerable(cur)) curPunc = 'newstatement' + return 'keyword' } if (builtins.propertyIsEnumerable(cur)) { - return 'builtin'; + return 'builtin' } - return 'word'; + return 'word' } - tokenBase.isBase = true; + tokenBase.isBase = true function startString(quote, stream, state) { - var tripleQuoted = false; + var tripleQuoted = false if (quote != '/' && stream.eat(quote)) { - if (stream.eat(quote)) tripleQuoted = true; - else return 'string'; + if (stream.eat(quote)) tripleQuoted = true + else return 'string' } function t(stream, state) { var escaped = false, next, - end = !tripleQuoted; + end = !tripleQuoted while ((next = stream.next()) != null) { if (next == quote && !escaped) { if (!tripleQuoted) { - break; + break } if (stream.match(quote + quote)) { - end = true; - break; + end = true + break } } if (quote == '"' && next == '$' && !escaped && stream.eat('{')) { - state.tokenize.push(tokenBaseUntilBrace()); - return 'string'; + state.tokenize.push(tokenBaseUntilBrace()) + return 'string' } if (next == '$' && !escaped && !stream.eat(' ')) { - state.tokenize.push(tokenBaseUntilSpace()); - return 'string'; + state.tokenize.push(tokenBaseUntilSpace()) + return 'string' } - escaped = !escaped && next == '\\'; + escaped = !escaped && next == '\\' } - if (multiLineStrings) state.tokenize.push(t); + if (multiLineStrings) state.tokenize.push(t) - if (end) state.tokenize.pop(); + if (end) state.tokenize.pop() - return 'string'; + return 'string' } - state.tokenize.push(t); - return t(stream, state); + state.tokenize.push(t) + return t(stream, state) } function tokenBaseUntilBrace() { - var depth = 1; + var depth = 1 function t(stream, state) { if (stream.peek() == '}') { - depth--; + depth-- if (depth == 0) { - state.tokenize.pop(); - return state.tokenize[state.tokenize.length - 1](stream, state); + state.tokenize.pop() + return state.tokenize[state.tokenize.length - 1](stream, state) } } else if (stream.peek() == '{') { - depth++; + depth++ } - return tokenBase(stream, state); + return tokenBase(stream, state) } - t.isBase = true; - return t; + t.isBase = true + return t } function tokenBaseUntilSpace() { function t(stream, state) { if (stream.eat(/[\w]/)) { - var isWord = stream.eatWhile(/[\w]/); + var isWord = stream.eatWhile(/[\w]/) if (isWord) { - state.tokenize.pop(); - return 'word'; + state.tokenize.pop() + return 'word' } } - state.tokenize.pop(); - return 'string'; + state.tokenize.pop() + return 'string' } - t.isBase = true; - return t; + t.isBase = true + return t } function tokenComment(stream, state) { var maybeEnd = false, - ch; + ch while ((ch = stream.next())) { if (ch == '/' && maybeEnd) { - state.tokenize.pop(); - break; + state.tokenize.pop() + break } - maybeEnd = ch == '*'; + maybeEnd = ch == '*' } - return 'comment'; + return 'comment' } function expectExpression(last) { @@ -209,25 +209,25 @@ CodeMirror.defineMode('kotlin', function(config, parserConfig) { last == 'newstatement' || last == 'keyword' || last == 'proplabel' - ); + ) } function Context(indented, column, type, align, prev) { - this.indented = indented; - this.column = column; - this.type = type; - this.align = align; - this.prev = prev; + this.indented = indented + this.column = column + this.type = type + this.align = align + this.prev = prev } function pushContext(state, col, type) { - return (state.context = new Context(state.indented, col, type, null, state.context)); + return (state.context = new Context(state.indented, col, type, null, state.context)) } function popContext(state) { - var t = state.context.type; - if (t == ')' || t == ']' || t == '}') state.indented = state.context.indented; - return (state.context = state.context.prev); + var t = state.context.type + if (t == ')' || t == ']' || t == '}') state.indented = state.context.indented + return (state.context = state.context.prev) } // Interface @@ -240,67 +240,67 @@ CodeMirror.defineMode('kotlin', function(config, parserConfig) { indented: 0, startOfLine: true, lastToken: null - }; + } }, token: function(stream, state) { - var ctx = state.context; + var ctx = state.context if (stream.sol()) { - if (ctx.align == null) ctx.align = false; - state.indented = stream.indentation(); - state.startOfLine = true; + if (ctx.align == null) ctx.align = false + state.indented = stream.indentation() + state.startOfLine = true // Automatic semicolon insertion if (ctx.type == 'statement' && !expectExpression(state.lastToken)) { - popContext(state); - ctx = state.context; + popContext(state) + ctx = state.context } } - if (stream.eatSpace()) return null; - curPunc = null; - var style = state.tokenize[state.tokenize.length - 1](stream, state); - if (style == 'comment') return style; - if (ctx.align == null) ctx.align = true; - if ((curPunc == ';' || curPunc == ':') && ctx.type == 'statement') popContext(state); + if (stream.eatSpace()) return null + curPunc = null + var style = state.tokenize[state.tokenize.length - 1](stream, state) + if (style == 'comment') return style + if (ctx.align == null) ctx.align = true + if ((curPunc == ';' || curPunc == ':') && ctx.type == 'statement') popContext(state) else if (curPunc == '->' && ctx.type == 'statement' && ctx.prev.type == '}') { // Handle indentation for {x -> \n ... } - popContext(state); - state.context.align = false; - } else if (curPunc == '{') pushContext(state, stream.column(), '}'); - else if (curPunc == '[') pushContext(state, stream.column(), ']'); - else if (curPunc == '(') pushContext(state, stream.column(), ')'); + popContext(state) + state.context.align = false + } else if (curPunc == '{') pushContext(state, stream.column(), '}') + else if (curPunc == '[') pushContext(state, stream.column(), ']') + else if (curPunc == '(') pushContext(state, stream.column(), ')') else if (curPunc == '}') { - while (ctx.type == 'statement') ctx = popContext(state); - if (ctx.type == '}') ctx = popContext(state); - while (ctx.type == 'statement') ctx = popContext(state); - } else if (curPunc == ctx.type) popContext(state); + while (ctx.type == 'statement') ctx = popContext(state) + if (ctx.type == '}') ctx = popContext(state) + while (ctx.type == 'statement') ctx = popContext(state) + } else if (curPunc == ctx.type) popContext(state) else if ( ctx.type == '}' || ctx.type == 'top' || (ctx.type == 'statement' && curPunc == 'newstatement') ) - pushContext(state, stream.column(), 'statement'); - state.startOfLine = false; - state.lastToken = curPunc || style; - return style; + pushContext(state, stream.column(), 'statement') + state.startOfLine = false + state.lastToken = curPunc || style + return style }, indent: function(state, textAfter) { - if (!state.tokenize[state.tokenize.length - 1].isBase) return 0; + if (!state.tokenize[state.tokenize.length - 1].isBase) return 0 var firstChar = textAfter && textAfter.charAt(0), - ctx = state.context; - if (ctx.type == 'statement' && !expectExpression(state.lastToken)) ctx = ctx.prev; - var closing = firstChar == ctx.type; + ctx = state.context + if (ctx.type == 'statement' && !expectExpression(state.lastToken)) ctx = ctx.prev + var closing = firstChar == ctx.type if (ctx.type == 'statement') { - return ctx.indented + (firstChar == '{' ? 0 : config.indentUnit); - } else if (ctx.align) return ctx.column + (closing ? 0 : 1); - else return ctx.indented + (closing ? 0 : config.indentUnit); + return ctx.indented + (firstChar == '{' ? 0 : config.indentUnit) + } else if (ctx.align) return ctx.column + (closing ? 0 : 1) + else return ctx.indented + (closing ? 0 : config.indentUnit) }, closeBrackets: { triples: '\'"' }, electricChars: '{}' - }; -}); + } +}) -CodeMirror.defineMIME('text/x-kotlin', 'kotlin'); +CodeMirror.defineMIME('text/x-kotlin', 'kotlin') diff --git a/lib/customModes/nimrod.js b/lib/customModes/nimrod.js index 34a56ac..8a4b681 100755 --- a/lib/customModes/nimrod.js +++ b/lib/customModes/nimrod.js @@ -1,14 +1,14 @@ -const CodeMirror = require('codemirror'); +const CodeMirror = require('codemirror') CodeMirror.defineMode('nimrod', function(conf, parserConf) { - var ERRORCLASS = 'error'; + var ERRORCLASS = 'error' function wordRegexp(words) { - return new RegExp('^((' + words.join(')|(') + '))\\b'); + return new RegExp('^((' + words.join(')|(') + '))\\b') } - var operators = new RegExp('\\=\\+\\-\\*\\/\\<\\>\\@\\$\\~\\&\\%\\|\\!\\?\\^\\:\\\\'); - var identifiers = new RegExp('^[_A-Za-z][_A-Za-z0-9]*'); + var operators = new RegExp('\\=\\+\\-\\*\\/\\<\\>\\@\\$\\~\\&\\%\\|\\!\\?\\^\\:\\\\') + var identifiers = new RegExp('^[_A-Za-z][_A-Za-z0-9]*') var commonkeywords = [ 'addr', @@ -81,7 +81,7 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) { 'in', 'as', 'of' - ]; + ] var commonBuiltins = [ 'int', @@ -294,272 +294,272 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) { 'EFloatOverflow', 'EFloatInexact', 'EDeadThrea' - ]; + ] if (parserConf.extra_keywords != undefined) - commonkeywords = commonkeywords.concat(parserConf.extra_keywords); + commonkeywords = commonkeywords.concat(parserConf.extra_keywords) if (parserConf.extra_builtins != undefined) - commonBuiltins = commonBuiltins.concat(parserConf.extra_builtins); + commonBuiltins = commonBuiltins.concat(parserConf.extra_builtins) - var keywords = wordRegexp(commonkeywords); - var builtins = wordRegexp(commonBuiltins); + var keywords = wordRegexp(commonkeywords) + var builtins = wordRegexp(commonBuiltins) - var indentInfo = null; + var indentInfo = null - var stringPrefixes = new RegExp('^((\'{3}|"{3}|[\'"]))', 'i'); + var stringPrefixes = new RegExp('^((\'{3}|"{3}|[\'"]))', 'i') // tokenizers function tokenBase(stream, state) { // Handle scope changes if (stream.sol()) { - var scopeOffset = state.scopes[0].offset; + var scopeOffset = state.scopes[0].offset if (stream.eatSpace()) { - var lineOffset = stream.indentation(); + var lineOffset = stream.indentation() if (lineOffset > scopeOffset) { - indentInfo = 'indent'; + indentInfo = 'indent' } else if (lineOffset < scopeOffset) { - indentInfo = 'dedent'; + indentInfo = 'dedent' } - return null; + return null } else { if (scopeOffset > 0) { - dedent(stream, state); + dedent(stream, state) } } } - if (stream.eatSpace()) return null; + if (stream.eatSpace()) return null - var ch = stream.peek(); + var ch = stream.peek() // Handle Comments if (ch === '#') { - stream.skipToEnd(); - return 'comment'; + stream.skipToEnd() + return 'comment' } // Handle Number Literals if (stream.match(/^[0-9\.]/, false)) { - var floatLiteral = false; + var floatLiteral = false // Floats if (stream.match(/^\d*\.\d+(e[\+\-]?\d+)?/i)) { - floatLiteral = true; + floatLiteral = true } if (stream.match(/^\d+\.\d*/)) { - floatLiteral = true; + floatLiteral = true } if (stream.match(/^\.\d+/)) { - floatLiteral = true; + floatLiteral = true } if (floatLiteral) { // Float literals may be "imaginary" - stream.eat(/J/i); - return 'number'; + stream.eat(/J/i) + return 'number' } // Integers - var intLiteral = false; + var intLiteral = false // Hex if (stream.match(/^0x[0-9a-f]+/i)) { - intLiteral = true; + intLiteral = true } // Binary if (stream.match(/^0b[01]+/i)) { - intLiteral = true; + intLiteral = true } // Octal if (stream.match(/^0o[0-7]+/i)) { - intLiteral = true; + intLiteral = true } // Decimal if (stream.match(/^[1-9]\d*(e[\+\-]?\d+)?/)) { // Decimal literals may be "imaginary" - stream.eat(/J/i); + stream.eat(/J/i) // TODO - Can you have imaginary longs? - intLiteral = true; + intLiteral = true } // Zero by itself with no other piece of number. if (stream.match(/^0(?![\dx])/i)) { - intLiteral = true; + intLiteral = true } if (intLiteral) { // Integer literals may be "long" - stream.eat(/L/i); - return 'number'; + stream.eat(/L/i) + return 'number' } } // Handle Strings if (stream.match(stringPrefixes)) { - state.tokenize = tokenStringFactory(stream.current()); - return state.tokenize(stream, state); + state.tokenize = tokenStringFactory(stream.current()) + return state.tokenize(stream, state) } - if (stream.match(operators)) return 'operator'; + if (stream.match(operators)) return 'operator' - if (stream.match(keywords)) return 'keyword'; + if (stream.match(keywords)) return 'keyword' - if (stream.match(builtins)) return 'builtin'; + if (stream.match(builtins)) return 'builtin' if (stream.match(identifiers)) { if ( state.lastToken != null && state.lastToken.match(/proc|iterator|macro|template|class|converter/) ) { - return 'def'; + return 'def' } - return 'variable'; + return 'variable' } // Handle non-detected items - stream.next(); - return ERRORCLASS; + stream.next() + return ERRORCLASS } function tokenStringFactory(delimiter) { - var singleline = delimiter.length == 1; - var OUTCLASS = 'string'; + var singleline = delimiter.length == 1 + var OUTCLASS = 'string' function tokenString(stream, state) { while (!stream.eol()) { - stream.eatWhile(/[^'"\\]/); + stream.eatWhile(/[^'"\\]/) if (stream.eat('\\')) { - stream.next(); + stream.next() if (singleline && stream.eol()) { - return OUTCLASS; + return OUTCLASS } } else if (stream.match(delimiter)) { - state.tokenize = tokenBase; - return OUTCLASS; + state.tokenize = tokenBase + return OUTCLASS } else { - stream.eat(/['"]/); + stream.eat(/['"]/) } } if (singleline) { if (parserConf.singleLineStringErrors) { - return ERRORCLASS; + return ERRORCLASS } else { - state.tokenize = tokenBase; + state.tokenize = tokenBase } } - return OUTCLASS; + return OUTCLASS } - tokenString.isString = true; - return tokenString; + tokenString.isString = true + return tokenString } function indent(stream, state, type) { - type = type || 'nim'; - var indentUnit = 0; + type = type || 'nim' + var indentUnit = 0 if (type === 'nim') { if (state.scopes[0].type !== 'nim') { - state.scopes[0].offset = stream.indentation(); - return; + state.scopes[0].offset = stream.indentation() + return } for (var i = 0; i < state.scopes.length; ++i) { if (state.scopes[i].type === 'nim') { - indentUnit = state.scopes[i].offset + conf.indentUnit; - break; + indentUnit = state.scopes[i].offset + conf.indentUnit + break } } } else { - indentUnit = stream.column() + stream.current().length; + indentUnit = stream.column() + stream.current().length } state.scopes.unshift({ offset: indentUnit, type: type - }); + }) } function dedent(stream, state, type) { - type = type || 'nim'; - if (state.scopes.length == 1) return; + type = type || 'nim' + if (state.scopes.length == 1) return if (state.scopes[0].type === 'nim') { - var _indent = stream.indentation(); - var _indent_index = -1; + var _indent = stream.indentation() + var _indent_index = -1 for (var i = 0; i < state.scopes.length; ++i) { if (_indent === state.scopes[i].offset) { - _indent_index = i; - break; + _indent_index = i + break } } if (_indent_index === -1) { - return true; + return true } while (state.scopes[0].offset !== _indent) { - state.scopes.shift(); + state.scopes.shift() } - return false; + return false } else { if (type === 'nim') { - state.scopes[0].offset = stream.indentation(); - return false; + state.scopes[0].offset = stream.indentation() + return false } else { if (state.scopes[0].type != type) { - return true; + return true } - state.scopes.shift(); - return false; + state.scopes.shift() + return false } } } function tokenLexer(stream, state) { - indentInfo = null; - var style = state.tokenize(stream, state); - var current = stream.current(); + indentInfo = null + var style = state.tokenize(stream, state) + var current = stream.current() // Handle '.' connected identifiers if (current === '.') { - style = stream.match(identifiers, false) ? null : ERRORCLASS; + style = stream.match(identifiers, false) ? null : ERRORCLASS if (style === null && state.lastStyle === 'meta') { // Apply 'meta' style to '.' connected identifiers when // appropriate. - style = 'meta'; + style = 'meta' } - return style; + return style } if ((style === 'variable' || style === 'builtin') && state.lastStyle === 'meta') { - style = 'meta'; + style = 'meta' } // Handle scope changes. if (current.match(/return|break|continue|raise/) || (current === 'discard' && stream.eol())) - state.dedent += 1; + state.dedent += 1 - if (current === 'lambda' || current === 'proc') state.lambda = true; + if (current === 'lambda' || current === 'proc') state.lambda = true - var delimiter_index = '[({'.indexOf(current); + var delimiter_index = '[({'.indexOf(current) if (delimiter_index !== -1) { - indent(stream, state, '])}'.slice(delimiter_index, delimiter_index + 1)); + indent(stream, state, '])}'.slice(delimiter_index, delimiter_index + 1)) } else if (stream.eol() && current.match(/\=|\:|import|include|type|const|var|let/)) { - indent(stream, state); + indent(stream, state) } if (indentInfo === 'dedent') { if (dedent(stream, state)) { - return ERRORCLASS; + return ERRORCLASS } } - delimiter_index = '])}'.indexOf(current); + delimiter_index = '])}'.indexOf(current) if (delimiter_index !== -1) { if (dedent(stream, state, current)) { - return ERRORCLASS; + return ERRORCLASS } } if (state.dedent > 0 && stream.eol() && state.scopes[0].type == 'nim') { - if (state.scopes.length > 1) state.scopes.shift(); - state.dedent -= 1; + if (state.scopes.length > 1) state.scopes.shift() + state.dedent -= 1 } - return style; + return style } var external = { @@ -571,33 +571,33 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) { lastToken: null, lambda: false, dedent: 0 - }; + } }, token: function(stream, state) { - var style = tokenLexer(stream, state); + var style = tokenLexer(stream, state) - state.lastStyle = style; + state.lastStyle = style - var current = stream.current(); - if (current && style) state.lastToken = current; + var current = stream.current() + if (current && style) state.lastToken = current - if (stream.eol() && state.lambda) state.lambda = false; + if (stream.eol() && state.lambda) state.lambda = false - return style; + return style }, indent: function(state) { - if (state.tokenize != tokenBase) return state.tokenize.isString ? CodeMirror.Pass : 0; + if (state.tokenize != tokenBase) return state.tokenize.isString ? CodeMirror.Pass : 0 - return state.scopes[0].offset; + return state.scopes[0].offset }, lineComment: '#', fold: 'indent' - }; + } - return external; -}); + return external +}) -CodeMirror.defineMIME('text/x-nimrod', 'nimrod'); +CodeMirror.defineMIME('text/x-nimrod', 'nimrod') diff --git a/pages/about.js b/pages/about.js index 8e2bab2..c9b2998 100644 --- a/pages/about.js +++ b/pages/about.js @@ -1,8 +1,8 @@ -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 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 () => ( @@ -71,4 +71,4 @@ export default () => ( } `} -); +) diff --git a/pages/editor.js b/pages/editor.js index 54e6d22..c2a9654 100644 --- a/pages/editor.js +++ b/pages/editor.js @@ -1,20 +1,20 @@ // Theirs -import React from 'react'; -import HTML5Backend from 'react-dnd-html5-backend'; -import { DragDropContext } from 'react-dnd'; -import domtoimage from 'dom-to-image'; -import ReadFileDropContainer from 'dropperx'; +import React from 'react' +import HTML5Backend from 'react-dnd-html5-backend' +import { DragDropContext } from 'react-dnd' +import domtoimage from 'dom-to-image' +import ReadFileDropContainer from 'dropperx' // Ours -import Page from '../components/Page'; -import Button from '../components/Button'; -import Dropdown from '../components/Dropdown'; -import ColorPicker from '../components/ColorPicker'; -import Settings from '../components/Settings'; -import Toolbar from '../components/Toolbar'; -import Overlay from '../components/Overlay'; -import Carbon from '../components/Carbon'; -import api from '../lib/api'; +import Page from '../components/Page' +import Button from '../components/Button' +import Dropdown from '../components/Dropdown' +import ColorPicker from '../components/ColorPicker' +import Settings from '../components/Settings' +import Toolbar from '../components/Toolbar' +import Overlay from '../components/Overlay' +import Carbon from '../components/Carbon' +import api from '../lib/api' import { THEMES_ARRAY, THEMES, @@ -22,7 +22,7 @@ import { DEFAULT_LANGUAGE, COLORS, DEFAULT_CODE -} from '../lib/constants'; +} from '../lib/constants' class Editor extends React.Component { /* pathname, asPath, err, req, res */ @@ -30,17 +30,17 @@ class Editor extends React.Component { try { // TODO fix this hack if (asPath.length > 30) { - const content = await api.getGist(asPath); - return { content }; + const content = await api.getGist(asPath) + return { content } } } catch (e) { - console.log(e); + console.log(e) } - return {}; + return {} } constructor(props) { - super(props); + super(props) this.state = { background: '#ABB8C3', theme: THEMES.seti.id, @@ -51,15 +51,15 @@ class Editor extends React.Component { paddingHorizontal: '32px', uploading: false, code: props.content || DEFAULT_CODE - }; + } - this.save = this.save.bind(this); - this.upload = this.upload.bind(this); - this.updateCode = this.updateCode.bind(this); + this.save = this.save.bind(this) + this.upload = this.upload.bind(this) + this.updateCode = this.updateCode.bind(this) } getCarbonImage() { - const node = document.getElementById('section'); + const node = document.getElementById('section') const config = { style: { @@ -68,35 +68,35 @@ class Editor extends React.Component { }, width: node.offsetWidth * 2, height: node.offsetHeight * 2 - }; + } - return domtoimage.toPng(node, config); + return domtoimage.toPng(node, config) } updateCode(code) { - this.setState({ code }); + this.setState({ code }) } save() { this.getCarbonImage().then(dataUrl => { - const link = document.createElement('a'); - link.download = 'carbon.png'; - link.href = dataUrl; - document.body.appendChild(link); - link.click(); - link.remove(); - }); + const link = document.createElement('a') + link.download = 'carbon.png' + link.href = dataUrl + document.body.appendChild(link) + link.click() + link.remove() + }) } upload() { - this.setState({ uploading: true }); + this.setState({ uploading: true }) this.getCarbonImage() .then(api.tweet) .then(() => this.setState({ uploading: false })) .catch(err => { - console.error(err); - this.setState({ uploading: false }); - }); + console.error(err) + this.setState({ uploading: false }) + }) } render() { @@ -162,8 +162,8 @@ class Editor extends React.Component { `} - ); + ) } } -export default DragDropContext(HTML5Backend)(Editor); +export default DragDropContext(HTML5Backend)(Editor) diff --git a/pages/index.js b/pages/index.js index 8fb20c2..56dd891 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,2 +1,2 @@ -import Editor from './editor'; -export default Editor; +import Editor from './editor' +export default Editor diff --git a/server.js b/server.js index a777836..a8e5d9d 100644 --- a/server.js +++ b/server.js @@ -1,38 +1,38 @@ -const express = require('express'); -const morgan = require('morgan'); -const bodyParser = require('body-parser'); -const next = require('next'); +const express = require('express') +const morgan = require('morgan') +const bodyParser = require('body-parser') +const next = require('next') -const port = parseInt(process.env.PORT, 10) || 3000; -const dev = process.env.NODE_ENV !== 'production' && !process.env.NOW; -const app = next({ dev }); -const handle = app.getRequestHandler(); +const port = parseInt(process.env.PORT, 10) || 3000 +const dev = process.env.NODE_ENV !== 'production' && !process.env.NOW +const app = next({ dev }) +const handle = app.getRequestHandler() function wrap(handler) { return (req, res) => handler(req, res).catch(err => { - console.log('ERR:', err); - }); + console.log('ERR:', err) + }) } app.prepare().then(() => { - const server = express(); + const server = express() - server.use(morgan('tiny')); + server.use(morgan('tiny')) - server.get('/about', (req, res) => app.render(req, res, '/about')); + server.get('/about', (req, res) => app.render(req, res, '/about')) // if root, render webpage from next - server.get('/*', (req, res) => app.render(req, res, '/', req.query)); + server.get('/*', (req, res) => app.render(req, res, '/', req.query)) // otherwise, try and get gist - server.get('*', handle); + server.get('*', handle) // api endpoints - server.post('/twitter', bodyParser.json({ limit: '5mb' }), require('./handlers/twitter')); + server.post('/twitter', bodyParser.json({ limit: '5mb' }), require('./handlers/twitter')) server.listen(port, err => { - if (err) throw err; - console.log(`> Ready on http://localhost:${port}`); - }); -}); + if (err) throw err + console.log(`> Ready on http://localhost:${port}`) + }) +})