chore: use rspress for docs

.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/components/Hero.module.css

@@ -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/components/Hero.tsx

@@ -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/index.d.ts

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

docs/package.json

@@ -4,17 +4,17 @@
   "private": true,
   "description": "Documentation for react-native-builder-bob",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build"
+    "build": "rspress build",
+    "dev": "rspress dev",
+    "preview": "rspress preview"
   },
   "dependencies": {
-    "next": "^13.5.3",
-    "nextra": "^2.13.1",
-    "nextra-theme-docs": "^2.13.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@callstack/rspress-preset": "^0.4.5",
+    "@callstack/rspress-theme": "^0.4.5",
+    "@rspress/core": "2.0.0-beta.34",
+    "@shikijs/transformers": "^3.13.0"
   },
   "devDependencies": {
-    "@types/node": "18.11.10"
+    "@types/react": "^19.2.2"
   }
 }

docs/pages/build.md

@@ -1,4 +1,6 @@
-# Build a React Native library
+---
+title: Build a React Native library
+---
 
 When code is in non-standard syntaxes such as JSX, TypeScript etc, it needs to be compiled before it can run. Configuring this manually can be error-prone and annoying. `react-native-builder-bob` aims to simplify this process by wrapping `babel` and `tsc` and taking care of the configuration. See [this section](./faq.md#why-should-i-compile-my-project-with-react-native-builder-bob) for a longer explanation.
 
@@ -100,7 +102,7 @@ To configure your project manually, follow these steps:
 
 5. Add the output directory to `.gitignore` and `.eslintignore`
 
-   ```gitignore
+   ```sh
    # generated files by bob
    lib/
    ```

docs/pages/create.md

@@ -1,4 +1,6 @@
-# Scaffold a React Native library
+---
+title: Scaffold a React Native library
+---
 
 If you want to create your own React Native library, scaffolding the project can be a daunting task. `create-react-native-library` can scaffold a new project for you with all the necessary tools configured.
 

docs/pages/esm.md

@@ -1,4 +1,6 @@
-# ESM support
+---
+title: ESM support
+---
 
 ## Default setup
 

docs/pages/faq.md

@@ -1,4 +1,6 @@
-# Frequently Asked Questions
+---
+title: Frequently Asked Questions
+---
 
 ## Why should I compile my project with `react-native-builder-bob`?
 
@@ -136,7 +138,7 @@ This is because the example app is configured as a Yarn workspace, and there is
 
    If the consumer doesn't use Yarn workspaces, they can disable it by adding the following to the `.yarnrc` file in the root of their project:
 
-   ```rc
+   ```sh
    workspaces-experimental false
    ```
 

docs/pages/index.mdx

@@ -0,0 +1,10 @@
+---
+pageType: custom
+---
+
+import { HomeFooter, HomeBanner } from '@callstack/rspress-theme';
+import { Hero } from '../components/Hero';
+
+<Hero />
+<HomeBanner />
+<HomeFooter />

docs/rspress.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from '@rspress/core';
+import { withCallstackPreset } from '@callstack/rspress-preset';
+
+export default withCallstackPreset(
+  {
+    context: __dirname,
+    docs: {
+      title: 'Bob - Create and build React Native libraries',
+      description:
+        'Bob is a collection of tools to make it easier to build React Native libraries.',
+      editUrl:
+        'https://github.com/callstack/react-native-builder-bob/edit/main/docs/pages',
+      rootUrl: 'https://callstack.github.io/react-native-builder-bob',
+      icon: 'assets/favicon.png',
+      logoLight: 'construction_worker.png',
+      logoDark: 'construction_worker.png',
+      rootDir: 'pages',
+      socials: {
+        github: 'https://github.com/callstack/react-native-builder-bob',
+      },
+    },
+  },
+  defineConfig({
+    themeConfig: {
+      enableContentAnimation: false,
+      sidebar: {
+        '/': [
+          { text: 'Scaffold a library', link: '/create' },
+          { text: 'Build a library', link: '/build' },
+          { text: 'ESM support', link: '/esm' },
+          { text: 'FAQ', link: '/faq' },
+        ],
+      },
+    },
+    base: '/react-native-builder-bob/',
+  })
+);