chore: use rspress for docs (#902)

### Summary

This migrates the documentation to use rspress with callstack theme.

<img width="1970" height="1992" alt="CleanShot 2025-10-24 at 05 57
44@2x"
src="https://github.com/user-attachments/assets/d581dbd4-f42e-498d-8ce7-26805db835de"
/>


### Test plan

Run `yarn docs dev` in the repo.

Author: satya164

.github/workflows/deploy-docs.yml

@@ -8,36 +8,43 @@ on:
       - '.github/workflows/deploy-docs.yml'
       - 'docs/**'
 
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
 jobs:
-  deploy-docs:
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08c6903 # v5.0.0
+        with:
+          fetch-depth: 0
 
       - name: Setup
         uses: ./.github/actions/setup
 
-      - name: Cache build
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
-        with:
-          path: |
-            docs/.next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
-          restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('yarn.lock') }}
-            ${{ runner.os }}-nextjs-
+      - name: Setup Pages
+        uses: actions/configure-pages@983d773 # v5.0.0
 
-      - name: Build docs
+      - name: Build with Rspress
+        working-directory: docs
         run: |
           yarn docs build
-          touch docs/out/.nojekyll
 
-      - name: Deploy to GitHub Pages
-        uses: JamesIves/github-pages-deploy-action@6c2d9db40f9296374acc17b90404b6e8864128c8 # v4.7.3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@7b1f4a7 # v4.0.0
         with:
-          branch: gh-pages
-          folder: docs/out
+          path: docs/doc_build
 
-permissions:
-  contents: write
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@d6db901 # v4.0.5

.gitignore

@@ -84,3 +84,4 @@ typings/
 # generated files
 lib/
 typescript/
+doc_build/

.yarn/patches/@rspress-plugin-llms-npm-2.0.0-beta.34-d374542281.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/index.js b/dist/index.js
+index c47a273839fed26bdfccc00bc90fbc1df95e43c9..bf8392629cf394717fa08cdcfeb5ce48c73f5856 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -125,7 +125,7 @@ const rsbuildPluginLlms = ({ disableSSGRef, baseRef, pageDataList, routes, title
+                 const disableSSG = disableSSGRef.current;
+                 const newPageDataList = mergeRouteMetaWithPageData(routes, pageDataList, langRef.current, include, exclude);
+                 const navList = Array.isArray(nav) ? nav.map((i)=>{
+-                    const nav = i.nav.default || i.nav;
++                    const nav = i.nav?.default || i.nav || [];
+                     const lang = i.lang;
+                     return nav.map((i)=>({
+                             ...i,

docs/.gitignore

@@ -0,0 +1,77 @@
+.container {
+  margin: 0 auto;
+  width: calc(100% - 8 * 2px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  position: relative;
+  overflow: hidden;
+  padding: calc(var(--rp-content-padding-y) * 1.5) 0 var(--rp-content-padding-y)
+    0;
+}
+
+.heroMain {
+  display: flex;
+  flex-direction: column;
+  text-wrap: balance;
+  max-width: 55%;
+}
+
+.heroName {
+  color: var(--rp-c-text-1);
+  font-family: 'Alliance No.2', Arial, sans-serif;
+  font-size: 64px;
+  font-style: normal;
+  font-weight: 400 !important;
+  line-height: 1.1 !important;
+}
+
+.featureList {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  display: flex;
+  gap: 32px;
+  width: 100%;
+  margin-top: calc(var(--rp-content-padding-y) * 2);
+}
+
+.feature {
+  display: flex;
+  flex: 1;
+  position: relative;
+  color: var(--rp-c-text-1);
+  border: 1px dashed var(--rp-c-divider);
+  border-radius: var(--rp-radius-small);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 32px;
+}
+
+.featureTitle {
+  color: var(--rp-c-text-1);
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.featureDescription {
+  flex: 1;
+  color: var(--rp-c-text-2);
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.codeBlock {
+  position: relative;
+  width: 100%;
+  background-color: var(--rp-code-block-bg);
+  color: var(--rp-code-block-color);
+  margin: 16px 0;
+}
+
+.codeBlock pre {
+  padding: 18px 56px 18px 0;
+}

docs/assets/favicon.png

@@ -0,0 +1,60 @@
+import styles from './Hero.module.css';
+import { Button } from '@callstack/rspress-theme';
+import { CodeBlockRuntime } from '@rspress/core/theme';
+import { transformerNotationHighlight } from '@shikijs/transformers';
+
+export function Hero() {
+  return (
+    <div className="rp-relative">
+      <div
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+        className={`rp-overflow-hidden rp-max-w-6xl ${styles.container}`}
+      >
+        <div className={styles.heroMain}>
+          <h1 className={styles.heroName}>
+            Create & build React Native libraries
+          </h1>
+        </div>
+
+        <div className={styles.featureList}>
+          <div className={styles.feature}>
+            <h2 className={styles.featureTitle}>Create</h2>
+            <p className={styles.featureDescription}>
+              Scaffold a new React Native library with everything
+              pre-configured. Choose between templates such as Turbo Modules or
+              Nitro Modules.
+            </p>
+            <div className={styles.codeBlock}>
+              <CodeBlockRuntime
+                lang="sh"
+                code={`npx create-react-native-library@latest`}
+                shikiOptions={{
+                  transformers: [transformerNotationHighlight()],
+                }}
+              />
+            </div>
+            <Button href="/react-native-builder-bob/create">Learn more</Button>
+          </div>
+
+          <div className={styles.feature}>
+            <h2 className={styles.featureTitle}>Build</h2>
+            <p className={styles.featureDescription}>
+              Compile your React Native library to work with multiple tools.
+              Support Metro, Webpack, Vite, NodeJS & more with a single build.
+            </p>
+            <div className={styles.codeBlock}>
+              <CodeBlockRuntime
+                lang="sh"
+                code={`npx react-native-builder-bob@latest init`}
+                shikiOptions={{
+                  transformers: [transformerNotationHighlight()],
+                }}
+              />
+            </div>
+            <Button href="/react-native-builder-bob/build">Learn more</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

docs/components/Hero.module.css

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}