mirror of
https://github.com/uetchy/namae.git
synced 2025-03-17 12:30:32 +09:00
chore: split app into api and web
This commit is contained in:
parent
44c46f329d
commit
11e7f0e9e0
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,4 +1,4 @@
|
|||||||
/build
|
/web/build
|
||||||
|
|
||||||
# Created by https://www.gitignore.io/api/node
|
# Created by https://www.gitignore.io/api/node
|
||||||
# Edit at https://www.gitignore.io/?templates=node
|
# Edit at https://www.gitignore.io/?templates=node
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
/build
|
/web/build
|
||||||
/.envrc
|
/.envrc
|
||||||
/.env
|
/.env
|
||||||
|
|||||||
10
api/package.json
Normal file
10
api/package.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "@namae/availability",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"isomorphic-unfetch": "^3.0.0",
|
||||||
|
"npm-name": "^5.5.0",
|
||||||
|
"whois-json": "^2.0.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
8
now.json
8
now.json
@ -4,26 +4,26 @@
|
|||||||
"alias": "namae.dev",
|
"alias": "namae.dev",
|
||||||
"builds": [
|
"builds": [
|
||||||
{
|
{
|
||||||
"src": "/package.json",
|
"src": "/web/package.json",
|
||||||
"use": "@now/static-build",
|
"use": "@now/static-build",
|
||||||
"config": { "distDir": "build" }
|
"config": { "distDir": "build" }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "/src/services/*.js",
|
"src": "/api/services/*.js",
|
||||||
"use": "@now/node"
|
"use": "@now/node"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"routes": [
|
"routes": [
|
||||||
{
|
{
|
||||||
"src": "/availability/(?<provider>[^/]+)/(?<id>[^/]+)",
|
"src": "/availability/(?<provider>[^/]+)/(?<id>[^/]+)",
|
||||||
"dest": "/src/services/$provider.js?name=$id",
|
"dest": "/api/services/$provider.js?name=$id",
|
||||||
"headers": {
|
"headers": {
|
||||||
"Cache-Control": "maxage=0, s-maxage=3600"
|
"Cache-Control": "maxage=0, s-maxage=3600"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "/(.*)",
|
"src": "/(.*)",
|
||||||
"dest": "/$1"
|
"dest": "/web/$1"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,194 +0,0 @@
|
|||||||
import React, { Suspense, useState } from 'react'
|
|
||||||
import styled from 'styled-components'
|
|
||||||
import useFetch from 'fetch-suspense'
|
|
||||||
import { BarLoader } from 'react-spinners'
|
|
||||||
import { mobile } from '../util/css'
|
|
||||||
|
|
||||||
export function Card({ children }) {
|
|
||||||
return (
|
|
||||||
<CardWrapper>
|
|
||||||
<ErrorBoundary>
|
|
||||||
<Suspense fallback={<BarLoader />}>{children}</Suspense>
|
|
||||||
</ErrorBoundary>
|
|
||||||
</CardWrapper>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const CardTitle = styled.div`
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
`
|
|
||||||
|
|
||||||
export function AvailabilityCell({
|
|
||||||
name,
|
|
||||||
availability,
|
|
||||||
url,
|
|
||||||
prefix = '',
|
|
||||||
suffix = '',
|
|
||||||
icon,
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<ItemContainer>
|
|
||||||
{icon}
|
|
||||||
<Item>
|
|
||||||
<a href={url} target="_blank" rel="noopener noreferrer">
|
|
||||||
{prefix}
|
|
||||||
{availability ? (
|
|
||||||
<span style={{ color: 'green' }}>{name}</span>
|
|
||||||
) : (
|
|
||||||
<span style={{ color: 'red' }}>{name}</span>
|
|
||||||
)}
|
|
||||||
{suffix}
|
|
||||||
</a>
|
|
||||||
</Item>
|
|
||||||
</ItemContainer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DedicatedAvailability({
|
|
||||||
name,
|
|
||||||
provider,
|
|
||||||
url,
|
|
||||||
prefix = '',
|
|
||||||
suffix = '',
|
|
||||||
icon,
|
|
||||||
}) {
|
|
||||||
const response = useFetch(`/availability/${provider}/${name}`)
|
|
||||||
|
|
||||||
if (response.error) {
|
|
||||||
throw new Error(`${provider}: ${response.error}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AvailabilityCell
|
|
||||||
availability={response.availability}
|
|
||||||
name={name}
|
|
||||||
url={url}
|
|
||||||
prefix={prefix}
|
|
||||||
suffix={suffix}
|
|
||||||
icon={icon}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ExistentialAvailability({
|
|
||||||
name,
|
|
||||||
target,
|
|
||||||
prefix = '',
|
|
||||||
suffix = '',
|
|
||||||
icon,
|
|
||||||
}) {
|
|
||||||
const response = useFetch(target, null, { metadata: true })
|
|
||||||
|
|
||||||
if (response.status !== 404 && response.status !== 200) {
|
|
||||||
throw new Error(`${name}: ${response.status}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
const availability = response.status === 404
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AvailabilityCell
|
|
||||||
name={name}
|
|
||||||
availability={availability}
|
|
||||||
url={`https://formulae.brew.sh/formula/${name}`}
|
|
||||||
prefix={prefix}
|
|
||||||
suffix={suffix}
|
|
||||||
icon={icon}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Alternatives({ nameList, children }) {
|
|
||||||
const [show, setShow] = useState(false)
|
|
||||||
|
|
||||||
function onClick() {
|
|
||||||
setShow(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{show ? (
|
|
||||||
nameList.map((name) => (
|
|
||||||
<ErrorBoundary>
|
|
||||||
<Suspense
|
|
||||||
fallback={
|
|
||||||
<ItemContainer>
|
|
||||||
<BarLoader />
|
|
||||||
</ItemContainer>
|
|
||||||
}>
|
|
||||||
{children(name)}
|
|
||||||
</Suspense>
|
|
||||||
</ErrorBoundary>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<ShowAlternativesButton onClick={onClick}>
|
|
||||||
show alternatives
|
|
||||||
</ShowAlternativesButton>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const ShowAlternativesButton = styled.div`
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 5px 0;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px dashed black;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 1rem;
|
|
||||||
`
|
|
||||||
|
|
||||||
class ErrorBoundary extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
this.state = { hasError: false }
|
|
||||||
}
|
|
||||||
|
|
||||||
static getDerivedStateFromError(error) {
|
|
||||||
return { hasError: true, message: error.message }
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidCatch(error, info) {}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
if (this.state.hasError) {
|
|
||||||
return <h4>{this.state.message}</h4>
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.props.children
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const CardWrapper = styled.div`
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 40px;
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
${mobile} {
|
|
||||||
padding: 20px;
|
|
||||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
const ItemContainer = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-top: 8px;
|
|
||||||
word-break: break-all;
|
|
||||||
`
|
|
||||||
|
|
||||||
const Item = styled.span`
|
|
||||||
margin-left: 6px;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { DiRust } from 'react-icons/di'
|
|
||||||
import { Card, CardTitle, DedicatedAvailability } from '../Card'
|
|
||||||
|
|
||||||
export default function CratesioCard({ name }) {
|
|
||||||
const lowerCase = name.toLowerCase()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card key={lowerCase}>
|
|
||||||
<CardTitle>crates.io (Rust)</CardTitle>
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={lowerCase}
|
|
||||||
provider="cratesio"
|
|
||||||
url={`https://crates.io/crates/${lowerCase}`}
|
|
||||||
icon={<DiRust />}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { Card, CardTitle, DedicatedAvailability, Alternatives } from '../Card'
|
|
||||||
import { FaMapSigns } from 'react-icons/fa'
|
|
||||||
|
|
||||||
export default function DomainCard({ name }) {
|
|
||||||
const lowerCase = name.toLowerCase()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card key={lowerCase}>
|
|
||||||
<CardTitle>Domain</CardTitle>
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={`${lowerCase}.app`}
|
|
||||||
provider="domain"
|
|
||||||
url={`https://domainr.com/?q=${lowerCase}.app`}
|
|
||||||
icon={<FaMapSigns />}
|
|
||||||
/>
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={`${lowerCase}.dev`}
|
|
||||||
provider="domain"
|
|
||||||
url={`https://domainr.com/?q=${lowerCase}.dev`}
|
|
||||||
icon={<FaMapSigns />}
|
|
||||||
/>
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={`${lowerCase}.org`}
|
|
||||||
provider="domain"
|
|
||||||
url={`https://domainr.com/?q=${lowerCase}.org`}
|
|
||||||
icon={<FaMapSigns />}
|
|
||||||
/>
|
|
||||||
<Alternatives
|
|
||||||
nameList={[
|
|
||||||
`${lowerCase}app.com`,
|
|
||||||
`${lowerCase}.build`,
|
|
||||||
`${lowerCase}.ai`,
|
|
||||||
]}>
|
|
||||||
{(name) => (
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={name}
|
|
||||||
provider="domain"
|
|
||||||
url={`https://domainr.com/?q=${name}.org`}
|
|
||||||
icon={<FaMapSigns />}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Alternatives>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { FaGithub } from 'react-icons/fa'
|
|
||||||
import { Card, CardTitle, DedicatedAvailability, Alternatives } from '../Card'
|
|
||||||
import { capitalize } from '../../util/text'
|
|
||||||
|
|
||||||
export default function GithubCard({ name }) {
|
|
||||||
return (
|
|
||||||
<Card key={name}>
|
|
||||||
<CardTitle>GitHub</CardTitle>
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={name}
|
|
||||||
provider="github"
|
|
||||||
url={`https://github.com/${name}`}
|
|
||||||
prefix="github.com/"
|
|
||||||
icon={<FaGithub />}
|
|
||||||
/>
|
|
||||||
<Alternatives
|
|
||||||
nameList={[
|
|
||||||
`${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 />}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Alternatives>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { Card, CardTitle, ExistentialAvailability } from '../Card'
|
|
||||||
import { IoIosBeer } from 'react-icons/io'
|
|
||||||
|
|
||||||
export default function HomebrewCard({ name }) {
|
|
||||||
const lowerCase = name.toLowerCase()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card key={lowerCase}>
|
|
||||||
<CardTitle>Homebrew</CardTitle>
|
|
||||||
<ExistentialAvailability
|
|
||||||
name={lowerCase}
|
|
||||||
target={`https://formulae.brew.sh/api/formula/${lowerCase}.json`}
|
|
||||||
url={`https://formulae.brew.sh/formula/${lowerCase}`}
|
|
||||||
icon={<IoIosBeer />}
|
|
||||||
/>
|
|
||||||
<ExistentialAvailability
|
|
||||||
name={lowerCase}
|
|
||||||
target={`https://formulae.brew.sh/api/cask/${lowerCase}.json`}
|
|
||||||
url={`https://formulae.brew.sh/cask/${lowerCase}`}
|
|
||||||
suffix=" (Cask)"
|
|
||||||
icon={<IoIosBeer />}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { FaJsSquare } from 'react-icons/fa'
|
|
||||||
import { Card, CardTitle, DedicatedAvailability } from '../Card'
|
|
||||||
|
|
||||||
export default function JsOrgCard({ name }) {
|
|
||||||
const lowerCase = name.toLowerCase()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card key={lowerCase}>
|
|
||||||
<CardTitle>js.org</CardTitle>
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={`${lowerCase}.js.org`}
|
|
||||||
provider="dns"
|
|
||||||
url={`https://${lowerCase}.js.org`}
|
|
||||||
icon={<FaJsSquare />}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { FaNpm } from 'react-icons/fa'
|
|
||||||
import { Card, CardTitle, DedicatedAvailability } from '../Card'
|
|
||||||
|
|
||||||
export default function NpmCard({ name }) {
|
|
||||||
const lowerCase = name.toLowerCase()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card key={lowerCase}>
|
|
||||||
<CardTitle>npm</CardTitle>
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={lowerCase}
|
|
||||||
provider="npm"
|
|
||||||
url={`https://www.npmjs.com/package/${lowerCase}`}
|
|
||||||
prefix="npmjs.com/"
|
|
||||||
icon={<FaNpm />}
|
|
||||||
/>
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={lowerCase}
|
|
||||||
provider="npm-org"
|
|
||||||
url={`https://www.npmjs.com/org/${lowerCase}`}
|
|
||||||
prefix="npmjs.com/~"
|
|
||||||
suffix=" (Org)"
|
|
||||||
icon={<FaNpm />}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { Card, CardTitle, DedicatedAvailability } from '../Card'
|
|
||||||
import { FaPython } from 'react-icons/fa'
|
|
||||||
|
|
||||||
export default function PypiCard({ name }) {
|
|
||||||
return (
|
|
||||||
<Card key={name}>
|
|
||||||
<CardTitle>PyPI</CardTitle>
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={name}
|
|
||||||
provider="pypi"
|
|
||||||
url={`https://pypi.org/project/${name}`}
|
|
||||||
icon={<FaPython />}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { Card, CardTitle, DedicatedAvailability } from '../Card'
|
|
||||||
import { FaAws } from 'react-icons/fa'
|
|
||||||
|
|
||||||
export default function S3Card({ name }) {
|
|
||||||
const lowerCase = name.toLowerCase()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card key={lowerCase}>
|
|
||||||
<CardTitle>AWS S3</CardTitle>
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={lowerCase}
|
|
||||||
provider="s3"
|
|
||||||
url={`https://${lowerCase}.s3.amazonaws.com`}
|
|
||||||
suffix=".s3.amazonaws.com"
|
|
||||||
icon={<FaAws />}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { Card, CardTitle, DedicatedAvailability } from '../Card'
|
|
||||||
import { FaSlack } from 'react-icons/fa'
|
|
||||||
|
|
||||||
export default function SlackCard({ name }) {
|
|
||||||
const lowerCase = name.toLowerCase()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card key={lowerCase}>
|
|
||||||
<CardTitle>Slack</CardTitle>
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={lowerCase}
|
|
||||||
provider="slack"
|
|
||||||
url={`https://${lowerCase}.slack.com`}
|
|
||||||
suffix=".slack.com"
|
|
||||||
icon={<FaSlack />}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { FaTwitter } from 'react-icons/fa'
|
|
||||||
import { Card, CardTitle, DedicatedAvailability, Alternatives } from '../Card'
|
|
||||||
import { capitalize } from '../../util/text'
|
|
||||||
|
|
||||||
export default function TwitterCard({ name }) {
|
|
||||||
return (
|
|
||||||
<Card key={name}>
|
|
||||||
<CardTitle>Twitter</CardTitle>
|
|
||||||
<DedicatedAvailability
|
|
||||||
name={name}
|
|
||||||
provider="twitter"
|
|
||||||
url={`https://twitter.com/${name}`}
|
|
||||||
prefix="twitter.com/"
|
|
||||||
icon={<FaTwitter />}
|
|
||||||
/>
|
|
||||||
<Alternatives
|
|
||||||
nameList={[
|
|
||||||
`${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 />}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Alternatives>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,19 +1,16 @@
|
|||||||
{
|
{
|
||||||
"name": "namae",
|
"name": "@namae/web",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"fetch-suspense": "^1.2.0",
|
"fetch-suspense": "^1.2.0",
|
||||||
"isomorphic-unfetch": "^3.0.0",
|
"isomorphic-unfetch": "^3.0.0",
|
||||||
"npm-name": "^5.5.0",
|
|
||||||
"react": "^16.8.6",
|
"react": "^16.8.6",
|
||||||
"react-dom": "^16.8.6",
|
"react-dom": "^16.8.6",
|
||||||
"react-icons": "^3.7.0",
|
"react-icons": "^3.7.0",
|
||||||
"react-scripts": "3.0.1",
|
"react-scripts": "3.0.1",
|
||||||
"react-spinners": "^0.5.13",
|
"react-spinners": "^0.5.13",
|
||||||
"styled-components": "^4.3.2",
|
"styled-components": "^4.3.2"
|
||||||
"whois": "^2.10.1",
|
|
||||||
"whois-json": "^2.0.4"
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
103
web/src/components/Availability.js
Normal file
103
web/src/components/Availability.js
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import useFetch from 'fetch-suspense'
|
||||||
|
import { BarLoader } from 'react-spinners'
|
||||||
|
|
||||||
|
function AvailabilityCell({
|
||||||
|
name,
|
||||||
|
availability,
|
||||||
|
url,
|
||||||
|
prefix = '',
|
||||||
|
suffix = '',
|
||||||
|
icon,
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<ItemContainer>
|
||||||
|
{icon}
|
||||||
|
<Item>
|
||||||
|
<a href={url} target="_blank" rel="noopener noreferrer">
|
||||||
|
{prefix}
|
||||||
|
{availability ? (
|
||||||
|
<span style={{ color: 'green' }}>{name}</span>
|
||||||
|
) : (
|
||||||
|
<span style={{ color: 'red' }}>{name}</span>
|
||||||
|
)}
|
||||||
|
{suffix}
|
||||||
|
</a>
|
||||||
|
</Item>
|
||||||
|
</ItemContainer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Fallback = () => (
|
||||||
|
<ItemContainer>
|
||||||
|
<BarLoader />
|
||||||
|
</ItemContainer>
|
||||||
|
)
|
||||||
|
|
||||||
|
export function DedicatedAvailability({
|
||||||
|
name,
|
||||||
|
provider,
|
||||||
|
url,
|
||||||
|
prefix = '',
|
||||||
|
suffix = '',
|
||||||
|
icon,
|
||||||
|
}) {
|
||||||
|
const response = useFetch(`/availability/${provider}/${name}`)
|
||||||
|
if (response.error) {
|
||||||
|
throw new Error(`${provider}: ${response.error}`)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<AvailabilityCell
|
||||||
|
availability={response.availability}
|
||||||
|
name={name}
|
||||||
|
url={url}
|
||||||
|
prefix={prefix}
|
||||||
|
suffix={suffix}
|
||||||
|
icon={icon}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ExistentialAvailability({
|
||||||
|
name,
|
||||||
|
target,
|
||||||
|
prefix = '',
|
||||||
|
suffix = '',
|
||||||
|
icon,
|
||||||
|
}) {
|
||||||
|
const response = useFetch(target, null, { metadata: true })
|
||||||
|
if (response.status !== 404 && response.status !== 200) {
|
||||||
|
throw new Error(`${name}: ${response.status}`)
|
||||||
|
}
|
||||||
|
const availability = response.status === 404
|
||||||
|
return (
|
||||||
|
<AvailabilityCell
|
||||||
|
name={name}
|
||||||
|
availability={availability}
|
||||||
|
url={`https://formulae.brew.sh/formula/${name}`}
|
||||||
|
prefix={prefix}
|
||||||
|
suffix={suffix}
|
||||||
|
icon={icon}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const ItemContainer = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-top: 8px;
|
||||||
|
word-break: break-all;
|
||||||
|
`
|
||||||
|
|
||||||
|
const Item = styled.span`
|
||||||
|
margin-left: 6px;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
`
|
||||||
84
web/src/components/Card.js
Normal file
84
web/src/components/Card.js
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
import React, { Suspense, useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
|
||||||
|
import { Fallback } from './Availability'
|
||||||
|
import { mobile } from '../util/css'
|
||||||
|
|
||||||
|
export function Card({ title, nameList, alternativeList = [], children }) {
|
||||||
|
const [show, setShow] = useState(false)
|
||||||
|
|
||||||
|
function onClick() {
|
||||||
|
setShow(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CardWrapper>
|
||||||
|
<CardTitle>{title}</CardTitle>
|
||||||
|
<>
|
||||||
|
{nameList.map((name) => (
|
||||||
|
<ErrorBoundary>
|
||||||
|
<Suspense fallback={<Fallback />}>{children(name)}</Suspense>
|
||||||
|
</ErrorBoundary>
|
||||||
|
))}
|
||||||
|
{show
|
||||||
|
? alternativeList.map((name) => (
|
||||||
|
<ErrorBoundary>
|
||||||
|
<Suspense fallback={<Fallback />}>{children(name)}</Suspense>
|
||||||
|
</ErrorBoundary>
|
||||||
|
))
|
||||||
|
: null}
|
||||||
|
</>
|
||||||
|
{alternativeList.length > 0 && !show ? (
|
||||||
|
<ShowAlternativesButton onClick={onClick}>
|
||||||
|
show alternatives
|
||||||
|
</ShowAlternativesButton>
|
||||||
|
) : null}
|
||||||
|
</CardWrapper>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CardTitle = styled.div`
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const CardWrapper = styled.div`
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
${mobile} {
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const ShowAlternativesButton = styled.div`
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 5px 0;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px dashed black;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 1rem;
|
||||||
|
`
|
||||||
|
|
||||||
|
class ErrorBoundary extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.state = { hasError: false }
|
||||||
|
}
|
||||||
|
static getDerivedStateFromError(error) {
|
||||||
|
return { hasError: true, message: error.message }
|
||||||
|
}
|
||||||
|
componentDidCatch(error, info) {}
|
||||||
|
render() {
|
||||||
|
if (this.state.hasError) {
|
||||||
|
return <h4>{this.state.message}</h4>
|
||||||
|
}
|
||||||
|
return this.props.children
|
||||||
|
}
|
||||||
|
}
|
||||||
21
web/src/components/cards/CratesioCard.js
Normal file
21
web/src/components/cards/CratesioCard.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
29
web/src/components/cards/DomainCard.js
Normal file
29
web/src/components/cards/DomainCard.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
30
web/src/components/cards/GithubCard.js
Normal file
30
web/src/components/cards/GithubCard.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
30
web/src/components/cards/HomebrewCard.js
Normal file
30
web/src/components/cards/HomebrewCard.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
21
web/src/components/cards/JsOrgCard.js
Normal file
21
web/src/components/cards/JsOrgCard.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
32
web/src/components/cards/NpmCard.js
Normal file
32
web/src/components/cards/NpmCard.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
19
web/src/components/cards/PypiCard.js
Normal file
19
web/src/components/cards/PypiCard.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
22
web/src/components/cards/S3Card.js
Normal file
22
web/src/components/cards/S3Card.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
22
web/src/components/cards/SlackCard.js
Normal file
22
web/src/components/cards/SlackCard.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
30
web/src/components/cards/TwitterCard.js
Normal file
30
web/src/components/cards/TwitterCard.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
10269
web/yarn.lock
Normal file
10269
web/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user