✨ Built in render & side nav

Solsynth · Feb 19, 2024 · 40c57f1 · 40c57f1
1 parent 1e1693a
commit 40c57f1
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 114 deletions.
diff --git a/pkg/view/package.json b/pkg/view/package.json
@@ -11,9 +11,9 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.1",
     "@solidjs/router": "^0.10.10",
+    "garfish": "^1.17.4",
     "solid-js": "^1.8.7",
-    "universal-cookie": "^7.0.2",
-    "wujie": "^1.0.22"
+    "universal-cookie": "^7.0.2"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.17",

diff --git a/pkg/view/src/index.tsx b/pkg/view/src/index.tsx
@@ -11,7 +11,6 @@ import { Route, Router } from "@solidjs/router";
 import "@fortawesome/fontawesome-free/css/all.min.css";
 
 import RootLayout from "./layouts/RootLayout.tsx";
-import PageLayout from "./layouts/PageLayout.tsx";
 import { UserinfoProvider } from "./stores/userinfo.tsx";
 import { WellKnownProvider } from "./stores/wellKnown.tsx";
 
@@ -21,12 +20,8 @@ render(() => (
   <WellKnownProvider>
     <UserinfoProvider>
       <Router root={RootLayout}>
-        <Route component={PageLayout}>
-          <Route path="/" component={lazy(() => import("./pages/dashboard.tsx"))} />
-        </Route>
-        {/* TODO Implement built-in renderer */}
-        {/* Currently this will work, but not perfect, we are going to optimize it and enable it again. */}
-        {/* <Route path="/o/:slug" component={lazy(() => import("./pages/application.tsx"))} /> */}
+        <Route path="/" component={lazy(() => import("./pages/dashboard.tsx"))} />
+        <Route path="/o/:slug/*path" component={lazy(() => import("./pages/application.tsx"))} />
       </Router>
     </UserinfoProvider>
   </WellKnownProvider>

diff --git a/pkg/view/src/layouts/PageLayout.tsx b/pkg/view/src/layouts/PageLayout.tsx
diff --git a/pkg/view/src/layouts/RootLayout.tsx b/pkg/view/src/layouts/RootLayout.tsx
@@ -1,3 +1,4 @@
+import Navigator from "./shared/Navigator.tsx";
 import { readProfiles } from "../stores/userinfo.tsx";
 import { createSignal, Show } from "solid-js";
 import { readWellKnown } from "../stores/wellKnown.tsx";
@@ -15,7 +16,9 @@ export default function RootLayout(props: any) {
         </div>
       </div>
     }>
-      {props.children}
+      <Navigator>
+        <main class="h-screen">{props.children}</main>
+      </Navigator>
     </Show>
   );
 }
diff --git a/pkg/view/src/layouts/shared/Navigator.tsx b/pkg/view/src/layouts/shared/Navigator.tsx
@@ -1,9 +1,9 @@
-import { createMemo, Match, Switch } from "solid-js";
+import { createMemo, For, Show } from "solid-js";
 import { clearUserinfo, useUserinfo } from "../../stores/userinfo.tsx";
 import { useNavigate } from "@solidjs/router";
 import { useWellKnown } from "../../stores/wellKnown.tsx";
 
