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 Logo from '../components/svg/Logo' import Meta from '../components/Meta' 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 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: '#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.link) .then(console.log) } render () { return (

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

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} /> {this.droppedContent || this.props.content || DEFAULT_CODE}
a project by @dawn_labs ¬
) } } export default DragDropContext(HTML5Backend)(Index)