mirror of https://github.com/sgoudham/carbon.git
Jake Dexheimer
7 years ago
committed by
GitHub
commit
cae623c3e4
@ -0,0 +1,27 @@
|
||||
import React from 'react'
|
||||
import Meta from './Meta'
|
||||
import Header from './Header'
|
||||
import Footer from './Footer'
|
||||
|
||||
export default ({ children, enableHeroText }) => (
|
||||
<div className="main">
|
||||
<Meta />
|
||||
<Header enableHeroText={enableHeroText} />
|
||||
<div className="page">
|
||||
{ children }
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
<style jsx>{`
|
||||
.main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 848px;
|
||||
min-height: 704px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
@ -0,0 +1,47 @@
|
||||
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 () => (
|
||||
<Page>
|
||||
<div className="about">
|
||||
<div className="mb4">
|
||||
<h2>What does this do?</h2>
|
||||
<p>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. 🎨</p>
|
||||
</div>
|
||||
<div className="mb4">
|
||||
<h2>How do I use it?</h2>
|
||||
<h4 className="mb0">Import</h4>
|
||||
<p className="mb1 mt2">There are a few different ways to import code into Carbon:</p>
|
||||
<ul className="mt0 mb3">
|
||||
<li>Drag a file into the editor</li>
|
||||
<li>Append a GitHub Gist id to the url</li>
|
||||
<li>Paste your code directly</li>
|
||||
</ul>
|
||||
<h4 className="mb0">Customization</h4>
|
||||
<p className="mt2 mb3">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.</p>
|
||||
<h4 className="mb0">Export/Sharing</h4>
|
||||
<p className="mt2">After you've customized your image, you can copy a link to the image, save it, or share it on Twitter.</p>
|
||||
</div>
|
||||
<div className="mb4">
|
||||
<h2>I want to make this better.</h2>
|
||||
<p>Please do.</p>
|
||||
</div>
|
||||
</div>
|
||||
<style jsx>{`
|
||||
h4 {
|
||||
color: ${PALETTE.GRAY};
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.about {
|
||||
max-width: 632px;
|
||||
}
|
||||
`}</style>
|
||||
</Page>
|
||||
)
|
||||
@ -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: '#ABB8C3',
|
||||
theme: THEMES[0].id,
|
||||
language: 'javascript', // TODO LANGUAGES[0]
|
||||
dropShadow: true,
|
||||
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 (
|
||||
<Page enableHeroText>
|
||||
{/* TODO this doesn't update the render */}
|
||||
<ReadFileDropContainer
|
||||
onDrop={(droppedContent) => {
|
||||
console.log(droppedContent)
|
||||
this.setState({ droppedContent })
|
||||
}}
|
||||
>
|
||||
<div id="editor">
|
||||
<Toolbar
|
||||
save={this.save}
|
||||
upload={this.upload}
|
||||
onBGChange={color => 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}
|
||||
/>
|
||||
<CodeImage config={this.state}>
|
||||
{this.state.droppedContent || this.props.content || DEFAULT_CODE}
|
||||
</CodeImage>
|
||||
</div>
|
||||
</ReadFileDropContainer>
|
||||
<style jsx>{`
|
||||
#editor {
|
||||
background: ${PALETTE.EDITOR_BG};
|
||||
border: 3px solid ${PALETTE.SECONDARY};
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default DragDropContext(HTML5Backend)(Editor)
|
||||
@ -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 (
|
||||
<div className="main">
|
||||
<Meta />
|
||||
<Header />
|
||||
{/* TODO this doesn't update the render */}
|
||||
<ReadFileDropContainer
|
||||
onDrop={(droppedContent) => {
|
||||
console.log(droppedContent)
|
||||
this.setState({ droppedContent })
|
||||
}}
|
||||
>
|
||||
<div id="editor">
|
||||
<Toolbar
|
||||
save={this.save}
|
||||
upload={this.upload}
|
||||
onBGChange={color => 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}
|
||||
/>
|
||||
<CodeImage config={this.state}>
|
||||
{this.state.droppedContent || this.props.content || DEFAULT_CODE}
|
||||
</CodeImage>
|
||||
</div>
|
||||
</ReadFileDropContainer>
|
||||
<Footer />
|
||||
<style jsx>{`
|
||||
.main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
min-width: 848px;
|
||||
min-height: 704px;
|
||||
}
|
||||
|
||||
#editor {
|
||||
background: ${PALETTE.EDITOR_BG};
|
||||
border: 3px solid ${PALETTE.SECONDARY};
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default DragDropContext(HTML5Backend)(Index)
|
||||
import Editor from './editor'
|
||||
export default Editor
|
||||
|
||||
@ -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 }
|
||||
|
||||
Loading…
Reference in New Issue