SVG by default (#3717)

Make cleaner badge URLs by omitting the `.svg` extension. Closes #2674
2019-07-24 12:57:39 -05:00
parent e6f8c4ed65
commit cfbd2c30df
34 changed files with 169 additions and 168 deletions
--- a/frontend/components/common.spec.tsx
+++ b/frontend/components/common.spec.tsx
@@ -33,14 +33,12 @@ describe('Common modules', function() {

  describe('<Badge />', function() {
    it('renders', function() {
-      shallow(<common.Badge src="/badge/foo-bar-blue.svg" />)
+      shallow(<common.Badge src="/badge/foo-bar-blue" />)
    })

    it('contains a link to the image', function() {
-      const wrapper = render(<common.Badge src="/badge/foo-bar-blue.svg" />)
-      expect(wrapper.html()).to.contain(
-        '<img alt src="/badge/foo-bar-blue.svg">'
-      )
+      const wrapper = render(<common.Badge src="/badge/foo-bar-blue" />)
+      expect(wrapper.html()).to.contain('<img alt src="/badge/foo-bar-blue">')
    })
  })

--- a/frontend/components/customizer/customizer.js
+++ b/frontend/components/customizer/customizer.js
@@ -36,7 +36,7 @@ export default function Customizer({

  function generateBuiltBadgeUrl() {
    const suffix = queryString ? `?${queryString}` : ''
-    return `${baseUrl || getBaseUrlFromWindowLocation()}${path}.svg${suffix}`
+    return `${baseUrl || getBaseUrlFromWindowLocation()}${path}${suffix}`
  }

  function renderLivePreview() {
--- a/frontend/components/snippet.spec.js
+++ b/frontend/components/snippet.spec.js
@@ -6,16 +6,12 @@ import '../enzyme-conf.spec'

 describe('<Snippet />', function() {
  it('renders', function() {
-    render(<Snippet snippet="http://example.com/badge.svg" />)
+    render(<Snippet snippet="http://example.com/badge" />)
  })

  it('renders with truncate and fontSize', function() {
    render(
-      <Snippet
-        fontSize="14pt"
-        snippet="http://example.com/badge.svg"
-        truncate
-      />
+      <Snippet fontSize="14pt" snippet="http://example.com/badge" truncate />
    )
  })
 })
--- a/frontend/components/usage.js
+++ b/frontend/components/usage.js
@@ -183,13 +183,13 @@ export default function Usage({ baseUrl }) {

      <p>Using dash "-" separator</p>
      <p>
-        <Snippet snippet={`${baseUrl}/badge/<LABEL>-<MESSAGE>-<COLOR>.svg`} />
+        <Snippet snippet={`${baseUrl}/badge/<LABEL>-<MESSAGE>-<COLOR>`} />
      </p>
      <StaticBadgeEscapingRules />
      <p>Using query string parameters</p>
      <p>
        <Snippet
-          snippet={`${baseUrl}/static/v1.svg?label=<LABEL>&message=<MESSAGE>&color=<COLOR>`}
+          snippet={`${baseUrl}/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>`}
        />
      </p>

@@ -229,7 +229,7 @@ export default function Usage({ baseUrl }) {
      <H3>Endpoint</H3>

      <p>
-        <Snippet snippet={`${baseUrl}/endpoint.svg?url=<URL>&style<STYLE>`} />
+        <Snippet snippet={`${baseUrl}/endpoint?url=<URL>&style<STYLE>`} />
      </p>

      <p>
@@ -243,7 +243,7 @@ export default function Usage({ baseUrl }) {
      <p>
        <StyledCode>
          {baseUrl}
-          /badge/dynamic/json.svg?url=&lt;URL&gt;&amp;label=&lt;LABEL&gt;&amp;query=&lt;
+          /badge/dynamic/json?url=&lt;URL&gt;&amp;label=&lt;LABEL&gt;&amp;query=&lt;
          <a
            href="https://jsonpath.com"
            target="_BLANK"
@@ -257,7 +257,7 @@ export default function Usage({ baseUrl }) {
      <p>
        <StyledCode>
          {baseUrl}
-          /badge/dynamic/xml.svg?url=&lt;URL&gt;&amp;label=&lt;LABEL&gt;&amp;query=&lt;
+          /badge/dynamic/xml?url=&lt;URL&gt;&amp;label=&lt;LABEL&gt;&amp;query=&lt;
          <a href="http://xpather.com" target="_BLANK" title="XPath syntax">
            //data/subdata
          </a>
@@ -267,7 +267,7 @@ export default function Usage({ baseUrl }) {
      <p>
        <StyledCode>
          {baseUrl}
-          /badge/dynamic/yaml.svg?url=&lt;URL&gt;&amp;label=&lt;LABEL&gt;&amp;query=&lt;
+          /badge/dynamic/yaml?url=&lt;URL&gt;&amp;label=&lt;LABEL&gt;&amp;query=&lt;
          <a
            href="https://jsonpath.com"
            target="_BLANK"
@@ -394,8 +394,19 @@ export default function Usage({ baseUrl }) {
      </QueryParamTable>

      <p>
-        We support <code>.svg</code>, <code>.json</code>, <code>.png</code> and
-        a few others, but use them responsibly.
+        We support <code>.svg</code> and <code>.json</code>. The default is
+        <code>.svg</code>, which can be omitted from the URL.
+      </p>
+
+      <p>
+        While we highly recommend using SVG, we also support <code>.png</code>
+        for use cases where SVG will not work. These requests should be made to
+        our raster server <code>https://raster.shields.io</code>. For example,
+        the raster equivalent of
+        <code>https://img.shields.io/v/npm/express</code> is
+        <code>https://raster.shields.io/v/npm/express</code>. For backward
+        compatibility, the badge server will redirect <code>.png</code> badges
+        to the raster server.
      </p>
    </section>
  )
--- a/frontend/components/usage.spec.js
+++ b/frontend/components/usage.spec.js
@@ -12,7 +12,7 @@ describe('<Usage />', function() {

  it('contains some of the expected text', function() {
    const wrapper = shallow(<Usage baseUrl="https://example.shields.io" />)
-    expect(wrapper).to.contain.text('use them responsibly')
+    expect(wrapper).to.contain.text('For backward compatibility')
  })

  // This test requires Link to be mocked.
--- a/frontend/lib/generate-image-markup.spec.ts
+++ b/frontend/lib/generate-image-markup.spec.ts
@@ -11,54 +11,54 @@ import {

 test(bareLink, () => {
  given(
-    'https://img.shields.io/badge.svg',
+    'https://img.shields.io/badge',
    'https://example.com/example',
    'Example'
-  ).expect('https://img.shields.io/badge.svg')
+  ).expect('https://img.shields.io/badge')
 })

 test(html, () => {
  given(
-    'https://img.shields.io/badge.svg',
+    'https://img.shields.io/badge',
    'https://example.com/example',
    'Example'
  ).expect(
-    '<a href="https://example.com/example"><img alt="Example" src="https://img.shields.io/badge.svg"></a>'
+    '<a href="https://example.com/example"><img alt="Example" src="https://img.shields.io/badge"></a>'
  )
-  given('https://img.shields.io/badge.svg', undefined, undefined).expect(
-    '<img src="https://img.shields.io/badge.svg">'
+  given('https://img.shields.io/badge', undefined, undefined).expect(
+    '<img src="https://img.shields.io/badge">'
  )
 })

 test(markdown, () => {
-  given('https://img.shields.io/badge.svg', undefined, 'Example').expect(
-    '![Example](https://img.shields.io/badge.svg)'
+  given('https://img.shields.io/badge', undefined, 'Example').expect(
+    '![Example](https://img.shields.io/badge)'
  )
  given(
-    'https://img.shields.io/badge.svg',
+    'https://img.shields.io/badge',
    'https://example.com/example',
    'Example'
  ).expect(
-    '[![Example](https://img.shields.io/badge.svg)](https://example.com/example)'
+    '[![Example](https://img.shields.io/badge)](https://example.com/example)'
  )
-  given('https://img.shields.io/badge.svg', undefined, undefined).expect(
-    '![](https://img.shields.io/badge.svg)'
+  given('https://img.shields.io/badge', undefined, undefined).expect(
+    '![](https://img.shields.io/badge)'
  )
 })

 test(reStructuredText, () => {
-  given('https://img.shields.io/badge.svg', undefined, undefined).expect(
-    '.. image:: https://img.shields.io/badge.svg'
+  given('https://img.shields.io/badge', undefined, undefined).expect(
+    '.. image:: https://img.shields.io/badge'
  )
-  given('https://img.shields.io/badge.svg', undefined, 'Example').expect(
-    '.. image:: https://img.shields.io/badge.svg   :alt: Example'
+  given('https://img.shields.io/badge', undefined, 'Example').expect(
+    '.. image:: https://img.shields.io/badge   :alt: Example'
  )
  given(
-    'https://img.shields.io/badge.svg',
+    'https://img.shields.io/badge',
    'https://example.com/example',
    'Example'
  ).expect(
-    '.. image:: https://img.shields.io/badge.svg   :alt: Example   :target: https://example.com/example'
+    '.. image:: https://img.shields.io/badge   :alt: Example   :target: https://example.com/example'
  )
 })

@@ -70,33 +70,33 @@ test(renderAsciiDocAttributes, () => {
 })

 test(asciiDoc, () => {
-  given('https://img.shields.io/badge.svg', undefined, undefined).expect(
-    'image:https://img.shields.io/badge.svg[]'
+  given('https://img.shields.io/badge', undefined, undefined).expect(
+    'image:https://img.shields.io/badge[]'
  )
-  given('https://img.shields.io/badge.svg', undefined, 'Example').expect(
-    'image:https://img.shields.io/badge.svg[Example]'
+  given('https://img.shields.io/badge', undefined, 'Example').expect(
+    'image:https://img.shields.io/badge[Example]'
  )
  given(
-    'https://img.shields.io/badge.svg',
+    'https://img.shields.io/badge',
    undefined,
    'Example, with comma'
-  ).expect('image:https://img.shields.io/badge.svg["Example, with comma"]')
+  ).expect('image:https://img.shields.io/badge["Example, with comma"]')
  given(
-    'https://img.shields.io/badge.svg',
+    'https://img.shields.io/badge',
    'https://example.com/example',
    'Example'
  ).expect(
-    'image:https://img.shields.io/badge.svg["Example",link="https://example.com/example"]'
+    'image:https://img.shields.io/badge["Example",link="https://example.com/example"]'
  )
 })

 test(generateMarkup, () => {
  given({
-    badgeUrl: 'https://img.shields.io/badge.svg',
+    badgeUrl: 'https://img.shields.io/badge',
    link: 'https://example.com/example',
    title: 'Example',
    markupFormat: 'markdown',
  }).expect(
-    '[![Example](https://img.shields.io/badge.svg)](https://example.com/example)'
+    '[![Example](https://img.shields.io/badge)](https://example.com/example)'
  )
 })
--- a/frontend/pages/endpoint.js
+++ b/frontend/pages/endpoint.js
@@ -88,7 +88,7 @@ const EndpointPage = () => (
    <Meta />
    <Header />
    <H3>Endpoint</H3>
-    <Snippet snippet={`${baseUrl}/endpoint.svg?url=...&style=...`} />
+    <Snippet snippet={`${baseUrl}/endpoint?url=...&style=...`} />
    <p>Endpoint response:</p>
    <JsonExample
      data={{