From 5ec1219f871db0bea0c41a57ddf099e9fb8497a6 Mon Sep 17 00:00:00 2001 From: briandennis Date: Sat, 17 Jun 2017 14:16:06 -0700 Subject: [PATCH 01/12] resolve conflicts --- components/codeImage.js | 47 +++++++++++++++++++++++++++++++---------- package.json | 5 ++++- yarn.lock | 47 ++++++++++++++++++++++++++++++++++++++++- 3 files changed, 86 insertions(+), 13 deletions(-) diff --git a/components/codeImage.js b/components/codeImage.js index 9574f34..33a7a7d 100644 --- a/components/codeImage.js +++ b/components/codeImage.js @@ -3,6 +3,8 @@ import React from 'react' import { NativeTypes } from 'react-dnd-html5-backend' import { DropTarget } from 'react-dnd' import domtoimage from 'dom-to-image' +import highlight from 'highlight.js' +import CodeMirror from 'react-codemirror' const padding = '50px 50px' @@ -22,9 +24,13 @@ const unfold = (f, seed) => { const MAX_LINES = 40 class CodeImage extends React.Component { - constructor () { - super() - this.state = {} + constructor (props) { + super(props) + + this.state = { + code: this.props.children + } + this.save = this.save.bind(this) } @@ -39,6 +45,22 @@ class CodeImage extends React.Component { }) } + highlight () { + highlight.initHighlighting.called = false + highlight.initHighlighting() + } + + componentDidMount () { + // highlight + this.highlight() + + //highlight when content changes + this.editor.addEventListener('input', () => { + console.log('edit') + this.highlight() + }) + } + render () { let code = this.state.droppedContent || this.props.children || DEFAULT_CODE const split = code.split(EOL) @@ -46,13 +68,18 @@ class CodeImage extends React.Component { return this.props.connectDropTarget(
+
{ this.container = container }}> - 
-            
-              {code}
-            
-
+ +
{ this.editor = editor}}> + 
+              
+                {this.props.initCode}
+              
+
+
+
@@ -103,21 +74,4 @@ class CodeImage extends React.Component { } } -const drop = (props, monitor, component) => { - const bundle = monitor.getItem() - const file = bundle.files[0] - const reader = new FileReader() - reader.onload = function(event) { - component.setState({ - droppedContent: event.target.result - }) - }; - reader.readAsText(file, "UTF-8"); -} - -export default DropTarget(NativeTypes.FILE, { drop }, (connect, monitor) => ({ - connectDropTarget: connect.dropTarget(), - isOver: monitor.isOver(), - canDrop: monitor.canDrop(), - item: monitor.getItem() -}))(CodeImage) +export default CodeImage \ No newline at end of file diff --git a/package.json b/package.json index de6ccff..971d37f 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "axios": "^0.16.2", "body-parser": "^1.17.2", + "codemirror": "^5.26.0", "dom-to-image": "^2.5.2", "express": "^4.15.3", "form-data": "^2.2.0", @@ -18,10 +19,10 @@ "morgan": "^1.8.2", "next": "^2.4.3", "react": "^15.5.4", + "react-codemirror": "^1.0.0", "react-dnd": "^2.4.0", "react-dnd-html5-backend": "^2.4.1", "react-dom": "^15.5.4", - "react-codemirror": "^1.0.0", "react-syntax-highlight": "^0.0.6" } } diff --git a/pages/index.js b/pages/index.js index 08b387c..71e523e 100644 --- a/pages/index.js +++ b/pages/index.js @@ -6,6 +6,19 @@ import Axios from 'axios' import CodeImage from '../components/codeImage' import api from '../lib/api' +const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) + +const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res) + +const unfold = (f, seed) => { + const go = (f, seed, acc) => { + const res = f(seed) + return res ? go(f, res[1], acc.concat([res[0]])) : acc + } + return go(f, seed, []) +} + ` + class Home extends React.Component { /* pathname, asPath, err, req, res */ static async getInitialProps ({ asPath }) { @@ -17,6 +30,7 @@ class Home extends React.Component { return {} } } + render () { return (
@@ -31,7 +45,7 @@ class Home extends React.Component {

Welcome to Code Image

- {this.props.content} + {DEFAULT_CODE}
) diff --git a/yarn.lock b/yarn.lock index b48536b..3dd08b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -116,7 +116,7 @@ arrify@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" -asap@~2.0.3: +asap@^2.0.3, asap@~2.0.3: version "2.0.5" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" @@ -1064,7 +1064,7 @@ code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" -codemirror@^5.18.2: +codemirror@^5.18.2, codemirror@^5.26.0: version "5.26.0" resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.26.0.tgz#bcbee86816ed123870c260461c2b5c40b68746e5" @@ -1287,6 +1287,19 @@ diffie-hellman@^5.0.0: miller-rabin "^4.0.0" randombytes "^2.0.0" +disposables@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/disposables/-/disposables-1.0.1.tgz#064727a25b54f502bd82b89aa2dfb8df9f1b39e3" + +dnd-core@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-2.4.0.tgz#c4a5bc2aea75164f8a295d769d5f551810e7d411" + dependencies: + asap "^2.0.3" + invariant "^2.0.0" + lodash "^4.2.0" + redux "^3.2.0" + dom-to-image@^2.5.2: version "2.5.2" resolved "https://registry.yarnpkg.com/dom-to-image/-/dom-to-image-2.5.2.tgz#6476b9f43c27c00b76ce4f164d20e5eeab032497" @@ -1756,6 +1769,10 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" +hoist-non-react-statics@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" + home-or-tmp@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8" @@ -1842,7 +1859,7 @@ interpret@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90" -invariant@^2.2.0, invariant@^2.2.2: +invariant@^2.0.0, invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -2104,6 +2121,10 @@ locate-path@^2.0.0: p-locate "^2.0.0" path-exists "^3.0.0" +lodash-es@^4.2.1: + version "4.17.4" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7" + lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" @@ -2112,7 +2133,7 @@ lodash.isequal@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" -lodash@^4.14.0, lodash@^4.2.0, lodash@^4.5.1, lodash@^4.6.1: +lodash@^4.14.0, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.5.1, lodash@^4.6.1: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -2656,7 +2677,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@~15.5.7: +prop-types@15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7: version "15.5.10" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" dependencies: @@ -2757,6 +2778,23 @@ react-deep-force-update@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.0.1.tgz#4f7f6c12c3e7de42f345992a3c518236fa1ecad3" +react-dnd-html5-backend@^2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-2.4.1.tgz#439d2bcaf8bd8b87a51386beb51c128826182ddd" + dependencies: + lodash "^4.2.0" + +react-dnd@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-2.4.0.tgz#96f0042cd4cd375b4f0c3413f6ec84d267b7d792" + dependencies: + disposables "^1.0.1" + dnd-core "^2.4.0" + hoist-non-react-statics "^1.2.0" + invariant "^2.1.0" + lodash "^4.2.0" + prop-types "^15.5.8" + react-dom@^15.5.4: version "15.5.4" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da" @@ -2843,6 +2881,15 @@ redbox-react@^1.3.6: prop-types "^15.5.4" sourcemapped-stacktrace "^1.1.6" +redux@^3.2.0: + version "3.7.0" + resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.0.tgz#07a623cafd92eee8abe309d13d16538f6707926f" + dependencies: + lodash "^4.2.1" + lodash-es "^4.2.1" + loose-envify "^1.1.0" + symbol-observable "^1.0.3" + regenerate@^1.2.1: version "1.3.2" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260" @@ -3231,6 +3278,10 @@ supports-color@^3.1.0: dependencies: has-flag "^1.0.0" +symbol-observable@^1.0.3: + version "1.0.4" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d" + tapable@^0.2.5, tapable@~0.2.5: version "0.2.6" resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.6.tgz#206be8e188860b514425375e6f1ae89bfb01fd8d" From d0c0f18b455d1748862cb6dca532e483355bcbc7 Mon Sep 17 00:00:00 2001 From: Mike Fix Date: Sun, 18 Jun 2017 14:14:07 -0700 Subject: [PATCH 03/12] move constanst to separate file --- components/toolbar.js | 77 +---------------- lib/constants.js | 191 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 194 insertions(+), 74 deletions(-) create mode 100644 lib/constants.js diff --git a/components/toolbar.js b/components/toolbar.js index 5ac6cb0..4fd6e3e 100644 --- a/components/toolbar.js +++ b/components/toolbar.js @@ -3,83 +3,12 @@ import Dropdown from './dropdown' import ColorPicker from './colorpicker' import Settings from './settings' import Button from './button' - -const themes = [ - { - name: 'dracula' - }, - { - name: 'solarized' - } -] - -const langauges = [ - 'Auto Detect', - 'Plain Text', - 'AppleScript', - 'BoxNote', - 'C', - 'C#', - 'CSS', - 'CSV', - 'Closure', - 'CoffeeScript', - 'Cold Fusion', - 'Crystal', - 'Cypher', - 'D', - 'Dart', - 'Diff', - 'Docker', - 'Erlang', - 'F#', - 'Fortran', - 'Gherkin', - 'Go', - 'Groovy', - 'HTML', - 'Haskell', - 'Haxe', - 'Java', - 'JavaScript', - 'JSON', - 'Julia', - 'Kotlin', - 'LaTex', - 'Lisp', - 'Lua', - 'MATLAB', - 'MUMPS', - 'OCaml', - 'Objective-C', - 'PHP', - 'Pascal', - 'Perl', - 'Pig', - 'Post', - 'Puppet', - 'Python', - 'R', - 'Ruby', - 'Rust', - 'SQL', - 'Sass', - 'Scheme', - 'Smalltalk', - 'Swift', - 'TSV', - 'VB.NET', - 'VBScript', - 'Velocity', - 'Verilog', - 'XML', - 'YAML' -].map(name => ({ name })) +import { THEMES, LANGUAGES } from '../lib/constants' const Toolbar = (props) => (
- - + + Date: Sun, 18 Jun 2017 14:23:16 -0700 Subject: [PATCH 04/12] pass config object --- lib/constants.js | 6 ++++-- pages/index.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/constants.js b/lib/constants.js index 011f2bd..f6d9f40 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -48,10 +48,12 @@ if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') { export const THEMES = [ { - name: 'dracula' + id: 'dracula', + name: 'Dracula' }, { - name: 'solarized' + id: 'solarized', + name: 'Solarized' } ] diff --git a/pages/index.js b/pages/index.js index ab1ff3c..622e54d 100644 --- a/pages/index.js +++ b/pages/index.js @@ -73,7 +73,7 @@ class Index extends React.Component { onBGChange={color => this.setState({ bgColor: color })} bg={this.state.bgColor} /> - + {this.props.content || DEFAULT_CODE}
From 9001198ad5fdedbafaab68840a8dee836f911af2 Mon Sep 17 00:00:00 2001 From: Mike Fix Date: Sun, 18 Jun 2017 14:32:48 -0700 Subject: [PATCH 05/12] Pass config into codeimage; --- components/dropdown.js | 5 ++++- components/toolbar.js | 4 ++-- lib/constants.js | 13 +++++++++++++ pages/index.js | 25 ++++++++----------------- 4 files changed, 27 insertions(+), 20 deletions(-) diff --git a/components/dropdown.js b/components/dropdown.js index c4e5a48..6db7dc9 100644 --- a/components/dropdown.js +++ b/components/dropdown.js @@ -14,7 +14,10 @@ class Dropdown extends React.Component { } select(item) { - this.setState({ selected: item }) + if (this.state.selected !== item) { + this.props.onChange(item) + this.setState({ selected: item }) + } } toggle() { diff --git a/components/toolbar.js b/components/toolbar.js index 4fd6e3e..af38c6c 100644 --- a/components/toolbar.js +++ b/components/toolbar.js @@ -7,8 +7,8 @@ import { THEMES, LANGUAGES } from '../lib/constants' const Toolbar = (props) => (
- - + + obj => key.split('.').reduce((accum, key) => accum[key], obj) + +const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res) + +const unfold = (f, seed) => { + const go = (f, seed, acc) => { + const res = f(seed) + return res ? go(f, res[1], acc.concat([res[0]])) : acc + } + return go(f, seed, []) +} + ` diff --git a/pages/index.js b/pages/index.js index 622e54d..922bc23 100644 --- a/pages/index.js +++ b/pages/index.js @@ -4,24 +4,11 @@ import { DragDropContext } from 'react-dnd' import Axios from 'axios' import domtoimage from 'dom-to-image' - import Meta from '../components/meta' import Toolbar from '../components/toolbar' import CodeImage from '../components/codeImage' import api from '../lib/api' - -const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) - -const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res) - -const unfold = (f, seed) => { - const go = (f, seed, acc) => { - const res = f(seed) - return res ? go(f, res[1], acc.concat([res[0]])) : acc - } - return go(f, seed, []) -} - ` +import { THEMES, LANGUAGES, DEFAULT_CODE } from '../lib/constants' class Index extends React.Component { /* pathname, asPath, err, req, res */ @@ -38,7 +25,9 @@ class Index extends React.Component { constructor() { super() this.state = { - bgColor: '#111111' + bgColor: '#111111', + theme: THEMES[0], + language: LANGUAGES[0] } } @@ -71,10 +60,12 @@ class Index extends React.Component { save={this.save} upload={this.upload} onBGChange={color => this.setState({ bgColor: color })} + onThemeChange={theme => this.setState({ theme })} + onLanguageChange={language => this.setState({ language })} bg={this.state.bgColor} /> - - {this.props.content || DEFAULT_CODE} + + {this.droppedContent || this.props.content || DEFAULT_CODE}
+ ) From 94e1ce59498f6ca83e9fee100146d533d0370f36 Mon Sep 17 00:00:00 2001 From: briandennis Date: Sun, 18 Jun 2017 14:42:57 -0700 Subject: [PATCH 07/12] add more codeimage stuffs --- components/codeImage.js | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/components/codeImage.js b/components/codeImage.js index f385637..c4c70d4 100644 --- a/components/codeImage.js +++ b/components/codeImage.js @@ -6,9 +6,7 @@ import WindowControls from '../components/svg/controls' // hack to only call modes on browser if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') { - require('codemirror/mode/javascript/javascript'); - require('codemirror/mode/xml/xml'); - require('codemirror/mode/markdown/markdown'); + require('../lib/constants') } const margin = '45px 54px' @@ -19,7 +17,8 @@ class CodeImage extends React.Component { super(props) this.state = { - code: this.props.children + code: this.props.children, + config: this.props.config || {} } } @@ -28,15 +27,14 @@ class CodeImage extends React.Component { } render () { - const options = { lineNumbers: false, mode: 'javascript' } + const options = { lineNumbers: false, mode: 'javascript', theme: 'dracula'} return (
-
-
- -
+ +
+ { true ? : null }
@@ -61,12 +59,6 @@ class CodeImage extends React.Component { align-items: center; } - .window-controls { - position: absolute; - margin-left: -2px; - margin-top: -14px; - } - .hyper { border: 1px solid #393939; border-radius: 5px; From eb75ecd320990bb508e8984f3963ef9163b77a9b Mon Sep 17 00:00:00 2001 From: briandennis Date: Sun, 18 Jun 2017 15:35:57 -0700 Subject: [PATCH 08/12] add dynamic styles, fix window control --- components/codeImage.js | 60 ++++++++++++++++++-------------------- components/dnd.js | 25 ++++++++++++++++ components/meta.js | 7 +++++ components/svg/controls.js | 5 ++-- pages/index.js | 6 ++-- 5 files changed, 66 insertions(+), 37 deletions(-) create mode 100644 components/dnd.js diff --git a/components/codeImage.js b/components/codeImage.js index c4c70d4..aef04e4 100644 --- a/components/codeImage.js +++ b/components/codeImage.js @@ -9,16 +9,22 @@ if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') { require('../lib/constants') } -const margin = '45px 54px' -const padding = '50px 50px' +const DEFAULT_SETTINGS = { + paddingVertical: '50px', + paddingHorizontal: '50px', + marginVertical: '45px', + marginHorizontal: '45px', + background: '#fed0ec', + theme: 'dracula', + language: 'javascript' +} class CodeImage extends React.Component { constructor (props) { super(props) this.state = { - code: this.props.children, - config: this.props.config || {} + code: this.props.children } } @@ -27,17 +33,30 @@ class CodeImage extends React.Component { } render () { - const options = { lineNumbers: false, mode: 'javascript', theme: 'dracula'} + const config = Object.assign(DEFAULT_SETTINGS, this.props.config) + + const options = { + lineNumbers: false, + mode: config.language, + theme: config.theme, + scrollBarStyle: null, + viewportMargin: Infinity, + lineWrapping: true + } + + // create styles + const containerStyle = { + background: config.background, + padding: `${config.paddingVertical} ${config.paddingHorizontal}` + } return (
-
+
{ true ? : null } -
- -
+
) diff --git a/components/dnd.js b/components/dnd.js new file mode 100644 index 0000000..af2c8b8 --- /dev/null +++ b/components/dnd.js @@ -0,0 +1,25 @@ +const drop = (props, monitor, component) => { + const bundle = monitor.getItem() + const file = bundle.files[0] + const reader = new FileReader() + reader.onload = function(event) { + component.setState({ + droppedContent: event.target.result + }) + }; + reader.readAsText(file, "UTF-8"); +} + +export default DropTarget(NativeTypes.FILE, { drop }, (connect, monitor) => ({ + connectDropTarget: connect.dropTarget(), + isOver: monitor.isOver(), + canDrop: monitor.canDrop(), + item: monitor.getItem() +}))(CodeImage) + + +let code = this.props.content + const split = code.split(EOL) + if (split.length > MAX_LINES) code = [...split.slice(0, MAX_LINES - 1), '', '...'].join(EOL) + + return this.props.connectDropTarget( \ No newline at end of file diff --git a/components/meta.js b/components/meta.js index 8a8948d..feb6509 100644 --- a/components/meta.js +++ b/components/meta.js @@ -27,6 +27,13 @@ export default () => ( #toolbar>div:last-child { margin-right: 0px; } + + .CodeMirrorContainer .CodeMirror { + height: auto; + min-width: 680px; + padding: 40px 18px 24px; + border-radius: 3px; + } `}
) diff --git a/components/svg/controls.js b/components/svg/controls.js index 6495e8f..6464e4b 100644 --- a/components/svg/controls.js +++ b/components/svg/controls.js @@ -12,8 +12,9 @@ export default () => ( diff --git a/pages/index.js b/pages/index.js index 922bc23..7ed1226 100644 --- a/pages/index.js +++ b/pages/index.js @@ -26,8 +26,8 @@ class Index extends React.Component { super() this.state = { bgColor: '#111111', - theme: THEMES[0], - language: LANGUAGES[0] + theme: THEMES[0].id, + language: 'javascript' // TODO LANGUAGES[0] } } @@ -60,7 +60,7 @@ class Index extends React.Component { save={this.save} upload={this.upload} onBGChange={color => this.setState({ bgColor: color })} - onThemeChange={theme => this.setState({ theme })} + onThemeChange={theme => this.setState({ theme: theme.id })} onLanguageChange={language => this.setState({ language })} bg={this.state.bgColor} /> From 0bf01d6fbe35ed6139367f30f581b41c99ca83f2 Mon Sep 17 00:00:00 2001 From: Mike Fix Date: Sun, 18 Jun 2017 16:11:26 -0700 Subject: [PATCH 09/12] Move state out of CodeImage --- components/codeImage.js | 74 ++++++++++++++++------------------------- components/meta.js | 2 ++ 2 files changed, 31 insertions(+), 45 deletions(-) diff --git a/components/codeImage.js b/components/codeImage.js index aef04e4..3733c31 100644 --- a/components/codeImage.js +++ b/components/codeImage.js @@ -19,56 +19,40 @@ const DEFAULT_SETTINGS = { language: 'javascript' } -class CodeImage extends React.Component { - constructor (props) { - super(props) - - this.state = { - code: this.props.children - } +const CodeImage = (props) => { + const config = Object.assign(DEFAULT_SETTINGS, props.config) + + const options = { + lineNumbers: false, + mode: config.language, + theme: config.theme, + scrollBarStyle: null, + viewportMargin: Infinity, + lineWrapping: true } - updateCode (newCode) { - this.setState({ code: newCode }) + // create styles + const containerStyle = { + background: config.background, + padding: `${config.paddingVertical} ${config.paddingHorizontal}` } - render () { - const config = Object.assign(DEFAULT_SETTINGS, this.props.config) - - const options = { - lineNumbers: false, - mode: config.language, - theme: config.theme, - scrollBarStyle: null, - viewportMargin: Infinity, - lineWrapping: true - } - - // create styles - const containerStyle = { - background: config.background, - padding: `${config.paddingVertical} ${config.paddingHorizontal}` - } - - return ( -
- - -
- { true ? : null } - -
- + return ( +
+
+ { true ? : null } +
- ) - } + +
+ ) } export default CodeImage diff --git a/components/meta.js b/components/meta.js index feb6509..f462bcb 100644 --- a/components/meta.js +++ b/components/meta.js @@ -3,6 +3,8 @@ import Head from 'next/head' export default () => (
+ + From c61f2184a9fddcb9c7c65488398401d487589fda Mon Sep 17 00:00:00 2001 From: Mike Fix Date: Sun, 18 Jun 2017 16:14:31 -0700 Subject: [PATCH 10/12] Rename components --- components/codeImage.js | 2 +- components/dropdown.js | 2 +- components/settings.js | 2 +- components/toolbar.js | 8 ++++---- pages/index.js | 6 +++--- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/components/codeImage.js b/components/codeImage.js index 3733c31..f5a251c 100644 --- a/components/codeImage.js +++ b/components/codeImage.js @@ -2,7 +2,7 @@ import { EOL } from 'os' import React from 'react' import domtoimage from 'dom-to-image' import CodeMirror from 'react-codemirror' -import WindowControls from '../components/svg/controls' +import WindowControls from '../components/svg/Controls' // hack to only call modes on browser if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') { diff --git a/components/dropdown.js b/components/dropdown.js index 6db7dc9..6e8bdce 100644 --- a/components/dropdown.js +++ b/components/dropdown.js @@ -1,6 +1,6 @@ import React from 'react' import enhanceWithClickOutside from 'react-click-outside' -import ArrowDown from './svg/arrowdown' +import ArrowDown from './svg/Arrowdown' class Dropdown extends React.Component { constructor(props) { diff --git a/components/settings.js b/components/settings.js index 66a2077..10f700f 100644 --- a/components/settings.js +++ b/components/settings.js @@ -1,6 +1,6 @@ import React from 'react' import enhanceWithClickOutside from 'react-click-outside' -import SettingsIcon from './svg/settings' +import SettingsIcon from './svg/Settings' class Settings extends React.Component { constructor(props) { diff --git a/components/toolbar.js b/components/toolbar.js index af38c6c..6ac068f 100644 --- a/components/toolbar.js +++ b/components/toolbar.js @@ -1,8 +1,8 @@ import React from 'react' -import Dropdown from './dropdown' -import ColorPicker from './colorpicker' -import Settings from './settings' -import Button from './button' +import Dropdown from './Dropdown' +import ColorPicker from './Colorpicker' +import Settings from './Settings' +import Button from './Button' import { THEMES, LANGUAGES } from '../lib/constants' const Toolbar = (props) => ( diff --git a/pages/index.js b/pages/index.js index 7ed1226..091443c 100644 --- a/pages/index.js +++ b/pages/index.js @@ -4,9 +4,9 @@ import { DragDropContext } from 'react-dnd' import Axios from 'axios' import domtoimage from 'dom-to-image' -import Meta from '../components/meta' -import Toolbar from '../components/toolbar' -import CodeImage from '../components/codeImage' +import Meta from '../components/Meta' +import Toolbar from '../components/Toolbar' +import CodeImage from '../components/CodeImage' import api from '../lib/api' import { THEMES, LANGUAGES, DEFAULT_CODE } from '../lib/constants' From 676fb594a41d7d62bfbf75272b4793d472e83318 Mon Sep 17 00:00:00 2001 From: Mike Fix Date: Sun, 18 Jun 2017 16:21:24 -0700 Subject: [PATCH 11/12] Dont make gist request if at / --- pages/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/pages/index.js b/pages/index.js index 091443c..df48168 100644 --- a/pages/index.js +++ b/pages/index.js @@ -14,12 +14,14 @@ class Index extends React.Component { /* pathname, asPath, err, req, res */ static async getInitialProps ({ asPath }) { try { - const content = await api.getGist(asPath) - return { content } + if (asPath !== '/') { + const content = await api.getGist(asPath) + return { content } + } } catch (e) { console.log(e) - return {} } + return {} } constructor() { From 8697c2e6839de46d9426e8ee6e74b4806e69ca47 Mon Sep 17 00:00:00 2001 From: Mike Fix Date: Sun, 18 Jun 2017 16:29:44 -0700 Subject: [PATCH 12/12] Fix git renaming issue --- components/{button.js => Button.js} | 0 components/{codeImage.js => CodeImage.js} | 0 components/{colorpicker.js => Colorpicker.js} | 0 components/{dropdown.js => Dropdown.js} | 0 components/{meta.js => Meta.js} | 0 components/{settings.js => Settings.js} | 0 components/{toolbar.js => Toolbar.js} | 0 components/svg/{arrowdown.js => Arrowdown.js} | 0 components/svg/{controls.js => Controls.js} | 0 components/svg/{settings.js => Settings.js} | 0 10 files changed, 0 insertions(+), 0 deletions(-) rename components/{button.js => Button.js} (100%) rename components/{codeImage.js => CodeImage.js} (100%) rename components/{colorpicker.js => Colorpicker.js} (100%) rename components/{dropdown.js => Dropdown.js} (100%) rename components/{meta.js => Meta.js} (100%) rename components/{settings.js => Settings.js} (100%) rename components/{toolbar.js => Toolbar.js} (100%) rename components/svg/{arrowdown.js => Arrowdown.js} (100%) rename components/svg/{controls.js => Controls.js} (100%) rename components/svg/{settings.js => Settings.js} (100%) diff --git a/components/button.js b/components/Button.js similarity index 100% rename from components/button.js rename to components/Button.js diff --git a/components/codeImage.js b/components/CodeImage.js similarity index 100% rename from components/codeImage.js rename to components/CodeImage.js diff --git a/components/colorpicker.js b/components/Colorpicker.js similarity index 100% rename from components/colorpicker.js rename to components/Colorpicker.js diff --git a/components/dropdown.js b/components/Dropdown.js similarity index 100% rename from components/dropdown.js rename to components/Dropdown.js diff --git a/components/meta.js b/components/Meta.js similarity index 100% rename from components/meta.js rename to components/Meta.js diff --git a/components/settings.js b/components/Settings.js similarity index 100% rename from components/settings.js rename to components/Settings.js diff --git a/components/toolbar.js b/components/Toolbar.js similarity index 100% rename from components/toolbar.js rename to components/Toolbar.js diff --git a/components/svg/arrowdown.js b/components/svg/Arrowdown.js similarity index 100% rename from components/svg/arrowdown.js rename to components/svg/Arrowdown.js diff --git a/components/svg/controls.js b/components/svg/Controls.js similarity index 100% rename from components/svg/controls.js rename to components/svg/Controls.js diff --git a/components/svg/settings.js b/components/svg/Settings.js similarity index 100% rename from components/svg/settings.js rename to components/svg/Settings.js