feat: fix collapsing container and footer render issue; add docs page for /cli API

ericrallen · ericrallen · commit 697b6cbd970e · 2025-02-17T13:20:54.000-05:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -84,9 +84,10 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@mantine/core": "^7.16.3",
-    "@mantine/hooks": "^7.16.3",
-    "@mantine/notifications": "^7.16.3",
+    "@mantine/code-highlight": "^7.17.0",
+    "@mantine/core": "^7.17.0",
+    "@mantine/hooks": "^7.17.0",
+    "@mantine/notifications": "^7.17.0",
     "@next/bundle-analyzer": "^15.1.5",
     "@sparticuz/chromium": "^132.0.0",
     "@supabase/ssr": "^0.5.2",
diff --git a/src/app/_components/DeveloperSettingsTab/index.tsx b/src/app/_components/DeveloperSettingsTab/index.tsx
@@ -1,6 +1,7 @@
-import { Box, Stack, Title } from '@mantine/core';
+import Link from 'next/link';
+import { Anchor, Box, Stack, Text, Title } from '@mantine/core';
+import ApiKeyGenerator from '@/app/_components/ApiKeyGenerator';
 import { InterwebWtfApiKey } from '@/types';
-import ApiKeyGenerator from '../ApiKeyGenerator';
 
 export interface DeveloperSettingsTabProps {
   keys: InterwebWtfApiKey[];
@@ -11,6 +12,13 @@ export default function DeveloperSettingsTab({ keys = [] }: DeveloperSettingsTab
     <Box p="md">
       <Stack h="100%" w="100%">
         <Title order={2}>Developer Settings</Title>
+        <Text>
+          Manage your{' '}
+          <Anchor component={Link} href="/docs">
+            API
+          </Anchor>{' '}
+          keys.
+        </Text>
         <ApiKeyGenerator keys={keys} />
       </Stack>
     </Box>
diff --git a/src/app/_components/Footer/index.tsx b/src/app/_components/Footer/index.tsx
@@ -5,10 +5,13 @@ import InterstitialCheckbox from '@/app/_components/InterstitialCheckbox';
 
 export default function Footer() {
   return (
-    <Center w="100%" mb="auto" pt="xl" pb="sm" pos="relative" bottom={0}>
+    <Center w="100%" pt="xl" pb="sm" mt="auto">
       <Stack justify="center" align="center" w="100%">
         <InterstitialCheckbox />
-        <Group align="center" justify="center">
+        <Group align="center" w="100%" justify="flex-start">
+          <Anchor href="/docs" component={Link} c="gray" size="sm">
+            API
+          </Anchor>
           <Anchor href="/about" component={Link} c="gray" size="sm">
             About
           </Anchor>
@@ -21,12 +24,11 @@ export default function Footer() {
               Interweb Alchemy
             </Anchor>
           </Text>
-        </Group>
-        <Group w="100%" justify="end">
           <Anchor
             href="https://github.com/InterwebAlchemy/interweb.wtf"
             c="gray"
             title="View the source code on GitHub"
+            ml="auto"
           >
             <IconBrandGithub size={18} />
           </Anchor>
diff --git a/src/app/_components/GeneralSettingsTab/index.tsx b/src/app/_components/GeneralSettingsTab/index.tsx
@@ -1,12 +1,22 @@
-import { Box, Code, Stack, Text, Title } from '@mantine/core';
+import Link from 'next/link';
+import { Anchor, Box, Code, Stack, Text, Title } from '@mantine/core';
 
 export default function GeneralSettingsTab() {
   return (
     <Box p="md">
       <Stack h="100%" w="100%">
         <Title order={2}>Settings</Title>
-        <Text>More settings are coming soon, but for now you can use the <Code>Developer</Code> section to generate API Keys for use with <Code>/cli</Code> endpoints that you can use programmatically.</Text>
-        <Text>If you'd like to delete your account, that's in the <Code>Danger Zone</Code>.</Text>
+        <Text>
+          More settings are coming soon, but for now you can use the <Code>Developer</Code> section
+          to generate{' '}
+          <Anchor href="/docs" component={Link}>
+            API
+          </Anchor>{' '}
+          Keys for use with <Code>/cli</Code> endpoints that you can use programmatically.
+        </Text>
+        <Text>
+          If you'd like to delete your account, that's in the <Code>Danger Zone</Code>.
+        </Text>
       </Stack>
     </Box>
   );
diff --git a/src/app/_components/Nav/index.tsx b/src/app/_components/Nav/index.tsx
@@ -25,6 +25,7 @@ import { signOut } from '@/app/_services/github/auth';
 const links = [
   { link: '/dashboard', label: 'Dashboard' },
   { link: '/is', label: 'Expander' },
+  { link: '/docs', label: 'Documentation' },
   { link: '/settings', label: 'Settings' },
 ];
 
diff --git a/src/app/_components/Screen/index.tsx b/src/app/_components/Screen/index.tsx
@@ -1,5 +1,5 @@
 import { redirect, RedirectType } from 'next/navigation';
-import { Container, Stack, Title, type TitleProps } from '@mantine/core';
+import { Flex, Stack, Title, type TitleProps } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 import { createClient } from '@/app/_adapters/supabase/server';
 import Footer from '@/app/_components/Footer';
@@ -33,10 +33,18 @@ export default async function Screen({
   return (
     <>
       <Notifications position="bottom-right" />
-      <Container fluid h="100%" p="lg" display="flex" w="100%">
+      <Flex
+        h="100%"
+        p="lg"
+        w="100%"
+        direction="column"
+        justify="flex-start"
+        align="flex-start"
+        mih="100vh"
+      >
         <Stack h="100%" w="100%">
           <Nav />
-          <Stack h="100%" w="100%">
+          <Stack w="100%">
             {title ? (
               <Title order={1} {...titleProps} mb={40}>
                 {title}
@@ -48,7 +56,7 @@ export default async function Screen({
           </Stack>
           <Footer />
         </Stack>
-      </Container>
+      </Flex>
     </>
   );
 }
diff --git a/src/app/cli/go/[slug]/json/route.ts b/src/app/cli/go/[slug]/json/route.ts
@@ -22,5 +22,8 @@ export async function GET(_request: NextRequest, { params }: { params: Promise<R
 
   return new NextResponse(JSON.stringify({ url }), {
     status: 200,
+    headers: {
+      'content-type': 'application/json',
+    },
   });
 }
diff --git a/src/app/cli/go/[slug]/route.ts b/src/app/cli/go/[slug]/route.ts
@@ -22,5 +22,8 @@ export async function GET(_request: NextRequest, { params }: { params: Promise<R
 
   return new NextResponse(url, {
     status: 200,
+    headers: {
+      'content-type': 'text/plain',
+    },
   });
 }
diff --git a/src/app/cli/go/route.ts b/src/app/cli/go/route.ts
@@ -20,5 +20,8 @@ export async function GET(request: NextRequest) {
 
   return new NextResponse(json ? JSON.stringify({ url }) : url, {
     status: 200,
+    headers: {
+      'content-type': json ? 'application/json' : 'text/plain',
+    },
   });
 }
diff --git a/src/app/cli/is/[...url]/route.ts b/src/app/cli/is/[...url]/route.ts
@@ -134,5 +134,8 @@ export async function GET(_request: NextRequest, { params }: { params: Promise<R
 
   return new NextResponse(expectsJson ? JSON.stringify({ url: fullUrl }) : fullUrl, {
     status: 200,
+    headers: {
+      'content-type': expectsJson ? 'application/json' : 'text/plain',
+    },
   });
 }
diff --git a/src/app/cli/is/route.ts b/src/app/cli/is/route.ts
@@ -26,5 +26,8 @@ export async function GET(request: NextRequest) {
 
   return new NextResponse(json ? JSON.stringify({ url }) : url, {
     status: 200,
+    headers: {
+      'content-type': json ? 'application/json' : 'text/plain',
+    },
   });
 }
diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx
@@ -0,0 +1,88 @@
+import { CodeHighlight } from '@mantine/code-highlight';
+import { Anchor, Code, Flex, List, ListItem, Text, Title } from '@mantine/core';
+import Screen from '@/app/_components/Screen';
+
+//TODO: add docs and code examples about API keys and Authorization header
+
+const SHORT_URL = 'https://bit.ly/1sNZMwL';
+const EXPANDED_URL = 'https://en.wikipedia.org/wiki/Bitly';
+
+const CURL_REQUEST = `curl https://interweb.wtf/is/${SHORT_URL}\\
+    --header "Authorization: Bearer $API_KEY"`;
+
+const CURL_JSON_REQUEST = `curl https://interweb.wtf/is/${SHORT_URL}/json\\
+    --header "Authorization: Bearer $API_KEY"`;
+
+const JSON_RESPONSE = `{
+    url: "${EXPANDED_URL}"
+}`;
+
+export default function DocsPage() {
+  return (
+    <Screen title="Documentation">
+      <Flex maw={680} justify="flex-start" direction="column">
+        <Text>
+          Here are the docs for using the <Code>/cli</Code> routes programmatically.
+        </Text>
+        <Title order={2}>Authentication</Title>
+        <Text>
+          The{' '}
+          <Text span inherit c="violet">
+            Interweb.WTF
+          </Text>{' '}
+          <Code>/cli</Code> API uses an <Code>Authorization</Code> HTTP Header with a{' '}
+          <Anchor href="https://swagger.io/docs/specification/v3_0/authentication/bearer-authentication/">
+            <Code>Bearer</Code> Token
+          </Anchor>
+          .
+        </Text>
+        <Text>
+          <Text span inherit fw={700}>
+            Note:
+          </Text>{' '}
+          in all of the examples below you should replace <Code>$API_KEY</Code> with an API Key you
+          generated in <Code>Settings {'>'} Developer</Code>.
+        </Text>
+        <CodeHighlight code="Authorization: Bearer $API_KEY" language="shell" />
+        <Title order={2}>Endpoints</Title>
+        <Text>
+          The{' '}
+          <Text span inherit c="violet">
+            Interweb.WTF
+          </Text>{' '}
+          <Code>/cli</Code> API provides endpoints for the most commonly used{' '}
+          <Text span inherit c="violet">
+            Interweb.WTF
+          </Text>{' '}
+          features:
+        </Text>
+        <List>
+          <ListItem>
+            <Code>/go</Code>: Get the full URL that a WTF Link points to
+          </ListItem>
+          <ListItem>
+            <Code>/is</Code>: Expand a shortlink URL from another provider
+          </ListItem>
+          <ListItem>
+            <Code>/clean</Code>: Clean any URL of known tracking parameters
+          </ListItem>
+        </List>
+        <Title order={3}>Response Types</Title>
+        <Text>
+          By default, these endpoints all return <Code>text/plain</Code> responses, but you can
+          append <Code>/json</Code> to the endpoint URL to receive <Code>application/json</Code>{' '}
+          responses instead.
+        </Text>
+        <Title order={2}>Examples</Title>
+        <Title order={3}>Shortlink Expander Request</Title>
+        <CodeHighlight language="shell" code={CURL_REQUEST} />
+        <Title order={3}>Shortlink Expander Response</Title>
+        <CodeHighlight language="shell" code={EXPANDED_URL} />
+        <Title order={3}>Shortlink Expander JSON Request</Title>
+        <CodeHighlight language="shell" code={CURL_JSON_REQUEST} />
+        <Title order={3}>Shortlink Expander Response</Title>
+        <CodeHighlight language="json" code={JSON_RESPONSE} />
+      </Flex>
+    </Screen>
+  );
+}
diff --git a/src/app/is/page.tsx b/src/app/is/page.tsx
@@ -5,7 +5,7 @@ import UrlExpander from '@/app/_components/UrlExpander';
 export default async function BlankInspectorPage() {
   return (
     <Screen title="ShortLink Expander">
-      <Center h="80%" w="100%" mx="auto" maw="640">
+      <Center h="100%" w="100%" mx="auto" maw="640">
         <UrlExpander />
       </Center>
     </Screen>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
diff --git a/src/types/supabase.ts b/src/types/supabase.ts

Original file line number	Diff line number	Diff line change
`@@ -22,5 +22,8 @@ export async function GET(_request: NextRequest, { params }: { params: Promise<R`
`22`	`22`
`23`	`23`	`return new NextResponse(JSON.stringify({ url }), {`
`24`	`24`	`status: 200,`
	`25`	`+ headers: {`
	`26`	`+ 'content-type': 'application/json',`
	`27`	`+ },`
`25`	`28`	`});`
`26`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,5 +20,8 @@ export async function GET(request: NextRequest) {`
`20`	`20`
`21`	`21`	`return new NextResponse(json ? JSON.stringify({ url }) : url, {`
`22`	`22`	`status: 200,`
	`23`	`+ headers: {`
	`24`	`+ 'content-type': json ? 'application/json' : 'text/plain',`
	`25`	`+ },`
`23`	`26`	`});`
`24`	`27`	`}`