diff --git a/.eslintrc.json b/.eslintrc.json index afafe34..8a53282 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,7 +5,8 @@ "**/.cache/**", "**/build/**", "**/dist/**", - "**/coverage/**" + "**/coverage/**", + "**/public/**" ], "parserOptions": { "project": "./tsconfig.base.json" diff --git a/Dockerfile b/Dockerfile index 000184d..5be5dcc 100644 --- a/Dockerfile +++ b/Dockerfile @@ -8,8 +8,6 @@ RUN ls -R RUN npm install -g pnpm RUN pnpm install --unsafe-perm --frozen-lockfile RUN pnpm run build -C packages/docs -RUN pnpm install -C packages/docs --prod --unsafe-perm --frozen-lockfile -RUN pnpm store prune ENV NODE_ENV=production -CMD [ "pnpm", "-C", "packages/docs", "serve" ] +CMD [ "pnpm", "-C", "packages/docs", "start" ] diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore index 670b534..656df74 100644 --- a/packages/docs/.gitignore +++ b/packages/docs/.gitignore @@ -1,3 +1,7 @@ -.asset-cache node_modules -/api + +/.cache +/build +/public/build +.env +/public/api diff --git a/packages/docs/README.md b/packages/docs/README.md new file mode 100644 index 0000000..9659e78 --- /dev/null +++ b/packages/docs/README.md @@ -0,0 +1,53 @@ +# Welcome to Remix! + +- [Remix Docs](https://remix.run/docs) + +## Development + +From your terminal: + +```sh +npm run dev +``` + +This starts your app in development mode, rebuilding assets on file changes. + +## Deployment + +First, build your app for production: + +```sh +npm run build +``` + +Then run the app in production mode: + +```sh +npm start +``` + +Now you'll need to pick a host to deploy it to. + +### DIY + +If you're familiar with deploying node applications, the built-in Remix app server is production-ready. + +Make sure to deploy the output of `remix build` + +- `build/` +- `public/build/` + +### Using a Template + +When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server. + +```sh +cd .. +# create a new project, and pick a pre-configured host +npx create-remix@latest +cd my-new-remix-app +# remove the new project's app (not the old one!) +rm -rf app +# copy your app over +cp -R ../my-old-remix-app/app app +``` diff --git a/packages/docs/app/entry.client.tsx b/packages/docs/app/entry.client.tsx new file mode 100644 index 0000000..a19979b --- /dev/null +++ b/packages/docs/app/entry.client.tsx @@ -0,0 +1,4 @@ +import { hydrate } from "react-dom"; +import { RemixBrowser } from "remix"; + +hydrate(, document); diff --git a/packages/docs/app/entry.server.tsx b/packages/docs/app/entry.server.tsx new file mode 100644 index 0000000..9749895 --- /dev/null +++ b/packages/docs/app/entry.server.tsx @@ -0,0 +1,21 @@ +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( + + ); + + responseHeaders.set("Content-Type", "text/html"); + + return new Response("" + markup, { + status: responseStatusCode, + headers: responseHeaders + }); +} diff --git a/packages/docs/src/helpers/raise.ts b/packages/docs/app/modules/helpers/raise.ts similarity index 100% rename from packages/docs/src/helpers/raise.ts rename to packages/docs/app/modules/helpers/raise.ts diff --git a/packages/docs/src/landing/landing-example.md b/packages/docs/app/modules/landing/landing-example.mdx similarity index 93% rename from packages/docs/src/landing/landing-example.md rename to packages/docs/app/modules/landing/landing-example.mdx index ec0112a..aa74822 100644 --- a/packages/docs/src/landing/landing-example.md +++ b/packages/docs/app/modules/landing/landing-example.mdx @@ -1,4 +1,4 @@ - +{/* prettier-ignore */} ```tsx import * as React from "react" import { Embed, Button } from "reacord" diff --git a/packages/docs/app/modules/navigation/app-link.tsx b/packages/docs/app/modules/navigation/app-link.tsx new file mode 100644 index 0000000..74a4258 --- /dev/null +++ b/packages/docs/app/modules/navigation/app-link.tsx @@ -0,0 +1,31 @@ +import type { ComponentPropsWithoutRef } from "react" +import { Link } from "remix" + +export type AppLinkProps = ComponentPropsWithoutRef<"a"> & { + type: "internal" | "external" | "router" + to: string +} + +export function AppLink({ type, to, children, ...props }: AppLinkProps) { + if (type === "internal") { + return ( + + {children} + + ) + } + + if (type === "external") { + return ( + + {children} + + ) + } + + return ( + + {children} + + ) +} diff --git a/packages/docs/app/modules/navigation/guide-links-context.tsx b/packages/docs/app/modules/navigation/guide-links-context.tsx new file mode 100644 index 0000000..fb85b8a --- /dev/null +++ b/packages/docs/app/modules/navigation/guide-links-context.tsx @@ -0,0 +1,10 @@ +import { createContext, useContext } from "react" +import type { GuideLink } from "~/modules/navigation/load-guide-links.server" + +const Context = createContext([]) + +export const GuideLinksProvider = Context.Provider + +export function useGuideLinksContext() { + return useContext(Context) +} diff --git a/packages/docs/app/modules/navigation/load-guide-links.server.ts b/packages/docs/app/modules/navigation/load-guide-links.server.ts new file mode 100644 index 0000000..853477a --- /dev/null +++ b/packages/docs/app/modules/navigation/load-guide-links.server.ts @@ -0,0 +1,40 @@ +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" + +const guidesFolder = "app/routes/guides" + +export type GuideLink = { + title: string + order: number + link: AppLinkProps +} + +export async function loadGuideLinks(): Promise { + const guideFiles = await glob(`**/*.md`, { cwd: guidesFolder }) + + const links: GuideLink[] = 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 + } + + return { + title: data.meta?.title, + order, + link: { + type: "router", + to: `/guides/${parse(file).name}`, + children: data.meta?.title, + }, + } + }), + ) + + return links.sort((a, b) => a.order - b.order) +} diff --git a/packages/docs/src/navigation/main-links.tsx b/packages/docs/app/modules/navigation/main-links.tsx similarity index 80% rename from packages/docs/src/navigation/main-links.tsx rename to packages/docs/app/modules/navigation/main-links.tsx index 209cff1..45feceb 100644 --- a/packages/docs/src/navigation/main-links.tsx +++ b/packages/docs/app/modules/navigation/main-links.tsx @@ -2,16 +2,15 @@ import { CodeIcon, DocumentTextIcon, ExternalLinkIcon, -} from "@heroicons/react/solid/esm" -import React from "react" +} from "@heroicons/react/solid" +import type { AppLinkProps } from "~/modules/navigation/app-link" import { inlineIconClass } from "../ui/components" -import type { AppLinkProps } from "./app-link" export const mainLinks: AppLinkProps[] = [ { type: "internal", to: "/guides/getting-started", - label: ( + children: ( <> Guides @@ -20,7 +19,7 @@ export const mainLinks: AppLinkProps[] = [ { type: "internal", to: "/api", - label: ( + children: ( <> API Reference @@ -29,7 +28,7 @@ export const mainLinks: AppLinkProps[] = [ { type: "external", to: "https://github.com/itsMapleLeaf/reacord", - label: ( + children: ( <> GitHub diff --git a/packages/docs/src/navigation/main-navigation.tsx b/packages/docs/app/modules/navigation/main-navigation.tsx similarity index 86% rename from packages/docs/src/navigation/main-navigation.tsx rename to packages/docs/app/modules/navigation/main-navigation.tsx index 108be26..62048a0 100644 --- a/packages/docs/src/navigation/main-navigation.tsx +++ b/packages/docs/app/modules/navigation/main-navigation.tsx @@ -1,11 +1,11 @@ -import React from "react" +import { useGuideLinksContext } from "~/modules/navigation/guide-links-context" import { linkClass } from "../ui/components" import { PopoverMenu } from "../ui/popover-menu" import { AppLink } from "./app-link" -import { guideLinks } from "./guide-links" import { mainLinks } from "./main-links" export function MainNavigation() { + const guideLinks = useGuideLinksContext() return (