feat: Add changelog rendering (#96)

* Render the changelog

* Add more spacing to brand page and remove unstable_shouldReload

app/components/doc-route.tsx

@@ -2,6 +2,7 @@ import type {
   LoaderFunctionArgs,
   SerializeFrom,
   MetaFunction,
+  HeadersFunction,
 } from "@remix-run/node";
 import * as React from "react";
 import { json } from "@remix-run/node";
@@ -27,20 +28,24 @@ export let loader = async ({ params, request }: LoaderFunctionArgs) => {
 
   invariant(params.ref, "expected `ref` params");
 
-  let doc = await getRepoDoc(params.ref, params["*"] || "index");
-  if (!doc) {
+  try {
+    let slug = params["*"]?.endsWith("/changelog")
+      ? "CHANGELOG"
+      : `docs/${params["*"] || "index"}`;
+    let doc = await getRepoDoc(params.ref, slug);
+    if (!doc) throw null;
+    return json({ doc }, { headers: { "Cache-Control": CACHE_CONTROL.doc } });
+  } catch (_) {
     throw new Response("", { status: 404 });
   }
-
-  return json({ doc }, { headers: { "Cache-Control": CACHE_CONTROL.doc } });
 };
 
-export function headers() {
-  return {
-    "Cache-Control": CACHE_CONTROL.doc,
-    Vary: "Cookie",
-  };
-}
+export const headers: HeadersFunction = ({ loaderHeaders }) => {
+  // Inherit the caching headers from the loader so we don't cache 404s
+  let headers = new Headers(loaderHeaders);
+  headers.set("Vary", "Cookie");
+  return headers;
+};
 
 export const meta: MetaFunction<
   typeof loader,

app/modules/gh-docs/docs.ts

@@ -88,8 +88,7 @@ global.docCache ??= new LRUCache<string, Doc | undefined>({
 
 async function fetchDoc(key: string): Promise<Doc> {
   let [repo, ref, slug] = key.split(":");
-  // remove docs/ when we do https://github.com/remix-run/react-router-website/issues/94
-  let filename = `docs/${slug}.md`;
+  let filename = `${slug}.md`;
   let md = await getRepoContent(repo, ref, filename);
   if (md === null) {
     throw Error(`Could not find ${filename} in ${repo}@${ref}`);

app/routes/$lang.$ref.$.tsx

@@ -5,5 +5,3 @@ export {
   meta,
   ErrorBoundary,
 } from "~/components/doc-route";
-
-export let unstable_shouldReload = () => false;

app/routes/brand.tsx

@@ -12,7 +12,7 @@ export const meta: MetaFunction = () => {
 
 export default function Brand() {
   return (
-    <div className="prose container my-8 flex max-w-full flex-col gap-8 text-base sm:text-lg lg:max-w-4xl">
+    <div className="prose container my-8 flex max-w-full flex-col gap-8 text-base sm:text-lg lg:my-24 lg:max-w-4xl">
       <h1 className="text-2xl font-extrabold dark:text-gray-200 md:text-5xl">
         React Router Brand
       </h1>