Update package configurations and styles for cnwebsite

- Renamed workspace from "website" to "cnwebsite" in package.json.
- Upgraded Docusaurus dependencies to version 3.8.1 in cnwebsite/package.json.
- Enabled Docusaurus v4 future flags in cnwebsite/docusaurus.config.ts for easier upgrades.
- Added a new version "0.81" in cnwebsite/versions.json.
- Refined styles in _shared.scss and customTheme.scss, including hover effects and color adjustments.
- Introduced a new .hot-link style in index.scss for visual indicators.

Author: sunnylqm

cnwebsite/docusaurus.config.ts

@@ -28,6 +28,8 @@ const isDeployPreview = process.env.PREVIEW_DEPLOY === 'true';
 
 const config: Config = {
   future: {
+    // Turns Docusaurus v4 future flags on to make it easier to upgrade later
+    v4: true,
     // Make Docusaurus build faster - enabled by default
     // See https://github.com/facebook/docusaurus/issues/10556
     // See https://github.com/facebook/react-native-website/pull/4268

cnwebsite/package.json

@@ -50,31 +50,32 @@
     ]
   },
   "dependencies": {
-    "@docusaurus/core": "3.6.3",
-    "@docusaurus/faster": "3.6.3",
-    "@docusaurus/plugin-google-gtag": "3.6.3",
-    "@docusaurus/plugin-pwa": "3.6.3",
-    "@docusaurus/preset-classic": "3.6.3",
-    "docusaurus-plugin-sass": "^0.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@docusaurus/core": "3.8.1",
+    "@docusaurus/faster": "3.8.1",
+    "@docusaurus/plugin-google-gtag": "3.8.1",
+    "@docusaurus/plugin-pwa": "3.8.1",
+    "@docusaurus/preset-classic": "3.8.1",
+    "docusaurus-plugin-sass": "^0.2.6",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-github-btn": "^1.4.0",
     "sass": "1.76.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.6.3",
-    "@docusaurus/tsconfig": "3.6.3",
-    "@docusaurus/types": "3.6.3",
+    "@docusaurus/module-type-aliases": "3.8.1",
+    "@docusaurus/tsconfig": "3.8.1",
+    "@docusaurus/types": "3.8.1",
     "@react-native-website/lint-examples": "0.0.0",
     "@react-native-website/update-redirects": "0.0.0",
     "@types/google.analytics": "^0.0.46",
+    "@types/react": "^19.1.10",
     "alex": "^11.0.1",
     "case-police": "^1.0.0",
     "eslint": "^8.57.1",
     "fs-extra": "^11.2.0",
     "glob": "^11.0.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "remark-cli": "^12.0.1",
-    "typescript": "^5.7.2"
+    "typescript": "^5.9.2"
   }
 }

cnwebsite/src/css/_shared.scss

@@ -7,42 +7,36 @@
 
  %link-style {
   display: initial;
-  color: var(--ifm-font-color-base);
-  background-color: rgba(187, 239, 253, 0.3);
   line-height: calc(var(--ifm-font-size-base) + 4px);
-  border-bottom: 1px solid var(--ifm-hr-border-color);
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.15s;
 
   &:hover {
-    background-color: rgba(187, 239, 253, 0.6);
+    border-bottom-color: var(--ifm-color-primary-75);
   }
 }
 
 %link-style-dark {
-  background-color: rgba(97, 218, 251, 0.12);
-  border-bottom-color: rgba(97, 218, 251, 0.3);
+  color: var(--brand);
 
   &:hover {
-    background-color: rgba(97, 218, 251, 0.4);
-    border-bottom-color: var(--brand);
+    border-bottom-color: var(--ifm-color-primary-75);
   }
 }
 
 %hash-link-style {
-  background-color: transparent;
-  border-bottom: 0;
-  color: var(--subtle);
-
-  &:hover {
-    background-color: transparent;
-    color: var(--brand);
+  &,
+  &::before {
+    color: var(--subtle);
+    border-bottom: 0 !important;
   }
 }
 
 %button-link-style {
   display: inline-block;
   padding: 8px 16px;
   border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: var(--ifm-global-radius);
+  border-radius: 32px;
   color: var(--ifm-color-content-secondary);
 
   &:hover {