feat: support newest ck rspress theme and rspress 2.0.8

Author: artus9033

docs/components/Hero.module.css

@@ -69,7 +69,6 @@
 .codeBlock {
   position: relative;
   width: 100%;
-  background-color: var(--rp-code-block-bg);
   color: var(--rp-code-block-color);
   margin: 8px 0;
 }

docs/components/Hero.tsx

@@ -1,36 +1,33 @@
-import { Button } from '@callstack/rspress-theme';
-import { getCustomMDXComponent } from '@rspress/core/theme';
+import { Button, HomeHero } from '@callstack/rspress-theme';
+import { getCustomMDXComponent, HomeBackground } from '@rspress/core/theme';
+import clsx from 'clsx';
+
 import styles from './Hero.module.css';
 
 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>
+    <>
+      <HomeBackground />
 
-        <div className={styles.featureList}>
-          <Feature
-            title="Create"
-            description="Scaffold a new React Native library with everything pre-configured. Choose between templates such as Turbo Modules or"
-            code={`npx create-react-native-library@latest`}
-            link="/react-native-builder-bob/create"
-          />
-          <Feature
-            title="Build"
-            description="Compile your React Native library to work with multiple tools. Support Metro, Webpack, Vite, NodeJS & more with a single build."
-            code={`npx react-native-builder-bob@latest init`}
-            link="/react-native-builder-bob/build"
-          />
-        </div>
-      </div>
-    </div>
+      <HomeHero
+        afterHeroActions={
+          <div className={clsx('rp-home-feature', styles.featureList)}>
+            <Feature
+              title="Create"
+              description="Scaffold a new React Native library with everything pre-configured. Choose between templates such as Turbo Modules or Nitro Modules."
+              code={`npx create-react-native-library@latest`}
+              link="/react-native-builder-bob/create"
+            />
+            <Feature
+              title="Build"
+              description="Compile your React Native library to work with multiple tools. Support Metro, Webpack, Vite, NodeJS & more with a single build."
+              code={`npx react-native-builder-bob@latest init`}
+              link="/react-native-builder-bob/build"
+            />
+          </div>
+        }
+      />
+    </>
   );
 }
 
@@ -64,6 +61,7 @@ function Feature({
             {code.split(' ').map((part, index) => {
               return (
                 <span
+                  key={index}
                   style={{
                     color:
                       index === 0

docs/package.json

@@ -8,11 +8,13 @@
     "dev": "rspress dev",
     "preview": "rspress preview"
   },
+  "type": "module",
   "dependencies": {
-    "@callstack/rspress-preset": "^0.4.5",
-    "@callstack/rspress-theme": "^0.4.5",
-    "@rspress/core": "2.0.0-beta.34",
-    "@shikijs/transformers": "^3.13.0"
+    "@callstack/rspress-preset": "^0.6.3",
+    "@callstack/rspress-theme": "^0.6.3",
+    "@rspress/core": "^2.0.8",
+    "@shikijs/transformers": "^3.13.0",
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.14"

docs/pages/index.mdx

@@ -1,5 +1,7 @@
 ---
 pageType: custom
+hero:
+  name: Create & build<br/>React Native<br/>libraries
 ---
 
 import { HomeFooter, HomeBanner } from '@callstack/rspress-theme';

docs/rspress.config.ts

@@ -13,8 +13,8 @@ export default withCallstackPreset(
         'https://github.com/callstack/react-native-builder-bob/edit/main/docs/pages',
       rootUrl: 'https://oss.callstack.com/react-native-builder-bob',
       icon: 'assets/favicon.png',
-      logoLight: 'logo-light.svg',
-      logoDark: 'logo-dark.svg',
+      logoLight: 'react-native-builder-bob/logo-light.svg',
+      logoDark: 'react-native-builder-bob/logo-dark.svg',
       rootDir: 'pages',
       socials: {
         github: 'https://github.com/callstack/react-native-builder-bob',