From a21605802922d04821f4bc61d7a39de99f887fd2 Mon Sep 17 00:00:00 2001
From: Yasuaki Uechi <y@uechi.io>
Date: Wed, 31 Jul 2019 13:40:36 +0900
Subject: [PATCH] docs: add contribution guide

---
 CONTRIBUTING.md | 60 +++++++++++++++++++++++++++++++++++++++++++++++++
 README.md       | 10 ++++++++-
 2 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 CONTRIBUTING.md

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..d420091
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,60 @@
+# Contribution Guide
+
+## Setup environment
+
+Install `now` for development:
+
+```
+yarn global add now
+```
+
+then install deps and fire up dev server.
+
+```
+yarn install
+yarn start
+```
+
+## Add new provider
+
+Create `web/src/components/cards/<NewCard>.js` and paste following GitHub example into it:
+
+```jsx
+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 CratesioCard({ name }) {
+  return (
+    <Card
+      title="GitHub"
+      key={name}
+      nameList={[name, `${name}-team`]}
+      alternativeList={[`${capitalize(name)}HQ`]}>
+      {(name) => (
+        <DedicatedAvailability
+          name={name}
+          service="github"
+          link={`https://github.com/${name}`}
+          prefix="github.com/"
+          suffix=""
+          icon={<FaGithub />}
+        />
+      )}
+    </Card>
+  )
+}
+```
+
+### ExistentialAvailability
+
+`ExistentialAvailability` check if the response from passed URL returns `404` or not.
+For example, `<ExistentialAvailability target="https://formulae.brew.sh/api/formula/git.json" />` will send a request to `target` and see if it returns with 404. For security reasons, `target` must send back `Access-Control-Allow-Origin: *` header for bridging across cross-site requests. If they don't support `Access-Control-Allow-Origin`, you might want to use `DedicatedAvailability` for dedicated response handling.
+
+### 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.
diff --git a/README.md b/README.md
index 7e34273..7a8f192 100644
--- a/README.md
+++ b/README.md
@@ -2,4 +2,12 @@
 
 > name your new project.
 
-https://namae.dev
+## Usage
+
+Access to [namae.dev](https://namae.dev).
+
+## Contributing
+
+PRs welcome!
+
+See [Contribution Guide](./CONTRIBUTING.md) for the detailed instruction.