From cd5ed81052e689ad590e854d7ba07106c5e64791 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Mon, 5 Aug 2019 22:59:39 +0900 Subject: [PATCH] fix: rename components --- CONTRIBUTING.md | 2 +- api/services/cratesio.js | 3 +- api/services/dns.js | 2 +- api/services/domain.js | 2 +- api/services/github.js | 15 +- api/services/npm-org.js | 2 +- api/services/npm.js | 2 +- api/services/pypi.js | 17 +- api/services/rubygems.js | 5 +- api/services/s3.js | 17 +- api/services/slack.js | 31 +-- api/services/twitter.js | 15 +- api/util/http.js | 6 + web/public/locales/en/translation.json | 3 +- web/src/App.js | 22 +- web/src/components/Availability.js | 180 ---------------- web/src/components/Cards.js | 205 ++++++++++++++++--- web/src/components/Suggestion.js | 1 + web/src/components/cards/CratesioCard.js | 2 +- web/src/components/cards/DomainCard.js | 2 +- web/src/components/cards/GithubCard.js | 2 +- web/src/components/cards/GithubSearchCard.js | 26 +++ 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/RubyGemsCard.js | 2 +- web/src/components/cards/S3Card.js | 2 +- web/src/components/cards/SlackCard.js | 2 +- web/src/components/cards/TwitterCard.js | 9 +- 30 files changed, 289 insertions(+), 296 deletions(-) delete mode 100644 web/src/components/Availability.js create mode 100644 web/src/components/cards/GithubSearchCard.js diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 69fbad6..4a04d59 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -24,7 +24,7 @@ import React from 'react' import { FaGithub } from 'react-icons/fa' import { Card } from '../Card' -import { ExistentialAvailability } from '../Availability' +import { ExistentialAvailability } from '../Cards' import { capitalize } from '../../util/text' export default function NewCard({ name }) { diff --git a/api/services/cratesio.js b/api/services/cratesio.js index ad09632..da5afb5 100644 --- a/api/services/cratesio.js +++ b/api/services/cratesio.js @@ -1,5 +1,4 @@ -const fetch = require('isomorphic-unfetch') -const { send, sendError } = require('../util/http') +const { send, sendError, fetch } = require('../util/http') module.exports = async (req, res) => { const name = req.query.name diff --git a/api/services/dns.js b/api/services/dns.js index 595cb90..66fb688 100644 --- a/api/services/dns.js +++ b/api/services/dns.js @@ -14,7 +14,7 @@ module.exports = async (req, res) => { const name = req.query.name if (!name) { - return res.status(400).json({ error: 'no query given' }) + return sendError(res, new Error('no query given')) } try { diff --git a/api/services/domain.js b/api/services/domain.js index aba8f2c..9f9aeae 100644 --- a/api/services/domain.js +++ b/api/services/domain.js @@ -5,7 +5,7 @@ module.exports = async (req, res) => { const name = req.query.name if (!name) { - return res.status(400).json({ error: 'no query given' }) + return sendError(res, new Error('no query given')) } try { diff --git a/api/services/github.js b/api/services/github.js index d8ac9ab..87b168b 100644 --- a/api/services/github.js +++ b/api/services/github.js @@ -1,20 +1,17 @@ -const fetch = require('isomorphic-unfetch') -const { send, sendError } = require('../util/http') - -async function getAvailability(name) { - const response = await fetch(`https://github.com/${encodeURIComponent(name)}`) - return response.status !== 200 -} +const { send, sendError, fetch } = require('../util/http') module.exports = async (req, res) => { const name = req.query.name if (!name) { - return res.status(400).json({ error: 'no query given' }) + return sendError(res, new Error('no query given')) } try { - const availability = await getAvailability(name) + const response = await fetch( + `https://github.com/${encodeURIComponent(name)}` + ) + const availability = response.status !== 200 send(res, availability) } catch (err) { sendError(res, err) diff --git a/api/services/npm-org.js b/api/services/npm-org.js index 230419d..2ed217d 100644 --- a/api/services/npm-org.js +++ b/api/services/npm-org.js @@ -5,7 +5,7 @@ module.exports = async (req, res) => { const name = req.query.name if (!name) { - return res.status(400).json({ error: 'no query given' }) + return sendError(res, new Error('no query given')) } try { diff --git a/api/services/npm.js b/api/services/npm.js index 1436861..6422c80 100644 --- a/api/services/npm.js +++ b/api/services/npm.js @@ -5,7 +5,7 @@ module.exports = async (req, res) => { const name = req.query.name if (!name) { - return res.status(400).json({ error: 'no query given' }) + return sendError(res, new Error('no query given')) } try { diff --git a/api/services/pypi.js b/api/services/pypi.js index a074969..18ace52 100644 --- a/api/services/pypi.js +++ b/api/services/pypi.js @@ -1,22 +1,17 @@ -const fetch = require('isomorphic-unfetch') -const { send, sendError } = require('../util/http') - -async function getAvailability(name) { - const response = await fetch( - `https://pypi.org/pypi/${encodeURIComponent(name)}/json` - ) - return response.status !== 200 -} +const { send, sendError, fetch } = require('../util/http') module.exports = async (req, res) => { const name = req.query.name if (!name) { - return res.status(400).json({ error: 'no query given' }) + return sendError(res, new Error('no query given')) } try { - const availability = await getAvailability(name) + const response = await fetch( + `https://pypi.org/pypi/${encodeURIComponent(name)}/json` + ) + const availability = response.status !== 200 send(res, availability) } catch (err) { sendError(res, err) diff --git a/api/services/rubygems.js b/api/services/rubygems.js index 34dd1fa..d02f805 100644 --- a/api/services/rubygems.js +++ b/api/services/rubygems.js @@ -1,11 +1,10 @@ -const fetch = require('isomorphic-unfetch') -const { send, sendError } = require('../util/http') +const { send, sendError, fetch } = require('../util/http') module.exports = async (req, res) => { const name = req.query.name if (!name) { - return res.status(400).json({ error: 'no query given' }) + return sendError(res, new Error('no query given')) } try { diff --git a/api/services/s3.js b/api/services/s3.js index e9a070e..19d7e4e 100644 --- a/api/services/s3.js +++ b/api/services/s3.js @@ -1,22 +1,17 @@ -const fetch = require('isomorphic-unfetch') -const { send, sendError } = require('../util/http') - -async function getAvailability(name) { - const response = await fetch( - `https://${encodeURIComponent(name)}.s3.amazonaws.com` - ) - return response.status !== 200 -} +const { send, sendError, fetch } = require('../util/http') module.exports = async (req, res) => { const name = req.query.name if (!name) { - return res.status(400).json({ error: 'no query given' }) + return sendError(res, new Error('no query given')) } try { - const availability = await getAvailability(name) + const response = await fetch( + `https://${encodeURIComponent(name)}.s3.amazonaws.com` + ) + const availability = response.status !== 200 send(res, availability) } catch (err) { sendError(res, err) diff --git a/api/services/slack.js b/api/services/slack.js index 01e57e1..8cd1ec2 100644 --- a/api/services/slack.js +++ b/api/services/slack.js @@ -1,32 +1,23 @@ -const fetch = require('isomorphic-unfetch') -const { send, sendError } = require('../util/http') - -async function getAvailability(name) { - try { - const response = await fetch( - `https://${encodeURIComponent(name)}.slack.com` - ) - return response.status !== 200 - } catch (err) { - if (err.code === 'ENOTFOUND') { - return true - } else { - throw new Error(err.message) - } - } -} +const { send, sendError, fetch } = require('../util/http') module.exports = async (req, res) => { const name = req.query.name if (!name) { - return res.status(400).json({ error: 'no query given' }) + return sendError(res, new Error('no query given')) } try { - const availability = await getAvailability(name) + const response = await fetch( + `https://${encodeURIComponent(name)}.slack.com` + ) + const availability = response.status !== 200 send(res, availability) } catch (err) { - sendError(res, err) + if (err.code === 'ENOTFOUND') { + send(res, true) + } else { + sendError(res, err) + } } } diff --git a/api/services/twitter.js b/api/services/twitter.js index d57257a..eb64052 100644 --- a/api/services/twitter.js +++ b/api/services/twitter.js @@ -1,12 +1,6 @@ -const fetch = require('isomorphic-unfetch') -const { send, sendError } = require('../util/http') +const { send, sendError, fetch } = require('../util/http') -async function getAvailability(name) { - const response = await fetch( - `https://twitter.com/${encodeURIComponent(name)}` - ) - return response.status !== 200 -} +async function getAvailability(name) {} module.exports = async (req, res) => { const name = req.query.name @@ -16,7 +10,10 @@ module.exports = async (req, res) => { } try { - const availability = await getAvailability(name) + const response = await fetch( + `https://twitter.com/${encodeURIComponent(name)}` + ) + const availability = response.status !== 200 send(res, availability) } catch (err) { sendError(res, err) diff --git a/api/util/http.js b/api/util/http.js index cd14bc9..c3580a4 100644 --- a/api/util/http.js +++ b/api/util/http.js @@ -1,3 +1,9 @@ +const fetch = require('isomorphic-unfetch') + +exports.fetch = (url, method = 'HEAD') => { + return fetch(url, { method }) +} + exports.send = (res, availability) => { res.setHeader('Cache-Control', 'maxage=0, s-maxage=3600') res.json({ availability }) diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index f5df2ac..0882eb0 100644 --- a/web/public/locales/en/translation.json +++ b/web/public/locales/en/translation.json @@ -13,7 +13,8 @@ "jsorg": "js.org", "s3": "AWS S3", "twitter": "Twitter", - "slack": "Slack" + "slack": "Slack", + "linux": "Linux" }, "try": "How about" } diff --git a/web/src/App.js b/web/src/App.js index a22758c..513d791 100644 --- a/web/src/App.js +++ b/web/src/App.js @@ -3,7 +3,6 @@ import styled, { createGlobalStyle } from 'styled-components' import { Helmet } from 'react-helmet' import { useTranslation } from 'react-i18next' -import { Cards, CardContainer } from './components/Cards' import GithubCard from './components/cards/GithubCard' import DomainCard from './components/cards/DomainCard' import HomebrewCard from './components/cards/HomebrewCard' @@ -88,8 +87,8 @@ export default function App() { {queryGiven ? ( - - + + @@ -101,9 +100,9 @@ export default function App() { - + - + ) : !isStandalone() ? ( ) : null} @@ -199,3 +198,16 @@ const InputView = styled.input.attrs({ font-size: 2rem; } ` + +const SearchResult = styled.div`` + +const Cards = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + + ${mobile} { + flex-direction: column; + } +` diff --git a/web/src/components/Availability.js b/web/src/components/Availability.js deleted file mode 100644 index 29df41a..0000000 --- a/web/src/components/Availability.js +++ /dev/null @@ -1,180 +0,0 @@ -import React, { Suspense } from 'react' -import styled from 'styled-components' -import useFetch from 'fetch-suspense' -import BarLoader from 'react-spinners/BarLoader' -import { GoInfo } from 'react-icons/go' -import { Tooltip } from 'react-tippy' -import { ExternalLink } from './Links' -import 'react-tippy/dist/tippy.css' - -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 ( - - - - - Error - - - - ) - } - return this.props.children - } -} - -const Result = ({ - name, - availability, - link, - prefix = '', - suffix = '', - icon, -}) => ( - - - {icon} - - - {prefix} - {name} - {suffix} - - - - -) - -const Fallback = () => ( - - - -) - -export const AvailabilityContainer = ({ children }) => ( - - }>{children} - -) - -export function DedicatedAvailability({ - name, - service, - link, - prefix = '', - suffix = '', - icon, -}) { - const response = useFetch(`/availability/${service}/${name}`) - - if (response.error) { - throw new Error(`${service}: ${response.error}`) - } - - return ( - - ) -} - -export function ExistentialAvailability({ - name, - target, - link, - 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 ( - - ) -} - -export function CustomAvailability({ - name, - target, - link, - prefix = '', - suffix = '', - icon, - children, -}) { - const response = useFetch(target, null, { metadata: true }) - const availability = children(response) - - return ( - - ) -} - -const Container = styled.div` - min-height: 1em; - display: flex; - align-items: center; - margin-top: 8px; -` - -const Cell = styled.div` - display: flex; - flex-direction: row; - align-items: flex-start; - word-break: break-all; - color: ${({ availability }) => (availability ? 'green' : 'red')}; -` - -const Name = styled.div` - margin-left: 6px; - font-family: monospace; - font-size: 1rem; - - a { - text-decoration: none; - color: inherit; - } -` diff --git a/web/src/components/Cards.js b/web/src/components/Cards.js index 09a9ee7..bf5530d 100644 --- a/web/src/components/Cards.js +++ b/web/src/components/Cards.js @@ -1,9 +1,88 @@ -import React, { useState } from 'react' +import React, { useState, Suspense } from 'react' import styled from 'styled-components' -import { AvailabilityContainer } from './Availability' import { mobile } from '../util/css' +import useFetch from 'fetch-suspense' +import BarLoader from 'react-spinners/BarLoader' +import { GoInfo } from 'react-icons/go' +import { Tooltip } from 'react-tippy' +import { ExternalLink } from './Links' +import 'react-tippy/dist/tippy.css' + +export function DedicatedAvailability({ + name, + service, + link, + prefix = '', + suffix = '', + icon, +}) { + const response = useFetch(`/availability/${service}/${name}`) + + if (response.error) { + throw new Error(`${service}: ${response.error}`) + } + + return ( + + ) +} + +export function ExistentialAvailability({ + name, + target, + link, + 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 ( + + ) +} + +export function CustomSearchCard({ + title, + query, + link, + prefix = '', + suffix = '', + icon, + children, +}) { + return ( + + {title} + + {children(query)} + + + ) +} + export function Card({ title, nameList = [], alternativeList = [], children }) { const [revealAlternatives, setRevealAlternatives] = useState(false) @@ -12,44 +91,92 @@ export function Card({ title, nameList = [], alternativeList = [], children }) { } return ( - + {title} {nameList.map((name) => ( - - {children(name)} - + {children(name)} ))} {revealAlternatives && alternativeList.map((name) => ( - - {children(name)} - + {children(name)} ))} {alternativeList.length > 0 && !revealAlternatives ? ( - - show more - + ) : null} - + ) } -export const Cards = styled.div`` - -export const CardContainer = styled.div` - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - - ${mobile} { - flex-direction: column; +class ErrorBoundary extends React.Component { + constructor(props) { + super(props) + this.state = { hasError: false } } -` -const CardWrapper = styled.div` + static getDerivedStateFromError(error) { + return { hasError: true, message: error.message } + } + + render() { + if (this.state.hasError) { + return ( + + + + + Error + + + + ) + } + return this.props.children + } +} + +const ErrorHandler = ({ children }) => ( + + + + + }> + {children} + + +) + +const AvailabilityResult = ({ + name, + availability, + link, + prefix = '', + suffix = '', + icon, +}) => ( + + + {icon} + + + {prefix} + {name} + {suffix} + + + + +) + +const CardContainer = styled.div` padding: 40px; ${mobile} { @@ -79,7 +206,7 @@ const CardList = styled.div` } ` -const ShowAlternativesButton = styled.div` +const Button = styled.div` margin-top: 5px; display: inline-block; padding: 5px 0; @@ -89,3 +216,29 @@ const ShowAlternativesButton = styled.div` font-family: monospace; font-size: 0.8em; ` + +const ResultContainer = styled.div` + min-height: 1em; + display: flex; + align-items: center; + margin-top: 8px; +` + +const ResultItem = styled.div` + display: flex; + flex-direction: row; + align-items: flex-start; + word-break: break-all; + color: ${({ color }) => color}; +` + +const ResultName = styled.div` + margin-left: 6px; + font-family: monospace; + font-size: 1rem; + + a { + text-decoration: none; + color: inherit; + } +` diff --git a/web/src/components/Suggestion.js b/web/src/components/Suggestion.js index 833fd06..db74b6b 100644 --- a/web/src/components/Suggestion.js +++ b/web/src/components/Suggestion.js @@ -28,6 +28,7 @@ const modifiers = [ (word) => `${capitalize(word)}ful`, (word) => `${capitalize(word)}ery`, (word) => `${lower(word)}ly`, + (word) => `${lower(word)}joy`, (word) => `${capitalize(word)}Hunt`, (word) => `${capitalize(word)}gram`, (word) => `${capitalize(word)}base`, diff --git a/web/src/components/cards/CratesioCard.js b/web/src/components/cards/CratesioCard.js index 15a0c5b..5df8a8b 100644 --- a/web/src/components/cards/CratesioCard.js +++ b/web/src/components/cards/CratesioCard.js @@ -2,7 +2,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { DiRust } from 'react-icons/di' import { Card } from '../Cards' -import { DedicatedAvailability } from '../Availability' +import { DedicatedAvailability } from '../Cards' export default function CratesioCard({ name }) { const { t } = useTranslation() diff --git a/web/src/components/cards/DomainCard.js b/web/src/components/cards/DomainCard.js index b94b7f6..9d0466d 100644 --- a/web/src/components/cards/DomainCard.js +++ b/web/src/components/cards/DomainCard.js @@ -2,7 +2,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { FaMapSigns } from 'react-icons/fa' import { Card } from '../Cards' -import { DedicatedAvailability } from '../Availability' +import { DedicatedAvailability } from '../Cards' export default function DomainCard({ name }) { const { t } = useTranslation() diff --git a/web/src/components/cards/GithubCard.js b/web/src/components/cards/GithubCard.js index 7dedda7..262583f 100644 --- a/web/src/components/cards/GithubCard.js +++ b/web/src/components/cards/GithubCard.js @@ -2,7 +2,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { FaGithub } from 'react-icons/fa' import { Card } from '../Cards' -import { DedicatedAvailability } from '../Availability' +import { DedicatedAvailability } from '../Cards' export default function GithubCard({ name }) { const { t } = useTranslation() diff --git a/web/src/components/cards/GithubSearchCard.js b/web/src/components/cards/GithubSearchCard.js new file mode 100644 index 0000000..d06a394 --- /dev/null +++ b/web/src/components/cards/GithubSearchCard.js @@ -0,0 +1,26 @@ +import React from 'react' +import { useTranslation } from 'react-i18next' +import { FaGithub } from 'react-icons/fa' +import fetch from 'isomorphic-unfetch' +import { CustomSearchCard } from '../Cards' + +export default function GithubSearchCard({ name }) { + const { t } = useTranslation() + + return ( + }> + {async (query) => { + const response = await fetch( + `https://api.github.com/repos/search?q=${query}` + ) + const data = await response.json() + console.log(data) + }} + + ) +} diff --git a/web/src/components/cards/HomebrewCard.js b/web/src/components/cards/HomebrewCard.js index 8e7d542..57724ec 100644 --- a/web/src/components/cards/HomebrewCard.js +++ b/web/src/components/cards/HomebrewCard.js @@ -2,7 +2,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { IoIosBeer } from 'react-icons/io' import { Card } from '../Cards' -import { ExistentialAvailability } from '../Availability' +import { ExistentialAvailability } from '../Cards' export default function HomebrewCard({ name }) { const { t } = useTranslation() diff --git a/web/src/components/cards/JsOrgCard.js b/web/src/components/cards/JsOrgCard.js index 1a179ac..8abc9f8 100644 --- a/web/src/components/cards/JsOrgCard.js +++ b/web/src/components/cards/JsOrgCard.js @@ -2,7 +2,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { FaJsSquare } from 'react-icons/fa' import { Card } from '../Cards' -import { DedicatedAvailability } from '../Availability' +import { DedicatedAvailability } from '../Cards' export default function JsOrgCard({ name }) { const { t } = useTranslation() diff --git a/web/src/components/cards/NpmCard.js b/web/src/components/cards/NpmCard.js index 2247e30..a5ae537 100644 --- a/web/src/components/cards/NpmCard.js +++ b/web/src/components/cards/NpmCard.js @@ -2,7 +2,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { FaNpm } from 'react-icons/fa' import { Card } from '../Cards' -import { DedicatedAvailability } from '../Availability' +import { DedicatedAvailability } from '../Cards' export default function NpmCard({ name }) { const { t } = useTranslation() diff --git a/web/src/components/cards/PypiCard.js b/web/src/components/cards/PypiCard.js index 4dfc9f5..9ab7dd2 100644 --- a/web/src/components/cards/PypiCard.js +++ b/web/src/components/cards/PypiCard.js @@ -2,7 +2,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { FaPython } from 'react-icons/fa' import { Card } from '../Cards' -import { DedicatedAvailability } from '../Availability' +import { DedicatedAvailability } from '../Cards' import { capitalize } from '../../util/text' export default function PypiCard({ name }) { diff --git a/web/src/components/cards/RubyGemsCard.js b/web/src/components/cards/RubyGemsCard.js index 081d7a9..7d0b5ee 100644 --- a/web/src/components/cards/RubyGemsCard.js +++ b/web/src/components/cards/RubyGemsCard.js @@ -2,7 +2,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { FaGem } from 'react-icons/fa' import { Card } from '../Cards' -import { DedicatedAvailability } from '../Availability' +import { DedicatedAvailability } from '../Cards' export default function RubyGemsCard({ name }) { const { t } = useTranslation() diff --git a/web/src/components/cards/S3Card.js b/web/src/components/cards/S3Card.js index 927cc86..d5bc36c 100644 --- a/web/src/components/cards/S3Card.js +++ b/web/src/components/cards/S3Card.js @@ -2,7 +2,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { FaAws } from 'react-icons/fa' import { Card } from '../Cards' -import { DedicatedAvailability } from '../Availability' +import { DedicatedAvailability } from '../Cards' export default function S3Card({ name }) { const { t } = useTranslation() diff --git a/web/src/components/cards/SlackCard.js b/web/src/components/cards/SlackCard.js index dcc8f49..2d222e1 100644 --- a/web/src/components/cards/SlackCard.js +++ b/web/src/components/cards/SlackCard.js @@ -2,7 +2,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { FaSlack } from 'react-icons/fa' import { Card } from '../Cards' -import { DedicatedAvailability } from '../Availability' +import { DedicatedAvailability } from '../Cards' export default function SlackCard({ name }) { const { t } = useTranslation() diff --git a/web/src/components/cards/TwitterCard.js b/web/src/components/cards/TwitterCard.js index 6c977e7..c6b4f15 100644 --- a/web/src/components/cards/TwitterCard.js +++ b/web/src/components/cards/TwitterCard.js @@ -2,7 +2,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { FaTwitter } from 'react-icons/fa' import { Card } from '../Cards' -import { DedicatedAvailability } from '../Availability' +import { DedicatedAvailability } from '../Cards' import { capitalize } from '../../util/text' export default function TwitterCard({ name }) { @@ -13,11 +13,12 @@ export default function TwitterCard({ name }) { title={t('providers.twitter')} nameList={[name]} alternativeList={[ - `${capitalize(name)}HQ`, `${name.toLowerCase()}app`, - `${name.toLowerCase()}-support`, + `hey${name.toLowerCase()}`, `${capitalize(name)}Team`, - `${capitalize(name)}Official`, + `${capitalize(name)}HQ`, + `${name.toLowerCase()}_official`, + `${name.toLowerCase()}-support`, ]}> {(name) => (