Read config from gist (optional) (#692)

* read config from gist

* Update api.js

components/Editor.js

@@ -64,15 +64,21 @@ class Editor extends React.Component {
     const { query, pathname } = url.parse(asPath, true)
     const path = escapeHtml(pathname.split('/').pop())
     const queryParams = getQueryStringState(query)
-    const initialState = Object.keys(queryParams).length ? queryParams : {}
+    let initialState = Object.keys(queryParams).length ? queryParams : {}
     try {
       // TODO fix this hack
-      if (this.context.gist && path.length >= 19 && path.indexOf('.') === -1) {
-        const { content, language } = await this.context.gist.get(path)
+      if (path.length >= 19 && path.indexOf('.') === -1 && this.context.gist) {
+        const { code, language, config } = await await this.context.gist.get(path)
+
+        if (typeof config === 'object') {
+          initialState = config
+        }
+
         if (language) {
           initialState.language = language.toLowerCase()
         }
-        initialState.code = content
+
+        initialState.code = code
       }
     } catch (e) {
       // eslint-disable-next-line
@@ -293,7 +299,6 @@ class Editor extends React.Component {
     const config = omit(this.state, ['code', 'aspectRatio'])
 
     return (
-      <>
       <div className="editor">
         <Toolbar>
           <Themes key={theme} updateTheme={this.updateTheme} theme={theme} />
@@ -354,7 +359,6 @@ class Editor extends React.Component {
             </Overlay>
           )}
         </Dropzone>
-        </div>
         <style jsx>
           {`
             .editor {
@@ -370,7 +374,7 @@ class Editor extends React.Component {
             }
           `}
         </style>
-      </>
+      </div>
     )
   }
 }

lib/api.js

@@ -40,12 +40,33 @@ function image(state) {
   return client.post('/image', { state }).then(res => res.data)
 }
 
+// ~ makes the file come later alphabetically, which is how gists are sorted
+const CARBON_STORAGE_KEY = '~carbon.json'
 function getGist(uid) {
   return gistClient
     .get(`/gists/${uid}`)
     .then(res => res.data)
-    .then(gist => gist.files)
-    .then(files => files[Object.keys(files)[0]])
+    .then(({ owner, files }) => {
+      let config
+      if (files[CARBON_STORAGE_KEY]) {
+        try {
+          config = JSON.parse(files[CARBON_STORAGE_KEY].content)
+        } catch (error) {
+          // pass
+        }
+      }
+
+      const otherFiles = Object.keys(files).filter(key => key !== CARBON_STORAGE_KEY)
+
+      const snippet = files[otherFiles[0]]
+
+      return {
+        code: snippet.content,
+        language: snippet.language,
+        owner,
+        config
+      }
+    })
 }
 
 // private