chore: fulfill ExternalLink

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>
   )

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>
   )

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',
+})``

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 }) {

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

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

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 }) {

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 }) {

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 }) {

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 }) {

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 }) {

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 }) {

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'