fix: more docs paths (#873)

Author: boorad

docs/components/landing/FeatureItem.tsx

@@ -1,28 +1,33 @@
 import Image from 'next/image';
+import { basePath } from '@/lib/basePath';
 
 type FeatureItemProps = {
-    title: string;
-    description: React.ReactNode;
-    imageSource: string;
+  title: string;
+  description: React.ReactNode;
+  imageSource: string;
 };
 
-export function FeatureItem({ title, description, imageSource }: FeatureItemProps) {
-    return (
-        <div className="flex flex-col items-center text-center p-6">
-            <div className="mb-6 relative w-24 h-24 sm:w-32 sm:h-32">
-                <Image
-                    src={imageSource}
-                    alt={title}
-                    fill
-                    className="object-contain drop-shadow-md"
-                />
-            </div>
-            <h3 className="font-heading text-2xl font-bold mb-4 text-primary dark:text-white">
-                {title}
-            </h3>
-            <p className="feature-description leading-relaxed max-w-sm text-lg">
-                {description}
-            </p>
-        </div>
-    );
+export function FeatureItem({
+  title,
+  description,
+  imageSource,
+}: FeatureItemProps) {
+  return (
+    <div className="flex flex-col items-center text-center p-6">
+      <div className="mb-6 relative w-24 h-24 sm:w-32 sm:h-32">
+        <Image
+          src={`${basePath}${imageSource}`}
+          alt={title}
+          fill
+          className="object-contain drop-shadow-md"
+        />
+      </div>
+      <h3 className="font-heading text-2xl font-bold mb-4 text-primary dark:text-white">
+        {title}
+      </h3>
+      <p className="feature-description leading-relaxed max-w-sm text-lg">
+        {description}
+      </p>
+    </div>
+  );
 }

docs/components/mdx/Image.tsx

@@ -0,0 +1,25 @@
+import NextImage from 'next/image';
+import { basePath } from '@/lib/basePath';
+
+interface ImageProps {
+  src: string;
+  alt: string;
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export function Image({ src, alt, className, width = 800, height = 400 }: ImageProps) {
+  const imageSrc = src.startsWith('/') ? `${basePath}${src}` : src;
+
+  return (
+    <NextImage
+      src={imageSrc}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+      style={{ width: '100%', height: 'auto' }}
+    />
+  );
+}

docs/content/docs/introduction/quick-start.mdx

@@ -3,9 +3,10 @@ title: Quick Start
 description: Getting started with React Native Quick Crypto
 ---
 
+import { Image } from '@/components/mdx/Image';
 
-<img alt="react-native-quick-crypto" src="/img/banner-light.png" className="block dark:hidden" />
-<img alt="react-native-quick-crypto" src="/img/banner-dark.png" className="hidden dark:block" />
+<Image alt="react-native-quick-crypto" src="/img/banner-light.png" className="block dark:hidden" />
+<Image alt="react-native-quick-crypto" src="/img/banner-dark.png" className="hidden dark:block" />
 
 import { Step, Steps } from 'fumadocs-ui/components/steps';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';

docs/lib/basePath.ts

@@ -0,0 +1 @@
+export const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? '';

docs/mdx-components.tsx

@@ -3,14 +3,25 @@ import type { MDXComponents } from 'mdx/types';
 import { Mermaid } from '@/components/mdx/mermaid';
 import * as Twoslash from 'fumadocs-twoslash/ui';
 import NextImage from 'next/image';
+import { basePath } from '@/lib/basePath';
 
-function MdxImage(props: React.ComponentProps<'img'>) {
+function MdxImage(
+  props: React.ComponentProps<'img'> & { src?: string | { src: string } },
+) {
   const { src, alt, className } = props;
-  if (!src || typeof src !== 'string') return null;
+
+  // Handle both string src and object src (fumadocs may pass either)
+  const srcString = typeof src === 'string' ? src : src?.src;
+  if (!srcString) return null;
+
+  // Only add basePath if not already present and path is absolute
+  const needsBasePath =
+    basePath && srcString.startsWith('/') && !srcString.startsWith(basePath);
+  const imageSrc = needsBasePath ? `${basePath}${srcString}` : srcString;
 
   return (
     <NextImage
-      src={src}
+      src={imageSrc}
       alt={alt ?? ''}
       width={800}
       height={400}

docs/next.config.mjs

@@ -3,13 +3,19 @@ import { createMDX } from 'fumadocs-mdx/next';
 const withMDX = createMDX();
 
 const isGitHubPages = process.env.GITHUB_ACTIONS === 'true';
+const basePath = isGitHubPages ? '/react-native-quick-crypto' : '';
 
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: true,
   output: 'export',
-  basePath: isGitHubPages ? '/react-native-quick-crypto' : '',
-  assetPrefix: isGitHubPages ? '/react-native-quick-crypto/' : '',
+  basePath,
+  images: {
+    unoptimized: true,
+  },
+  env: {
+    NEXT_PUBLIC_BASE_PATH: basePath,
+  },
 };
 
 export default withMDX(config);