docs: use new CK theme (#1218)

Author: jbroma

package.json

@@ -34,10 +34,5 @@
     "is-in-ci": "^1.0.0",
     "nx": "19.7.3",
     "typescript": "catalog:"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "@rspress/plugin-llms@2.0.0-beta.3": "patches/@rspress__plugin-llms@2.0.0-beta.3.patch"
-    }
   }
 }

patches/@rspress__plugin-llms@2.0.0-beta.3.patch

@@ -13,11 +13,10 @@
     "diff:v3-v4:mjs": "git diff @callstack/repack@3.0.0:templates/webpack.config.mjs HEAD:templates/webpack.config.mjs > src/public/diffs/repack_v3-v4_mjs.diff"
   },
   "dependencies": {
-    "@callstack/rspress-theme": "^0.0.3",
-    "@rspress/plugin-llms": "2.0.0-beta.3",
+    "@callstack/rspress-theme": "^0.2.0",
+    "@rspress/plugin-llms": "2.0.0-beta.21",
     "rsbuild-plugin-open-graph": "^1.0.2",
-    "rspress": "2.0.0-beta.3",
-    "rspress-plugin-font-open-sans": "^1.0.0",
+    "rspress": "2.0.0-beta.21",
     "rspress-plugin-sitemap": "^1.1.1",
     "rspress-plugin-vercel-analytics": "^0.3.0"
   },

pnpm-lock.yaml

@@ -2,7 +2,6 @@ import * as path from 'node:path';
 import { pluginCallstackTheme } from '@callstack/rspress-theme/plugin';
 import { pluginLlms } from '@rspress/plugin-llms';
 import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';
-import { pluginFontOpenSans } from 'rspress-plugin-font-open-sans';
 import pluginSitemap from 'rspress-plugin-sitemap';
 import vercelAnalytics from 'rspress-plugin-vercel-analytics';
 import { defineConfig } from 'rspress/config';
@@ -22,12 +21,11 @@ export default defineConfig({
     'A modern build tool for React Native that brings the Rspack and webpack ecosystem to mobile React Native apps',
   icon: '/img/favicon.ico',
   logo: {
-    light: '/img/logo_light.svg',
-    dark: '/img/logo_dark.svg',
+    light: '/img/logo-light.png',
+    dark: '/img/logo-dark.png',
   },
   markdown: {
     checkDeadLinks: true,
-    codeHighlighter: 'prism',
   },
   route: {
     cleanUrls: true,
@@ -45,7 +43,7 @@ export default defineConfig({
     },
     editLink: {
       docRepoBaseUrl: EDIT_ROOT_URL,
-      text: '📝 Edit this page on GitHub',
+      text: 'Edit this page on GitHub',
     },
     socialLinks: [
       {
@@ -85,7 +83,7 @@ export default defineConfig({
         title: 'Re.Pack',
         type: 'website',
         url: 'https://re-pack.dev',
-        image: 'https://re-pack.dev/img/og-image.png',
+        image: 'https://re-pack.dev/img/og-image.jpg',
         description: 'A modern build tool for React Native',
         twitter: {
           site: '@repack_rn',
@@ -108,16 +106,14 @@ export default defineConfig({
     process.env.REPACK_DOC_VERSION !== 'v2' &&
     process.env.REPACK_DOC_VERSION !== 'v3' &&
     process.env.REPACK_DOC_VERSION !== 'v4'
-      ? path.join(__dirname, DOCS_ROOT, 'styles', 'index.css')
+      ? path.join(__dirname, 'theme', 'styles.css')
       : undefined,
   plugins: [
     // @ts-ignore
     pluginSitemap({
       domain: 'https://re-pack.dev',
     }),
     // @ts-ignore
-    pluginFontOpenSans(),
-    // @ts-ignore
     vercelAnalytics(),
     // @ts-ignore
     pluginCallstackTheme(),

website/package.json

@@ -2,33 +2,37 @@
 pageType: home
 
 hero:
-  name: <img alt="Re.Pack" className="home-hero-name-img custom__home-hero-name-img" src="/img/banner.svg" width="300" />
-  text: 'A modern build tool for React Native'
+  name: Modern build tool for React Native
   tagline: Re.Pack brings Rspack and webpack ecosystem to mobile React Native apps
   actions:
     - theme: brand
-      text: <span className="home-hero-primary-action">Get started</span>
+      text: Get started
       link: /docs/getting-started/quick-start
     - theme: alt
       text: Learn more
       link: /docs/getting-started/introduction
+  image:
+    src:
+      light: /img/logo-light.png
+      dark: /img/logo-dark.png
+    alt: Logo
 features:
   - title: Mobile Microfrontends
     details: Leverage Module Federation v2 to split JS or Hermes bytecode bundle into smaller chunks and download on-demand from a server.
-    icon: <div className="custom__rspress-home-feature-icon-img-container"><img src="/img/mf_icon.svg" /></div>
+    icon: <img src="/icons/layout-columns.svg" />
   - title: Powered by webpack / Rspack
     details: Use the full webpack ecosystem of plugins and loaders. Enhance with Rspack for build and fast refresh speed.
-    icon: <div className="custom__rspress-home-feature-icon-img-container"><img src="/img/webpack_icon.svg" /><img src="/img/rspack_icon.svg" /></div>
+    icon: <img src="/icons/repeat.svg" />
   - title: Drop-in Metro Replacement
     details: Use instead of Metro—a default React Native bundler. Migrate with a single command. All platforms supported.
-    icon: 🚇
+    icon: <img src="/icons/layout-distribute-vertical.svg" />
   - title: Smaller App Size
     details: Use advanced optimizations like Tree Shaking to produce smaller Hermes bytecode size, improving app startup.
-    icon: 📉
+    icon: <img src="/icons/trending-down.svg" />
   - title: React Native DevTools
     details: Integrated modern debugging experience for React Native with console, breakpoints, CPU, Memory and React profiling.
-    icon: ⚙️
+    icon: <img src="/icons/sliders-2.svg" />
   - title: Fully-featured Dev Server
     details: Take advantage of built-in support for Hot Module Replacement, Fast Refresh, error symbolication, and source maps support.
-    icon: 🧑‍💻
+    icon: <img src="/icons/server.svg" />
 ---