feat: migrate docs

packages/website/package.json

@@ -24,6 +24,8 @@
     "nanostores": "^0.11.3",
     "purgecss": "^6.0.0",
     "react": "^18.3.1",
+    "markdown-to-jsx": "^7.5.0",
+    "compare-versions": "^6.1.1",
     "react-dom": "^18.3.1",
     "react-promise-suspense": "^0.3.4",
     "three": "0.159.0",

packages/website/src/components/Markdown.tsx

@@ -0,0 +1,26 @@
+import { Link, Table } from '@radix-ui/themes';
+import MarkdownToJSX from 'markdown-to-jsx';
+
+interface MarkdownProps {
+  children: string;
+}
+
+export function Markdown({ children }: MarkdownProps) {
+  return (
+    <MarkdownToJSX
+      options={{
+        overrides: {
+          a: { component: Link },
+          table: { component: Table.Root },
+          thead: { component: Table.Header },
+          tbody: { component: Table.Body },
+          tr: { component: Table.Row },
+          th: { component: Table.ColumnHeaderCell },
+          td: { component: Table.Cell },
+        },
+      }}
+    >
+      {children}
+    </MarkdownToJSX>
+  );
+}

packages/website/src/pages/docs/[directory]/[document]/index.astro

@@ -0,0 +1,35 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { readFile } from 'fs/promises';
+import { Page } from '.';
+import RootLayout from '../../../../layouts/RootLayout.astro';
+
+export const getStaticPaths = (async () => {
+  const ROOT = '../../../../../../../docs/';
+  const files = import.meta.glob('../../../../../../../docs/**/*.md', {
+    eager: true,
+  });
+
+  return await Promise.all(
+    Object.keys(files).map(async (file) => {
+      const couple = file.replace(ROOT, '').split('/');
+      couple[1] = couple[1].replace('.md', '');
+      const content = await readFile(
+        `../../docs/${couple[0]}/${couple[1]}.md`,
+      ).then((buffer) => buffer.toString());
+
+      return {
+        params: { directory: couple[0], document: couple[1] },
+        props: { content },
+      };
+    }),
+  );
+}) satisfies GetStaticPaths;
+
+const { content } = Astro.props;
+---
+
+<!-- <title>{title}</title> -->
+<RootLayout>
+  <Page content={content} />
+</RootLayout>

packages/website/src/pages/docs/[directory]/[document]/index.tsx

@@ -0,0 +1,14 @@
+import { Markdown } from '../../../../components/Markdown';
+import { PageWrapper } from '../../../../components/PageWrapper';
+
+interface PageProps {
+  content: string;
+}
+
+export function Page({ content }: PageProps) {
+  return (
+    <PageWrapper>
+      <Markdown>{content}</Markdown>
+    </PageWrapper>
+  );
+}

packages/website/src/pages/docs/patches/index.astro

@@ -0,0 +1,48 @@
+---
+import { MagicWandIcon, StarFilledIcon } from '@radix-ui/react-icons';
+import { Flex, Heading, Link } from '@radix-ui/themes';
+import { compareVersions } from 'compare-versions';
+import { PageWrapper } from '../../../components/PageWrapper';
+import RootLayout from '../../../layouts/RootLayout.astro';
+
+// this can't be used in template literal :(
+const ROOT = '../../../../../../docs/changelogs/';
+
+const versions = Object.keys(
+  import.meta.glob(`../../../../../../docs/changelogs/*.md`, {
+    eager: true,
+  }),
+)
+  .map((file) => file.replace(ROOT, '').replace('.md', ''))
+  .sort(compareVersions)
+  .reverse();
+---
+
+<RootLayout>
+  <PageWrapper align="center">
+    <Heading mt="6" mb="4">BlitzKit patches</Heading>
+
+    <Flex direction="column" gap="2" align="center">
+      {
+        versions.map((version) => {
+          const split = version.split('.').map(Number);
+          const isMajor = split[2] === 0;
+
+          return (
+            <Link
+              size="5"
+              href={`/docs/changelogs/${version}`}
+              mb={isMajor ? '6' : '0'}
+            >
+              <Flex align="center" gap="2">
+                {!isMajor && <MagicWandIcon />}
+                {isMajor && <StarFilledIcon />}
+                {version}
+              </Flex>
+            </Link>
+          );
+        })
+      }
+    </Flex>
+  </PageWrapper>
+</RootLayout>