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,68 +299,66 @@ 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} />
-            <Dropdown
-              icon={languageIcon}
-              selected={
-                LANGUAGE_NAME_HASH[language] ||
-                LANGUAGE_MIME_HASH[language] ||
-                LANGUAGE_MODE_HASH[language] ||
-                LANGUAGE_MODE_HASH[DEFAULT_LANGUAGE]
-              }
-              list={LANGUAGES}
-              onChange={this.updateLanguage}
-            />
-            <BackgroundSelect
-              onChange={this.updateBackground}
-              mode={backgroundMode}
-              color={backgroundColor}
-              image={backgroundImage}
-              aspectRatio={aspectRatio}
-            />
-            <Settings
-              {...config}
+      <div className="editor">
+        <Toolbar>
+          <Themes key={theme} updateTheme={this.updateTheme} theme={theme} />
+          <Dropdown
+            icon={languageIcon}
+            selected={
+              LANGUAGE_NAME_HASH[language] ||
+              LANGUAGE_MIME_HASH[language] ||
+              LANGUAGE_MODE_HASH[language] ||
+              LANGUAGE_MODE_HASH[DEFAULT_LANGUAGE]
+            }
+            list={LANGUAGES}
+            onChange={this.updateLanguage}
+          />
+          <BackgroundSelect
+            onChange={this.updateBackground}
+            mode={backgroundMode}
+            color={backgroundColor}
+            image={backgroundImage}
+            aspectRatio={aspectRatio}
+          />
+          <Settings
+            {...config}
+            onChange={this.updateSetting}
+            resetDefaultSettings={this.resetDefaultSettings}
+            format={this.format}
+            applyPreset={this.applyPreset}
+            getCarbonImage={this.getCarbonImage}
+          />
+          <div className="buttons">
+            <TweetButton onClick={this.upload} />
+            <ExportMenu
               onChange={this.updateSetting}
-              resetDefaultSettings={this.resetDefaultSettings}
-              format={this.format}
-              applyPreset={this.applyPreset}
-              getCarbonImage={this.getCarbonImage}
+              export={this.export}
+              exportSize={exportSize}
+              disablePNG={this.disablePNG}
             />
-            <div className="buttons">
-              <TweetButton onClick={this.upload} />
-              <ExportMenu
-                onChange={this.updateSetting}
-                export={this.export}
-                exportSize={exportSize}
-                disablePNG={this.disablePNG}
-              />
-            </div>
-          </Toolbar>
-
-          <Dropzone accept="image/*, text/*, application/*" onDrop={this.onDrop}>
-            {({ canDrop }) => (
-              <Overlay
-                isOver={canDrop}
-                title={`Drop your file here to import ${canDrop ? '✋' : '✊'}`}
+          </div>
+        </Toolbar>
+
+        <Dropzone accept="image/*, text/*, application/*" onDrop={this.onDrop}>
+          {({ canDrop }) => (
+            <Overlay
+              isOver={canDrop}
+              title={`Drop your file here to import ${canDrop ? '✋' : '✊'}`}
+            >
+              {/*key ensures Carbon's internal language state is updated when it's changed by Dropdown*/}
+              <Carbon
+                key={language}
+                ref={this.carbonNode}
+                config={this.state}
+                onChange={this.updateCode}
+                onAspectRatioChange={this.updateAspectRatio}
+                loading={this.state.loading}
               >
-                {/*key ensures Carbon's internal language state is updated when it's changed by Dropdown*/}
-                <Carbon
-                  key={language}
-                  ref={this.carbonNode}
-                  config={this.state}
-                  onChange={this.updateCode}
-                  onAspectRatioChange={this.updateAspectRatio}
-                  loading={this.state.loading}
-                >
-                  {code != null ? code : DEFAULT_CODE}
-                </Carbon>
-              </Overlay>
-            )}
-          </Dropzone>
-        </div>
+                {code != null ? code : DEFAULT_CODE}
+              </Carbon>
+            </Overlay>
+          )}
+        </Dropzone>
         <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