feat: test button

packages/website/src/pages/[...locale]/api/_index.tsx

@@ -1,14 +1,16 @@
-import { Code, Link, Table } from '@radix-ui/themes';
+import { OpenInNewWindowIcon } from '@radix-ui/react-icons';
+import { Code, IconButton, Link, Table } from '@radix-ui/themes';
 import { useState } from 'react';
 import type { APIPath } from './index.astro';
 
 interface SlugsTableProps {
   slugs: APIPath['slugs'];
+  path: string;
 }
 
 const MAX_UNEXPANDED = 5;
 
-export function SlugsTable({ slugs }: SlugsTableProps) {
+export function SlugsTable({ slugs, path }: SlugsTableProps) {
   if (slugs === undefined) return null;
 
   const [expanded, setExpanded] = useState(false);
@@ -17,25 +19,29 @@ export function SlugsTable({ slugs }: SlugsTableProps) {
     <Table.Root variant="surface">
       <Table.Header>
         <Table.Row>
-          <Table.ColumnHeaderCell width="0">
-            <Code variant="ghost" color="gray">
-              #
-            </Code>
-          </Table.ColumnHeaderCell>
+          <Table.ColumnHeaderCell width="0">#</Table.ColumnHeaderCell>
 
           {slugs.titles.map((title) => (
             <Table.ColumnHeaderCell>
-              <Code variant="ghost" color="gray" highContrast>
-                {title}
-              </Code>
+              <Code variant="ghost">{title}</Code>
             </Table.ColumnHeaderCell>
           ))}
+
+          <Table.ColumnHeaderCell width="0">Test</Table.ColumnHeaderCell>
         </Table.Row>
       </Table.Header>
 
       <Table.Body>
         {slugs.groups.map((group, groupIndex) => {
           if (!expanded && groupIndex >= MAX_UNEXPANDED) return null;
+          let draftPath = path;
+
+          slugs.titles.forEach((title) => {
+            draftPath = draftPath.replace(
+              `[${title}]`,
+              `${group[title] ?? ''}`,
+            );
+          });
 
           return (
             <Table.Row>
@@ -52,12 +58,21 @@ export function SlugsTable({ slugs }: SlugsTableProps) {
                   </Code>
                 </Table.Cell>
               ))}
+
+              <Table.Cell>
+                <Link target="_blank" href={`/api/${draftPath}`}>
+                  <IconButton>
+                    <OpenInNewWindowIcon />
+                  </IconButton>
+                </Link>
+              </Table.Cell>
             </Table.Row>
           );
         })}
 
         <Table.Row style={{ position: 'relative' }}>
           <Table.Cell />
+
           <Link
             href="#"
             underline="always"

packages/website/src/pages/[...locale]/api/index.astro

@@ -1,5 +1,14 @@
 ---
-import { Code, Flex, Heading, Separator } from '@radix-ui/themes';
+import { OpenInNewWindowIcon } from '@radix-ui/react-icons';
+import {
+  Code,
+  Flex,
+  Heading,
+  Link,
+  Separator,
+  Text,
+  type CodeProps,
+} from '@radix-ui/themes';
 import type { GetStaticPaths, GetStaticPathsOptions } from 'astro';
 import { PageWrapper } from '../../../components/PageWrapper';
 import { apiTool } from '../../../constants/tools';
@@ -105,7 +114,7 @@ for (const rawPath in globRaw) {
         description,
       });
     } else {
-      comment += line;
+      comment += `${line}\n`;
     }
   });
 
@@ -117,53 +126,62 @@ apis.sort((a, b) => a.path.localeCompare(b.path));
 ---
 
 <ToolLayout tool={apiTool}>
-  <PageWrapper py="9">
+  <PageWrapper py="9" color="iris">
     <Flex direction="column" gap="6">
       {
         apis.map((api, index) => (
           <>
             <Flex direction="column" gap="5">
-              <Heading>
-                <Code variant="ghost" color="iris" highContrast>
-                  {api.path}
-                </Code>
-              </Heading>
-
-              <Code
-                color="gray"
-                variant="ghost"
-                highContrast
-                style={{ whiteSpace: 'pre-wrap' }}
+              <Link
+                href={api.slugs ? undefined : `/api/${api.path}`}
+                underline="always"
+                target="_blank"
               >
-                {api.comment}
-              </Code>
+                <Heading>
+                  <Flex align="center" gap="2">
+                    <Code variant="ghost">{api.path}</Code>
+
+                    {!api.slugs && (
+                      <OpenInNewWindowIcon width="1em" height="1em" />
+                    )}
+                  </Flex>
+                </Heading>
+              </Link>
+
+              <Text>{api.comment}</Text>
 
               {api.tags.length > 0 && (
                 <Flex direction="column" gap="2">
-                  {api.tags.map(({ tag, description, discriminator }) => (
-                    <Flex gap="2">
-                      <Code color="iris" variant="solid">
-                        {tag}
-                      </Code>
+                  {api.tags.map(({ tag, description, discriminator }) => {
+                    let color: CodeProps['color'] | undefined = undefined;
 
-                      {discriminator && (
-                        <Code color="gray" variant="solid" highContrast>
-                          {discriminator}
-                        </Code>
-                      )}
+                    switch (tag) {
+                      case '@warning':
+                        color = 'amber';
+                        break;
+                    }
 
-                      {description && (
-                        <Code mt="calc(1em / 8)" color="gray" variant="ghost">
-                          {description}
+                    return (
+                      <Flex gap="2">
+                        <Code variant="solid" color={color}>
+                          {tag}
                         </Code>
-                      )}
-                    </Flex>
-                  ))}
+
+                        {discriminator && (
+                          <Code color="gray" variant="solid" highContrast>
+                            {discriminator}
+                          </Code>
+                        )}
+
+                        {description && <Text color="gray">{description}</Text>}
+                      </Flex>
+                    );
+                  })}
                 </Flex>
               )}
             </Flex>
 
-            <SlugsTable client:load slugs={api.slugs} />
+            <SlugsTable path={api.path} client:load slugs={api.slugs} />
 
             {index < apis.length - 1 && (
               <Separator size="4" style={{ height: 0.5 }} />

packages/website/src/pages/api/gallery/[avatar].webp.ts

@@ -15,7 +15,8 @@ export const getStaticPaths = (async () => {
 const glossary = await fetchGlossary(DEFAULT_LOCALE);
 
 /**
- * Returns an in-game avatar image.
+ * Returns an in-game avatar image. Use gallery/list.json to get all valid ids.
+ * Not all ids may have images due to poor Wargaming CDNs.
  *
  * @param avatar The avatar id.
  * @returns A webp image.

packages/website/src/pages/api/tanks/[id].json.ts

@@ -7,7 +7,10 @@ export const getStaticPaths = (async () => {
 }) satisfies GetStaticPaths;
 
 /**
- * Returns the meta data on a tank which includes its modules, characteristics, ancestry, descendants, equipment, characteristics, etc. However, this does not include information on the tank model.
+ * Returns the meta data on a tank which includes its modules, characteristics,
+ * ancestry, descendants, equipment, characteristics, etc. However, this does
+ * not include information on the tank model. Use tanks/list.json to get all
+ * valid ids.
  *
  * @param avatar The avatar id.
  * @returns A webp image.