allow multiple server display via option

config-example.yml

@@ -44,6 +44,12 @@ spectaql:
   # Default: true
   errorOnInterpolationReferenceNotFound: true
 
+  # Would you like to display all the servers listed in the servers area of your config? Otherwise
+  # it will try to display just the one marked "production: true".
+  #
+  # Default: false
+  displayAllServers: false
+
 
 introspection:
   ##############################################

examples/config.yml

@@ -1,6 +1,7 @@
 spectaql:
   logoFile: ./test/fixtures/logo.png
   faviconFile: ./test/fixtures/favicon.png
+  displayAllServers: true
 
 introspection:
   removeTrailingPeriodFromDescriptions: false
@@ -29,6 +30,8 @@ info:
       description: Some important stuff we wanted you to know. Supports `markdown`
 
 servers:
+  - url: https://staging.example.com/graphql
+    description: Staging
   - url: https://example.com/graphql
     description: Production
     production: true

src/index.js

@@ -61,6 +61,7 @@ const defaults = Object.freeze({
 // is set, then use these:
 const spectaqlOptionDefaults = Object.freeze({
   errorOnInterpolationReferenceNotFound: true,
+  displayAllServers: false,
 })
 
 const introspectionOptionDefaults = Object.freeze({

src/spectaql/index.js

@@ -24,12 +24,13 @@ function run(opts) {
 
   const server =
     servers.find((server) => server.production === true) || servers[0]
+
   const headers = server?.headers
     ? server.headers
         .map((header) => {
           const { name, example, comment } = header
           if (name && example) {
-            return [comment ? `// ${comment}` : '', `${name}: ${example}`]
+            return [comment ? `# ${comment}` : '', `${name}: ${example}`]
               .filter(Boolean)
               .join('\n')
           }

src/themes/default/helpers/generateApiEndpoints.js

@@ -0,0 +1,36 @@
+module.exports = function (options) {
+  const { url, server, servers } = options?.data?.root || {}
+
+  const displayAllServers =
+    options?.data?.root?.allOptions?.specData?.spectaql?.displayAllServers ===
+    true
+  if (!displayAllServers) {
+    if (url) {
+      return url
+    }
+    if (server?.url) {
+      return server.url
+    }
+    const fallbackServer =
+      servers?.find((server) => server.url && server.production) ||
+      servers?.find((server) => server.url)
+    if (fallbackServer) {
+      return fallbackServer.url
+    }
+  }
+
+  if (!servers?.length) {
+    return '<<url is missing>>'
+  }
+
+  return servers
+    .map(
+      (server) =>
+        '# ' +
+        (server.description?.trim() || 'Endpoint') +
+        ':\n' +
+        (server.url?.trim() || '<<url is missing>>') +
+        '\n'
+    )
+    .join('')
+}

src/themes/default/views/partials/layout/content/introduction/welcome.hbs

@@ -34,10 +34,10 @@
       </div>
     {{/if}}
 
-    {{#if url}}
+    {{#if (or url server servers)}}
       <div class="example-section welcome-api-endpoints-section example-section-is-code">
         <h5>API Endpoints</h5>
-        <pre><code>{{url}}</code></pre>
+        <pre><code>{{generateApiEndpoints}}</code></pre>
       </div>
     {{/if}}
 

test/src/helpers/generateApiEndpoints.test.js

@@ -0,0 +1,86 @@
+const generateApiEndpoints = require('../../../dist/themes/default/helpers/generateApiEndpoints')
+
+describe('generateApiEndpoints', function () {
+  def('displayAllServers', false)
+  def('production', true)
+
+  def('options', () => ({
+    data: {
+      root: {
+        allOptions: {
+          specData: {
+            spectaql: {
+              displayAllServers: $.displayAllServers,
+            },
+          },
+        },
+        url: $.url,
+        server: $.server,
+        servers: $.servers,
+      },
+    },
+  }))
+
+  def('url', () => 'foorl')
+  def('server', () => ({
+    url: 'serverFoorl',
+  }))
+  def('servers', () => [
+    {
+      url: 'server1url',
+      description: 'Server One',
+    },
+    {
+      url: 'server2url',
+      description: 'Server Two',
+      production: $.production,
+    },
+  ])
+
+  context('displayAllServers is false', function () {
+    it('uses url', function () {
+      expect(generateApiEndpoints($.options)).to.eql('foorl')
+    })
+
+    context('url is falsy', function () {
+      def('url', () => undefined)
+
+      it('uses server.url', function () {
+        expect(generateApiEndpoints($.options)).to.eql('serverFoorl')
+      })
+
+      context('server is falsy', function () {
+        def('server', () => undefined)
+
+        it('uses production server url', function () {
+          expect(generateApiEndpoints($.options)).to.eql('server2url')
+        })
+
+        context('production is false', function () {
+          def('production', () => undefined)
+
+          it('uses first server url', function () {
+            expect(generateApiEndpoints($.options)).to.eql('server1url')
+          })
+        })
+      })
+    })
+  })
+
+  context('displayAllServers is true', function () {
+    def('displayAllServers', () => true)
+
+    it('works', function () {
+      expect(generateApiEndpoints($.options)).to.eql(
+        '# Server One:\nserver1url\n# Server Two:\nserver2url\n'
+      )
+    })
+
+    context('servers are empty', function () {
+      def('servers', () => [])
+      it('uses default message', function () {
+        expect(generateApiEndpoints($.options)).to.eql('<<url is missing>>')
+      })
+    })
+  })
+})

test/src/spectaql/index.test.js

@@ -80,7 +80,7 @@ describe('index', function () {
           const result = spectaql($.opts)
           expect(result).to.be.ok
           expect(result.headers).to.eql(
-            `// Get your Foo from Bar\nFoo: Bar <yo>`
+            `# Get your Foo from Bar\nFoo: Bar <yo>`
           )
         })
       })