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

use new docs

Browse Source
This commit is contained in:
MapleLeaf
2022-01-02 22:02:10 -06:00
committed by Darius
parent 381f933fd1
commit ca520db701
70 changed files with 186 additions and 2964 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/docs/.gitignore vendored
View File

@@ -1,9 +0,0 @@
node_modules
/.cache
/build
/public/build
/public/docs
.env
.vscode
app/docs.json
app/tailwind.css

4
packages/docs/app/entry.client.tsx
View File

@@ -1,4 +0,0 @@
import { hydrate } from "react-dom"
import { RemixBrowser } from "remix"
hydrate(<RemixBrowser />, document)

21
packages/docs/app/entry.server.tsx
View File

@@ -1,21 +0,0 @@
import { renderToString } from "react-dom/server"
import { RemixServer } from "remix"
import type { EntryContext } from "remix"
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
) {
const markup = renderToString(
<RemixServer context={remixContext} url={request.url} />,
)
responseHeaders.set("Content-Type", "text/html")
return new Response("<!DOCTYPE html>" + markup, {
status: responseStatusCode,
headers: responseHeaders,
})
}

39
packages/docs/app/helpers/create-index.server.ts
View File

@@ -1,39 +0,0 @@
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 }
}

10
packages/docs/app/helpers/filesystem.server.ts
View File

@@ -1,10 +0,0 @@
import { stat } from "node:fs/promises"
export async function isFile(path: string) {
try {
const result = await stat(path)
return result.isFile()
} catch {
return false
}
}

50
packages/docs/app/root.tsx
View File

@@ -1,50 +0,0 @@
import packageJson from "reacord/package.json"
import type { LinksFunction, MetaFunction } from "remix"
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "remix"
import prismThemeCss from "./prism-theme.css"
export const meta: MetaFunction = () => ({
title: "Reacord",
description: packageJson.description,
})
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: prismThemeCss },
{ rel: "stylesheet", href: "/tailwind.css" },
]
export default function App() {
return (
<html lang="en" className="bg-slate-900 text-slate-100">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin=""
/>
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
rel="stylesheet"
/>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
{process.env.NODE_ENV === "development" && <LiveReload />}
</body>
</html>
)
}

56
packages/docs/app/routes/docs.tsx
View File

@@ -1,56 +0,0 @@
import clsx from "clsx"
import type { LoaderFunction } from "remix"
import { Link, Outlet, useLoaderData } from "remix"
import { MainNavigation } from "~/components/main-navigation"
import type { ContentIndexEntry } from "~/helpers/create-index.server"
import { createContentIndex } from "~/helpers/create-index.server"
import { useScrolled } from "~/hooks/dom/use-scrolled"
import { docsProseClass, linkClass, maxWidthContainer } 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 (
<>
<HeaderPanel>
<div className={maxWidthContainer}>
<MainNavigation guideRoutes={data} />
</div>
</HeaderPanel>
<main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
<nav className="w-48 sticky top-24 hidden md:block">
<h2 className="text-2xl">Guides</h2>
<ul className="mt-3 flex flex-col gap-2 items-start">
{data.map(({ title, route }) => (
<li key={route}>
<Link className={linkClass} to={route}>
{title}
</Link>
</li>
))}
</ul>
</nav>
<section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
<Outlet />
</section>
</main>
</>
)
}
function HeaderPanel({ children }: { children: React.ReactNode }) {
const isScrolled = useScrolled()
const className = clsx(
isScrolled ? "bg-slate-700/30" : "bg-slate-800",
"shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
)
return <header className={className}>{children}</header>
}

10
packages/docs/app/routes/docs/guides/buttons.md
View File

@@ -1,10 +0,0 @@
---
order: 3
meta:
title: Buttons
description: Using button components
---
# Buttons
todo

10
packages/docs/app/routes/docs/guides/embeds.md
View File

