docs(conform-guide): fix relative links (edmundhung#427)

guide/app/components.tsx

@@ -11,8 +11,8 @@ import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
 import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
 import darcula from 'react-syntax-highlighter/dist/esm/styles/prism/darcula';
 import type { loader as rootLoader } from '~/root';
-import type { loader as indexLoader } from '~/routes/_guide._index';
-import type { loader as pageLoader } from '~/routes/_guide.$';
+import type { loader as indexLoader } from '~/routes/_index';
+import type { loader as pageLoader } from '~/routes/$';
 import { useEffect, useLayoutEffect, useRef } from 'react';
 
 export interface Menu {
@@ -42,10 +42,8 @@ export function useRootLoaderData() {
 }
 
 export function usePageLoaderData() {
-	const indexData = useRouteLoaderData<typeof indexLoader>(
-		'routes/_guide._index',
-	);
-	const pageData = useRouteLoaderData<typeof pageLoader>('routes/_guide.$');
+	const indexData = useRouteLoaderData<typeof indexLoader>('routes/_index');
+	const pageData = useRouteLoaderData<typeof pageLoader>('routes/$');
 
 	return pageData ?? indexData;
 }
@@ -301,10 +299,16 @@ export function Link({
 		);
 	}
 
+	const to = url
+		// Remove markdown file extension
+		.replace(/\.md$/, '')
+		// Remove leading './' to make relative path compatible with Remix
+		.replace(/^\.\//, '../');
+
 	return (
 		<RouterLink
 			className={className}
-			to={url.replace('.md', '')}
+			to={to}
 			title={title}
 			prefetch="intent"
 			relative="path"

guide/app/routes/_guide.tsx → guide/app/layout.tsx

@@ -1,4 +1,4 @@
-import { Link, Outlet, useLocation } from '@remix-run/react';
+import { Link, useLocation } from '@remix-run/react';
 import {
 	type Menu,
 	Navigation,
@@ -70,7 +70,11 @@ const menus: Menu[] = [
 	},
 ];
 
-export default function Guide() {
+export function Guide({
+	children,
+}: {
+	children: React.ReactNode;
+}): React.ReactNode {
 	const { owner, repo, ref } = useRootLoaderData();
 	const { file, toc } = usePageLoaderData() ?? {};
 	const location = useLocation();
@@ -113,9 +117,7 @@ export default function Guide() {
 				</div>
 				<MainNavigation menus={menus} />
 			</header>
-			<main className="xl:col-span-3">
-				<Outlet />
-			</main>
+			<main className="xl:col-span-3">{children}</main>
 			<footer className="xl:col-span-1 top-0 sticky py-4 xl:flex xl:flex-col xl:h-screen -mx-8 px-8 mt-8 xl:mt-0 border-t xl:border-t-0 border-dotted">
 				<div className="pt-2 pb-4 hidden xl:block xl:invisible">
 					<button className="flex items-center justify-between w-full gap-4 px-2.5 py-2 rounded-sm border border-zinc-500 text-zinc-500 hover:text-zinc-400 hover:border-zinc-400">

guide/app/root.tsx

@@ -14,6 +14,7 @@ import {
 	isRouteErrorResponse,
 } from '@remix-run/react';
 import { json } from '@remix-run/cloudflare';
+import { Guide } from '~/layout';
 import { getMetadata } from '~/util';
 import stylesUrl from '~/styles.css';
 
@@ -48,7 +49,9 @@ export function ErrorBoundary() {
 export default function App() {
 	return (
 		<Document>
-			<Outlet />
+			<Guide>
+				<Outlet />
+			</Guide>
 		</Document>
 	);
 }

guide/app/routes/examples.$name.tsx

@@ -0,0 +1,10 @@
+import { LoaderFunctionArgs, redirect } from '@remix-run/cloudflare';
+import { getMetadata } from '~/util';
+
+export async function loader({ params, context }: LoaderFunctionArgs) {
+	const { owner, repo, ref } = getMetadata(context);
+
+	return redirect(
+		`https://github.com/${owner}/${repo}/tree/${ref}/examples/${params.name}`,
+	);
+}