website: update router link. #409

Author: jaywcjlove

themes/gruvbox/package.json

@@ -2,7 +2,7 @@
   "name": "@uiw/codemirror-theme-gruvbox-dark",
   "version": "4.20.3",
   "description": "Theme gruvbox-dark for CodeMirror.",
-  "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox-dark",
+  "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox/dark",
   "author": "kenny wong <wowohoo@qq.com>",
   "license": "MIT",
   "main": "./cjs/index.js",

www/src/pages/theme/Preview.tsx

@@ -56,8 +56,9 @@ export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
   const { mdData } = useMdData(props.path);
   const childs = Children.toArray(props.children);
   const [previewDoc, setPreviewDoc] = useState(false);
-  const themeName = themePkg?.replace('@uiw/codemirror-theme-', '').replace('-', ' ');
-  const themeExtensionName = themePkg?.replace('@uiw/codemirror-theme-', '') + (!!mode ? `-${mode}` : '');
+  const themePkgNmae = !!mode ? themePkg?.replace(/-(light|dark)$/, '') : themePkg;
+  const themeName = themePkgNmae?.replace('@uiw/codemirror-theme-', '').replace('-', ' ');
+  const themeExtensionName = themePkgNmae?.replace('@uiw/codemirror-theme-', '') + (!!mode ? `-${mode}` : '');
   const extension = themeData[toCamelCase(themeExtensionName) as keyof typeof themeData];
   return (
     <Warpper>

www/src/pages/theme/home/index.tsx

@@ -74,7 +74,10 @@ export function ThemesHome() {
     <Warpper>
       <ThemesWarpper>
         {Object.keys(themeData).map((name, idx) => {
-          const linkName = (toSnakeCase(name) || []).join('/');
+          const linkName = (toSnakeCase(name) || [])
+            .join('-')
+            .replace(/-light$/, '/light')
+            .replace(/-dark$/, '/dark');
           return (
             <Link key={idx} to={`/theme/data/${linkName}`}>
               <ThemeCard>

www/src/router.tsx

@@ -317,6 +317,10 @@ export const routes: MenuRouteObject[] = [
               />
             ),
           },
+          {
+            path: 'data/gruvbox-dark',
+            element: <Navigate to="/theme/data/gruvbox/dark" replace />,
+          },
           {
             path: 'data/gruvbox/dark',
             label: 'Gruvbox Dark',
@@ -362,7 +366,7 @@ export const routes: MenuRouteObject[] = [
             ),
           },
           {
-            path: 'data/noctis/lilac',
+            path: 'data/noctis-lilac',
             label: 'noctis lilac',
             element: (
               <Preview
@@ -424,7 +428,7 @@ export const routes: MenuRouteObject[] = [
             ),
           },
           {
-            path: 'data/tokyo/night',
+            path: 'data/tokyo-night',
             label: 'tokyo night',
             element: (
               <Preview
@@ -434,7 +438,7 @@ export const routes: MenuRouteObject[] = [
             ),
           },
           {
-            path: 'data/tokyo/night/storm',
+            path: 'data/tokyo-night-storm',
             label: 'tokyo night storm',
             element: (
               <Preview
@@ -444,7 +448,7 @@ export const routes: MenuRouteObject[] = [
             ),
           },
           {
-            path: 'data/tokyo/night/day',
+            path: 'data/tokyo-night-day',
             label: 'tokyo night day',
             element: (
               <Preview
@@ -453,6 +457,10 @@ export const routes: MenuRouteObject[] = [
               />
             ),
           },
+          {
+            path: 'data/vscode',
+            element: <Navigate to="dark" replace />,
+          },
           {
             path: 'data/vscode/dark',
             label: 'VS Code',