feat: migrate docs

packages/website-legacy/package.json

@@ -19,8 +19,6 @@
     "urlon": "^3.1.0",
     "react": "^18.3.1",
     "@vanilla-extract/css": "^1.15.5",
-    "markdown-to-jsx": "^7.5.0",
-    "compare-versions": "^6.1.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-fuzzysort": "^1.0.1",

packages/website-legacy/src/app/docs/[directory]/[document]/layout.tsx

@@ -1,30 +0,0 @@
-import { readdir } from 'fs/promises';
-
-export async function generateStaticParams() {
-  return await readdir('../../docs').then((directories) =>
-    Promise.all(
-      directories
-        .filter(
-          (directory) =>
-            !['.vitepress', 'public'].includes(directory) &&
-            !directory.endsWith('.md'),
-        )
-        .map((directory) =>
-          readdir(`../../docs/${directory}`).then((files) =>
-            Promise.all(
-              files
-                .filter((file) => file.endsWith('.md'))
-                .map((file) => ({
-                  directory,
-                  document: file.replace(/\.md$/, ''),
-                })),
-            ),
-          ),
-        ),
-    ).then((directories) => directories.flat()),
-  );
-}
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return children;
-}

packages/website-legacy/src/app/docs/[directory]/[document]/page.tsx

@@ -1,45 +0,0 @@
-import { assertSecret } from '@blitzkit/core';
-import { Table } from '@radix-ui/themes';
-import Markdown from 'markdown-to-jsx';
-import { use } from 'react';
-import { Link } from '../../../../components/Link';
-import { PageWrapper } from '../../../../components/PageWrapper';
-
-export default function Page({
-  params,
-}: {
-  params: { document: string; directory: string };
-}) {
-  const markdown = use(
-    fetch(
-      `https://raw.githubusercontent.com/tresabhi/blitzkit/${assertSecret(
-        process.env.PUBLIC_ASSET_BRANCH,
-      )}/docs/${params.directory}/${params.document}.md`,
-    ).then((response) => response.text()),
-  );
-  const title = markdown.split('\n')[0].replaceAll(/[^a-zA-Z0-9 \.&]/g, '');
-
-  return (
-    <>
-      <title>{title}</title>
-
-      <PageWrapper>
-        <Markdown
-          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 },
-            },
-          }}
-        >
-          {markdown}
-        </Markdown>
-      </PageWrapper>
-    </>
-  );
-}

packages/website-legacy/src/app/docs/patches/page.tsx

@@ -1,29 +0,0 @@
-import { Flex, Heading } from '@radix-ui/themes';
-import { compareVersions } from 'compare-versions';
-import versions from '../../../../public/assets/versions.json';
-import { Link } from '../../../components/Link';
-import { PageWrapper } from '../../../components/PageWrapper';
-
-export default async function Page() {
-  return (
-    <>
-      <title>BlitzKit - Patch Notes</title>
-      <PageWrapper>
-        <Heading>BlitzKit patch notes</Heading>
-
-        <Flex wrap="wrap" gap="4">
-          {versions
-            .sort(compareVersions)
-            .reverse()
-            .map((version) => {
-              return (
-                <Link key={version} href={`/docs/changelogs/${version}`}>
-                  {version}
-                </Link>
-              );
-            })}
-        </Flex>
-      </PageWrapper>{' '}
-    </>
-  );
-}

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>