@xyd-js/cli 0.1.0-xyd.3 → 0.1.0-xyd.31

package/.cli/plugins/xyd-plugin-zero/src/pages/docs.tsx

@@ -5,12 +5,11 @@ import {redirect} from "react-router";
 
 import {PageFrontMatter} from "@xyd-js/core"
 import {compileBySlug} from "@xyd-js/content"
+import {mapSettingsToProps} from "@xyd-js/framework/hydration";
+import {Framework, FwNav, type FwSidebarGroupProps} from "@xyd-js/framework/react";
 import getContentComponents from "@xyd-js/components/content";
 import {HomePage} from "@xyd-js/components/pages";
 import type {IBreadcrumb, INavLinks} from "@xyd-js/ui";
-import {mapSettingsToProps} from "@xyd-js/framework/hydration";
-import {Framework, FwNav} from "@xyd-js/framework/react";
-import type {FwSidebarGroupProps} from "@xyd-js/framework/react";
 
 import settings from 'virtual:xyd-settings';
 import Theme from "virtual:xyd-theme";
@@ -27,7 +26,22 @@ interface loaderData {
     code: string
 }
 
-const contentComponents = getContentComponents()
+const contentComponents = {
+    ...getContentComponents(),
+
+    HomePage: (props) => <HomePage
+        {...props}
+        // TODO: get props from theme about nav (middle etc)
+        // TODO: footer
+        // TODO: style
+        header={<div style={{marginLeft: "var(--xyd-global-page-gutter)"}}>
+            <FwNav kind="middle"/>
+        </div>}
+
+    >
+        {props.children}
+    </HomePage>
+}
 
 const supportedExtensions = {
     ".mdx": true,
@@ -48,6 +62,15 @@ export async function loader({request}: { request: any }) {
         return {}
     }
 
+    // TODO: in the future map instead of arr
+    if (settings.redirects && settings.redirects.length) {
+        for (const item of settings.redirects) {
+            if (item.source === getPathname(request.url)) {
+                return redirect(item.destination)
+            }
+        }
+    }
+
     let code = ""
     let error: any
 
@@ -87,6 +110,7 @@ export async function loader({request}: { request: any }) {
         console.error(error)
     }
 
+    console.timeEnd("docs loader")
     return {
         sidebarGroups,
         breadcrumbs,
@@ -133,7 +157,30 @@ export function MemoMDXComponent(codeComponent: any) {
 
 export default function CustomPage({loaderData, ...rest}: { loaderData: loaderData }) {
     const content = mdxContent(loaderData.code)
-    const Component = MemoMDXComponent(content.component)
+    const Content = MemoMDXComponent(content.component)
+
+    if (!Content) {
+        console.error("Content not found")
+        return null
+    }
+
+    let component: React.JSX.Element
+
+    if (content.page) {
+        component = <Content
+            components={{
+                ...contentComponents,
+            }}
+        />
+    } else {
+        component = <Theme>
+            <Content
+                components={{
+                    ...contentComponents,
+                }}
+            />
+        </Theme>
+    }
 
     return <Framework
         settings={settings}
@@ -142,25 +189,6 @@ export default function CustomPage({loaderData, ...rest}: { loaderData: loaderDa
         breadcrumbs={loaderData.breadcrumbs || []}
         navlinks={loaderData.navlinks}
     >
-        {content?.page ? <Component components={{
-            ...contentComponents,
-            // TODO: another page components
-            HomePage: (props) => <HomePage
-                {...props}
-                // TODO: get props from theme about nav (middle etc)
-                // TODO: footer
-                // TODO: style
-                header={<div style={{marginLeft: "var(--xyd-global-page-gutter)"}}>
-                    <FwNav kind="middle"/>
-                </div>}
-
-            >
-                {props.children}
-            </HomePage>,
-        }}/> : <Theme
-            themeSettings={content.themeSettings}
-        >
-            {Component ? <Component components={contentComponents}/> : <></>}
-        </Theme>}
+        {component}
     </Framework>
 }