refactor(docs): routing and add folder routes (#1892)

* refactor(docs): routing and add folder routes

* chore(docs): permanent redirect enabled

apps/docs/content/docs/guide/routing.mdx

@@ -54,7 +54,7 @@ Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't e
 
 #### Add the `useRouter`
 
-```tsx {10}
+```tsx {8}
 // app/providers.tsx
 'use client'
 
@@ -103,7 +103,7 @@ Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and ad
 from `next/router`, it returns a router object that can be used to perform navigation.
 
 
-```tsx
+```tsx {7}
 // pages/_app.tsx
 import type { AppProps } from 'next/app';
 import {NextUIProvider} from '@nextui-org/react';
@@ -129,7 +129,7 @@ The `useNavigate` hook from `react-router-dom` returns a `navigate` function tha
 Go to the `App` file commonly called `App.jsx` or `App.tsx`, add the `useNavigate` hook and pass the 
 `navigate` function to the `NextUIProvider`:
 
-```jsx {9}
+```jsx {6,9}
 // App.tsx or App.jsx
 import {BrowserRouter, useNavigate} from 'react-router-dom';
 import {NextUIProvider} from '@nextui-org/react';

apps/docs/next-redirect.js

@@ -6,31 +6,41 @@ const rootDir = path.join(__dirname, ".");
 const contentDir = path.join(rootDir, "content");
 const docsDir = path.join(contentDir, "docs");
 const componentsDocsDir = path.join(docsDir, "components");
+const guidesDocsDir = path.join(docsDir, "guide");
+const frameworksDocsDir = path.join(docsDir, "frameworks");
+const customizationDocsDir = path.join(docsDir, "customization");
 
-const getComponentsName = () => {
+const getFolderNames = (dir) => {
   const names = shell
-    .ls("-R", componentsDocsDir)
-    .map((file) => path.join(process.cwd(), componentsDocsDir, file))
+    .ls("-R", dir)
+    .map((file) => path.join(process.cwd(), dir, file))
     .filter((file) => file.endsWith(".mdx"))
     .map((file) => path.basename(file, ".mdx"));
 
   return names;
-};
-const getComponentsRoute = (names = []) => {
+}
+
+const getFolderRoutes = (names = [], prefix = "") => {
   return names.map((name) => {
     return {
       source: `/${name}`,
-      destination: `/docs/components/${name}`,
+      destination: `/docs/${prefix}/${name}`,
       permanent: true,
     };
   });
-};
+}
 
 async function redirect() {
-  const componentsName = getComponentsName();
+  const componentsName =getFolderNames(componentsDocsDir);
+  const guidesName = getFolderNames(guidesDocsDir);
+  const frameworksName = getFolderNames(frameworksDocsDir);
+  const  customizationName = getFolderNames(customizationDocsDir);
 
   return [
-    ...getComponentsRoute(componentsName),
+    ...getFolderRoutes(componentsName, "components"),
+    ...getFolderRoutes(guidesName, "guide"),
+    ...getFolderRoutes(frameworksName, "frameworks"),
+    ...getFolderRoutes(customizationName, "customization"),
     {
       source: "/docs",
       destination: "/docs/guide/introduction",