Set site and base to resolve asset paths

Author: IzumiSy

astro.config.mjs

@@ -74,5 +74,7 @@ const starlightOptions = starlight({
 });
 
 export default defineConfig({
+  site: "https://fabrix-framework.github.io",
+  base: "/docs",
   integrations: [astroReact(), starlightOptions],
 });

src/content/docs/getting-started.mdx

@@ -47,6 +47,6 @@ The `url` prop specifies the endpoint of your GraphQL server. This is the URL wh
 
 In this example, `http://localhost:3000/graphql` is the URL where your GraphQL server is running. Replace this with the appropriate URL for your server.
 
-The `componentRegistry` prop defines which components Fabrix should use to render different fields and data types. It acts as a mapping between GraphQL types and React components. Fabrix includes a default component registry, such as Chakra UI components, but you can also provide your own custom registry. See [Component registry](/guides/component-registry) for more detail.
+The `componentRegistry` prop defines which components Fabrix should use to render different fields and data types. It acts as a mapping between GraphQL types and React components. Fabrix includes a default component registry, such as Chakra UI components, but you can also provide your own custom registry. See [Component registry](/docs/guides/component-registry) for more detail.
 
 All set! Now you can start using Fabrix in your app.

src/content/docs/index.mdx

@@ -11,7 +11,7 @@ hero:
     file: ../../assets/logo_mark.svg
   actions:
     - text: Getting Started 
-      link: /getting-started
+      link: /docs/getting-started
       icon: right-arrow
 ---
 import { Card, CardGrid } from '@astrojs/starlight/components';
@@ -22,19 +22,19 @@ import AboutAstro from '../../components/About.astro';
 <CardGrid stagger>
 	<Card title="Works with your existing app" icon="download" >
     Fabrix can work with any existing React app, and can be used with any GraphQL schema.
-    See the [Component API](/guides/component) for more information.
+    See the [Component API](/docs/guides/component) for more information.
 	</Card>
 	<Card title="Bring your own component" icon="seti:react">
-    Fabrix is designed to be agnostic to the components you use. You can use any component library, or [even build your own](/guides/component-registry).
+    Fabrix is designed to be agnostic to the components you use. You can use any component library, or [even build your own](/docs/guides/component-registry).
     We already have several component libraries that you can use out of the box.
 	</Card>
   <Card title="Fabrix editor" icon="pen">
     Fabrix comes with a powerful editor that allows you to see how your GraphQL schema will be rendered in real time.
-    See the [Fabrix editor](/tools/fabrix-editor) for more information.
+    See the [Fabrix editor](/docs/tools/fabrix-editor) for more information.
   </Card>
   <Card title="Directive API" icon="seti:graphql">
     Fabrix comes with a powerful directive API that allows you to customize how your components are rendered.
-    See the [Directive API](/guides/directives) for more information.
+    See the [Directive API](/docs/guides/directives) for more information.
   </Card>
 </CardGrid>