API Reference

apps/web/app/dev/docs/api-reference/endpoint.module.css

@@ -0,0 +1,67 @@
+.endpoint {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  align-items: start;
+  position: relative;
+  margin-bottom: 64px;
+}
+
+.description {
+  min-height: 200px;
+}
+
+.examples {
+  position: sticky;
+  top: calc(var(--table-sticky-top, 48px) + 16px);
+  height: auto;
+}
+
+.codeBlock {
+  border: 1px solid var(--color-border-dark);
+  background-color: var(--color-background-light);
+  border-radius: 2px;
+}
+
+.codeBlock + .codeBlock {
+  margin-top: 16px;
+}
+
+.codeBlockHeader {
+  border-bottom: 1px solid var(--color-border-dark);
+  padding: 16px;
+}
+
+.code {
+  padding: 0 16px;
+  color: var(--color-text-muted);
+}
+
+.parametersHeader {
+  font-weight: 500;
+}
+
+.parameter {
+  border-top: 1px solid var(--color-border);
+  margin-top: 16px;
+  padding-top: 16px;
+}
+
+.parameterHeader {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.parameterName {
+  font-weight: bold;
+}
+.parameterOptional {
+  color: var(--color-text-muted);
+}
+.parameterType {
+
+}
+
+.parameterDescription {
+}

apps/web/app/dev/docs/api-reference/endpoint.tsx

@@ -0,0 +1,70 @@
+import type { FC, ReactNode } from 'react';
+import styles from './endpoint.module.css';
+import { Code } from '@/components/Layout/Code';
+
+export interface ApiEndpointParameters {
+  name: string,
+  optional?: boolean,
+  type: 'String' | (string & {}),
+  description: ReactNode,
+}
+
+export interface ApiEndpointResponse {
+
+}
+
+export interface ApiEndpointProps {
+  children?: ReactNode,
+  method: 'GET' | 'POST',
+  body?: ApiEndpointParameters[],
+  query?: ApiEndpointParameters[],
+  path?: ApiEndpointParameters[],
+  responses?: ApiEndpointResponse[],
+}
+
+const response = {
+  'access_token': 'xl1eSPfCpUNdQiIPe4TAag',
+  'token_type': 'Bearer',
+  'expires_in': 604800,
+  'refresh_token': 'mcn6FMwoiufzqcBDVwzOnz_NvGn-1ezzRKIm7vN_bsk',
+  'scope': 'identify email gw2:account'
+};
+
+export const ApiEndpoint: FC<ApiEndpointProps> = ({ children, method, body, query, path }) => {
+  return (
+    <div className={styles.endpoint}>
+      <div className={styles.description}>
+        {children}
+        {body?.length && (
+          <div className={styles.parameters}>
+            <div className={styles.parametersHeader}>Body Parameters</div>
+            {body.map((parameter) => (
+              <div className={styles.parameter} key={parameter.name}>
+                <div className={styles.parameterHeader}>
+                  <div className={styles.parameterName}><Code inline borderless>{parameter.name}</Code></div>
+                  {parameter.optional && (<div className={styles.parameterOptional}>(optional)</div>)}
+                  <div className={styles.parameterType}><Code inline borderless>{parameter.type}</Code></div>
+                </div>
+                <p className={styles.parameterDescription}>{parameter.description}</p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      <div className={styles.examples}>
+        <div className={styles.codeBlock}>
+          <div className={styles.codeBlockHeader}>{method} /api/token</div>
+          <div className={styles.code}>
+            <Code borderless>{'client.getAccessToken({ code: \'123\' })'}</Code>
+          </div>
+        </div>
+        <div className={styles.codeBlock}>
+          <div className={styles.codeBlockHeader}>200</div>
+          <div className={styles.code}>
+            <Code borderless>{JSON.stringify(response, null, '  ')}</Code>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/web/app/dev/docs/api-reference/page.tsx

@@ -1,12 +1,25 @@
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { PageTitle } from '@/components/Layout/PageTitle';
+import { Headline } from '@gw2treasures/ui/components/Headline/Headline';
 import { Notice } from '@gw2treasures/ui/components/Notice/Notice';
+import { ApiEndpoint } from './endpoint';
+import { Code } from '@/components/Layout/Code';
 
 export default function DevDocsApiReferencePage() {
   return (
     <PageLayout>
       <PageTitle>API Reference</PageTitle>
-      <Notice type="error">The API Reference is not yet available</Notice>
+      <Notice type="warning">The API Reference is currently work in progress</Notice>
+
+      <Headline id="POST /api/token">Get access token</Headline>
+      <ApiEndpoint method="POST" body={[
+        { name: 'grant_type', type: '"authorization_code"', description: <>Should be <Code inline>authorization_code</Code> to exchange your authorization code for an access token.</> },
+        { name: 'code', type: 'String', description: 'The authorization code received as callback from the authorization request.' },
+        { name: 'client_id', type: 'String', description: 'The client_id of your application.' },
+        { name: 'client_secret', type: 'String', optional: true, description: 'The client_secret of your application. Only required for your confidential applications.' },
+        { name: 'redirect_uri', type: 'String', description: 'This must be the same redirect_uri as used in the authorization request.' },
+        { name: 'code_verifier', type: 'String', description: 'PKCE challenge verifier used to calculate code_challenge.' },
+      ]}/>
     </PageLayout>
   );
 }