@@ -1,10 +0,0 @@
---
order: 2
meta:
title: Embeds
description: Using embed components
---
# Embeds
todo

9
packages/docs/app/routes/docs/guides/select-menu.md
View File

@@ -1,9 +0,0 @@
---
meta:
title: Select Menus
description: Using select menu components
---
# Select Menus
todo

41
packages/docs/app/routes/index.tsx
View File

@@ -1,41 +0,0 @@
import packageJson from "reacord/package.json"
import type { LoaderFunction } from "remix"
import { Link, useLoaderData } from "remix"
import LandingExample from "~/components/landing-example.mdx"
import { MainNavigation } from "~/components/main-navigation"
import type { ContentIndexEntry } from "~/helpers/create-index.server"
import { createContentIndex } from "~/helpers/create-index.server"
import { maxWidthContainer } from "~/styles"
type LoaderData = ContentIndexEntry[]
export const loader: LoaderFunction = async () => {
const data: LoaderData = await createContentIndex("app/routes/docs/guides")
return data
}
export default function Landing() {
const data: LoaderData = useLoaderData()
return (
<div className="flex flex-col min-w-0 min-h-screen text-center">
<header className={maxWidthContainer}>
<MainNavigation guideRoutes={data} />
</header>
<div className="px-4 pb-8 flex flex-1">
<main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
<h1 className="text-6xl font-light">reacord</h1>
<section className="mx-auto text-sm sm:text-base">
<LandingExample />
</section>
<p className="text-2xl font-light">{packageJson.description}</p>
<Link
to="/docs/guides/getting-started"
className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
>
Get Started
</Link>
</main>
</div>
</div>
)
}

4
packages/docs/app/routes/tailwind[.]css.tsx
View File

@@ -1,4 +0,0 @@
import type { LoaderFunction } from "remix"
import { serveTailwindCss } from "remix-tailwind"
export const loader: LoaderFunction = () => serveTailwindCss()

71
packages/docs/package.json
View File

@@ -1,56 +1,47 @@
{
"name": "reacord-docs-new",
"type": "module",
"private": true,
"name": "remix-app-template",
"description": "",
"license": "",
"scripts": {
"prepare": "remix setup node",
"dev": "concurrently 'remix dev' 'typedoc --watch'",
"build": "typedoc && remix build",
"start": "remix-serve build"
"dev": "esmo server.ts",
"build": "vite build && vite build --ssr",
"start": "NODE_ENV=production esmo server.ts"
},
"dependencies": {
"@headlessui/react": "^1.4.2",
"@heroicons/react": "^1.0.5",
"@reach/rect": "^0.16.0",
"@remix-run/react": "^1.1.1",
"@remix-run/serve": "^1.1.1",
"@remix-run/server-runtime": "^1.1.1",
"@tailwindcss/typography": "^0.5.0",
"autoprefixer": "^10.4.1",
"clsx": "^1.1.1",
"fast-glob": "^3.2.7",
"express": "^4.17.2",
"gray-matter": "^4.0.3",
"postcss": "^8.4.5",
"reacord": "workspace:*",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.0-rc.0",
"react-dom": "^18.0.0-rc.0",
"react-focus-on": "^3.5.4",
"rehype-stringify": "^9.0.2",
"remark-parse": "^10.0.1",
"remark-rehype": "^10.1.0",
"remix": "^1.1.1",
"remix-tailwind": "^0.2.1",
"tailwindcss": "^3.0.8",
"unified": "^10.1.1",
"xdm": "^3.3.1"
"react-head": "^3.4.0",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
"vite-plugin-ssr": "^0.3.42"
},
"devDependencies": {
"@itsmapleleaf/configs": "^1.1.2",
"@remix-run/dev": "^1.1.1",
"@mapbox/rehype-prism": "^0.8.0",
"@tailwindcss/typography": "^0.5.0",
"@types/compression": "^1.7.2",
"@types/express": "^4.17.13",
"@types/markdown-it": "^12.2.3",
"@types/node": "*",
"@types/react": "^17.0.24",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.9",
"concurrently": "^6.5.1",
"prettier": "^2.5.1",
"rehype-highlight": "^5.0.2",
"rehype-prism-plus": "^1.1.3",
"typedoc": "^0.22.10",
"typescript": "^4.1.2"
},
"engines": {
"node": ">=14"
},
"sideEffects": false,
"prettier": "@itsmapleleaf/configs/prettier"
"@vitejs/plugin-react": "^1.1.3",
"autoprefixer": "^10.4.1",
"compression": "^1.7.4",
"esno": "^0.13.0",
"markdown-it": "^12.3.0",
"markdown-it-prism": "^2.2.1",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.8",
"type-fest": "^2.8.0",
"typescript": "^4.5.4",
"vite": "^2.7.10",
"vite-plugin-markdown": "^2.0.2"
}
}

