feat(custom-widgets): complete Custom JSX v2 (#6390)

apps/docs/src/pages/workshop/admin/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+
+import { WorkshopAdmin } from "@site/src/components/workshop/WorkshopAdmin";
+
+export default function WorkshopAdminRoute() {
+  const { siteConfig } = useDocusaurusContext();
+  const workshopUrl = (siteConfig.customFields?.workshopUrl as string | undefined) ?? "";
+  return (
+    <Layout title="Workshop administration" noFooter>
+      <WorkshopAdmin workshopUrl={workshopUrl} />
+    </Layout>
+  );
+}

apps/docs/src/pages/workshop/index.tsx

@@ -3,6 +3,9 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 
+import { WorkshopApp, WorkshopListingFallback } from "@site/src/components/workshop/WorkshopApp";
+import { WorkshopErrorBoundary } from "@site/src/components/workshop/WorkshopErrorBoundary";
+
 export default function WorkshopPage() {
   const { siteConfig } = useDocusaurusContext();
   const configuredWorkshopUrl = (siteConfig.customFields?.workshopUrl as string | undefined) ?? "";
@@ -10,11 +13,12 @@ export default function WorkshopPage() {
   return (
     <Layout title="Workshop" description="Community custom CSS and custom widgets for Homarr">
       <main className="marketplace bg-background text-foreground min-h-[80vh]">
-        <BrowserOnly fallback={<div style={{ minHeight: "50vh" }} />}>
-          {() => {
-            const { WorkshopApp } = require("@site/src/components/workshop/WorkshopApp");
-            return <WorkshopApp workshopUrl={configuredWorkshopUrl || window.location.origin} />;
-          }}
+        <BrowserOnly fallback={<WorkshopListingFallback />}>
+          {() => (
+            <WorkshopErrorBoundary>
+              <WorkshopApp workshopUrl={configuredWorkshopUrl || window.location.origin} />
+            </WorkshopErrorBoundary>
+          )}
         </BrowserOnly>
       </main>
     </Layout>