From faf5cf46dbb3a24955d70cd2c0b679802e239360 Mon Sep 17 00:00:00 2001
From: Dom Harrington <domharrington@protonmail.com>
Date: Tue, 28 Apr 2020 10:16:17 -0700
Subject: [PATCH 1/4] Add button to open up viewed spec file

---
 example/src/ApiList.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/example/src/ApiList.jsx b/example/src/ApiList.jsx
index a5bb1bef5..24c81e0a9 100644
--- a/example/src/ApiList.jsx
+++ b/example/src/ApiList.jsx
@@ -60,6 +60,8 @@ class ApiList extends React.Component {
             );
           })}
         </select>
+        &nbsp;
+        <a href={selected}>Open Spec</a>
       </h3>
     );
   }

From 0ffff7d84e87c7007cc652e7b28fccfd6db35baf Mon Sep 17 00:00:00 2001
From: Dom Harrington <domharrington@protonmail.com>
Date: Tue, 28 Apr 2020 12:13:48 -0700
Subject: [PATCH 2/4] Adding ability to enter a URL from the UI

---
 example/src/ApiList.jsx | 54 ++++++++++++++++++++++++++++-------------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/example/src/ApiList.jsx b/example/src/ApiList.jsx
index 24c81e0a9..f792a7c7f 100644
--- a/example/src/ApiList.jsx
+++ b/example/src/ApiList.jsx
@@ -8,9 +8,12 @@ class ApiList extends React.Component {
   constructor(props) {
     super(props);
 
+    const qs = parse(document.location.search.replace('?', ''));
+
     this.state = {
       apis: localDirectory,
-      selected: parse(document.location.search.replace('?', '')).selected || 'swagger-files/petstore.json',
+      selected: qs.selected || 'swagger-files/petstore.json',
+      customUrl: qs.customUrl,
     };
 
     this.changeApi = this.changeApi.bind(this);
@@ -33,35 +36,52 @@ class ApiList extends React.Component {
   componentDidUpdate(prevProps, prevState) {
     const { selected } = this.state;
 
-    if (prevState.selected !== selected) {
+    if (prevState.selected !== selected && selected !== 'enter-a-url') {
       this.props.fetchSwagger(selected);
       window.history.pushState('', '', `?${stringify({ selected })}`);
     }
   }
 
   changeApi(e) {
-    this.setState({ selected: e.currentTarget.value });
+    this.setState({ selected: e.currentTarget.value, customUrl: false });
   }
 
   render() {
-    const { apis, selected } = this.state;
+    const { apis, selected, customUrl } = this.state;
 
     return (
       <h3>
         Select an API:&nbsp;
-        <select onChange={this.changeApi} value={selected}>
-          {Object.keys(apis).map(name => {
-            const api = apis[name];
-            const preferred = api.preferred || Object.keys(api.versions)[0];
-            return (
-              <option key={name} value={api.versions[preferred].swaggerUrl}>
-                {name.substring(0, 30)}
-              </option>
-            );
-          })}
-        </select>
-        &nbsp;
-        <a href={selected}>Open Spec</a>
+        {selected === 'enter-a-url' ? (
+          <form style={{ display: 'inline' }}>
+            <input name="selected" type="url" />
+            <input name="customUrl" type="hidden" value="true" />
+            <button type="submit">Go</button>
+          </form>
+        ) : (
+          <>
+            <select onChange={this.changeApi} value={selected}>
+              <option value="enter-a-url">Enter a URL</option>
+              {selected && customUrl && (
+                <option disabled value={selected}>
+                  {selected}
+                </option>
+              )}
+
+              {Object.keys(apis).map(name => {
+                const api = apis[name];
+                const preferred = api.preferred || Object.keys(api.versions)[0];
+                return (
+                  <option key={name} value={api.versions[preferred].swaggerUrl}>
+                    {name.substring(0, 30)}
+                  </option>
+                );
+              })}
+            </select>
+            &nbsp;
+            <a href={selected}>Open Spec</a>
+          </>
+        )}
       </h3>
     );
   }

From 4e575b38344f0b80e5e6bdc06e1cd473ac5f21c9 Mon Sep 17 00:00:00 2001
From: Dom Harrington <domharrington@protonmail.com>
Date: Tue, 28 Apr 2020 12:30:25 -0700
Subject: [PATCH 3/4] Add support for yaml files to preview.readme.io

Now the following both work:

http://localhost:9966/reference/?url=https://petstore.swagger.io/v2/swagger.yaml
http://localhost:9966/?selected=https%3A%2F%2Fpetstore.swagger.io%2Fv2%2Fswagger.yaml&customUrl=true
---
 example/src/SpecFetcher.jsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/example/src/SpecFetcher.jsx b/example/src/SpecFetcher.jsx
index d367597cd..a6d9e6b9a 100644
--- a/example/src/SpecFetcher.jsx
+++ b/example/src/SpecFetcher.jsx
@@ -1,5 +1,6 @@
 const React = require('react');
 const swagger2openapi = require('swagger2openapi');
+const yaml = require('yaml');
 
 const createDocs = require('../../packages/api-explorer/lib/create-docs');
 
@@ -31,9 +32,13 @@ function withSpecFetching(Component) {
           .then(res => {
             if (!res.ok) {
               throw new Error('Failed to fetch.');
-            } else if (url.match(/\.(yaml|yml)/)) {
-              // @todo Should just try to automaticaly convert the spec if it isn't JSON.
-              throw new Error('Please convert your specification to JSON first.');
+            }
+
+            if (res.headers.get('content-type') === 'application/yaml' || url.match(/\.(yaml|yml)/)) {
+              this.updateStatus('Converting YAML to JSON');
+              return res.text().then(text => {
+                return yaml.parse(text);
+              });
             }
 
             return res.json();

From 4a2517988e4d83467357d1f11b0a37e8c67703f2 Mon Sep 17 00:00:00 2001
From: domharrington <domharrington@users.noreply.github.com>
Date: Tue, 28 Apr 2020 12:38:38 -0700
Subject: [PATCH 4/4] Update example/src/ApiList.jsx

Co-Authored-By: Jon Ursenbach <erunion@users.noreply.github.com>
---
 example/src/ApiList.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/src/ApiList.jsx b/example/src/ApiList.jsx
index f792a7c7f..c074f0343 100644
--- a/example/src/ApiList.jsx
+++ b/example/src/ApiList.jsx
@@ -79,7 +79,7 @@ class ApiList extends React.Component {
               })}
             </select>
             &nbsp;
-            <a href={selected}>Open Spec</a>
+            <a href={selected}>View document</a>
           </>
         )}
       </h3>