chore: split app into api and web

web/src/components/cards/CratesioCard.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { DiRust } from 'react-icons/di'
+import { Card } from '../Card'
+import { DedicatedAvailability } from '../Availability'
+
+export default function CratesioCard({ name }) {
+  const lowerCase = name.toLowerCase()
+
+  return (
+    <Card title="crates.io (Rust)" key={lowerCase} nameList={[lowerCase]}>
+      {(name) => (
+        <DedicatedAvailability
+          name={name}
+          provider="cratesio"
+          url={`https://crates.io/crates/${name}`}
+          icon={<DiRust />}
+        />
+      )}
+    </Card>
+  )
+}

web/src/components/cards/DomainCard.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { FaMapSigns } from 'react-icons/fa'
+import { Card } from '../Card'
+import { DedicatedAvailability } from '../Availability'
+
+export default function DomainCard({ name }) {
+  const lowerCase = name.toLowerCase()
+
+  return (
+    <Card
+      title="Domain"
+      key={lowerCase}
+      nameList={[`${lowerCase}.app`, `${lowerCase}.dev`, `${lowerCase}.org`]}
+      alternativeList={[
+        `${lowerCase}app.com`,
+        `${lowerCase}.build`,
+        `${lowerCase}.ai`,
+      ]}>
+      {(name) => (
+        <DedicatedAvailability
+          name={name}
+          provider="domain"
+          url={`https://domainr.com/?q=${name}`}
+          icon={<FaMapSigns />}
+        />
+      )}
+    </Card>
+  )
+}

web/src/components/cards/GithubCard.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { FaGithub } from 'react-icons/fa'
+import { Card } from '../Card'
+import { DedicatedAvailability } from '../Availability'
+import { capitalize } from '../../util/text'
+
+export default function GithubCard({ name }) {
+  return (
+    <Card
+      title="GitHub"
+      key={name}
+      nameList={[name]}
+      alternativeList={[
+        `${name.toLowerCase()}hq`,
+        `${name.toLowerCase()}-team`,
+        `${capitalize(name)}Team`,
+        `${name.toLowerCase()}-org`,
+      ]}>
+      {(name) => (
+        <DedicatedAvailability
+          name={name}
+          provider="github"
+          url={`https://github.com/${name}`}
+          prefix="github.com/"
+          icon={<FaGithub />}
+        />
+      )}
+    </Card>
+  )
+}

web/src/components/cards/HomebrewCard.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { IoIosBeer } from 'react-icons/io'
+import { Card } from '../Card'
+import { ExistentialAvailability } from '../Availability'
+
+export default function HomebrewCard({ name }) {
+  const lowerCase = name.toLowerCase()
+
+  return (
+    <Card title="Homebrew" key={lowerCase} nameList={[lowerCase]}>
+      {(name) => (
+        <>
+          <ExistentialAvailability
+            name={name}
+            target={`https://formulae.brew.sh/api/formula/${name}.json`}
+            url={`https://formulae.brew.sh/formula/${name}`}
+            icon={<IoIosBeer />}
+          />
+          <ExistentialAvailability
+            name={name}
+            target={`https://formulae.brew.sh/api/cask/${name}.json`}
+            url={`https://formulae.brew.sh/cask/${name}`}
+            suffix=" (Cask)"
+            icon={<IoIosBeer />}
+          />
+        </>
+      )}
+    </Card>
+  )
+}

web/src/components/cards/JsOrgCard.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { FaJsSquare } from 'react-icons/fa'
+import { Card } from '../Card'
+import { DedicatedAvailability } from '../Availability'
+
+export default function JsOrgCard({ name }) {
+  const lowerCase = name.toLowerCase()
+
+  return (
+    <Card title="js.org" key={lowerCase} nameList={[lowerCase]}>
+      {(name) => (
+        <DedicatedAvailability
+          name={`${name}.js.org`}
+          provider="dns"
+          url={`https://${name}.js.org`}
+          icon={<FaJsSquare />}
+        />
+      )}
+    </Card>
+  )
+}

web/src/components/cards/NpmCard.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { FaNpm } from 'react-icons/fa'
+import { Card } from '../Card'
+import { DedicatedAvailability } from '../Availability'
+
+export default function NpmCard({ name }) {
+  const lowerCase = name.toLowerCase()
+
+  return (
+    <Card title="npm" key={lowerCase} nameList={[lowerCase]}>
+      {(name) => (
+        <>
+          <DedicatedAvailability
+            name={name}
+            provider="npm"
+            url={`https://www.npmjs.com/package/${name}`}
+            prefix="npmjs.com/"
+            icon={<FaNpm />}
+          />
+          <DedicatedAvailability
+            name={name}
+            provider="npm-org"
+            url={`https://www.npmjs.com/org/${name}`}
+            prefix="npmjs.com/~"
+            suffix=" (Org)"
+            icon={<FaNpm />}
+          />
+        </>
+      )}
+    </Card>
+  )
+}

web/src/components/cards/PypiCard.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { FaPython } from 'react-icons/fa'
+import { Card } from '../Card'
+import { DedicatedAvailability } from '../Availability'
+
+export default function PypiCard({ name }) {
+  return (
+    <Card title="PyPI" key={name} nameList={[name]}>
+      {(name) => (
+        <DedicatedAvailability
+          name={name}
+          provider="pypi"
+          url={`https://pypi.org/project/${name}`}
+          icon={<FaPython />}
+        />
+      )}
+    </Card>
+  )
+}

web/src/components/cards/S3Card.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { FaAws } from 'react-icons/fa'
+import { Card } from '../Card'
+import { DedicatedAvailability } from '../Availability'
+
+export default function S3Card({ name }) {
+  const lowerCase = name.toLowerCase()
+
+  return (
+    <Card title="AWS S3" key={lowerCase} nameList={[lowerCase]}>
+      {(name) => (
+        <DedicatedAvailability
+          name={name}
+          provider="s3"
+          url={`https://${name}.s3.amazonaws.com`}
+          suffix=".s3.amazonaws.com"
+          icon={<FaAws />}
+        />
+      )}
+    </Card>
+  )
+}

web/src/components/cards/SlackCard.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { FaSlack } from 'react-icons/fa'
+import { Card } from '../Card'
+import { DedicatedAvailability } from '../Availability'
+
+export default function SlackCard({ name }) {
+  const lowerCase = name.toLowerCase()
+
+  return (
+    <Card title="Slack" key={lowerCase} nameList={[lowerCase]}>
+      {(name) => (
+        <DedicatedAvailability
+          name={name}
+          provider="slack"
+          url={`https://${name}.slack.com`}
+          suffix=".slack.com"
+          icon={<FaSlack />}
+        />
+      )}
+    </Card>
+  )
+}

web/src/components/cards/TwitterCard.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { FaTwitter } from 'react-icons/fa'
+import { Card } from '../Card'
+import { DedicatedAvailability } from '../Availability'
+import { capitalize } from '../../util/text'
+
+export default function TwitterCard({ name }) {
+  return (
+    <Card
+      title="Twitter"
+      key={name}
+      nameList={[name]}
+      alternativeList={[
+        `${capitalize(name)}HQ`,
+        `${name.toLowerCase()}app`,
+        `${name.toLowerCase()}-support`,
+        `${capitalize(name)}Team`,
+      ]}>
+      {(name) => (
+        <DedicatedAvailability
+          name={name}
+          provider="twitter"
+          url={`https://twitter.com/${name}`}
+          prefix="twitter.com/"
+          icon={<FaTwitter />}
+        />
+      )}
+    </Card>
+  )
+}