github: load css/js extensions from ext dir in repo. closes #123

treehousedev · May 4, 2023 · a824035 · a824035
1 parent a2f967e
commit a824035
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 12 deletions.
diff --git a/lib/backend/github.ts b/lib/backend/github.ts
@@ -170,22 +170,53 @@ export class GitHubBackend {
         console.warn("lock stolen!");
       }
     }, 5000);
+  }
 
-
-    // load style.css if exists
+  async loadExtensions() {
     try {
-      // TODO: get the root dir and check for style.css first so this doesn't create 404 error in console
-      const resp = await this.client.rest.repos.getContent({
+      const dirCheck = await this.client.rest.repos.getContent({
         owner: this.user?.userID(), 
         repo: this.repo, 
-        path: "style.css",
+        path: "",
         random: Math.random().toString(36).substring(2)
       });
-      const css = document.createElement("link");
-      css.setAttribute("href", `data:text/css;charset=utf-8;base64,${resp.data.content}`);
-      css.setAttribute("rel", "stylesheet");
-      css.setAttribute("type", "text/css");
-      document.head.appendChild(css);
+      if (dirCheck.data.find(o => o.type === "dir" && o.name === "ext")) {
+        const dirList = await this.client.rest.repos.getContent({
+          owner: this.user?.userID(), 
+          repo: this.repo, 
+          path: "ext",
+          random: Math.random().toString(36).substring(2)
+        });
+        for (const file of dirList.data) {
+          if (file.name.endsWith(".css")) {
+            // Load CSS 
+            const resp = await this.client.rest.repos.getContent({
+              owner: this.user?.userID(), 
+              repo: this.repo, 
+              path: file.path,
+              random: Math.random().toString(36).substring(2)
+            });
+            const css = document.createElement("link");
+            css.setAttribute("href", `data:text/css;charset=utf-8;base64,${resp.data.content}`);
+            css.setAttribute("rel", "stylesheet");
+            css.setAttribute("type", "text/css");
+            document.head.appendChild(css);
+          } else if (file.name.endsWith(".js")) {
+            // Load JavaScript
+            const resp = await this.client.rest.repos.getContent({
+              owner: this.user?.userID(), 
+              repo: this.repo, 
+              path: file.path,
+              random: Math.random().toString(36).substring(2)
+            });
+            const js = document.createElement("script");
+            js.setAttribute("type", "module");
+            js.setAttribute("src", `data:text/javascript;charset=utf-8;base64,${resp.data.content}`);
+            document.head.appendChild(js);
+          }
+        }
+      }
+
     } catch (e: Error) {}
 
   }

diff --git a/lib/mod.ts b/lib/mod.ts
@@ -40,8 +40,10 @@ export async function setup(document: Document, target: HTMLElement, backend: Ba
   if (backend.initialize) {
     await backend.initialize();
   }
+
   const workbench = new Workbench(backend);
   window.workbench = workbench;
+
   await workbench.initialize();
 
   // pretty specific to github backend right now

diff --git a/lib/ui/app.tsx b/lib/ui/app.tsx
@@ -23,7 +23,7 @@ export const App: m.Component = {
           </div>
           <div class="grow sidebar-maincontent">
             {state.open && workbench.workspace.bus.root().children.map(node => <NavNode node={node} expanded={true} level={0} workbench={workbench} />)}
-          </div>  
+          </div>
           <div class="sidebar-bottomsection">
             <svg onclick={toggle} xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sidebar"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
           </div>

diff --git a/lib/view/views.ts b/lib/view/views.ts
@@ -2,6 +2,32 @@ import empty from "./empty.tsx";
 import list from "./list.tsx";
 import table from "./table.tsx";
 
+export const views = {
+  list,
+  table
+}
+
 export function getView(name) {
-  return {list, table}[name] || empty;
+  return views[name] || empty;
+}
+
+window.registerView = (name, view) => {
+  views[name] = view;
+  workbench.commands.registerCommand({
+    id: `view-${name}`,
+    title: `View as ${toTitleCase(name)}`,
+    action: (ctx: Context) => {
+      if (!ctx.node) return;
+      ctx.node.setAttr("view", name);
+    }
+  });
+}
+
+function toTitleCase(str) {
+  return str.replace(
+    /\w\S*/g,
+    function(txt) {
+      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+    }
+  );
 }
diff --git a/lib/workbench/workbench.ts b/lib/workbench/workbench.ts
@@ -66,6 +66,10 @@ export class Workbench {
     } else {
       this.openNewPanel(this.workspace.mainNode());
     }
+
+    if (this.backend.loadExtensions) {
+      await this.backend.loadExtensions();
+    }
 
     m.redraw();