40
packages/docs/plugins/preval.ts Normal file
View File

@@ -0,0 +1,40 @@
import { unlink, writeFile } from "node:fs/promises"
import type { Plugin } from "vite"
import { transformWithEsbuild } from "vite"
const prevalPattern = /\.preval\.(js|ts|jsx|tsx|mts|cts)$/
export function preval(): Plugin {
return {
name: "preval",
enforce: "pre",
async transform(code, filePath) {
if (!prevalPattern.test(filePath)) return
const tempFilePath = `${filePath}.preval.mjs`
try {
const transformResult = await transformWithEsbuild(code, filePath, {
target: "node16",
format: "esm",
})
await writeFile(tempFilePath, transformResult.code)
const runResult = await import(tempFilePath)
const serialized = Object.entries(runResult)
.map(([key, value]) => {
return key === "default"
? `export default ${JSON.stringify(value)}`
: `export const ${key} = ${JSON.stringify(value)}`
})
.join("\n")
return serialized + "\n"
} finally {
await unlink(tempFilePath).catch(console.warn)
}
},
}
}

6
packages/docs/postcss.config.cjs Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
packages/docs/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
packages/docs/public/images/copy-channel-id.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
packages/docs/public/images/developer-mode.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 48 KiB

24
packages/docs/remix.config.js
View File

@@ -1,24 +0,0 @@
/* eslint-disable unicorn/prefer-module */
const glob = require("fast-glob")
const { join, relative, normalize, parse } = require("path/posix")
/**
* @type {import('@remix-run/dev/config').AppConfig}
*/
module.exports = {
appDirectory: "app",
assetsBuildDirectory: "public/build",
publicPath: "/build/",
serverBuildDirectory: "build",
devServerPort: 8002,
ignoredRouteFiles: [".*"],
mdx: async (filename) => {
const highlight = await import("rehype-prism-plus").then(
(mod) => mod.default,
)
return {
rehypePlugins: [highlight],
}
},
}

3
packages/docs/remix.env.d.ts vendored
View File

@@ -1,3 +0,0 @@
/// <reference types="@remix-run/dev" />
/// <reference types="@remix-run/node/globals" />
declare module "@tailwindcss/typography"

42
packages/docs/server.ts Normal file
View File

@@ -0,0 +1,42 @@
import compression from "compression"
import express from "express"
import { dirname, join } from "node:path"
import { fileURLToPath } from "node:url"
import { createPageRenderer } from "vite-plugin-ssr"
const isProduction = process.env.NODE_ENV === "production"
const root = dirname(fileURLToPath(import.meta.url))
const app = express()
app.use(compression())
let viteDevServer
if (isProduction) {
app.use(express.static(join(root, "dist/client")))
} else {
const vite = await import("vite")
viteDevServer = await vite.createServer({
root,
server: { middlewareMode: "ssr" },
})
app.use(viteDevServer.middlewares)
}
const renderPage = createPageRenderer({ viteDevServer, isProduction, root })
app.get("*", async (req, res, next) => {
const url = req.originalUrl
const pageContextInit = {
url,
}
const pageContext = await renderPage(pageContextInit)
const { httpResponse } = pageContext
if (!httpResponse) return next()
const { body, statusCode, contentType } = httpResponse
res.status(statusCode).type(contentType).send(body)
})
const port = process.env.PORT || 3000
app.listen(port, () => {
console.info(`Server running at http://localhost:${port}`)
})

