List the named logos in the frontend

.gitignore

@@ -90,3 +90,4 @@ typings/
 /build
 .next
 badge-examples.json
+supported-features.json

frontend/components/markup-modal.js

@@ -4,7 +4,7 @@ import Modal from 'react-modal';
 import ClickToSelect from '@mapbox/react-click-to-select';
 import resolveBadgeUrl from '../lib/badge-url';
 import generateAllMarkup from '../lib/generate-image-markup';
-import { advertisedStyles } from '../../lib/supported-features';
+import { advertisedStyles } from '../../supported-features.json';
 
 export default class MarkupModal extends React.Component {
   static propTypes = {

frontend/components/usage.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import StaticBadgeMaker from './static-badge-maker';
 import DynamicBadgeMaker from './dynamic-badge-maker';
 import { staticBadgeUrl } from '../lib/badge-url';
-import { advertisedStyles } from '../../lib/supported-features';
+import { advertisedStyles, logos } from '../../supported-features.json';
 
 export default class Usage extends React.PureComponent {
   static propTypes = {
@@ -66,7 +66,15 @@ export default class Usage extends React.PureComponent {
     );
   }
 
-  render () {
+  static renderNamedLogos() {
+    const renderLogo = logo => <span className="nowrap">{logo}</span>;
+    const [first, ...rest] = logos;
+    return [renderLogo(first)].concat(
+      rest.reduce((result, logo) => result.concat([', ', renderLogo(logo)]), [])
+    );
+  }
+
+  render() {
     const { baseUri } = this.props;
     return (
       <section>
@@ -142,7 +150,7 @@ export default class Usage extends React.PureComponent {
         <p>
           Here are a few other parameters you can use: (connecting several with "&" is possible)
         </p>
-        <table>
+        <table className="usage">
           <tbody>
             <tr>
               <td>
@@ -161,8 +169,7 @@ export default class Usage extends React.PureComponent {
                 <code>?logo=appveyor</code>
               </td>
               <td>
-                Insert one of the {}
-                <a href="https://github.com/badges/shields/tree/gh-pages/logo">named logos</a>
+                Insert one of the named logos ({this.constructor.renderNamedLogos()})
               </td>
             </tr>
             <tr>

lib/export-supported-features-cli.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const path = require('path');
+const glob = require('glob');
+
+const supportedFeatures = {
+  logos: glob
+    .sync(`${__dirname}/../logo/*.svg`)
+    .map(filename => path.basename(filename, '.svg')),
+  advertisedStyles: [
+    'plastic',
+    'flat',
+    'flat-square',
+    'for-the-badge',
+    'social',
+  ],
+};
+
+console.log(JSON.stringify(supportedFeatures, null, 2));

package.json

@@ -73,13 +73,14 @@
     "depcheck": "check-node-version --node \">= 8.0\"",
     "postinstall": "npm run depcheck",
     "prebuild": "npm run depcheck",
+    "features": "node lib/export-supported-features-cli.js > supported-features.json",
     "examples": "node lib/export-badge-examples-cli.js > badge-examples.json",
-    "build": "npm run examples && next build && next export -o build/",
+    "build": "npm run examples && npm run features && next build && next export -o build/",
     "heroku-postbuild": "npm run build",
     "analyze": "ANALYZE=true LONG_CACHE=false BASE_URL=https://img.shields.io npm run build",
     "start:server": "HANDLE_INTERNAL_ERRORS=false RATE_LIMIT=false node server 8080 ::",
     "now-start": "node server",
-    "prestart": "npm run depcheck && npm run examples",
+    "prestart": "npm run depcheck && npm run examples && npm run features",
     "start": "concurrently --names server,frontend \"ALLOWED_ORIGIN=http://localhost:3000 npm run start:server\" \"BASE_URL=http://[::]:8080 next dev\""
   },
   "bin": {

static/main.css

@@ -57,6 +57,23 @@ table.centered > tbody > tr > td:first-child {
   text-align: right;
 }
 
+table.usage {
+  table-layout: fixed;
+  border-spacing: 20px 10px;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+table.usage td:first-of-type {
+  max-width: 300px;
+}
+
+table.usage td:nth-of-type(2) {
+  max-width: 600px;
+}
+
 th,
 td {
   text-align: left;