From 7687ccd05ddd07352d88a9f606f58202a93d3805 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sat, 22 Jul 2017 16:58:49 -0500 Subject: [PATCH] Refactor into Page component --- components/Page.js | 27 +++++++++++ pages/about.js | 47 ++++++++++++++++++ pages/editor.js | 100 ++++++++++++++++++++++++++++++++++++++ pages/index.js | 118 +-------------------------------------------- 4 files changed, 176 insertions(+), 116 deletions(-) create mode 100644 components/Page.js create mode 100644 pages/about.js create mode 100644 pages/editor.js diff --git a/components/Page.js b/components/Page.js new file mode 100644 index 0000000..c5ecc4f --- /dev/null +++ b/components/Page.js @@ -0,0 +1,27 @@ +import React from 'react' +import Meta from './Meta' +import Header from './Header' +import Footer from './Footer' + +export default ({ children }) => ( +
+ +
+
+ { children } +
+ +
+ + +
+) diff --git a/pages/about.js b/pages/about.js new file mode 100644 index 0000000..3c4dc2d --- /dev/null +++ b/pages/about.js @@ -0,0 +1,47 @@ +import Page from '../components/Page' +import Meta from '../components/Meta' +import Header from '../components/Header' +import Footer from '../components/Footer' + + +export default () => ( + +
+
+

What does this do?

+

You know all of those code screenshots you see on Twitter? Although the code's usually impressive, we think there's room for improvement in the aesthetic department. Carbon is the easiest way to create beautiful images of your source code. Now you can impress all of your followers with your newfound design prowess. 🎨

+
+
+

How do I use it?

+

Import

+

There are a few different ways to import code into Carbon:

+
    +
  • Drag a file into the editor
    • +
  • Append a GitHub Gist id to the url
    • +
  • Paste your code directly
    • +
+

Customization

+

Once you've got all of your code into Carbon, you can customize your image by changing the syntax theme, background color, window theme, or padding.

+

Export/Sharing

+

After you've customized your image, you can copy a link to the image, save it, or share it on Twitter.

+
+
+

I want to make this better.

+

Please do.

+
+
+ + +) diff --git a/pages/editor.js b/pages/editor.js new file mode 100644 index 0000000..2463e22 --- /dev/null +++ b/pages/editor.js @@ -0,0 +1,100 @@ +import React from 'react' +import HTML5Backend from 'react-dnd-html5-backend' +import { DragDropContext } from 'react-dnd' +import Axios from 'axios' +import domtoimage from 'dom-to-image' + +import Page from '../components/Page' +import ReadFileDropContainer from '../components/ReadFileDropContainer' +import Toolbar from '../components/Toolbar' +import CodeImage from '../components/CodeImage' +import api from '../lib/api' +import { THEMES, LANGUAGES, PALETTE, DEFAULT_CODE } from '../lib/constants' + +class Editor extends React.Component { + /* pathname, asPath, err, req, res */ + static async getInitialProps ({ asPath }) { + try { + if (asPath !== '/') { + const content = await api.getGist(asPath) + return { content } + } + } catch (e) { + console.log(e) + } + return {} + } + + constructor() { + super() + this.state = { + background: '#111111', + theme: THEMES[0].id, + language: 'javascript', // TODO LANGUAGES[0] + dropShadow: false, + windowControls: true, + paddingVertical: '48px', + paddingHorizontal: '32px' + } + } + + save () { + // domtoimage.toPng(document.getElementById('container')) + domtoimage.toPng(document.getElementById('container')) + .then((dataUrl) => { + const link = document.createElement('a') + link.download = 'snippet.png' + link.href = dataUrl + link.click() + }) + } + + upload () { + domtoimage.toBlob(document.getElementById('container')) + .then(api.uploadImage) + .then(res => res.data.id) + .then(id => `http://i.imgur.com/${id}`) + .then(console.log) + } + + render () { + return ( + + {/* TODO this doesn't update the render */} + { + console.log(droppedContent) + this.setState({ droppedContent }) + }} + > +
+ this.setState({ background: color })} + onThemeChange={theme => this.setState({ theme: theme.id })} + onLanguageChange={language => this.setState({ language })} + onSettingsChange={(key, value) => this.setState({ [key]: value })} + bg={this.state.background} + enabled={this.state} + /> + + {this.state.droppedContent || this.props.content || DEFAULT_CODE} + +
+ + + + ) + } +} + +export default DragDropContext(HTML5Backend)(Editor) diff --git a/pages/index.js b/pages/index.js index 0768df7..56dd891 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,116 +1,2 @@ -import React from 'react' -import HTML5Backend from 'react-dnd-html5-backend' -import { DragDropContext } from 'react-dnd' -import Axios from 'axios' -import domtoimage from 'dom-to-image' - -import ReadFileDropContainer from '../components/ReadFileDropContainer' -import Meta from '../components/Meta' -import Toolbar from '../components/Toolbar' -import { WINDOW_THEMES } from '../components/ThemeSelect' -import CodeImage from '../components/CodeImage' -import Header from '../components/Header' -import Footer from '../components/Footer' -import api from '../lib/api' -import { THEMES, LANGUAGES, PALETTE, DEFAULT_CODE } from '../lib/constants' - -class Index extends React.Component { - /* pathname, asPath, err, req, res */ - static async getInitialProps ({ asPath }) { - try { - if (asPath !== '/') { - const content = await api.getGist(asPath) - return { content } - } - } catch (e) { - console.log(e) - } - return {} - } - - constructor() { - super() - this.state = { - background: '#ABB8C3', - theme: THEMES[0].id, - language: 'javascript', // TODO LANGUAGES[0] - windowTheme: WINDOW_THEMES[0], - dropShadow: true, - windowControls: true, - paddingVertical: '48px', - paddingHorizontal: '32px' - } - } - - save () { - domtoimage.toPng(document.getElementById('container')) - .then((dataUrl) => { - const link = document.createElement('a') - link.download = 'snippet.png' - link.href = dataUrl - link.click() - }) - } - - upload () { - domtoimage.toBlob(document.getElementById('container')) - .then(api.uploadImage) - .then(res => res.data.id) - .then(id => `http://i.imgur.com/${id}`) - .then(console.log) - } - - render () { - return ( -
- -
- {/* TODO this doesn't update the render */} - { - console.log(droppedContent) - this.setState({ droppedContent }) - }} - > -
- this.setState({ background: color })} - onThemeChange={theme => this.setState({ theme: theme.id })} - onLanguageChange={language => this.setState({ language })} - onSettingsChange={(key, value) => this.setState({ [key]: value })} - bg={this.state.background} - enabled={this.state} - /> - - {this.state.droppedContent || this.props.content || DEFAULT_CODE} - -
- -
- ) - } -} - -export default DragDropContext(HTML5Backend)(Index) +import Editor from './editor' +export default Editor