From eed5715f1f83ef072c47ccc9c59b4d225564ae32 Mon Sep 17 00:00:00 2001 From: itsMapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com> Date: Sat, 23 Jul 2022 14:15:16 -0500 Subject: [PATCH] update website with new remix typings --- .../navigation/load-guide-links.server.ts | 37 +++++++++---------- packages/website/app/root.tsx | 18 ++------- packages/website/package.json | 3 +- pnpm-lock.yaml | 6 +++ 4 files changed, 30 insertions(+), 34 deletions(-) diff --git a/packages/website/app/modules/navigation/load-guide-links.server.ts b/packages/website/app/modules/navigation/load-guide-links.server.ts index 853477a..5f8f085 100644 --- a/packages/website/app/modules/navigation/load-guide-links.server.ts +++ b/packages/website/app/modules/navigation/load-guide-links.server.ts @@ -2,35 +2,34 @@ 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" +import { z } from "zod" const guidesFolder = "app/routes/guides" -export type GuideLink = { - title: string - order: number - link: AppLinkProps -} +const frontmatterSchema = z.object({ + meta: z.object({ + title: z.string(), + description: z.string(), + }), + order: z.number().optional(), +}) -export async function loadGuideLinks(): Promise { +export type GuideLink = Awaited>[0] + +export async function loadGuideLinks() { const guideFiles = await glob(`**/*.md`, { cwd: guidesFolder }) - const links: GuideLink[] = await Promise.all( + const links = 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 - } - + const result = grayMatter(await readFile(join(guidesFolder, file))) + const data = frontmatterSchema.parse(result.data) return { - title: data.meta?.title, - order, + title: data.meta.title, + order: data.order ?? Number.POSITIVE_INFINITY, link: { - type: "router", + type: "router" as const, to: `/guides/${parse(file).name}`, - children: data.meta?.title, + children: data.meta.title, }, } }), diff --git a/packages/website/app/root.tsx b/packages/website/app/root.tsx index d8eb0ee..f29cabd 100644 --- a/packages/website/app/root.tsx +++ b/packages/website/app/root.tsx @@ -1,8 +1,4 @@ -import type { - LinksFunction, - LoaderFunction, - MetaFunction, -} from "@remix-run/node" +import type { LinksFunction, MetaFunction } from "@remix-run/node" import { Links, LiveReload, @@ -16,7 +12,6 @@ import packageJson from "reacord/package.json" import bannerUrl from "~/assets/banner.png" import faviconUrl from "~/assets/favicon.png" import { GuideLinksProvider } from "~/modules/navigation/guide-links-context" -import type { GuideLink } from "~/modules/navigation/load-guide-links.server" import { loadGuideLinks } from "~/modules/navigation/load-guide-links.server" import prismThemeCss from "~/modules/ui/prism-theme.css" import tailwindCss from "~/modules/ui/tailwind.out.css" @@ -61,19 +56,14 @@ export const links: LinksFunction = () => [ }, ] -type LoaderData = { - guideLinks: GuideLink[] -} - -export const loader: LoaderFunction = async () => { - const data: LoaderData = { +export async function loader() { + return { guideLinks: await loadGuideLinks(), } - return data } export default function App() { - const data: LoaderData = useLoaderData() + const data = useLoaderData() return ( diff --git a/packages/website/package.json b/packages/website/package.json index 79691c6..7ee3dfd 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -27,7 +27,8 @@ "react-dom": "^18.2.0", "react-focus-on": "^3.6.0", "react-router": "^6.3.0", - "react-router-dom": "^6.3.0" + "react-router-dom": "^6.3.0", + "zod": "^3.17.10" }, "devDependencies": { "@remix-run/dev": "^1.6.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d099916..0339485 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -105,6 +105,7 @@ importers: typedoc: ^0.23.8 typescript: ^4.7.4 wait-on: ^6.0.1 + zod: ^3.17.10 dependencies: '@headlessui/react': 1.6.6_biqbaboplfbrettd7655fr4n2y '@heroicons/react': 1.0.6_react@18.2.0 @@ -122,6 +123,7 @@ importers: react-focus-on: 3.6.0_3hx2ussxxho4jajbwrd6gq34qe react-router: 6.3.0_react@18.2.0 react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y + zod: 3.17.10 devDependencies: '@remix-run/dev': 1.6.5_xontd7q62j6h4ge55exoz26nhu '@testing-library/cypress': 8.0.3_cypress@10.3.1 @@ -11238,6 +11240,10 @@ packages: engines: {node: '>=10'} dev: true + /zod/3.17.10: + resolution: {integrity: sha512-IHXnQYQuOOOL/XgHhgl8YjNxBHi3xX0mVcHmqsvJgcxKkEczPshoWdxqyFwsARpf41E0v9U95WUROqsHHxt0UQ==} + dev: false + /zwitch/2.0.2: resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==} dev: true