25
packages/docs/src/_default.page.client.tsx Normal file
View File

@@ -0,0 +1,25 @@
import React from "react"
import { createRoot } from "react-dom"
import { HeadProvider } from "react-head"
import type { PageContextBuiltInClient } from "vite-plugin-ssr/client"
import { getPage } from "vite-plugin-ssr/client"
import { App } from "./app"
import { RouteContextProvider } from "./route-context"
const context = await getPage<PageContextBuiltInClient>()
createRoot(document.querySelector("#app")!).render(
<HeadProvider>
<RouteContextProvider value={{ routeParams: {}, ...(context as any) }}>
<App>
<context.Page />
</App>
</RouteContextProvider>
</HeadProvider>,
)
declare module "react-dom" {
export function createRoot(element: Element): {
render(element: React.ReactNode): void
}
}

49
packages/docs/src/_default.page.server.tsx Normal file
View File

@@ -0,0 +1,49 @@
import React from "react"
import { renderToStaticMarkup, renderToString } from "react-dom/server.js"
import { HeadProvider } from "react-head"
import type { PageContextBuiltIn } from "vite-plugin-ssr"
import { dangerouslySkipEscape, escapeInject } from "vite-plugin-ssr"
import { App } from "./app"
import { RouteContextProvider } from "./route-context"
export const passToClient = ["routeParams", "pageData"]
export function render(context: PageContextBuiltIn) {
const headTags: React.ReactElement[] = []
const pageHtml = renderToString(
<HeadProvider headTags={headTags}>
<RouteContextProvider value={context}>
<App>
<context.Page />
</App>
</RouteContextProvider>
</HeadProvider>,
)
const documentHtml = escapeInject/* HTML */ `
<!DOCTYPE html>
<html lang="en" class="bg-slate-900 text-slate-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin=""
/>
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
rel="stylesheet"
/>
${dangerouslySkipEscape(renderToStaticMarkup(<>{headTags}</>))}
</head>
<body>
<div id="app" class="contents">${dangerouslySkipEscape(pageHtml)}</div>
</body>
</html>
`
return { documentHtml }
}

14
packages/docs/src/app.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { description } from "reacord/package.json"
import { Meta, Title } from "react-head"
import "tailwindcss/tailwind.css"
import "./styles/prism-theme.css"
export function App({ children }: { children: React.ReactNode }) {
return (
<>
<Title>Reacord</Title>
<Meta name="description" content={description} />
{children}
</>
)
}

12
packages/docs/app/components/app-link.tsx → packages/docs/src/components/app-link.tsx
View File

