From 98ab696702bcd3d340b6cb33ef6c9144b07fd954 Mon Sep 17 00:00:00 2001
From: Rocktim Saikia <rocktimthedev@gmail.com>
Date: Fri, 30 Aug 2024 21:01:36 +0530
Subject: [PATCH] Consolidate docs

---
 client/components/navbar.tsx                  |   2 +-
 client/pages/docs.tsx                         | 223 ------------------
 client/pages/{ => docs}/_meta.json            |   2 +-
 client/pages/{ => docs}/anime/_meta.json      |   0
 client/pages/{ => docs}/anime/anime-info.mdx  |   5 +-
 client/pages/{ => docs}/auth.mdx              |   0
 client/pages/{docs-new.mdx => docs/index.mdx} |  14 +-
 client/pages/{ => docs}/quote/_meta.json      |   0
 client/pages/{ => docs}/quote/index.mdx       |   0
 client/pages/{ => docs}/quote/pagination.mdx  |   0
 .../{ => docs}/quote/quotes-by-anime.mdx      |   0
 .../{ => docs}/quote/quotes-by-character.mdx  |   0
 .../{ => docs}/quote/random-via-anime.mdx     |   0
 .../{ => docs}/quote/random-via-character.mdx |   0
 client/pages/{ => docs}/quote/random.mdx      |   0
 15 files changed, 18 insertions(+), 228 deletions(-)
 delete mode 100644 client/pages/docs.tsx
 rename client/pages/{ => docs}/_meta.json (54%)
 rename client/pages/{ => docs}/anime/_meta.json (100%)
 rename client/pages/{ => docs}/anime/anime-info.mdx (83%)
 rename client/pages/{ => docs}/auth.mdx (100%)
 rename client/pages/{docs-new.mdx => docs/index.mdx} (59%)
 rename client/pages/{ => docs}/quote/_meta.json (100%)
 rename client/pages/{ => docs}/quote/index.mdx (100%)
 rename client/pages/{ => docs}/quote/pagination.mdx (100%)
 rename client/pages/{ => docs}/quote/quotes-by-anime.mdx (100%)
 rename client/pages/{ => docs}/quote/quotes-by-character.mdx (100%)
 rename client/pages/{ => docs}/quote/random-via-anime.mdx (100%)
 rename client/pages/{ => docs}/quote/random-via-character.mdx (100%)
 rename client/pages/{ => docs}/quote/random.mdx (100%)

