Standardize API responses and new docs page (#124)

.gitignore

@@ -3,6 +3,7 @@ node_modules
 yarn.lock
 Session.vim
 logs
+request.curl
 
 client/node_modules
 client/dist

client/next.config.js

@@ -0,0 +1,6 @@
+const withNextra = require("nextra")({
+	theme: "nextra-theme-docs",
+	themeConfig: "./theme.config.jsx",
+});
+
+module.exports = withNextra();

client/package.json

@@ -16,6 +16,8 @@
 		"canvas-confetti": "^1.9.3",
 		"clsx": "^1.2.1",
 		"next": "12.3.1",
+		"nextra": "^2.13.4",
+		"nextra-theme-docs": "^2.13.4",
 		"nookies": "^2.5.2",
 		"nprogress": "^0.2.0",
 		"password-validator": "^5.3.0",

client/pages/docs/_meta.json

@@ -0,0 +1,4 @@
+{
+	"index": "Overview",
+	"auth": "Authentication"
+}

client/pages/docs/anime/_meta.json

@@ -0,0 +1,3 @@
+{
+	"index": "Get anime information"
+}

client/pages/docs/anime/index.mdx

@@ -0,0 +1,52 @@
+import { LockClosedIcon } from "@radix-ui/react-icons";
+import { Callout, Text } from "@radix-ui/themes";
+
+# Get information of a given Anime
+
+<Callout.Root size="1" color="orange">
+	<Callout.Icon>
+		<LockClosedIcon />
+	</Callout.Icon>
+	<Callout.Text weight="medium">
+		<Text>This is a protected endpoint. Authentication requried!</Text>
+	</Callout.Text>
+</Callout.Root>
+
+It accepts a valid anime ID or name as path parameter in the endpoint and returns all information on that anime.
+
+### Endpoint:
+```sh
+# Using anime id
+/anime/<anime_id>
+
+# Or using anime name
+/anime/<anime_name>
+```
+
+> Event tho both of the above approaches work. Quering an anime information via anime ID is generally recommended for more accurate and faster response. Using anime name can lead to inaccuate results if the name does not match properly.
+
+### Return
+It will return the following JSON object:
+
+```json
+{
+  "status": "success",
+  "data": {
+    "id": 188,
+    "name": "One Punch Man",
+    "episodeCount": 12,
+    "summary": "The seemingly unimpressive Saitama has a rather unique hobby: being a hero. In order to pursue his childhood dream, Saitama relentlessly trained for three years, losing all of his hair in the process. Now, Saitama is so powerful, he can defeat any enemy with just one punch. However, having no one capable of matching his strength has led Saitama to an unexpected problem—he is no longer able to enjoy the thrill of battling and has become quite bored. One day, Saitama catches the attention of 19-year-old cyborg Genos, who witnesses his power and wishes to become Saitama's disciple. Genos proposes that the two join the Hero Association in order to become certified heroes that will be recognized for their positive contributions to society. Saitama, who is shocked that no one knows who he is, quickly agrees. Meeting new allies and taking on new foes, Saitama embarks on a new journey as a member of the Hero Association to experience the excitement of battle he once felt."
+  }
+}
+```
+
+### Example:
+> We are using the built-in global `fetch` API here, which is both available in browser and NodeJS as of now. But you can use any other programming language or request lib.
+
+```js
+const response = await fetch(`${BASE_URL}/anime/188`)
+// or
+const response = await fetch(`${BASE_URL}/anime/One Punch Man`)
+
+const quote = await response.json()
+```

client/pages/docs/auth.mdx

@@ -0,0 +1,14 @@
+# Authentication
+
+Some of the endpoints are protected and require a secret API key, which you can obtain by becoming a [premium member](/get-premium). Authentication with the `x-api-key` header is necessary to access these premium API endpoints that require the premium API key.
+
+Here is how to authenticate using a secret API key:
+
+```js
+const response = fetch(`${BASE_URL}/quotes/random/1`, {
+		headers: {
+				'x-api-key': 'YOUR_API_KEY',
+		},
+});
+const quote = await response.json()
+```