actually generate doc index for real this time
This commit is contained in:
MapleLeaf
39
packages/docs/app/create-index.server.ts
Normal file
39
packages/docs/app/create-index.server.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import glob from "fast-glob"
|
||||
import matter from "gray-matter"
|
||||
import { readFile } from "node:fs/promises"
|
||||
import { join, parse, posix } from "node:path"
|
||||
|
||||
export type ContentIndexEntry = {
|
||||
title: string
|
||||
route: string
|
||||
order: number
|
||||
}
|
||||
|
||||
export async function createContentIndex(
|
||||
contentFolderPath: string,
|
||||
): Promise<ContentIndexEntry[]> {
|
||||
const contentFiles = await glob(["**/*.mdx", "**/*.md"], {
|
||||
cwd: contentFolderPath,
|
||||
absolute: true,
|
||||
})
|
||||
|
||||
const entries = await Promise.all(contentFiles.map(getIndexInfo))
|
||||
|
||||
return entries.sort((a, b) => a.order - b.order)
|
||||
}
|
||||
|
||||
async function getIndexInfo(filePath: string): Promise<ContentIndexEntry> {
|
||||
const { dir, name } = parse(filePath)
|
||||
const route = "/" + posix.relative("app/routes", join(dir, name))
|
||||
|
||||
const { data } = matter(await readFile(filePath, "utf8"))
|
||||
|
||||
const title = String(data.meta?.title ?? "")
|
||||
|
||||
let order = Number(data.order)
|
||||
if (!Number.isFinite(order)) {
|
||||
order = Number.POSITIVE_INFINITY
|
||||
}
|
||||
|
||||
return { title, route, order }
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
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>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -48,34 +48,7 @@ export default function App() {
|
||||
<Links />
|
||||
</head>
|
||||
<body>
|
||||
<HeaderLayout
|
||||
header={
|
||||
<nav className="flex justify-between items-center">
|
||||
<Link to="/">
|
||||
<h1 className="text-3xl font-light">
|
||||
reacord{" "}
|
||||
<CodeIcon className="inline w-8 align-sub opacity-50" />
|
||||
</h1>
|
||||
</Link>
|
||||
<div className="flex gap-4">
|
||||
<Link className={linkClass} to="/docs/getting-started">
|
||||
<DocumentTextIcon className="inline align-sub w-5" /> Guides
|
||||
</Link>
|
||||
<Link className={linkClass} to="/api">
|
||||
<DatabaseIcon className="inline align-sub w-5" /> API
|
||||
Reference
|
||||
</Link>
|
||||
<ExternalLink
|
||||
className={linkClass}
|
||||
href="https://github.com/itsMapleLeaf/reacord"
|
||||
>
|
||||
<ExternalLinkIcon className="inline align-sub w-5" /> GitHub
|
||||
</ExternalLink>
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
body={<Outlet />}
|
||||
/>
|
||||
<HeaderLayout header={<HeaderNav />} body={<Outlet />} />
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
{process.env.NODE_ENV === "development" && <LiveReload />}
|
||||
@@ -83,3 +56,29 @@ export default function App() {
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
function HeaderNav() {
|
||||
return (
|
||||
<nav className="flex justify-between items-center">
|
||||
<Link to="/">
|
||||
<h1 className="text-3xl font-light">
|
||||
reacord <CodeIcon className="inline w-8 align-sub opacity-50" />
|
||||
</h1>
|
||||
</Link>
|
||||
<div className="flex gap-4">
|
||||
<Link className={linkClass} to="/docs/guides/getting-started">
|
||||
<DocumentTextIcon className="inline align-sub w-5" /> Guides
|
||||
</Link>
|
||||
<Link className={linkClass} to="/docs/api">
|
||||
<DatabaseIcon className="inline align-sub w-5" /> API Reference
|
||||
</Link>
|
||||
<ExternalLink
|
||||
className={linkClass}
|
||||
href="https://github.com/itsMapleLeaf/reacord"
|
||||
>
|
||||
<ExternalLinkIcon className="inline align-sub w-5" /> GitHub
|
||||
</ExternalLink>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
36
packages/docs/app/routes/docs.tsx
Normal file
36
packages/docs/app/routes/docs.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import type { LoaderFunction } from "remix"
|
||||
import { Link, Outlet, useLoaderData } from "remix"
|
||||
import { SideNav } from "~/components/side-nav"
|
||||
import { SidebarLayout } from "~/components/sidebar-layout"
|
||||
import type { ContentIndexEntry } from "~/create-index.server"
|
||||
import { createContentIndex } from "~/create-index.server"
|
||||
import { linkClass } from "~/styles"
|
||||
|
||||
type LoaderData = ContentIndexEntry[]
|
||||
|
||||
export const loader: LoaderFunction = async () => {
|
||||
const data: LoaderData = await createContentIndex("app/routes/docs/guides")
|
||||
return data
|
||||
}
|
||||
|
||||
export default function Docs() {
|
||||
const data: LoaderData = useLoaderData()
|
||||
return (
|
||||
<SidebarLayout
|
||||
sidebar={
|
||||
<SideNav heading="Guides">
|
||||
{data.map(({ title, route }) => (
|
||||
<Link className={linkClass} key={route} to={route}>
|
||||
{title}
|
||||
</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>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
9
packages/docs/app/routes/docs/guides/embeds.md
Normal file
9
packages/docs/app/routes/docs/guides/embeds.md
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
meta:
|
||||
title: Embeds
|
||||
description: Using dmbed components
|
||||
---
|
||||
|
||||
# Embeds
|
||||
|
||||
just do it lol
|
||||
31
packages/docs/app/routes/docs/guides/getting-started.md
Normal file
31
packages/docs/app/routes/docs/guides/getting-started.md
Normal file
@@ -0,0 +1,31 @@
|
||||
---
|
||||
order: 0
|
||||
meta:
|
||||
title: Getting Started
|
||||
description: Learn how to get started with Reacord.
|
||||
---
|
||||
|
||||
# Getting Started
|
||||
|
||||
welcome
|
||||
|
||||
- install it and do the thing
|
||||
- then do another thing
|
||||
|
||||
## here's a code block
|
||||
|
||||
```tsx
|
||||
import React from "react"
|
||||
|
||||
function Counter() {
|
||||
const [count, setCount] = useState(0)
|
||||
return (
|
||||
<>
|
||||
You clicked {count} times
|
||||
<Button onClick={() => setCount(count + 1)}>Click me</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
yeah
|
||||
@@ -1,17 +1,10 @@
|
||||
import type { LoaderFunction } from "remix"
|
||||
import { useLoaderData } from "remix"
|
||||
import type { DocsJson } from "~/docs.server"
|
||||
import { loadDocs } from "~/docs.server"
|
||||
|
||||
export const loader: LoaderFunction = () => loadDocs()
|
||||
|
||||
export default function Index() {
|
||||
const data: DocsJson = useLoaderData()
|
||||
return (
|
||||
<main>
|
||||
<pre className="w-full overflow-x-auto">
|
||||
{JSON.stringify(data, undefined, 2)}
|
||||
</pre>
|
||||
<h1>Reacord</h1>
|
||||
<pre>code snippet here</pre>
|
||||
<p>Create interactive Discord messages using React and JSX.</p>
|
||||
<button>Get Started</button>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user