From 92529201e85d6f2a957969531e968b811dc8c7c1 Mon Sep 17 00:00:00 2001
From: Yasuaki Uechi <y@uechi.io>
Date: Wed, 31 Jul 2019 18:54:28 +0900
Subject: [PATCH] chore: fulfill ExternalLink

---
 package.json                             |  3 +++
 web/src/components/Availability.js       |  6 ++++--
 web/src/components/{Card.js => Cards.js} |  0
 web/src/components/Footer.js             | 16 ++++++----------
 web/src/components/Links.js              |  6 ++++++
 web/src/components/cards/CratesioCard.js |  2 +-
 web/src/components/cards/DomainCard.js   |  4 ++--
 web/src/components/cards/GithubCard.js   | 10 ++++++----
 web/src/components/cards/HomebrewCard.js |  2 +-
 web/src/components/cards/JsOrgCard.js    |  2 +-
 web/src/components/cards/NpmCard.js      |  2 +-
 web/src/components/cards/PypiCard.js     |  2 +-
 web/src/components/cards/S3Card.js       |  2 +-
 web/src/components/cards/SlackCard.js    |  2 +-
 web/src/components/cards/TwitterCard.js  |  2 +-
 yarn.lock                                | 17 +++++++++++------
 16 files changed, 46 insertions(+), 32 deletions(-)
 rename web/src/components/{Card.js => Cards.js} (100%)
 create mode 100644 web/src/components/Links.js

diff --git a/package.json b/package.json
index c2f2974..1ac6fd2 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,9 @@
   "scripts": {
     "start": "now dev"
   },
