kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update website with new remix typings

Browse Source
This commit is contained in:
itsMapleLeaf
2022-07-23 14:15:16 -05:00
committed by Darius
parent e486da0881
commit eed5715f1f
4 changed files with 30 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

18
packages/website/app/root.tsx
View File

@@ -1,8 +1,4 @@
import type { import type { LinksFunction, MetaFunction } from "@remix-run/node"
LinksFunction,
LoaderFunction,
MetaFunction,
} from "@remix-run/node"
import { import {
Links, Links,
LiveReload, LiveReload,
@@ -16,7 +12,6 @@ import packageJson from "reacord/package.json"
import bannerUrl from "~/assets/banner.png" import bannerUrl from "~/assets/banner.png"
import faviconUrl from "~/assets/favicon.png" import faviconUrl from "~/assets/favicon.png"
import { GuideLinksProvider } from "~/modules/navigation/guide-links-context" 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 { loadGuideLinks } from "~/modules/navigation/load-guide-links.server"
import prismThemeCss from "~/modules/ui/prism-theme.css" import prismThemeCss from "~/modules/ui/prism-theme.css"
import tailwindCss from "~/modules/ui/tailwind.out.css" import tailwindCss from "~/modules/ui/tailwind.out.css"
@@ -61,19 +56,14 @@ export const links: LinksFunction = () => [
}, },
] ]
type LoaderData = { export async function loader() {
guideLinks: GuideLink[] return {
}
export const loader: LoaderFunction = async () => {
const data: LoaderData = {
guideLinks: await loadGuideLinks(), guideLinks: await loadGuideLinks(),
} }
return data
} }
export default function App() { export default function App() {
const data: LoaderData = useLoaderData() const data = useLoaderData<typeof loader>()
return ( return (
<html lang="en" className="bg-slate-900 text-slate-100"> <html lang="en" className="bg-slate-900 text-slate-100">
<head> <head>

3
packages/website/package.json
View File

@@ -27,7 +27,8 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-focus-on": "^3.6.0", "react-focus-on": "^3.6.0",
"react-router": "^6.3.0", "react-router": "^6.3.0",
"react-router-dom": "^6.3.0" "react-router-dom": "^6.3.0",
"zod": "^3.17.10"
}, },
"devDependencies": { "devDependencies": {
"@remix-run/dev": "^1.6.5", "@remix-run/dev": "^1.6.5",

6
pnpm-lock.yaml generated
View File

@@ -105,6 +105,7 @@ importers:
typedoc: ^0.23.8 typedoc: ^0.23.8
typescript: ^4.7.4 typescript: ^4.7.4
wait-on: ^6.0.1 wait-on: ^6.0.1
zod: ^3.17.10
dependencies: dependencies:
'@headlessui/react': 1.6.6_biqbaboplfbrettd7655fr4n2y '@headlessui/react': 1.6.6_biqbaboplfbrettd7655fr4n2y
'@heroicons/react': 1.0.6_react@18.2.0 '@heroicons/react': 1.0.6_react@18.2.0
@@ -122,6 +123,7 @@ importers:
react-focus-on: 3.6.0_3hx2ussxxho4jajbwrd6gq34qe react-focus-on: 3.6.0_3hx2ussxxho4jajbwrd6gq34qe
react-router: 6.3.0_react@18.2.0 react-router: 6.3.0_react@18.2.0
react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y
zod: 3.17.10
devDependencies: devDependencies:
'@remix-run/dev': 1.6.5_xontd7q62j6h4ge55exoz26nhu '@remix-run/dev': 1.6.5_xontd7q62j6h4ge55exoz26nhu
'@testing-library/cypress': 8.0.3_cypress@10.3.1 '@testing-library/cypress': 8.0.3_cypress@10.3.1
@@ -11238,6 +11240,10 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
dev: true dev: true
/zod/3.17.10:
resolution: {integrity: sha512-IHXnQYQuOOOL/XgHhgl8YjNxBHi3xX0mVcHmqsvJgcxKkEczPshoWdxqyFwsARpf41E0v9U95WUROqsHHxt0UQ==}
dev: false
/zwitch/2.0.2: /zwitch/2.0.2:
resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==} resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==}
dev: true dev: true