Update dependencies and add global styles for documentation site

Co-authored-by: oskar.kwasniewski <[email protected]>

Author: cursoragent

RSPRESS_THEME_UPDATE_SUMMARY.md

@@ -0,0 +1,90 @@
+# Rspress Theme Update Summary
+
+## Overview
+Successfully updated the rspress implementation to use the latest compatible version of the Callstack rspress-theme following the official README instructions.
+
+## Changes Made
+
+### 1. Theme Package Update
+- **Previous version**: `@callstack/[email protected]`
+- **Updated version**: `@callstack/[email protected]`
+- **Note**: Version 0.2.0 requires rspress v2.0.0-beta.21, but the current project uses rspress v1.45.0 (latest stable), so we used the latest compatible version.
+
+### 2. Assets Installation
+- Ran `npx @callstack/rspress-theme copy-assets .` to copy theme assets
+- Assets copied to `docs/theme/assets/` directory
+- Includes SVG icons, shapes, and other theme-specific assets
+
+### 3. Font Configuration
+- Created `docs/styles.css` with Alliance No. 2 font declarations
+- **Important**: Alliance No. 2 is a licensed font that must be added manually
+- Configured fallback fonts (Inter, system-ui) for immediate use
+- Updated `rspress.config.ts` to include `globalStyles` option
+
+### 4. Configuration Updates
+- Updated `docs/rspress.config.ts`:
+  - Added `globalStyles: path.join(__dirname, 'styles.css')`
+  - Plugin already configured: `pluginCallstackTheme()`
+
+### 5. Theme Customization (Optional)
+- Created `docs/theme/index.tsx` for custom theme components (currently backed up)
+- Provides ability to customize Layout, HomeLayout, and other components
+- Can be restored and customized as needed
+
+### 6. Documentation
+- Created `docs/fonts/README.md` with instructions for adding Alliance No. 2 font
+- Includes alternative font suggestions and setup instructions
+
+## Files Modified/Created
+
+### Modified Files:
+- `docs/package.json` - Updated theme dependency
+- `docs/rspress.config.ts` - Added globalStyles configuration
+
+### Created Files:
+- `docs/styles.css` - Font declarations and fallback styles
+- `docs/theme/assets/` - Theme assets (copied by CLI)
+- `docs/fonts/README.md` - Font installation instructions
+- `docs/theme/index.tsx.bak` - Custom theme components (backed up)
+
+## Build Status
+✅ **Build successful** - `npm run build` completes without errors
+✅ **Development server** - `npm run dev` starts successfully
+⚠️ **Minor SSR warning** - Falls back to CSR, but doesn't affect functionality
+
+## Next Steps
+
+### To Complete the Theme Setup:
+1. **Add Alliance No. 2 Font** (optional but recommended):
+   - Obtain Alliance No. 2 font files from [Klim Type Foundry](https://klim.co.nz/retail-fonts/alliance/)
+   - Place `alliance-no-2-regular.ttf` and `alliance-no-2-medium.ttf` in `docs/fonts/`
+   - Update `docs/styles.css` to use the actual font files instead of fallbacks
+
+2. **Customize Theme Components** (optional):
+   - Restore `docs/theme/index.tsx` from backup
+   - Customize Layout, HomeLayout, and other components as needed
+   - Follow the theme documentation for available components
+
+3. **Test All Features**:
+   - Verify all pages render correctly
+   - Test responsive design
+   - Check dark/light mode switching
+   - Validate all theme components work as expected
+
+## Theme Features Available
+- Custom Layout with Announcement bar
+- Home page components (Hero, Features, Banner, Footer)
+- Callstack branding and styling
+- Responsive design
+- Dark/light mode support
+- Custom SVG icons and graphics
+
+## Troubleshooting
+- If build fails, check that all font files are present or use fallback fonts
+- If SSR issues persist, they don't affect the final build output
+- For theme customization issues, refer to the [Rspress theme documentation](https://rspress.dev/guide/advanced/custom-theme)
+
+## Resources
+- [Callstack rspress-theme Repository](https://github.com/callstack/rspress-theme)
+- [Rspress Documentation](https://rspress.dev/)
+- [Theme README](https://github.com/callstack/rspress-theme/blob/main/packages/theme/README.md)

docs/fonts/README.md

@@ -0,0 +1,27 @@
+# Alliance No. 2 Font
+
+The Callstack rspress-theme uses **Alliance No. 2** as the header font family. This is a licensed font that needs to be added manually.
+
+## Required Files
+
+Place the following font files in this directory:
+
+- `alliance-no-2-regular.ttf` - Regular weight (400)
+- `alliance-no-2-medium.ttf` - Medium weight (500)
+
+## Where to Get the Font
+
+Alliance No. 2 is a licensed font. You can obtain it from:
+- [Klim Type Foundry](https://klim.co.nz/retail-fonts/alliance/) (official source)
+- Or use alternative fonts that match the design aesthetic
+
+## Alternative Fonts
+
+If you don't have access to Alliance No. 2, you can use alternative fonts by updating the `styles.css` file in the project root. Some good alternatives include:
+
+- Inter
+- Roboto
+- Source Sans Pro
+- Open Sans
+
+Simply replace the font-family name in the `@font-face` declarations in `styles.css`.

docs/package.json

@@ -8,7 +8,7 @@
     "preview": "rspress preview"
   },
   "dependencies": {
-    "@callstack/rspress-theme": "^0.0.2",
+    "@callstack/rspress-theme": "^0.1.4",
     "rspress": "^1.39.3"
   },
   "devDependencies": {

docs/rspress.config.ts

@@ -11,6 +11,7 @@ export default defineConfig({
   logoText: 'React Native Bottom Tabs',
   icon: '/img/phone.png',
   logo: '/img/phone.png',
+  globalStyles: path.join(__dirname, 'styles.css'),
   themeConfig: {
     enableContentAnimation: true,
     enableAppearanceAnimation: false,

docs/styles.css

@@ -0,0 +1,26 @@
+/* Fallback fonts for Alliance No. 2 */
+/* You can replace these with actual Alliance No. 2 font files when available */
+
+@font-face {
+  font-family: 'Alliance No. 2';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: local('Inter'), local('system-ui'), local('sans-serif');
+}
+
+@font-face {
+  font-family: 'Alliance No. 2';
+  font-style: normal;
+  font-weight: 500;
+  font-display: block;
+  src: local('Inter Medium'), local('Inter'), local('system-ui'), local('sans-serif');
+}
+
+/* Alternative: Use a web font as fallback */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
+
+/* Override the font-family if needed */
+:root {
+  --font-family-heading: 'Alliance No. 2', 'Inter', system-ui, sans-serif;
+}