fix(website): Fix build-docs and docusaurus build errors

Author: wjkg

apps/discovery/assets/svg/.gitignore

@@ -1,6 +1,8 @@
-const { WEBSITE_ROOT, WEBSITE_BASE } = require('@doc/constants');
-const version = require('react-native-render-html/package.json').version;
-const { existsSync } = require('fs');
+import type { Config } from '@docusaurus/types';
+import type * as Preset from '@docusaurus/preset-classic';
+import { WEBSITE_ROOT, WEBSITE_BASE } from '@doc/constants';
+import { version } from 'react-native-render-html/package.json';
+import { existsSync } from 'node:fs';
 
 const apisidebarPath = './apisidebar.json';
 let hasAPIsidebar = existsSync(apisidebarPath);
@@ -45,8 +47,7 @@ const plugins = [
   ]
 ].filter((c) => c !== null);
 
-/** @type {import('@docusaurus/types').DocusaurusConfig} */
-module.exports = {
+const config: Config = {
   title: 'React Native Render HTML',
   tagline:
     'The hackable, full-featured Open Source HTML rendering solution for React Native.',
@@ -244,7 +245,7 @@ module.exports = {
       ],
       copyright: `Copyright © ${new Date().getFullYear()} Meliorence, Inc and Jules Sam. Randolph.`
     }
-  },
+  } satisfies Preset.ThemeConfig,
   presets: [
     [
       '@docusaurus/preset-classic',
@@ -270,7 +271,9 @@ module.exports = {
           trackingID: 'G-CYR1XDV25N',
           anonymizeIP: true
         }
-      }
+      } satisfies Preset.Options
     ]
   ]
 };
+
+export default config;

apps/discovery/assets/svg/data-flow.svg

@@ -13,13 +13,17 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "api-gendoc": "docusaurus api:gen"
+    "api-gendoc": "docusaurus api:gen",
+    "test": "yarn test:ts && yarn test:lint",
+    "test:ts": "tsc --noEmit",
+    "test:lint": "eslint --ext ts,tsx src/"
   },
   "dependencies": {
     "@doc/constants": "workspace:*",
     "@doc/svg-component": "workspace:*",
     "@docusaurus/core": "^3.9.2",
     "@docusaurus/preset-classic": "^3.9.2",
+    "@docusaurus/theme-common": "^3.9.2",
     "@mdx-js/react": "^3.1.1",
     "clsx": "^2.1.1",
     "copy-text-to-clipboard": "^3.2.2",
@@ -35,7 +39,8 @@
     "@doc/pages": "workspace:*",
     "@doc/svgr-conf": "workspace:*",
     "@docusaurus/module-type-aliases": "^3.9.2",
-    "@tsconfig/docusaurus": "^2.0.4",
+    "@docusaurus/tsconfig": "^3.9.2",
+    "@docusaurus/types": "^3.9.2",
     "@types/react": "~19.1.0",
     "@types/react-helmet": "^6.1.11",
     "@types/react-modal": "^3.16.3",

apps/website/docusaurus.config.js apps/website/docusaurus.config.tsapps/website/docusaurus.config.js renamed to apps/website/docusaurus.config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import React, { useRef, useCallback } from 'react';
 //@ts-ignore
 import discoveryVideoUrl from '@site/static/video/discovery.webm';
@@ -7,7 +6,7 @@ import clsx from 'clsx';
 import IPhoneFrame from './IPhoneFrame';
 
 export default function DiscoveryFrame({ scale }: { scale?: number }) {
-  const videoRef = useRef<HTMLVideoElement>();
+  const videoRef = useRef<HTMLVideoElement>(null);
   const playPause = useCallback(() => {
     if (videoRef.current?.paused) {
       videoRef.current?.play();
@@ -16,7 +15,7 @@ export default function DiscoveryFrame({ scale }: { scale?: number }) {
     }
   }, []);
   return (
-    <div className={classes['container']}>
+    <div className={classes.container}>
       <IPhoneFrame scale={scale}>
         <video
           ref={videoRef}

apps/website/package.json

@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useRef
 } from 'react';
-import useThemeContext from '@theme/hooks/useThemeContext';
+import { useColorMode } from '@docusaurus/theme-common';
 import styles from './ExpoSnippet.module.scss';
 
 function makeIframeSrcParamsQuery({
@@ -145,7 +145,7 @@ export default function ExpoSnippet({
   className?: string;
   extraneousDeps: string[];
 }>) {
-  const { isDarkTheme } = useThemeContext();
+  const isDarkTheme = useColorMode().colorMode === 'dark';
   const style: React.CSSProperties = {
     backgroundColor: isDarkTheme ? '#212121' : '#f9f9f9'
   };

apps/website/src/components/DiscoveryFrame.tsx

@@ -71,7 +71,7 @@
   margin: var(--modal-inset);
   padding: 0;
   z-index: 1000;
-  width: calc(100vw - var(--modal-inset) * 2) - var(--scrollbar-width);
+  width: calc(100vw - var(--modal-inset) * 2 - var(--scrollbar-width));
   height: calc(100vh - var(--modal-inset) * 2);
 }
 

apps/website/src/components/ExpoSnippet.tsx

@@ -1,4 +1,4 @@
 {
-  "extends": "@tsconfig/docusaurus/tsconfig.json",
-  "include": ["src/"]
+  "extends": "@docusaurus/tsconfig",
+  "include": ["src/", "docusaurus.config.ts"]
 }