Add a diagnostic page for testing logos (#2890)

It can be helpful to have some diagnostic pages for development and quality control. I added one here for the logos, which renders all the named logos in ?style=flat and ?style=social.

Makefile

@@ -8,10 +8,7 @@ FRONTEND_TMP=${TMPDIR}shields-frontend-deploy
 # pushing secrets to GitHub, this branch is configured to reject pushes.
 WORKING_BRANCH=server-deploy-working-branch
 
-all: website test
+all: test
-
-website:
-	npm run build
 
 deploy: deploy-s0 deploy-s1 deploy-s2 clean-server-deploy deploy-gh-pages deploy-gh-pages-clean
 
@@ -19,9 +16,11 @@ deploy-s0: prepare-server-deploy push-s0
 deploy-s1: prepare-server-deploy push-s1
 deploy-s2: prepare-server-deploy push-s2
 
-prepare-server-deploy: website
+prepare-server-deploy:
 	# Ship a copy of the front end to each server for debugging.
 	# https://github.com/badges/shields/issues/1220
+	INCLUDE_DEV_PAGES=false \
+		npm run build
 	rm -rf ${SERVER_TMP}
 	git worktree prune
 	git worktree add -B ${WORKING_BRANCH} ${SERVER_TMP}
@@ -49,6 +48,7 @@ deploy-gh-pages:
 	rm -rf ${FRONTEND_TMP}
 	git worktree prune
 	GATSBY_BASE_URL=https://img.shields.io \
+		INCLUDE_DEV_PAGES=false \
 		npm run build
 	git worktree add -B gh-pages ${FRONTEND_TMP}
 	git -C ${FRONTEND_TMP} ls-files | xargs git -C ${FRONTEND_TMP} rm
@@ -67,4 +67,4 @@ deploy-gh-pages-clean:
 test:
 	npm test
 
-.PHONY: all website deploy prepare-server-deploy clean-server-deploy deploy-s0 deploy-s1 deploy-s2 push-s0 push-s1 push-s2 deploy-gh-pages deploy-gh-pages-clean deploy-heroku setup redis test
+.PHONY: all deploy prepare-server-deploy clean-server-deploy deploy-s0 deploy-s1 deploy-s2 push-s0 push-s1 push-s2 deploy-gh-pages deploy-gh-pages-clean deploy-heroku setup redis test

frontend/components/development/logo-page.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { staticBadgeUrl } from '../../lib/badge-url'
+import { baseUrl } from '../../constants'
+import Meta from '../meta'
+import Header from '../header'
+import { H3, Badge } from '../common'
+import { shieldsLogos, simpleIcons } from '../../../supported-features.json'
+
+const StyledTable = styled.table`
+  border: 1px solid #ccc;
+  border-collapse: collapse;
+
+  td {
+    border: 1px solid #ccc;
+    padding: 3px;
+    text-align: left;
+  }
+`
+
+const NamedLogoTable = ({ logoNames }) => (
+  <StyledTable>
+    <thead>
+      <tr>
+        <td>Flat</td>
+        <td>Social</td>
+      </tr>
+    </thead>
+    <tbody>
+      {logoNames.map(name => (
+        <tr key={name}>
+          <td>
+            <Badge
+              src={staticBadgeUrl(baseUrl, 'named logo', name, 'blue', {
+                logo: name,
+              })}
+              alt={`logo: ${name}`}
+            />
+          </td>
+          <td>
+            <Badge
+              src={staticBadgeUrl(baseUrl, 'Named Logo', name, 'blue', {
+                logo: name,
+                style: 'social',
+              })}
+              alt={`logo: ${name}`}
+            />
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </StyledTable>
+)
+NamedLogoTable.propTypes = {
+  logoNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+}
+
+const LogoPage = () => (
+  <div>
+    <Meta />
+    <Header />
+    <H3>Named logos</H3>
+    <NamedLogoTable logoNames={shieldsLogos} />
+    <H3>Simple-icons</H3>
+    <NamedLogoTable logoNames={simpleIcons} />
+  </div>
+)
+export default LogoPage

frontend/components/usage.js

@@ -3,7 +3,7 @@ import { Link } from 'gatsby'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { staticBadgeUrl } from '../lib/badge-url'
-import { advertisedStyles, logos } from '../../supported-features.json'
+import { advertisedStyles, shieldsLogos } from '../../supported-features.json'
 import StaticBadgeMaker from './static-badge-maker'
 import DynamicBadgeMaker from './dynamic-badge-maker'
 import { H2, H3, Badge, VerticalSpace } from './common'
@@ -110,7 +110,7 @@ export default class Usage extends React.PureComponent {
 
   static renderNamedLogos() {
     const renderLogo = logo => <LogoName key={logo}>{logo}</LogoName>
-    const [first, ...rest] = logos
+    const [first, ...rest] = shieldsLogos
     return [renderLogo(first)].concat(
       rest.reduce((result, logo) => result.concat([', ', renderLogo(logo)]), [])
     )

gatsby-node.js

@@ -8,6 +8,9 @@
 
 const fs = require('fs')
 const yaml = require('js-yaml')
+const envFlag = require('node-env-flag')
+
+const includeDevPages = envFlag(process.env.INCLUDE_DEV_PAGES, true)
 
 const { categories } = yaml.safeLoad(
   fs.readFileSync('./service-definitions.yml', 'utf8')
@@ -17,6 +20,13 @@ const { categories } = yaml.safeLoad(
 // unnecessary complexity here, so this uses the programmatic API.
 // https://www.gatsbyjs.org/docs/using-gatsby-without-graphql/#the-approach-fetch-data-and-use-gatsbys-createpages-api
 async function createPages({ actions: { createPage } }) {
+  if (includeDevPages) {
+    createPage({
+      path: '/dev/logos',
+      component: require.resolve('./frontend/components/development/logo-page'),
+    })
+  }
+
   categories.forEach(category => {
     const { id } = category
     createPage({

scripts/export-supported-features-cli.js

@@ -1,12 +1,17 @@
 'use strict'
 
-const path = require('path')
+const logos = require('../lib/load-logos')()
-const glob = require('glob')
+const simpleIcons = require('../lib/load-simple-icons')()
+
+const shieldsLogos = Object.keys(logos)
+
+const simpleIconSet = new Set(Object.keys(simpleIcons))
+shieldsLogos.forEach(logo => simpleIconSet.delete(logo))
+const simpleIconNames = Array.from(simpleIconSet)
 
 const supportedFeatures = {
-  logos: glob
+  shieldsLogos,
-    .sync(`${__dirname}/../logo/*.svg`)
+  simpleIcons: simpleIconNames,
-    .map(filename => path.basename(filename, '.svg')),
   advertisedStyles: [
     'plastic',
     'flat',