init

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.env
+.next

api.js

@@ -0,0 +1,31 @@
+import axios from 'axios'
+
+export default {
+  uploadImage
+}
+
+async function uploadImage (encodedImage) {
+   // upload image
+  const url = 'https://api.imgur.com/3/image'
+
+  const data = new FormData()
+  data.append('image', encodedImage)
+  data.append('type', 'base64')
+
+  const config = {
+    headers: {
+      Authorization: ` Client-ID 87cc98dcdabcbb3`
+    }
+  }
+
+  try {
+    const result = await axios.post(url, data, config)
+
+    console.log('success! ')
+    console.log(Object.keys(result.data))
+    console.log(result.data)
+  } catch (e) {
+    console.log('bummer man')
+    console.log(e)
+  }
+}

components/codeImage.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import domtoimage from 'dom-to-image'
+
+const padding = '50px 50px'
+
+class CodeImage extends React.Component {
+  constructor () {
+    super()
+    this.save = this.save.bind(this)
+  }
+
+  save () {
+    // save
+    domtoimage.toJpeg(this.container)
+      .then((dataUrl) => {
+        const link = document.createElement('a')
+        link.download = 'my-image-name.jpeg'
+        link.href = dataUrl
+        link.click()
+      })
+  }
+
+  render () {
+    return (
+      <div id='section'>
+        <div id='container' ref={(container) => { this.container = container }}>
+          <pre>
+            <code onClick={this.save}>
+              {this.props.children}
+            </code>
+          </pre>
+        </div>
+        <style jsx>{`
+          #section {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          #container {
+            background: green;
+            padding: ${padding};
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          pre {
+            background: white;
+            padding: 10px;
+            box-shadow: 10px 10px 12px -5px rgba(0,0,0,0.17);
+          }
+        `}</style>
+      </div>
+    )
+  }
+}
+
+export default CodeImage

handlers/upload.js

@@ -0,0 +1,43 @@
+const FormData = require('form-data')
+const axios = require('axios')
+
+module.exports = async (req, res) => {
+  // validate input
+  if (!req.body.image || typeof req.body.image !== 'string') {
+    const error = {
+      code: 1,
+      title: 'no image provided',
+      detail: '\'image\' key must be set to a base64 encoded image'
+    }
+    res.status(400).json({ errors: [error] })
+  }
+
+  const image = req.body.image
+
+  // upload image
+  const url = 'https://api.imgur.com/3/image'
+
+  const data = new FormData()
+  data.append('image', image)
+  data.append('type', 'base64')
+
+  const config = {
+    headers: {
+      Authorization: ` Client-ID ${process.env.IMGUR_ID}`
+    }
+  }
+
+  try {
+    const result = await axios.post(url, data, config)
+
+    if (!result.link) {
+      throw new Error('imgur failed to provide a link')
+    }
+
+    res.status(200).json({ data: { link: result.link } })
+  } catch (e) {
+    console.log(Object.keys(e.response))
+    const error = { code: 2, title: 'error uploading to imgur' }
+    res.status(500).json({ errors: [error] })
+  }
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "code-image-2",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "node server.js",
+    "next": "next"
+  },
+  "dependencies": {
+    "axios": "^0.16.2",
+    "body-parser": "^1.17.2",
+    "dom-to-image": "^2.5.2",
+    "express": "^4.15.3",
+    "form-data": "^2.2.0",
+    "morgan": "^1.8.2",
+    "next": "^2.4.3",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
+  }
+}

pages/index.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import Axios from 'axios'
+
+import CodeImage from '../components/codeImage'
+import api from '../api'
+
+const 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, [])
+}`
+
+export default (props) => {
+  return (
+    <div>
+      <style jsx>{`
+        div {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
+      `}
+      </style>
+      <h1> Welcome to Code Image</h1>
+      <CodeImage>
+        {code}
+      </CodeImage>
+    </div>
+  )
+}

server.js

@@ -0,0 +1,41 @@
+
+const express = require('express')
+const morgan = require('morgan')
+const bodyParser = require('body-parser')
+const next = require('next')
+
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+function wrap (handler) {
+  return (req, res) => handler(req, res).catch((err) => {
+    console.log('error handler triggereedddd')
+    console.log(err)
+  })
+}
+
+app.prepare()
+.then(() => {
+  const server = express()
+
+  server.use(morgan('tiny'))
+
+  // if root, render webpage from next
+  server.get('/', (req, res) => {
+    return app.render(req, res, '/', req.query)
+  })
+
+  // api endpoints
+  server.post('/upload', bodyParser.json(), wrap(require('./handlers/upload')))
+
+  // otherwise, try and get gist
+  server.get('*', (req, res) => {
+    return handle(req, res)
+  })
+
+  server.listen(3000, (err) => {
+    if (err) throw err
+    console.log('> Ready on http://localhost:3000')
+  })
+})