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.

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)]), [])
     )