fix: homepage rendering and client-side navigation issues

packages/chronicle/src/components/mdx/link.tsx

@@ -1,25 +1,19 @@
 import { Link as ApsaraLink } from '@raystack/apsara';
-import type { ComponentProps } from 'react';
-import { Link as RouterLink } from 'react-router';
+import type { ComponentProps, MouseEvent } from 'react';
+import { useNavigate } from 'react-router';
 
 type LinkProps = ComponentProps<'a'>;
 
-export function Link({ href, children, ...props }: LinkProps) {
+export function Link({ href, children, onClick: onClickProp, ...props }: LinkProps) {
+  const navigate = useNavigate();
+
   if (!href) {
     return <span {...props}>{children}</span>;
   }
 
   const isExternal = href.startsWith('http://') || href.startsWith('https://');
   const isAnchor = href.startsWith('#');
 
-  if (isAnchor) {
-    return (
-      <ApsaraLink href={href} {...props}>
-        {children}
-      </ApsaraLink>
-    );
-  }
-
   if (isExternal) {
     return (
       <ApsaraLink
@@ -33,9 +27,36 @@ export function Link({ href, children, ...props }: LinkProps) {
     );
   }
 
+  if (isAnchor) {
+    return (
+      <ApsaraLink href={href} {...props}>
+        {children}
+      </ApsaraLink>
+    );
+  }
+
+  const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (
+      e.defaultPrevented ||
+      e.button !== 0 ||
+      e.metaKey ||
+      e.ctrlKey ||
+      e.shiftKey ||
+      e.altKey
+    ) {
+      return;
+    }
+
+    onClickProp?.(e);
+    if (e.defaultPrevented) return;
+
+    e.preventDefault();
+    navigate(href);
+  };
+
   return (
-    <RouterLink to={href} className={props.className}>
+    <ApsaraLink href={href} {...props} onClick={onClick}>
       {children}
-    </RouterLink>
+    </ApsaraLink>
   );
 }

packages/chronicle/src/pages/DocsPage.tsx

@@ -30,7 +30,7 @@ export function DocsPage({ slug }: DocsPageProps) {
       />
       <Page
         page={{
-          slug,
+          slug: page.slug,
           frontmatter: page.frontmatter,
           content: page.content,
           toc: page.toc

packages/chronicle/src/server/api/page/index.ts

@@ -0,0 +1 @@
+export { default } from './[...slug]';