diff --git a/client/components/navbar.tsx b/client/components/navbar.tsx
index 0515b9e..0a2ab36 100644
--- a/client/components/navbar.tsx
+++ b/client/components/navbar.tsx
@@ -19,7 +19,7 @@ export default function Navbar() {
 					</div>
 
 					<Flex gapX="4" align="center" justify="end">
-						<Link href="/docs-new">
+						<Link href="/docs">
 							<Button variant="ghost">
 								<Text weight="medium" size="3">
 									{windowSize.width <= 500 ? "Docs" : "Documentation"}
diff --git a/client/pages/docs.tsx b/client/pages/docs.tsx
deleted file mode 100644
index d12352a..0000000
--- a/client/pages/docs.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import {
-	ArrowUpIcon,
-	InfoCircledIcon,
-	LockClosedIcon,
-	RocketIcon,
-	ThickArrowRightIcon,
-} from "@radix-ui/react-icons";
-import { Badge, Callout, Flex, IconButton, Text } from "@radix-ui/themes";
-import clsx from "clsx";
-import { useId } from "react";
-import Layout from "~/components/Layout";
-import Resource from "~/components/resource";
-
-const API_ORIGIN = "https://animechan.io/api/v1/quotes";
-
-const AUTH_CODE_SAMPLE = `
-fetch(\`${API_ORIGIN}?anime=naruto\`, {
-    headers: {
-        'x-api-key': 'YOUR_API_KEY',
-    },
-})
-.then(response => response.json())
-.then(quotes => console.log(quotes));
-`;
-
-const auth_sub_heading = (
-	<>
-		Some of the Premium endpoints require an API key for authentication. The API key needs to be
-		passed in the request header as <code className="text-green-800">"x-api-key"</code>. Here is an
-		example:
-	</>
-);
-
-export interface IApiGuide {
-	heading: string;
-	subHeading?: React.ReactNode;
-	link: string;
-	isPremium: boolean;
-	isNewlyAdded?: boolean;
-	codeSample: { request: string; response?: string };
-}
-export const API_GUIDES: IApiGuide[] = [
-	{
-		heading: "Authentication",
-		subHeading: auth_sub_heading,
-		link: "#auth",
-		isPremium: false,
-		codeSample: { request: AUTH_CODE_SAMPLE },
-	},
-	// Free Endpoints:
-	{
-		heading: "Get a random quote",
-		link: "random-quote",
-		isPremium: false,
-		codeSample: {
-			request: `fetch("${API_ORIGIN}/random")
-          .then((response) => response.json())
-          .then((quote) => console.log(quote));`,
-			response: `{ anime: "", character: "", content: "" }`,
-		},
-	},
-	{
-		heading: "Get 5 random quotes (Pagination not supported)",
-		link: "5-quotes",
-		isPremium: false,
-		codeSample: {
-			request: `fetch("${API_ORIGIN}")
-          .then((response) => response.json())
-          .then((quotes) => console.log(quotes));`,
-			response: `[{ anime: "", character: "", content: "" }, // 4 more]`,
-		},
-	},
-
-	// Premium Endpoints:
-	{
-		heading: "Get a random quote by anime title",
-		link: "random-quote-by-anime",
-		isPremium: true,
-		codeSample: {
-			request: `fetch("${API_ORIGIN}/random?anime=naruto")
-          .then((response) => response.json())
-          .then((quote) => console.log(quote));`,
-			response: `{ anime: "Naruto", character: "", content: "" }`,
-		},
-	},
-	{
-		heading: "Get a random quote by anime character",
-		link: "random-quote-by-character",
-		isPremium: true,
-		codeSample: {
-			request: `fetch("${API_ORIGIN}/random?character=saitama")
-          .then((response) => response.json())
-          .then((quote) => console.log(quote));`,
-			response: `{ anime: "", character: "", content: "" }`,
-		},
-	},
-	{
-		heading: "Get 5 quotes by anime title",
-		link: "5quotes-by-anime",
-		isPremium: true,
-		codeSample: {
-			request: `fetch("${API_ORIGIN}?anime=naruto")
-          .then((response) => response.json())
-          .then((quotes) => console.log(quotes));`,
-			response: `[{ anime: "Naruto", character: "", content: "" }, // 4 more]`,
-		},
-	},
-	{
-		heading: "Get 5 quotes by anime character",
-		link: "5quotes-by-character",
-		isPremium: true,
-		codeSample: {
-			request: `fetch("${API_ORIGIN}?character=saitama")
-          .then((response) => response.json())
-          .then((quotes) => console.log(quotes));`,
-			response: `[{ anime: "", character: "Saitama", content: "" }, // 4 more]`,
-		},
-	},
-	{
-		heading: "Pagination",
-		isPremium: true,
-		subHeading:
-			"Pagination works only on the query endpoints. Default pagination count is 5 quotes per page.",
-		link: "pagination",
-		codeSample: {
-			request: `fetch('${API_ORIGIN}?anime=naruto&page=2')
-      .then(response => response.json())
-      .then(quotes => console.log(quotes))
-
-      // works on character queries too 👇
-      // https://animechan.io/api/quotes?character=luffy&page=2`,
-			response: `[{ anime: "Naruto", character: "", content: "" }, // 4 more]`,
-		},
-	},
-];
-
-export default function Guide() {
-	const metaInfo = {
-		title: "Animechan – Guide",
-		description: "Documentation for all available API endpoints.",
-		image: "https://animechan.io/image/guide.jpeg",
-	};
-
-	const UniqueKey = useId();
-
-	return (
-		<Layout metaInfo={metaInfo}>
-			<div className="container relative lg:mx-auto px-2 max-w-4xl mt-10" id="docs">
-				<div>
-					<h1 className="text-4xl font-bold">Docs</h1>
-					<h2 className="text-lg my-4">
-						Below you'll find examples using the standard{" "}
-						<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a> but
-						you can use any other http library out there.
-					</h2>
-
-					<div className="relative inline-block">
-						<Callout.Root size="1" color="blue">
-							<Callout.Icon>
-								<InfoCircledIcon />
-							</Callout.Icon>
-							<Callout.Text weight="medium">
-								All the free API endpoints has a default Rate Limit of 20 requests per hour only.
-							</Callout.Text>
-						</Callout.Root>
-
-						<Callout.Root size="1" mt="2">
-							<Callout.Icon>
-								<RocketIcon />
-							</Callout.Icon>
-							<Callout.Text weight="medium">
-								Get Premium API access for higher rate limits with other better features.
-							</Callout.Text>
-						</Callout.Root>
-					</div>
-				</div>
-
-				<div className="my-10">
-					<h1 className="text-2xl font-bold">API Endpoints:</h1>
-					<Text as="p" my="4">
-						Below titles with <LockClosedIcon className="inline-block mb-[4px]" color="green" /> are
-						Premium endpoints that requires a API key to use.
-					</Text>
-					<Flex direction="column" gapY="3" className="text-green-800">
-						{API_GUIDES.map((guide) => (
-							<a
-								href={`#${guide.link}`}
-								className={clsx({
-									"opacity-60": guide.isPremium,
-								})}
-								key={UniqueKey}
-							>
-								<ThickArrowRightIcon className="inline-block" /> {guide.heading}
-								{guide.isNewlyAdded && (
-									<Badge color="orange" mx="2">
-										New
-									</Badge>
-								)}
-								{guide.isPremium && <LockClosedIcon className="inline-block mb-[2px]" />}
-							</a>
-						))}
-					</Flex>
-				</div>
-				<hr />
-
-				<div className="my-10 space-y-20">
-					{API_GUIDES.map((guide) => (
-						<Resource {...guide} key={guide.heading} />
-					))}
-				</div>
-
-				<div className="text-center">
-					<a href="#docs">
-						<IconButton radius="full" mx="auto">
-							<ArrowUpIcon />
-						</IconButton>
-						<span className="inline-block text-sm mt-[6px] ml-2">Go to top</span>
-					</a>
-				</div>
-			</div>
-		</Layout>
-	);
-}
diff --git a/client/pages/_meta.json b/client/pages/docs/_meta.json
similarity index 54%
rename from client/pages/_meta.json
rename to client/pages/docs/_meta.json
index cc7a9d6..c0c7b21 100644
--- a/client/pages/_meta.json
+++ b/client/pages/docs/_meta.json
@@ -1,4 +1,4 @@
 {
-	"docs-new": "Overview",
+	"index": "Overview",
 	"auth": "Authentication"
 }
diff --git a/client/pages/anime/_meta.json b/client/pages/docs/anime/_meta.json
similarity index 100%
rename from client/pages/anime/_meta.json
rename to client/pages/docs/anime/_meta.json
diff --git a/client/pages/anime/anime-info.mdx b/client/pages/docs/anime/anime-info.mdx
similarity index 83%
rename from client/pages/anime/anime-info.mdx
rename to client/pages/docs/anime/anime-info.mdx
index 4d9f471..53bdafd 100644
--- a/client/pages/anime/anime-info.mdx
+++ b/client/pages/docs/anime/anime-info.mdx
@@ -11,7 +11,7 @@ It accepts a valid anime ID or name as path parameter in the endpoint and return
 /api/v1/anime/<anime_name>
 ```
 
-> Event tho both of the above approaches work. Quering a 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.
+> 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:
@@ -33,5 +33,8 @@ It will return the following JSON object:
 
 ```js
 const response = await fetch(`/api/v1/anime/${animeId}`)
+// or
+const response = await fetch(`/api/v1/anime/${animeName}`)
+
 const quote = await response.json()
 ```
diff --git a/client/pages/auth.mdx b/client/pages/docs/auth.mdx
similarity index 100%
rename from client/pages/auth.mdx
rename to client/pages/docs/auth.mdx
diff --git a/client/pages/docs-new.mdx b/client/pages/docs/index.mdx
similarity index 59%
rename from client/pages/docs-new.mdx
rename to client/pages/docs/index.mdx
index d90b7d8..8a3400d 100644
--- a/client/pages/docs-new.mdx
+++ b/client/pages/docs/index.mdx
@@ -1,5 +1,7 @@
-import { InfoCircledIcon, RocketIcon } from "@radix-ui/react-icons";
-import { Callout, Text } from "@radix-ui/themes";
+import { InfoCircledIcon, RocketIcon, ThickArrowRightIcon, LockClosedIcon } from "@radix-ui/react-icons";
+import { Badge, Callout, Text } from "@radix-ui/themes";
+import Link from "next/link";
+import { Button } from "@radix-ui/themes";
 
 # Animechan API docs
 
@@ -25,3 +27,11 @@ import { Callout, Text } from "@radix-ui/themes";
 </div>
 
 Here you will find all the currently available resources and API endpoints from Animechan. The API project is still under active development so expect to see new changes and features every week.
+
+Some of the API endpoints are protected and requires a secrect API key to access them. You can learn more about how to get premium API key clicking the button below:<br/>
+
+<Link href="/get-premium">
+	<Button size="3">
+		<span>Get Premium API</span> <RocketIcon />
+	</Button>
+</Link>
diff --git a/client/pages/quote/_meta.json b/client/pages/docs/quote/_meta.json
similarity index 100%
rename from client/pages/quote/_meta.json
rename to client/pages/docs/quote/_meta.json
diff --git a/client/pages/quote/index.mdx b/client/pages/docs/quote/index.mdx
similarity index 100%
rename from client/pages/quote/index.mdx
rename to client/pages/docs/quote/index.mdx
diff --git a/client/pages/quote/pagination.mdx b/client/pages/docs/quote/pagination.mdx
similarity index 100%
rename from client/pages/quote/pagination.mdx
rename to client/pages/docs/quote/pagination.mdx
diff --git a/client/pages/quote/quotes-by-anime.mdx b/client/pages/docs/quote/quotes-by-anime.mdx
similarity index 100%
rename from client/pages/quote/quotes-by-anime.mdx
rename to client/pages/docs/quote/quotes-by-anime.mdx
diff --git a/client/pages/quote/quotes-by-character.mdx b/client/pages/docs/quote/quotes-by-character.mdx
similarity index 100%
rename from client/pages/quote/quotes-by-character.mdx
rename to client/pages/docs/quote/quotes-by-character.mdx
diff --git a/client/pages/quote/random-via-anime.mdx b/client/pages/docs/quote/random-via-anime.mdx
similarity index 100%
rename from client/pages/quote/random-via-anime.mdx
rename to client/pages/docs/quote/random-via-anime.mdx
diff --git a/client/pages/quote/random-via-character.mdx b/client/pages/docs/quote/random-via-character.mdx
similarity index 100%
rename from client/pages/quote/random-via-character.mdx
rename to client/pages/docs/quote/random-via-character.mdx
diff --git a/client/pages/quote/random.mdx b/client/pages/docs/quote/random.mdx
similarity index 100%
rename from client/pages/quote/random.mdx
rename to client/pages/docs/quote/random.mdx