+  "dependencies": {
+    "@types/node": "^12.6.8"
+  },
   "license": "MIT",
   "private": true,
   "workspaces": [
diff --git a/web/src/components/Availability.js b/web/src/components/Availability.js
index 1a30594..d60b3aa 100644
--- a/web/src/components/Availability.js
+++ b/web/src/components/Availability.js
@@ -3,6 +3,8 @@ import styled from 'styled-components'
 import useFetch from 'fetch-suspense'
 import { BarLoader } from 'react-spinners'
 
+import { ExternalLink } from './Links'
+
 function AvailabilityCell({
   name,
   availability,
@@ -15,7 +17,7 @@ function AvailabilityCell({
     <ItemContainer>
       {icon}
       <Item>
-        <a href={link} target="_blank" rel="noopener noreferrer">
+        <ExternalLink href={link}>
           {prefix}
           {availability ? (
             <span style={{ color: 'green' }}>{name}</span>
@@ -23,7 +25,7 @@ function AvailabilityCell({
             <span style={{ color: 'red' }}>{name}</span>
           )}
           {suffix}
-        </a>
+        </ExternalLink>
       </Item>
     </ItemContainer>
   )
diff --git a/web/src/components/Card.js b/web/src/components/Cards.js
similarity index 100%
rename from web/src/components/Card.js
rename to web/src/components/Cards.js
diff --git a/web/src/components/Footer.js b/web/src/components/Footer.js
index 36cb983..a209908 100644
--- a/web/src/components/Footer.js
+++ b/web/src/components/Footer.js
@@ -2,6 +2,8 @@ import React from 'react'
 import styled from 'styled-components'
 import { FaTwitter, FaGithubAlt } from 'react-icons/fa'
 
+import { ExternalLink } from './Links'
+
 export default function Footer() {
   return (
     <Container>
@@ -12,18 +14,12 @@ export default function Footer() {
         </span>
         <br />
         <br />
-        <a
-          href="https://twitter.com/uetschy"
-          target="_blank"
-          rel="noopener noreferrer">
+        <ExternalLink href="https://twitter.com/uetschy">
           <FaTwitter />
-        </a>{' '}
-        <a
-          href="https://github.com/uetchy/namae"
-          target="_blank"
-          rel="noopener noreferrer">
+        </ExternalLink>{' '}
+        <ExternalLink href="https://github.com/uetchy/namae">
           <FaGithubAlt />
-        </a>
+        </ExternalLink>
       </p>
     </Container>
   )
diff --git a/web/src/components/Links.js b/web/src/components/Links.js
new file mode 100644
index 0000000..9e4a2a6
--- /dev/null
+++ b/web/src/components/Links.js
@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export const ExternalLink = styled.a.attrs({
+  target: '_blank',
+  rel: 'noopener noreferrer',
+})``
diff --git a/web/src/components/cards/CratesioCard.js b/web/src/components/cards/CratesioCard.js
index 48bbfc7..5df3473 100644
--- a/web/src/components/cards/CratesioCard.js
+++ b/web/src/components/cards/CratesioCard.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { DiRust } from 'react-icons/di'
-import { Card } from '../Card'
+import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function CratesioCard({ name }) {
diff --git a/web/src/components/cards/DomainCard.js b/web/src/components/cards/DomainCard.js
index 5f8deaf..72f337c 100644
--- a/web/src/components/cards/DomainCard.js
+++ b/web/src/components/cards/DomainCard.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FaMapSigns } from 'react-icons/fa'
-import { Card } from '../Card'
+import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function DomainCard({ name }) {
@@ -13,8 +13,8 @@ export default function DomainCard({ name }) {
       nameList={[`${lowerCase}.app`, `${lowerCase}.dev`, `${lowerCase}.org`]}
       alternativeList={[
         `${lowerCase}app.com`,
+        `get${lowerCase}.com`,
         `${lowerCase}.build`,
-        `${lowerCase}.ai`,
       ]}>
       {(name) => (
         <DedicatedAvailability
diff --git a/web/src/components/cards/GithubCard.js b/web/src/components/cards/GithubCard.js
index 7e63602..32cc054 100644
--- a/web/src/components/cards/GithubCard.js
+++ b/web/src/components/cards/GithubCard.js
@@ -1,20 +1,22 @@
 import React from 'react'
 import { FaGithub } from 'react-icons/fa'
-import { Card } from '../Card'
+import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 import { capitalize } from '../../util/text'
 
 export default function GithubCard({ name }) {
+  const lowerCase = name.toLowerCase()
+
   return (
     <Card
       title="GitHub Organization"
       key={name}
       nameList={[name]}
       alternativeList={[
-        `${name.toLowerCase()}hq`,
-        `${name.toLowerCase()}-team`,
+        `${lowerCase}hq`,
+        `${lowerCase}-team`,
         `${capitalize(name)}Team`,
-        `${name.toLowerCase()}-org`,
+        `${lowerCase}-org`,
       ]}>
       {(name) => (
         <DedicatedAvailability
diff --git a/web/src/components/cards/HomebrewCard.js b/web/src/components/cards/HomebrewCard.js
index b9e7643..a942ec5 100644
--- a/web/src/components/cards/HomebrewCard.js
+++ b/web/src/components/cards/HomebrewCard.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { IoIosBeer } from 'react-icons/io'
-import { Card } from '../Card'
+import { Card } from '../Cards'
 import { ExistentialAvailability } from '../Availability'
 
 export default function HomebrewCard({ name }) {
diff --git a/web/src/components/cards/JsOrgCard.js b/web/src/components/cards/JsOrgCard.js
index f68a50d..ad4e0e1 100644
--- a/web/src/components/cards/JsOrgCard.js
+++ b/web/src/components/cards/JsOrgCard.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FaJsSquare } from 'react-icons/fa'
-import { Card } from '../Card'
+import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function JsOrgCard({ name }) {
diff --git a/web/src/components/cards/NpmCard.js b/web/src/components/cards/NpmCard.js
index 3ae1a85..c833af0 100644
--- a/web/src/components/cards/NpmCard.js
+++ b/web/src/components/cards/NpmCard.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FaNpm } from 'react-icons/fa'
-import { Card } from '../Card'
+import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function NpmCard({ name }) {
diff --git a/web/src/components/cards/PypiCard.js b/web/src/components/cards/PypiCard.js
index 79a51ff..48119d2 100644
--- a/web/src/components/cards/PypiCard.js
+++ b/web/src/components/cards/PypiCard.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FaPython } from 'react-icons/fa'
-import { Card } from '../Card'
+import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function PypiCard({ name }) {
diff --git a/web/src/components/cards/S3Card.js b/web/src/components/cards/S3Card.js
index e92dfcf..ba4ecf9 100644
--- a/web/src/components/cards/S3Card.js
+++ b/web/src/components/cards/S3Card.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FaAws } from 'react-icons/fa'
-import { Card } from '../Card'
+import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function S3Card({ name }) {
diff --git a/web/src/components/cards/SlackCard.js b/web/src/components/cards/SlackCard.js
index f6c7aa2..d969aa2 100644
--- a/web/src/components/cards/SlackCard.js
+++ b/web/src/components/cards/SlackCard.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FaSlack } from 'react-icons/fa'
-import { Card } from '../Card'
+import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function SlackCard({ name }) {
diff --git a/web/src/components/cards/TwitterCard.js b/web/src/components/cards/TwitterCard.js
index 7761730..a57c2ca 100644
--- a/web/src/components/cards/TwitterCard.js
+++ b/web/src/components/cards/TwitterCard.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FaTwitter } from 'react-icons/fa'
-import { Card } from '../Card'
+import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 import { capitalize } from '../../util/text'
 
diff --git a/yarn.lock b/yarn.lock
index f874091..fd48021 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1387,6 +1387,11 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
+"@types/node@^12.6.8":
+  version "12.6.8"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.6.8.tgz#e469b4bf9d1c9832aee4907ba8a051494357c12c"
+  integrity sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==
+
 "@types/q@^1.5.1":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
@@ -9225,9 +9230,9 @@ source-map-resolve@^0.5.0:
     urix "^0.1.0"
 
 source-map-support@^0.5.6, source-map-support@~0.5.10, source-map-support@~0.5.12:
-  version "0.5.12"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.12.tgz#b4f3b10d51857a5af0138d3ce8003b201613d599"
-  integrity sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
+  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -10250,9 +10255,9 @@ webpack-manifest-plugin@2.0.4:
     tapable "^1.0.0"
 
 webpack-sources@^1.1.0, webpack-sources@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
-  integrity sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.0.tgz#be93d629601aa3ea48e8686ee4d78d9c4e706061"
+  integrity sha512-1e4Cxgqfl8vnDhXMMpegX7JWWP7HwV8Kp8/Oefs6EG52bRtOR9vuOXM1Gl1vy6NwHfUxHeuR6ElD4HamuRPO0A==
   dependencies:
     source-list-map "^2.0.0"
     source-map "~0.6.1"