mirror of
https://github.com/uetchy/namae.git
synced 2025-08-20 09:58:13 +09:00
chore: split app into api and web
This commit is contained in:
@@ -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,35 +0,0 @@
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { FaTwitter, FaGlobe } from 'react-icons/fa'
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<Container>
|
||||
<p>
|
||||
Made by U with{' '}
|
||||
<span role="img" aria-label="love">
|
||||
🐤
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<a
|
||||
href="https://twitter.com/uetschy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<FaTwitter />
|
||||
</a>{' '}
|
||||
<a href="https://uechi.io" target="_blank" rel="noopener noreferrer">
|
||||
<FaGlobe />
|
||||
</a>
|
||||
</p>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.footer`
|
||||
margin: 40px 0;
|
||||
text-align: center;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 0.8em;
|
||||
`
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user