-export default function Navigator() {
+export default function Navigator(props: any) {
   const wellKnown = useWellKnown();
   const userinfo = useUserinfo();
   const navigate = useNavigate();
@@ -15,26 +15,61 @@ export default function Navigator() {
     navigate("/auth/login");
   }
 
+  function getDirectory(): any[] {
+    const dir = JSON.parse(JSON.stringify(wellKnown?.directory));
+    return Object.entries(dir).map(([k, v]: [string, any]) => {
+      v["id"] = k;
+      v["open"] = `/o/${k}`;
+      return v;
+    });
+  }
+
   return (
-    <div class="navbar bg-base-100 shadow-md px-5 z-10 fixed top-0">
-      <div class="navbar-start">
-        <a class="btn btn-ghost text-xl p-2 w-[48px] h-[48px] max-lg:ml-2.5" href="/">
-          <img width="40" height="40" src="/favicon.svg" alt="Logo" />
-        </a>
-      </div>
-      <div class="navbar-center flex">
-        <ul class="menu menu-horizontal px-1">
-        </ul>
+    <div class="drawer lg:drawer-open">
+      <input id="navigation-drawer" type="checkbox" class="drawer-toggle" />
+      <div class="drawer-content">
+        {props.children}
+
+        <label
+          for="navigation-drawer"
+          class="w-12 h-12 z-[99] btn btn-primary drawer-button lg:hidden fixed left-4 bottom-4"
+        >
+          <i class="fa-solid fa-rocket"></i>
+        </label>
       </div>
-      <div class="navbar-end pe-5">
-        <Switch>
-          <Match when={userinfo?.isLoggedIn}>
-            <button type="button" class="btn btn-sm btn-ghost" onClick={() => logout()}>Logout</button>
-          </Match>
-          <Match when={!userinfo?.isLoggedIn}>
-            <a href={`${components()["identity"]}/auth/login`} class="btn btn-sm btn-primary">Login</a>
-          </Match>
-        </Switch>
+      <div class="drawer-side z-[100]">
+        <label for="navigation-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+        <div class="p-4 w-80 min-h-full bg-base-200 text-base-content flex flex-col justify-between">
+          <ul class="menu">
+            <li>
+              <a class="flex items-center" href="/">
+                <i class="w-5 h-5 text-[14px] mt-[5px] text-center fa-solid fa-house"></i>
+                Dashboard
+              </a>
+            </li>
+            <div class="divider"></div>
+            <For each={getDirectory()}>
+              {item =>
+                <li>
+                  <a class="flex items-center" href={item.open}>
+                    <i class={`w-5 h-5 text-[14px] mt-[5px] text-center ${item.icon}`}></i>
+                    {item.name}
+                  </a>
+                </li>
+              }
+            </For>
+          </ul>
+
+          <ul class="menu">
+          <li>
+              <Show when={userinfo?.isLoggedIn} fallback={
+                <a href={`${components()["identity"]}/auth/login`} class="btn btn-sm glass">Login</a>
+              }>
+                <button type="button" class="btn btn-sm btn-ghost" onClick={() => logout()}>Logout</button>
+              </Show>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   );

diff --git a/pkg/view/src/pages/application.tsx b/pkg/view/src/pages/application.tsx
@@ -1,7 +1,7 @@
 import { createMemo, onMount } from "solid-js";
 import { useWellKnown } from "../stores/wellKnown.tsx";
 import { useParams } from "@solidjs/router";
-import { preloadApp, setupApp, startApp } from "wujie";
+import Garfish from "garfish";
 
 export default function ApplicationPage() {
   const wellKnown = useWellKnown();
@@ -14,18 +14,19 @@ export default function ApplicationPage() {
     return item;
   });
 
-  const cfg = createMemo(() => ({
-    el: "#subapp",
-    name: "x",
-    url: manifest().link,
-    exec: true,
-    sync: true
-  }));
 
-  onMount(() => {
-    setupApp(cfg());
-    preloadApp(cfg());
-    startApp(cfg()).then(r => console.log(r));
+  onMount(async () => {
+    // @ts-ignore
+    window.__LAUNCHPAD_TARGET__ = manifest().link;
+    const app = await Garfish.loadApp(manifest().id, {
+      domGetter: "#subapp",
+      entry: manifest().link,
+      basename: `/o/${params.slug}`,
+      cache: true,
+      sandbox: false
+    });
+
+    await app?.mount();
   });
 
   return (

diff --git a/pkg/view/src/pages/dashboard.tsx b/pkg/view/src/pages/dashboard.tsx
@@ -1,10 +1,7 @@
 import { useUserinfo } from "../stores/userinfo.tsx";
-import { useWellKnown } from "../stores/wellKnown.tsx";
-import { For } from "solid-js";
 
 export default function DashboardPage() {
   const userinfo = useUserinfo();
-  const wellKnown = useWellKnown();
 
   function getGreeting() {
     const currentHour = new Date().getHours();
@@ -18,17 +15,6 @@ export default function DashboardPage() {
     }
   }
 
-  function getDirectory(): any[] {
-    const dir = JSON.parse(JSON.stringify(wellKnown?.directory));
-    return Object.entries(dir).map(([k, v]: [string, any]) => {
-      v["id"] = k;
-      v["open"] = `/o/${k}`;
-      return v;
-    });
-  }
-
-  const clickableStyle: string = "bg-base-200 hover:bg-base-300 transition-all duration-500 w-full aspect-square";
-
   return (
     <div class="max-w-[720px] mx-auto pt-12">
       <div id="greeting" class="px-5">
@@ -38,18 +24,7 @@ export default function DashboardPage() {
 
       <div id="applications" class="mt-5">
         <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-8">
-          <For each={getDirectory()}>
-            {item => (
-              <a href={item.link} target="_blank">
-                <div class={`${clickableStyle} cursor-pointer flex items-center justify-center p-5 text-center`}>
-                  <div class="flex flex-col gap-2 tooltip" data-tip={item.description}>
-                    <i class={`text-base-content text-[32px] ${item.icon}`}></i>
-                    <span class="text-sm">{item.name}</span>
-                  </div>
-                </div>
-              </a>
-            )}
-          </For>
+          {/* TODO Put something special here */}
         </div>
       </div>
     </div>