Update uri -> url in the front end + examples

.prettierignore

@@ -8,3 +8,4 @@ package-lock.json
 /.next
 /build
 /coverage
+**/*.md

doc/TUTORIAL.md

@@ -218,7 +218,7 @@ Downloads, ...) and add your badge:
   keywords: [
     'some-search-keyword'
   ],
-  previewUri: '/test/subject/STATUS.svg',
+  previewUrl: '/test/subject/STATUS.svg',
 },
 ```
 

frontend/components/badge-examples.js

@@ -6,11 +6,11 @@ import resolveBadgeUrl from '../lib/badge-url'
 
 const Badge = ({
   title,
-  exampleUri,
-  previewUri,
+  exampleUrl,
+  previewUrl,
   urlPattern,
   documentation,
-  baseUri,
+  baseUrl,
   longCache,
   shouldDisplay = () => true,
   onClick,
@@ -19,26 +19,26 @@ const Badge = ({
     ? () =>
         onClick({
           title,
-          exampleUri,
-          previewUri,
+          exampleUrl,
+          previewUrl,
           urlPattern,
           documentation,
         })
     : undefined
 
-  const previewImage = previewUri ? (
+  const previewImage = previewUrl ? (
     <img
       className={classNames('badge-img', { clickable: onClick })}
       onClick={handleClick}
-      src={resolveBadgeUrl(previewUri, baseUri, { longCache })}
+      src={resolveBadgeUrl(previewUrl, baseUrl, { longCache })}
       alt=""
     />
   ) : (
     '\u00a0'
   ) // non-breaking space
-  const resolvedExampleUri = resolveBadgeUrl(
-    urlPattern || previewUri,
-    baseUri,
+  const resolvedExampleUrl = resolveBadgeUrl(
+    urlPattern || previewUrl,
+    baseUrl,
     { longCache: false }
   )
 
@@ -57,7 +57,7 @@ const Badge = ({
             className={classNames({ clickable: onClick })}
             onClick={handleClick}
           >
-            {resolvedExampleUri}
+            {resolvedExampleUrl}
           </code>
         </td>
       </tr>
@@ -67,17 +67,17 @@ const Badge = ({
 }
 Badge.propTypes = {
   title: PropTypes.string.isRequired,
-  exampleUri: PropTypes.string,
-  previewUri: PropTypes.string,
+  exampleUrl: PropTypes.string,
+  previewUrl: PropTypes.string,
   urlPattern: PropTypes.string,
   documentation: PropTypes.string,
-  baseUri: PropTypes.string,
+  baseUrl: PropTypes.string,
   longCache: PropTypes.bool.isRequired,
   shouldDisplay: PropTypes.func,
   onClick: PropTypes.func.isRequired,
 }
 
-const Category = ({ category, examples, baseUri, longCache, onClick }) => {
+const Category = ({ category, examples, baseUrl, longCache, onClick }) => {
   if (examples.filter(example => example.shouldDisplay()).length === 0) {
     return null
   }
@@ -92,7 +92,7 @@ const Category = ({ category, examples, baseUri, longCache, onClick }) => {
             <Badge
               key={badgeData.key}
               {...badgeData}
-              baseUri={baseUri}
+              baseUrl={baseUrl}
               longCache={longCache}
               onClick={onClick}
             />
@@ -110,24 +110,24 @@ Category.propTypes = {
   examples: PropTypes.arrayOf(
     PropTypes.shape({
       title: PropTypes.string.isRequired,
-      exampleUri: PropTypes.string,
-      previewUri: PropTypes.string,
+      exampleUrl: PropTypes.string,
+      previewUrl: PropTypes.string,
       urlPattern: PropTypes.string,
       documentation: PropTypes.string,
     })
   ).isRequired,
-  baseUri: PropTypes.string,
+  baseUrl: PropTypes.string,
   longCache: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
 }
 
-const BadgeExamples = ({ categories, baseUri, longCache, onClick }) => (
+const BadgeExamples = ({ categories, baseUrl, longCache, onClick }) => (
   <div>
     {categories.map((categoryData, i) => (
       <Category
         key={i}
         {...categoryData}
-        baseUri={baseUri}
+        baseUrl={baseUrl}
         longCache={longCache}
         onClick={onClick}
       />
@@ -141,7 +141,7 @@ BadgeExamples.propTypes = {
       examples: Category.propTypes.examples,
     })
   ),
-  baseUri: PropTypes.string,
+  baseUrl: PropTypes.string,
   longCache: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
 }

frontend/components/dynamic-badge-maker.js

@@ -4,7 +4,7 @@ import { dynamicBadgeUrl } from '../lib/badge-url'
 
 export default class DynamicBadgeMaker extends React.Component {
   static propTypes = {
-    baseUri: PropTypes.string,
+    baseUrl: PropTypes.string,
   }
 
   state = {
@@ -17,9 +17,9 @@ export default class DynamicBadgeMaker extends React.Component {
     suffix: '',
   }
 
-  makeBadgeUri() {
+  makeBadgeUrl() {
     const { datatype, label, url, query, color, prefix, suffix } = this.state
-    const { baseUri: baseUrl = document.location.href } = this.props
+    const { baseUrl: baseUrl = document.location.href } = this.props
     return dynamicBadgeUrl(baseUrl, datatype, label, url, query, {
       color,
       prefix,
@@ -29,7 +29,7 @@ export default class DynamicBadgeMaker extends React.Component {
 
   handleSubmit(e) {
     e.preventDefault()
-    document.location = this.makeBadgeUri()
+    document.location = this.makeBadgeUrl()
   }
 
   get isValid() {

frontend/components/examples-page.js

@@ -7,7 +7,7 @@ import SearchResults from './search-results'
 import MarkupModal from './markup-modal'
 import Usage from './usage'
 import Footer from './footer'
-import { baseUri, longCache } from '../constants'
+import { baseUrl, longCache } from '../constants'
 
 export default class ExamplesPage extends React.Component {
   constructor(props) {
@@ -78,24 +78,24 @@ export default class ExamplesPage extends React.Component {
           onRequestClose={() => {
             this.setState({ example: null })
           }}
-          baseUri={baseUri}
+          baseUrl={baseUrl}
         />
         <section>
           <SuggestionAndSearch
             queryChanged={this.searchQueryChanged}
             onBadgeClick={example => {
               this.setState({ example })
             }}
-            baseUri={baseUri}
+            baseUrl={baseUrl}
             longCache={longCache}
           />
           <a className="donate" href="https://opencollective.com/shields">
             donate
           </a>
         </section>
         {this.renderSearchResults()}
-        <Usage baseUri={baseUri} longCache={longCache} />
-        <Footer baseUri={baseUri} />
+        <Usage baseUrl={baseUrl} longCache={longCache} />
+        <Footer baseUrl={baseUrl} />
         <style jsx>{`
           .donate {
             text-decoration: none;

frontend/components/footer.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import resolveUrl from '../lib/resolve-url'
 
-const Footer = ({ baseUri }) => (
+const Footer = ({ baseUrl }) => (
   <section>
     <h2 id="like-this">Like This?</h2>
 
@@ -18,7 +18,7 @@ const Footer = ({ baseUri }) => (
       <object
         data={resolveUrl(
           '/twitter/follow/shields_io.svg?style=social&label=Follow',
-          baseUri
+          baseUrl
         )}
         alt="Follow @shields_io"
       />{' '}
@@ -34,15 +34,15 @@ const Footer = ({ baseUri }) => (
       <object
         data={resolveUrl(
           '/github/forks/badges/shields.svg?style=social&label=Fork',
-          baseUri
+          baseUrl
         )}
         alt="Fork on GitHub"
       />{' '}
       {}
       <object
         data={resolveUrl(
           '/discord/308323056592486420.svg?style=social&label=Chat&link=https://discord.gg/HjJCwm5',
-          baseUri
+          baseUrl
         )}
         alt="chat on Discord"
       />
@@ -59,5 +59,5 @@ const Footer = ({ baseUri }) => (
 )
 export default Footer
 Footer.propTypes = {
-  baseUri: PropTypes.string.isRequired,
+  baseUrl: PropTypes.string.isRequired,
 }

frontend/components/markup-modal.js

@@ -10,19 +10,19 @@ export default class MarkupModal extends React.Component {
   static propTypes = {
     example: PropTypes.shape({
       title: PropTypes.string.isRequired,
-      exampleUri: PropTypes.string,
-      previewUri: PropTypes.string,
+      exampleUrl: PropTypes.string,
+      previewUrl: PropTypes.string,
       urlPattern: PropTypes.string,
       documentation: PropTypes.string,
       link: PropTypes.string,
     }),
-    baseUri: PropTypes.string.isRequired,
+    baseUrl: PropTypes.string.isRequired,
     onRequestClose: PropTypes.func.isRequired,
   }
 
   state = {
-    exampleUri: null,
-    badgeUri: null,
+    exampleUrl: null,
+    badgeUrl: null,
     link: null,
     style: 'flat',
   }
@@ -32,34 +32,34 @@ export default class MarkupModal extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { example, baseUri } = nextProps
+    const { example, baseUrl } = nextProps
 
     if (!example) {
       return
     }
 
-    // Transfer `badgeUri` and `link` into state so they can be edited by the
+    // Transfer `badgeUrl` and `link` into state so they can be edited by the
     // user.
-    const { exampleUri, urlPattern, previewUri, link } = example
+    const { exampleUrl, urlPattern, previewUrl, link } = example
     this.setState({
-      exampleUri: exampleUri
-        ? resolveBadgeUrl(exampleUri, baseUri || window.location.href)
+      exampleUrl: exampleUrl
+        ? resolveBadgeUrl(exampleUrl, baseUrl || window.location.href)
         : null,
-      badgeUri: resolveBadgeUrl(
-        urlPattern || previewUri,
-        baseUri || window.location.href
+      badgeUrl: resolveBadgeUrl(
+        urlPattern || previewUrl,
+        baseUrl || window.location.href
       ),
       link,
     })
   }
 
   generateCompleteBadgeUrl() {
-    const { baseUri } = this.props
-    const { badgeUri, style } = this.state
+    const { baseUrl } = this.props
+    const { badgeUrl, style } = this.state
 
     return resolveBadgeUrl(
-      badgeUri,
-      baseUri || window.location.href,
+      badgeUrl,
+      baseUrl || window.location.href,
       // Default style doesn't need to be specified.
       style === 'flat' ? undefined : { style }
     )
@@ -124,21 +124,21 @@ export default class MarkupModal extends React.Component {
               Image 
               <input
                 type="url"
-                value={this.state.badgeUri}
+                value={this.state.badgeUrl}
                 onChange={event => {
-                  this.setState({ badgeUri: event.target.value })
+                  this.setState({ badgeUrl: event.target.value })
                 }}
               />
             </label>
           </p>
-          {this.state.exampleUri && (
+          {this.state.exampleUrl && (
             <p>
               Example&nbsp;
               <ClickToSelect>
                 <input
                   className="code clickable"
                   readOnly
-                  value={this.state.exampleUri}
+                  value={this.state.exampleUrl}
                 />
               </ClickToSelect>
             </p>

frontend/components/search-results.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { BadgeExamples } from './badge-examples'
 import badgeExampleData from '../../badge-examples.json'
 import { prepareExamples, predicateFromQuery } from '../lib/prepare-examples'
-import { baseUri, longCache } from '../constants'
+import { baseUrl, longCache } from '../constants'
 
 export default class SearchResults extends React.Component {
   static propTypes = {
@@ -25,7 +25,7 @@ export default class SearchResults extends React.Component {
       <BadgeExamples
         categories={this.preparedExamples}
         onClick={this.props.clickHandler}
-        baseUri={baseUri}
+        baseUrl={baseUrl}
         longCache={longCache}
       />
     )

frontend/components/static-badge-maker.js

@@ -4,7 +4,7 @@ import { staticBadgeUrl } from '../lib/badge-url'
 
 export default class StaticBadgeMaker extends React.Component {
   static propTypes = {
-    baseUri: PropTypes.string,
+    baseUrl: PropTypes.string,
   }
 
   state = {
@@ -16,16 +16,16 @@ export default class StaticBadgeMaker extends React.Component {
   handleSubmit(e) {
     e.preventDefault()
 
-    const { baseUri } = this.props
+    const { baseUrl } = this.props
     const { subject, status, color } = this.state
-    const badgeUri = staticBadgeUrl(
-      baseUri || window.location.href,
+    const badgeUrl = staticBadgeUrl(
+      baseUrl || window.location.href,
       subject,
       status,
       color
     )
 
-    document.location = badgeUri
+    document.location = badgeUrl
   }
 
   render() {