From 5a62ed59fe1efacd44b5c988f0080e661bcf142a Mon Sep 17 00:00:00 2001
From: Paul Melnikow <github@paulmelnikow.com>
Date: Mon, 23 Jul 2018 15:19:55 -0500
Subject: [PATCH] List the named logos in the frontend (#1794)
Fix #1787
---
.gitignore | 1 +
frontend/components/markup-modal.js | 2 +-
frontend/components/usage.js | 17 ++++++++++++-----
lib/export-supported-features-cli.js | 19 +++++++++++++++++++
lib/supported-features.js | 13 -------------
package.json | 5 +++--
static/main.css | 17 +++++++++++++++++
7 files changed, 53 insertions(+), 21 deletions(-)
create mode 100644 lib/export-supported-features-cli.js
delete mode 100644 lib/supported-features.js
diff --git a/.gitignore b/.gitignore
index 0bcb375deb..1a6cd4d550 100644
--- a/.gitignore
+++ b/.gitignore
@@ -90,3 +90,4 @@ typings/
/build
.next
badge-examples.json
+supported-features.json
diff --git a/frontend/components/markup-modal.js b/frontend/components/markup-modal.js
index 7a45d8b732..93cca54bbb 100644
--- a/frontend/components/markup-modal.js
+++ b/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 = {
diff --git a/frontend/components/usage.js b/frontend/components/usage.js
index dd92550222..448fad5755 100644
--- a/frontend/components/usage.js
+++ b/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>
diff --git a/lib/export-supported-features-cli.js b/lib/export-supported-features-cli.js
new file mode 100644
index 0000000000..bed3cc0efd
--- /dev/null
+++ b/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));
diff --git a/lib/supported-features.js b/lib/supported-features.js
deleted file mode 100644
index 28039e96d5..0000000000
--- a/lib/supported-features.js
+++ /dev/null
@@ -1,13 +0,0 @@
-'use strict';
-
-const advertisedStyles = [
- 'plastic',
- 'flat',
- 'flat-square',
- 'for-the-badge',
- 'social',
-];
-
-module.exports = {
- advertisedStyles
-};
diff --git a/package.json b/package.json
index 29386be8fb..e09cde7911 100644
--- a/package.json
+++ b/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": {
diff --git a/static/main.css b/static/main.css
index 87d9256e88..0295f0e1a0 100644
--- a/static/main.css
+++ b/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;
--
GitLab