@@ -1,8 +1,7 @@
import { Link } from "remix"
import { ExternalLink } from "~/components/external-link"
import { ExternalLink } from "./external-link"
export type AppLinkProps = {
type: "router" | "internal" | "external"
type: "internal" | "external"
label: React.ReactNode
to: string
className?: string
@@ -10,13 +9,6 @@ export type AppLinkProps = {
export function AppLink(props: AppLinkProps) {
switch (props.type) {
case "router":
return (
<Link className={props.className} to={props.to}>
{props.label}
</Link>
)
case "internal":
return (
<a className={props.className} href={props.to}>

0
packages/docs/app/components/external-link.tsx → packages/docs/src/components/external-link.tsx
View File

48
packages/docs/src/components/guide-page-layout.tsx Normal file
View File

@@ -0,0 +1,48 @@
import clsx from "clsx"
import { guideLinks } from "../data/guide-links.preval"
import { useScrolled } from "../hooks/dom/use-scrolled"
import {
docsProseClass,
linkClass,
maxWidthContainer,
} from "../styles/components"
import { AppLink } from "./app-link"
import { MainNavigation } from "./main-navigation"
export function GuidePageLayout() {
return (
<>
<HeaderPanel>
<div className={maxWidthContainer}>
<MainNavigation />
</div>
</HeaderPanel>
<main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
<nav className="w-48 sticky top-24 hidden md:block">
<h2 className="text-2xl">Guides</h2>
<ul className="mt-3 flex flex-col gap-2 items-start">
{guideLinks.map((link) => (
<li key={link.to}>
<AppLink {...link} className={linkClass} />
</li>
))}
</ul>
</nav>
<section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
{/* todo */}
</section>
</main>
</>
)
}
function HeaderPanel({ children }: { children: React.ReactNode }) {
const isScrolled = useScrolled()
const className = clsx(
isScrolled ? "bg-slate-700/30" : "bg-slate-800",
"shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
)
return <header className={className}>{children}</header>
}

2
packages/docs/app/components/landing-example.mdx → packages/docs/src/components/landing-example.md
View File

@@ -1,4 +1,4 @@
{/* prettier-ignore */}
<!-- prettier-ignore -->
```tsx
import * as React from "react"
import { Embed, Button } from "reacord"

39
packages/docs/src/components/main-navigation.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { guideLinks } from "../data/guide-links.preval"
import { mainLinks } from "../data/main-links"
import { linkClass } from "../styles/components"
import { AppLink } from "./app-link"
import { PopoverMenu } from "./popover-menu"
export function MainNavigation() {
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}
key={link.to}
className={PopoverMenu.itemClass}
/>
))}
<hr className="border-0 h-[2px] bg-black/50" />
{guideLinks.map((link) => (
<AppLink
{...link}
key={link.to}
className={PopoverMenu.itemClass}
/>
))}
</PopoverMenu>
</div>
</nav>
)
}

51
packages/docs/app/components/main-navigation.tsx → packages/docs/src/components/popover-menu.tsx
View File

@@ -3,50 +3,10 @@ import { useRect } from "@reach/rect"
import clsx from "clsx"
import { useRef, useState } from "react"
import { FocusOn } from "react-focus-on"
import { Link } from "remix"
import { mainLinks } from "~/app-links"
import { AppLink } from "~/components/app-link"
import type { ContentIndexEntry } from "~/helpers/create-index.server"
import { linkClass } from "~/styles"
import { linkClass } from "../styles/components"
const menuItemClass = clsx`
px-3 py-2 transition text-left font-medium block
opacity-50 hover:opacity-100 hover:bg-black/30
`
export function MainNavigation({
guideRoutes,
}: {
guideRoutes: ContentIndexEntry[]
}) {
return (
<nav className="flex justify-between items-center h-16">
<Link to="/">
<h1 className="text-3xl font-light">reacord</h1>
</Link>
<div className="hidden md:flex gap-4">
{mainLinks.map((link) => (
<AppLink key={link.to} className={linkClass} {...link} />
))}
</div>
<div className="md:hidden">
<PopoverMenu>
{mainLinks.map((link) => (
<AppLink key={link.to} className={menuItemClass} {...link} />
))}
<hr className="border-0 h-[2px] bg-black/50" />
{guideRoutes.map((route) => (
<Link key={route.route} to={route.route} className={menuItemClass}>
{route.title}
</Link>
))}
</PopoverMenu>
</div>
</nav>
)
}
function PopoverMenu({ children }: { children: React.ReactNode }) {
// todo: remove useRect usage and rely on css absolute positioning instead
export function PopoverMenu({ children }: { children: React.ReactNode }) {
const [visible, setVisible] = useState(false)
const buttonRef = useRef<HTMLButtonElement>(null)
@@ -100,3 +60,8 @@ function PopoverMenu({ children }: { children: React.ReactNode }) {
</>
)
}
PopoverMenu.itemClass = clsx`
px-3 py-2 transition text-left font-medium block
opacity-50 hover:opacity-100 hover:bg-black/30
`

34
packages/docs/src/data/guide-links.preval.tsx Normal file
View File

@@ -0,0 +1,34 @@
import glob from "fast-glob"
import grayMatter from "gray-matter"
import { readFile } from "node:fs/promises"
import { join } from "node:path"
import type { AppLinkProps } from "../components/app-link"
const docsFolderPath = new URL("../docs", import.meta.url).pathname
const guideFiles = await glob("**/*.md", { cwd: docsFolderPath })
const entries = await Promise.all(
guideFiles.map(async (file) => {
const content = await readFile(join(docsFolderPath, file), "utf-8")
const { data } = grayMatter(content)
let order = Number(data.order)
if (!Number.isFinite(order)) {
order = Number.POSITIVE_INFINITY
}
return {
route: `/docs/${file.replace(/\.mdx?$/, "")}`,
title: String(data.title || ""),
order,
}
}),
)
export const guideLinks: AppLinkProps[] = entries
.sort((a, b) => a.order - b.order)
.map((item) => ({
type: "internal",
label: item.title,
to: item.route,
}))

18
packages/docs/app/app-links.tsx → packages/docs/src/data/main-links.tsx
View File

@@ -3,14 +3,13 @@ import {
DocumentTextIcon,
ExternalLinkIcon,
} from "@heroicons/react/solid"
import type { AppLinkProps } from "~/components/app-link"
import { createContentIndex } from "~/helpers/create-index.server"
import { inlineIconClass } from "~/styles"
import type { AppLinkProps } from "../components/app-link"
import { inlineIconClass } from "../styles/components"
export const mainLinks: AppLinkProps[] = [
{
type: "router",
to: "/docs/guides/getting-started",
type: "internal",
to: "/docs/getting-started",
label: (
<>
<DocumentTextIcon className={inlineIconClass} /> Guides
@@ -36,12 +35,3 @@ export const mainLinks: AppLinkProps[] = [
),
},
]
export async function getGuideLinks(): Promise<AppLinkProps[]> {
const entries = await createContentIndex("app/routes/docs/guides")
return entries.map((entry) => ({
type: "router",
label: entry.title,
to: entry.route,
}))
}

9
packages/docs/src/docs/buttons.md Normal file
View File

@@ -0,0 +1,9 @@
---
order: 3
title: Buttons
description: Using button components
---
# Buttons
todo

9
packages/docs/src/docs/embeds.md Normal file
View File

@@ -0,0 +1,9 @@
---
order: 2
title: Embeds
description: Using embed components
---
# Embeds
todo

5
packages/docs/app/routes/docs/guides/getting-started.md → packages/docs/src/docs/getting-started.md
View File

@@ -1,8 +1,7 @@
---
order: 0
meta:
title: Getting Started
description: Learn how to get started with Reacord.
title: Getting Started
description: Learn how to get started with Reacord.
---
# Getting Started

8
packages/docs/src/docs/select-menu.md Normal file
View File

@@ -0,0 +1,8 @@
---
title: Select Menus
description: Using select menu components
---
# Select Menus
todo

14
packages/docs/app/routes/docs/guides/sending-messages.md → packages/docs/src/docs/sending-messages.md
View File

@@ -1,23 +1,13 @@
---
order: 1
meta:
title: Sending Messages
description: Sending messages by creating Reacord instances
title: Sending Messages
description: Sending messages by creating Reacord instances
---
# Sending Messages with Instances
You can send messages via Reacord to a channel like so.
<details>
<summary>In case you're unaware, click here to see how to get a channel ID.</summary>
1. Enable "Developer Mode" in your Discord client settings.
![Enabling developer mode](/images/developer-mode.png)
1. Right click any channel, and select "Copy ID".
![Copying the channel ID](/images/copy-channel-id.png)
</details>
```jsx
const channelId = "abc123deadbeef"

11
packages/docs/src/helpers/lazy-named.ts Normal file
View File

@@ -0,0 +1,11 @@
import { lazy } from "react"
export function lazyNamed<
Key extends string,
Component extends React.ComponentType,
>(key: Key, loadModule: () => Promise<Record<Key, Component>>) {
return lazy<Component>(async () => {
const mod = await loadModule()
return { default: mod[key] }
})
}

2
packages/docs/app/hooks/dom/use-scrolled.ts → packages/docs/src/hooks/dom/use-scrolled.ts
View File

@@ -1,5 +1,5 @@
import { useState } from "react"
import { useWindowEvent } from "~/hooks/dom/use-window-event"
import { useWindowEvent } from "./use-window-event"
export function useScrolled() {
const [scrolled, setScrolled] = useState(false)

0
packages/docs/app/hooks/dom/use-window-event.ts → packages/docs/src/hooks/dom/use-window-event.ts
View File

1
packages/docs/src/pages/docs.page.route.tsx Normal file
View File

@@ -0,0 +1 @@
export default "/docs/*"

23
packages/docs/src/pages/docs.page.server.tsx Normal file
View File

@@ -0,0 +1,23 @@
import type { OnBeforeRenderFn } from "../router-types"
export type DocsPageProps = {
title?: string
description?: string
content: string
}
export const onBeforeRender: OnBeforeRenderFn<DocsPageProps> = async (
context,
) => {
const documentPath = context.routeParams["*"]
const document = await import(`../docs/${documentPath}.md`)
return {
pageContext: {
pageData: {
title: document.attributes.title,
description: document.attributes.description,
content: document.html,
},
},
}
}

55
packages/docs/src/pages/docs.page.tsx Normal file
View File

@@ -0,0 +1,55 @@
import clsx from "clsx"
import { Meta, Title } from "react-head"
import { AppLink } from "../components/app-link"
import { MainNavigation } from "../components/main-navigation"
import { guideLinks } from "../data/guide-links.preval"
import { useScrolled } from "../hooks/dom/use-scrolled"
import { usePageData } from "../route-context"
import {
docsProseClass,
linkClass,
maxWidthContainer,
} from "../styles/components"
import type { DocsPageProps } from "./docs.page.server"
export default function DocsPage() {
const data = usePageData<DocsPageProps>()
return (
<>
<Title>{data.title} | Reacord</Title>
<Meta name="description" content={data.description} />
<HeaderPanel>
<div className={maxWidthContainer}>
<MainNavigation />
</div>
</HeaderPanel>
<main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
<nav className="w-48 sticky top-24 hidden md:block">
<h2 className="text-2xl">Guides</h2>
<ul className="mt-3 flex flex-col gap-2 items-start">
{guideLinks.map((link) => (
<li key={link.to}>
<AppLink {...link} className={linkClass} />
</li>
))}
</ul>
</nav>
<section
className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}
dangerouslySetInnerHTML={{ __html: data.content }}
/>
</main>
</>
)
}
function HeaderPanel({ children }: { children: React.ReactNode }) {
const isScrolled = useScrolled()
const className = clsx(
isScrolled ? "bg-slate-700/30" : "bg-slate-800",
"shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
)
return <header className={className}>{children}</header>
}

30
packages/docs/src/pages/index.page.tsx Normal file
View File

@@ -0,0 +1,30 @@
import packageJson from "reacord/package.json"
import { html as landingExampleHtml } from "../components/landing-example.md"
import { MainNavigation } from "../components/main-navigation"
import { maxWidthContainer } from "../styles/components"
export default function LandingPage() {
return (
<div className="flex flex-col min-w-0 min-h-screen text-center">
<header className={maxWidthContainer}>
<MainNavigation />
</header>
<div className="px-4 pb-8 flex flex-1">
<main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
<h1 className="text-6xl font-light">reacord</h1>
<section
className="mx-auto text-sm sm:text-base"
dangerouslySetInnerHTML={{ __html: landingExampleHtml }}
/>
<p className="text-2xl font-light">{packageJson.description}</p>
<a
href="/docs/getting-started"
className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
>
Get Started
</a>
</main>
</div>
</div>
)
}

4
packages/docs/src/react.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
import "react"
declare module "react" {
export function createContext<Value>(): Context<Value | undefined>
}

18
packages/docs/src/route-context.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { createContext, useContext } from "react"
export type RouteContextValue = {
routeParams: Record<string, string>
pageData?: Record<string, unknown>
}
const Context = createContext<RouteContextValue>()
export const RouteContextProvider = Context.Provider
export function useRouteParams() {
return useContext(Context)?.routeParams ?? {}
}
export function usePageData<T>() {
return useContext(Context)?.pageData as T
}

10
packages/docs/src/router-types.ts Normal file
View File

@@ -0,0 +1,10 @@
import type { Promisable } from "type-fest"
import type { PageContextBuiltIn } from "vite-plugin-ssr"
export type OnBeforeRenderFn<PageProps> = (
context: PageContextBuiltIn,
) => Promisable<{
pageContext: {
pageData: PageProps
}
}>

0
packages/docs/app/styles.ts → packages/docs/src/styles/components.ts
View File

0
packages/docs/app/prism-theme.css → packages/docs/src/styles/prism-theme.css
View File

3
packages/docs/src/styles/tailwind.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

8
packages/docs/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1,8 @@
/// <reference types="vite/client" />
declare module "*.md" {
import type { ComponentType } from "react"
export const attributes: Record<string, any>
export const html: string
export const ReactComponent: ComponentType
}

5
packages/docs/tailwind.config.cjs
View File

@@ -1,7 +1,6 @@
/* eslint-disable unicorn/prefer-module */
// eslint-disable-next-line unicorn/prefer-module
// @ts-nocheck
module.exports = {
content: ["./app/**/*.{ts,tsx,md,mdx}"],
content: ["./src/**/*.{ts,tsx,md}"],
theme: {
fontFamily: {
sans: ["Rubik", "sans-serif"],

5
packages/docs/tsconfig.json
View File

@@ -1,9 +1,6 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"jsx": "react-jsx",
"paths": {
"~/*": ["./app/*"]
}
"jsx": "react-jsx"
}
}

11
packages/docs/typedoc.json
View File

@@ -1,11 +0,0 @@
{
"entryPoints": ["../reacord/library/main.ts"],
"out": ["public/docs/api"],
"tsconfig": "../reacord/tsconfig.json",
"excludeInternal": true,
"excludePrivate": true,
"excludeProtected": true,
"categorizeByGroup": false,
"preserveWatchOutput": true,
"githubPages": false
}

35
packages/docs/vite.config.ts Normal file
View File

@@ -0,0 +1,35 @@
import react from "@vitejs/plugin-react"
import MarkdownIt from "markdown-it"
import prism from "markdown-it-prism"
import { createRequire } from "node:module"
import { defineConfig } from "vite"
import type * as markdownType from "vite-plugin-markdown"
import ssr from "vite-plugin-ssr/plugin"
import { preval } from "./plugins/preval"
const require = createRequire(import.meta.url)
const markdown: typeof markdownType = require("vite-plugin-markdown")
export default defineConfig({
build: {
target: ["node16", "chrome89", "firefox89"],
},
plugins: [
ssr(),
react(),
markdown.default({
mode: [markdown.Mode.HTML],
markdownIt: new MarkdownIt({
html: true,
linkify: true,
}).use(prism),
}),
preval(),
],
resolve: {
alias: {
// https://github.com/brillout/vite-plugin-mdx/issues/44#issuecomment-974540152
"react/jsx-runtime": "react/jsx-runtime.js",
},
},
})