From 641dfd90a7ca59875d03eaaf39e3996463cda780 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sat, 22 Jul 2017 16:58:12 -0500 Subject: [PATCH 1/6] Add type-system.css --- components/Meta.js | 1 + static/type-system.css | 89 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 90 insertions(+) create mode 100644 static/type-system.css diff --git a/components/Meta.js b/components/Meta.js index 15e23ec..4b42c3b 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -5,6 +5,7 @@ export default () => (
+ { THEMES.map((theme, i) => ( diff --git a/static/type-system.css b/static/type-system.css new file mode 100644 index 0000000..04ed45c --- /dev/null +++ b/static/type-system.css @@ -0,0 +1,89 @@ + +:root { + --h0: 4.5rem; + --h1: 3rem; + --h2: 2.25rem; + --h3: 1.5rem; + --h4: 1.125rem; + --h5: .75rem; + + --lh: calc(4/3); + --mx: 32em; + + --m1: calc(2/3 * 1em); + --m2: calc(4/3 * 1em); + --m3: calc(8/3 * 1em); + --m4: calc(16/3 * 1em); + --x1: .5rem; + --x2: 1rem; + --x3: 2rem; + --x4: 4rem; + --x5: 8rem; + --x6: 16rem; +} + +body { + font-family: -apple-system, sans-serif; + font-size: var(--h4); + line-height: var(--lh); + margin: 2rem; +} + +h1, h2, h3 { + margin-top: var(--m1); + margin-bottom: 0; +} + +h4, h5, h6, +p, dl, ol, ul, blockquote { + margin-top: var(--m2); + margin-bottom: var(--m2); +} + +h1 { font-size: var(--h2) } +h2, h3 { font-size: var(--h3) } +h4 { font-size: var(--h4) } +h5, h6 { font-size: var(--h5) } + +.h0 { font-size: var(--h0) } +.h1 { font-size: var(--h1) } +.h2 { font-size: var(--h2) } +.h3 { font-size: var(--h3) } +.h4 { font-size: var(--h4) } +.h5 { font-size: var(--h5) } +.h6 { font-size: var(--h5) } + +@media screen and (min-width: 40em) { + .xh0 { font-size: var(--h0) } + .xh1 { font-size: var(--h1) } + .xh2 { font-size: var(--h2) } + .xh3 { font-size: var(--h3) } + .xh4 { font-size: var(--h4) } + .xh5 { font-size: var(--h5) } + .xh6 { font-size: var(--h5) } +} + +.lh1 { line-height: 1 } +/* h0, h1, h3 */ +.lh2 { line-height: calc(7/6 * 1em) } +/* For body copy */ +.lh3 { line-height: calc(16/9 * 1em) } + +.mt0 { margin-top: 0 } +.mb0 { margin-bottom: 0 } +.mt1 { margin-top: var(--x1) } +.mb1 { margin-bottom: var(--x1) } +.mt2 { margin-top: var(--x2) } +.mb2 { margin-bottom: var(--x2) } +.mt3 { margin-top: var(--x3) } +.mb3 { margin-bottom: var(--x3) } +.mt4 { margin-top: var(--x4) } +.mb4 { margin-bottom: var(--x4) } +.mt5 { margin-top: var(--x5) } +.mb5 { margin-bottom: var(--x5) } +.mt6 { margin-top: var(--x6) } +.mb6 { margin-bottom: var(--x6) } + +.mx { max-width: var(--mx) } +.bold { font-weight: bold } + From d62bbf1a90cd239b3d2f43e46e75861b9ca8ffc2 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sat, 22 Jul 2017 16:58:40 -0500 Subject: [PATCH 2/6] Minor style additions --- components/Footer.js | 30 ++++++++++++++++++++++++++---- components/Header.js | 20 +++++++++++--------- components/Meta.js | 5 +++++ lib/constants.js | 2 +- 4 files changed, 43 insertions(+), 14 deletions(-) diff --git a/components/Footer.js b/components/Footer.js index 743ff2d..0b8ae9d 100644 --- a/components/Footer.js +++ b/components/Footer.js @@ -1,18 +1,40 @@ import React from 'react' +import Link from 'next/link' const Footer = (props) => (
- a project by @dawn_labs ¬ +
+ about + send feedback + tweet + star +
+
a project by @dawn_labs ¬
) diff --git a/components/Header.js b/components/Header.js index 426a480..5737875 100644 --- a/components/Header.js +++ b/components/Header.js @@ -4,13 +4,13 @@ import Logo from './svg/Logo' const Header = (props) => (
- -

The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.

+ +

The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.

diff --git a/components/Meta.js b/components/Meta.js index 4b42c3b..06fe74c 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -25,9 +25,14 @@ export default () => ( +
+) 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 From d6dfe3f446c10ba4ca0b3f247e171789bda119cf Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sun, 23 Jul 2017 12:00:31 -0500 Subject: [PATCH 4/6] Add hero text toggle --- components/Header.js | 15 +++++++-------- components/Page.js | 4 ++-- pages/editor.js | 2 +- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/components/Header.js b/components/Header.js index 5737875..05f73fe 100644 --- a/components/Header.js +++ b/components/Header.js @@ -1,31 +1,30 @@ import React from 'react' import Logo from './svg/Logo' -const Header = (props) => ( -
+const Header = ({ enableHeroText }) => ( +
- -

The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.

+ + { enableHeroText ? (

The easiest way to create images from source code.
Start typing, or drag a file into the text area to get started.

) : null }
diff --git a/components/Page.js b/components/Page.js index c5ecc4f..2269cf8 100644 --- a/components/Page.js +++ b/components/Page.js @@ -3,10 +3,10 @@ import Meta from './Meta' import Header from './Header' import Footer from './Footer' -export default ({ children }) => ( +export default ({ children, enableHeroText }) => (
-
+
{ children }
diff --git a/pages/editor.js b/pages/editor.js index 2463e22..d068bcc 100644 --- a/pages/editor.js +++ b/pages/editor.js @@ -59,7 +59,7 @@ class Editor extends React.Component { render () { return ( - + {/* TODO this doesn't update the render */} { From 96dff6d8fe796e136c1301aae04c4f493fefaf46 Mon Sep 17 00:00:00 2001 From: Jake Dexheimer Date: Sun, 23 Jul 2017 12:01:00 -0500 Subject: [PATCH 5/6] Style /about page --- components/Footer.js | 3 ++- components/Meta.js | 5 +++-- components/svg/Logo.js | 2 +- lib/constants.js | 5 +++-- pages/about.js | 18 +++++++++--------- 5 files changed, 18 insertions(+), 15 deletions(-) diff --git a/components/Footer.js b/components/Footer.js index 0b8ae9d..af5ec35 100644 --- a/components/Footer.js +++ b/components/Footer.js @@ -1,5 +1,6 @@ import React from 'react' import Link from 'next/link' +import { PALETTE } from '../lib/constants' const Footer = (props) => (
@@ -19,7 +20,7 @@ const Footer = (props) => ( text-align: center; font-size: 14px; margin: 16px 0; - color: #777; + color: ${PALETTE.GRAY}; } a { diff --git a/components/Meta.js b/components/Meta.js index 06fe74c..6aa493a 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -26,7 +26,7 @@ export default () => ( body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; - background: #000; + background: #121212; } h1, h2, h3, h4, h5, h6 { @@ -43,7 +43,8 @@ export default () => ( } ::selection { - background-color: rgba(256, 256, 256, 0.165); + background: rgba(255,255,255,.99); + color: #121212; } #toolbar > div { diff --git a/components/svg/Logo.js b/components/svg/Logo.js index e56eefd..1055b8e 100644 --- a/components/svg/Logo.js +++ b/components/svg/Logo.js @@ -1,7 +1,7 @@ import React from 'react' export default () => ( - + diff --git a/lib/constants.js b/lib/constants.js index 18a8f21..85f8ec9 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -230,8 +230,9 @@ export const LANGUAGES = [ ] export const PALETTE = { - EDITOR_BG: '#000', - SECONDARY: '#fff' + EDITOR_BG: '#121212', + SECONDARY: '#fff', + GRAY: '#646464' } export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) diff --git a/pages/about.js b/pages/about.js index 3c4dc2d..98e0e02 100644 --- a/pages/about.js +++ b/pages/about.js @@ -2,7 +2,7 @@ import Page from '../components/Page' import Meta from '../components/Meta' import Header from '../components/Header' import Footer from '../components/Footer' - +import { PALETTE } from '../lib/constants' export default () => ( @@ -14,16 +14,16 @@ export default () => (

How do I use it?

Import

-

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

-
    +

    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.

    +

    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.

@@ -31,8 +31,8 @@ export default () => (