Files
reacord/packages/docs/app/docs.tsx
2021-12-30 11:48:14 -06:00

63 lines
1.7 KiB
TypeScript

import { readFile } from "node:fs/promises"
import remarkFrontmatter from "remark-frontmatter"
import remarkParse from "remark-parse"
import type { LoaderFunction } from "remix"
import { Link, Outlet } from "remix"
import { unified } from "unified"
import { SideNav } from "~/components/side-nav"
import { SidebarLayout } from "~/components/sidebar-layout"
import { linkClass } from "~/styles"
export const loader: LoaderFunction = async () => {
const glob = await import("fast-glob")
const contentFiles = await glob.default(["**/*.mdx", "**/*.md"], {
cwd: "content",
absolute: true,
})
const contentModules = await Promise.all(
contentFiles.map(async (filePath) => {
const content = await readFile(filePath, "utf8")
const result = await unified()
.use(remarkParse)
.use(remarkFrontmatter)
.process(content)
return { filePath, result: result.toString() }
}),
)
console.log(contentModules)
return {}
}
export default function Docs() {
return (
<SidebarLayout
sidebar={
<SideNav heading="Guides">
<Link className={linkClass} to="getting-started">
Getting Started
</Link>
<Link className={linkClass} to="embeds">
Embeds
</Link>
<Link className={linkClass} to="buttons">
Buttons
</Link>
<Link className={linkClass} to="select-menus">
Select Menus
</Link>
</SideNav>
}
body={
<section className="prose max-w-none prose-invert prose-h1:font-light flex-1 prose-h1:mb-4 prose-p:my-4 prose-pre:text-[15px] prose-pre:font-monospace prose-h2:font-light h-[200vh]">
<Outlet />
</section>
}
/>
)
}