From dc0bc8fec40f4ad78008dfcfc524f96ddbe8f151 Mon Sep 17 00:00:00 2001
From: Yasuaki Uechi <y@uechi.io>
Date: Wed, 31 Jul 2019 13:57:48 +0900
Subject: [PATCH] docs: update document

---
 CONTRIBUTING.md              | 50 ++++++++++++++++++++++++++++--------
 web/src/App.js               |  3 ++-
 web/src/components/Footer.js | 13 ++++++----
 3 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d420091..a0d6255 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,7 +2,7 @@
 
 ## Setup environment
 
-Install `now` for development:
+Install `now` for development server:
 
 ```
 yarn global add now
@@ -17,30 +17,29 @@ yarn start
 
 ## Add new provider
 
-Create `web/src/components/cards/<NewCard>.js` and paste following GitHub example into it:
+Create `web/src/components/cards/<NewCard>.js` and paste following template into it:
 
 ```jsx
 import React from 'react'
 import { FaGithub } from 'react-icons/fa'
 
 import { Card } from '../Card'
-import { DedicatedAvailability } from '../Availability'
+import { ExistentialAvailability } from '../Availability'
 import { capitalize } from '../../util/text'
 
-export default function CratesioCard({ name }) {
+export default function NewCard({ name }) {
   return (
     <Card
-      title="GitHub"
+      title="NewCard"
       key={name}
       nameList={[name, `${name}-team`]}
       alternativeList={[`${capitalize(name)}HQ`]}>
       {(name) => (
-        <DedicatedAvailability
+        <ExistentialAvailability
           name={name}
-          service="github"
-          link={`https://github.com/${name}`}
-          prefix="github.com/"
-          suffix=""
+          target={`https://api.newservice.com/items/${name}`}
+          link={`https://newservice.com/${name}`}
+          prefix="newservice.com/"
           icon={<FaGithub />}
         />
       )}
@@ -49,6 +48,31 @@ export default function CratesioCard({ name }) {
 }
 ```
 
+and add the card to `/web/src/App.js`:
+
+```jsx
+import NewCard from './components/cards/NewCard'
+```
+
+```jsx
+<Cards>
+  <CardHeader>Result for {query}</CardHeader>
+  <CardContainer>
+    <GithubCard name={query} />
+    <DomainCard name={query} />
+    <TwitterCard name={query} />
+    <HomebrewCard name={query} />
+    <NpmCard name={query} />
+    <PypiCard name={query} />
+    <CratesioCard name={query} />
+    <JsOrgCard name={query} />
+    <SlackCard name={query} />
+    <S3Card name={query} />
+    <NewCard name={query} />
+  </CardContainer>
+</Cards>
+```
+
 ### ExistentialAvailability
 
 `ExistentialAvailability` check if the response from passed URL returns `404` or not.
@@ -57,4 +81,8 @@ For example, `<ExistentialAvailability target="https://formulae.brew.sh/api/form
 ### DedicatedAvailability
 
 `DedicatedAvailability` is for interacting with defined API endpoint to check availability.
-For example, `<DedicatedAvailability service="github" />` will send a request to `https://namae.dev/availability/<github>/<query>` which is routed to `/api/services/github.js` in the repo.
+For example, `<DedicatedAvailability service="<service>" />` will send a request to `https://namae.dev/availability/<service>/<query>` which is routed to `/api/services/<service>.js` in the repo.
+
+```
+
+```
diff --git a/web/src/App.js b/web/src/App.js
index 183db4a..11eb216 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -4,6 +4,8 @@ import styled from 'styled-components'
 import { useDeferredState } from './hooks/state'
 import { mobile } from './util/css'
 
+import Footer from './components/Footer'
+
 import GithubCard from './components/cards/GithubCard'
 import DomainCard from './components/cards/DomainCard'
 import HomebrewCard from './components/cards/HomebrewCard'
@@ -14,7 +16,6 @@ import JsOrgCard from './components/cards/JsOrgCard'
 import PypiCard from './components/cards/PypiCard'
 import S3Card from './components/cards/S3Card'
 import CratesioCard from './components/cards/CratesioCard'
-import Footer from './components/Footer'
 
 export default function App() {
   const [query, setQuery] = useDeferredState(1000)
diff --git a/web/src/components/Footer.js b/web/src/components/Footer.js
index a1c440e..36cb983 100644
--- a/web/src/components/Footer.js
+++ b/web/src/components/Footer.js
@@ -1,14 +1,14 @@
 import React from 'react'
 import styled from 'styled-components'
-import { FaTwitter, FaGlobe } from 'react-icons/fa'
+import { FaTwitter, FaGithubAlt } from 'react-icons/fa'
 
 export default function Footer() {
   return (
     <Container>
       <p>
         Made by U with{' '}
-        <span role="img" aria-label="love">
-          🐤
+        <span role="img" aria-label="coffee">
+          ☕️
         </span>
         <br />
         <br />
@@ -18,8 +18,11 @@ export default function Footer() {
           rel="noopener noreferrer">
           <FaTwitter />
         </a>{' '}
-        <a href="https://uechi.io" target="_blank" rel="noopener noreferrer">
-          <FaGlobe />
+        <a
+          href="https://github.com/uetchy/namae"
+          target="_blank"
+          rel="noopener noreferrer">
+          <FaGithubAlt />
         </a>
       </p>
     </Container>