Convert tests to Vitest (#4)

packages/website/app/modules/navigation/app-link.tsx

@@ -0,0 +1,31 @@
+import type { ComponentPropsWithoutRef } from "react"
+import { Link } from "remix"
+
+export type AppLinkProps = ComponentPropsWithoutRef<"a"> & {
+  type: "internal" | "external" | "router"
+  to: string
+}
+
+export function AppLink({ type, to, children, ...props }: AppLinkProps) {
+  if (type === "internal") {
+    return (
+      <a href={to} {...props}>
+        {children}
+      </a>
+    )
+  }
+
+  if (type === "external") {
+    return (
+      <a href={to} target="_blank" rel="noopener noreferrer" {...props}>
+        {children}
+      </a>
+    )
+  }
+
+  return (
+    <Link to={to} {...props}>
+      {children}
+    </Link>
+  )
+}

packages/website/app/modules/navigation/guide-links-context.tsx

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react"
+import type { GuideLink } from "~/modules/navigation/load-guide-links.server"
+
+const Context = createContext<GuideLink[]>([])
+
+export const GuideLinksProvider = Context.Provider
+
+export function useGuideLinksContext() {
+  return useContext(Context)
+}

packages/website/app/modules/navigation/load-guide-links.server.ts

@@ -0,0 +1,40 @@
+import glob from "fast-glob"
+import grayMatter from "gray-matter"
+import { readFile } from "node:fs/promises"
+import { join, parse } from "node:path"
+import type { AppLinkProps } from "~/modules/navigation/app-link"
+
+const guidesFolder = "app/routes/guides"
+
+export type GuideLink = {
+  title: string
+  order: number
+  link: AppLinkProps
+}
+
+export async function loadGuideLinks(): Promise<GuideLink[]> {
+  const guideFiles = await glob(`**/*.md`, { cwd: guidesFolder })
+
+  const links: GuideLink[] = await Promise.all(
+    guideFiles.map(async (file) => {
+      const { data } = grayMatter(await readFile(join(guidesFolder, file)))
+
+      let order = data.order
+      if (!Number.isFinite(order)) {
+        order = Number.POSITIVE_INFINITY
+      }
+
+      return {
+        title: data.meta?.title,
+        order,
+        link: {
+          type: "router",
+          to: `/guides/${parse(file).name}`,
+          children: data.meta?.title,
+        },
+      }
+    }),
+  )
+
+  return links.sort((a, b) => a.order - b.order)
+}

packages/website/app/modules/navigation/main-links.tsx

@@ -0,0 +1,37 @@
+import {
+  CodeIcon,
+  DocumentTextIcon,
+  ExternalLinkIcon,
+} from "@heroicons/react/solid"
+import type { AppLinkProps } from "~/modules/navigation/app-link"
+import { inlineIconClass } from "../ui/components"
+
+export const mainLinks: AppLinkProps[] = [
+  {
+    type: "internal",
+    to: "/guides/getting-started",
+    children: (
+      <>
+        <DocumentTextIcon className={inlineIconClass} /> Guides
+      </>
+    ),
+  },
+  {
+    type: "internal",
+    to: "/api",
+    children: (
+      <>
+        <CodeIcon className={inlineIconClass} /> API Reference
+      </>
+    ),
+  },
+  {
+    type: "external",
+    to: "https://github.com/itsMapleLeaf/reacord",
+    children: (
+      <>
+        <ExternalLinkIcon className={inlineIconClass} /> GitHub
+      </>
+    ),
+  },
+]

packages/website/app/modules/navigation/main-navigation.tsx

@@ -0,0 +1,42 @@
+import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
+import { linkClass } from "../ui/components"
+import { PopoverMenu } from "../ui/popover-menu"
+import { AppLink } from "./app-link"
+import { mainLinks } from "./main-links"
+
+export function MainNavigation() {
+  const guideLinks = useGuideLinksContext()
+  return (
+    <nav className="flex justify-between items-center h-16">
+      <a href="/">
+        <h1 className="text-3xl font-light">reacord</h1>
+      </a>
+      <div className="hidden md:flex gap-4">
+        {mainLinks.map((link) => (
+          <AppLink {...link} key={link.to} className={linkClass} />
+        ))}
+      </div>
+      <div className="md:hidden">
+        <PopoverMenu>
+          {mainLinks.map((link) => (
+            <AppLink
+              {...link}
+              role="menuitem"
+              key={link.to}
+              className={PopoverMenu.itemClass}
+            />
+          ))}
+          <hr className="border-0 h-[2px] bg-black/50" />
+          {guideLinks.map(({ link }) => (
+            <AppLink
+              {...link}
+              role="menuitem"
+              key={link.to}
+              className={PopoverMenu.itemClass}
+            />
+          ))}
+        </PopoverMenu>
+      </div>
+    </nav>
+  )
+}