fix(nebula): use bunx for tailwindcss build

app/proxy/command.go

@@ -1,8 +1,6 @@
 package proxy
 
 import (
-	"log"
-
 	"github.com/spf13/cobra"
 )
 
@@ -12,11 +10,11 @@ func NewProxyCmd() *cobra.Command {
 		Short: "Starts the DWN proxy server for the local IPFS node",
 		RunE: func(cmd *cobra.Command, args []string) error {
 			// Load config
-			c, err := LoadConfig(".")
-			if err != nil {
-				return err
-			}
-			log.Printf("Config: %+v", c)
+			// c, err := LoadConfig(".")
+			// if err != nil {
+			// 	return err
+			// }
+			// log.Printf("Config: %+v", c)
 			startServer()
 			return nil
 		},

devbox.json

@@ -51,7 +51,7 @@
         "make sh-testnet"
       ],
       "serve:proxy": [
-        "go run ./cmd/sonrd/main.go dwn-proxy"
+        "./build/sonrd dwn-proxy"
       ],
       "watch:air": [
         "make air"

nebula/.deps.mjs

@@ -0,0 +1,38 @@
+// deps.mjs
+import { mkdir, writeFile } from "fs/promises";
+import fetch from "node-fetch";
+import path from "path";
+
+async function fetchAndSave(url, outputPath) {
+	try {
+		const response = await fetch(url);
+		if (!response.ok) {
+			throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
+		}
+		const data = await response.text();
+		await writeFile(outputPath, data, "utf8");
+		console.log(`Fetched and saved: ${outputPath}`);
+	} catch (error) {
+		console.error(`Error fetching ${url}:`, error);
+	}
+}
+
+async function main() {
+	// Ensure the assets directories exist
+	await mkdir("./assets/js", { recursive: true });
+	await mkdir("./assets/css", { recursive: true });
+
+	// Fetch htmx.min.js
+	await fetchAndSave(
+		"https://cdn.sonr.io/js/htmx.min.js",
+		"./assets/js/htmx.min.js",
+	);
+
+	// Fetch alpine.min.js
+	await fetchAndSave(
+		"https://unpkg.com/alpinejs@latest/dist/cdn.min.js",
+		"./assets/js/alpine.min.js",
+	);
+}
+
+main();

nebula/assets/js/motr.js

@@ -1,3 +1,3 @@
-"use strict";
-// src/ts/main.ts
+import "htmx.org";
+import "alpinejs";
 console.log("Hello from TypeScript!");

nebula/nebula.go

@@ -2,7 +2,6 @@ package nebula
 
 import (
 	"embed"
-	"io/fs"
 	"net/http"
 	"os"
 
@@ -12,20 +11,8 @@ import (
 //go:embed assets
 var embeddedFiles embed.FS
 
-func getFileSystem(useOS bool) http.FileSystem {
-	if useOS {
-		return http.FS(os.DirFS("assets"))
-	}
-
-	fsys, err := fs.Sub(embeddedFiles, "assets")
-	if err != nil {
-		panic(err)
-	}
-
-	return http.FS(fsys)
-}
-
 func UseAssets(e *echo.Echo) echo.HandlerFunc {
-	assets := http.FileServer(getFileSystem(true))
+	embFs := http.FS(os.DirFS("assets"))
+	assets := http.FileServer(embFs)
 	return echo.WrapHandler(assets)
 }

nebula/package.json

@@ -1,14 +1,20 @@
 {
   "scripts": {
+    "fetch:dependencies": "bun run .deps.mjs",
     "build:ts": "tsc",
-    "build:css": "bunx tailwindcss -i ./src/styles.css -o ./assets/styles.css",
-    "build": "bun run build:ts && bun run build:css",
+    "build:css": "bunx tailwindcss -i ./src/styles.css -o ./assets/css/styles.css",
+    "build": "bun run fetch:dependencies && bun run build:ts && bun run build:css",
     "watch:ts": "tsc -w",
-    "watch:css": "bunx tailwindcss -i ./src/styles.css -o ./assets/styles.css --watch",
+    "watch:css": "bunx tailwindcss -i ./src/styles.css -o ./assets/css/styles.css --watch",
     "watch": "bun run watch:ts & bun run watch:css"
   },
   "devDependencies": {
     "tailwindcss": "^3.3.0",
     "typescript": "^4.9.0"
+  },
+  "dependencies": {
+    "alpinejs": "^3.14.1",
+    "htmx.org": "^1.9.12",
+    "node-fetch": "^3.3.2"
   }
 }

nebula/src/main.ts

@@ -1,255 +0,0 @@
-import Dexie from "dexie";
-import {
-	PublicKeyCredentialRequestOptions,
-	PublicKeyCredentialCreationOptions,
-} from "@simplewebauthn/types";
-
-export class Motr {
-	constructor(config) {
-		this.config = config;
-		this.vault = null;
-		this.initializeVault();
-	}
-
-	initializeVault() {
-		const { schema } = this.config;
-		this.vault = new Dexie("Vault");
-		this.vault.version(schema.version).stores(schema);
-	}
-
-	// Account methods
-	async insertAccount(accountData) {
-		return this.vault.account.add(accountData);
-	}
-
-	async getAccount(id) {
-		return this.vault.account.get(id);
-	}
-
-	async updateAccount(id, accountData) {
-		return this.vault.account.update(id, accountData);
-	}
-
-	async deleteAccount(id) {
-		return this.vault.account.delete(id);
-	}
-
-	// Asset methods
-	async insertAsset(assetData) {
-		return this.vault.asset.add(assetData);
-	}
-
-	async getAsset(id) {
-		return this.vault.asset.get(id);
-	}
-
-	async updateAsset(id, assetData) {
-		return this.vault.asset.update(id, assetData);
-	}
-
-	async deleteAsset(id) {
-		return this.vault.asset.delete(id);
-	}
-
-	// Chain methods
-	async insertChain(chainData) {
-		return this.vault.chain.add(chainData);
-	}
-
-	async getChain(id) {
-		return this.vault.chain.get(id);
-	}
-
-	async updateChain(id, chainData) {
-		return this.vault.chain.update(id, chainData);
-	}
-
-	async deleteChain(id) {
-		return this.vault.chain.delete(id);
-	}
-
-	// Credential methods
-	async insertCredential(credentialData) {
-		const publicKey = await this.createPublicKeyCredential(credentialData);
-		credentialData.credentialId = publicKey.id;
-		credentialData.publicKey = publicKey.publicKey;
-		return this.vault.credential.add(credentialData);
-	}
-
-	async getCredential(id) {
-		return this.vault.credential.get(id);
-	}
-
-	async updateCredential(id, credentialData) {
-		return this.vault.credential.update(id, credentialData);
-	}
-
-	async deleteCredential(id) {
-		return this.vault.credential.delete(id);
-	}
-
-	// JWK methods
-	async insertJwk(jwkData) {
-		return this.vault.jwk.add(jwkData);
-	}
-
-	async getJwk(id) {
-		return this.vault.jwk.get(id);
-	}
-
-	async updateJwk(id, jwkData) {
-		return this.vault.jwk.update(id, jwkData);
-	}
-
-	async deleteJwk(id) {
-		return this.vault.jwk.delete(id);
-	}
-
-	// Grant methods
-	async insertGrant(grantData) {
-		return this.vault.grant.add(grantData);
-	}
-
-	async getGrant(id) {
-		return this.vault.grant.get(id);
-	}
-
-	async updateGrant(id, grantData) {
-		return this.vault.grant.update(id, grantData);
-	}
-
-	async deleteGrant(id) {
-		return this.vault.grant.delete(id);
-	}
-
-	// Keyshare methods
-	async insertKeyshare(keyshareData) {
-		return this.vault.keyshare.add(keyshareData);
-	}
-
-	async getKeyshare(id) {
-		return this.vault.keyshare.get(id);
-	}
-
-	async updateKeyshare(id, keyshareData) {
-		return this.vault.keyshare.update(id, keyshareData);
-	}
-
-	async deleteKeyshare(id) {
-		return this.vault.keyshare.delete(id);
-	}
-
-	// PublicKey methods
-	async insertPublicKey(publicKeyData) {
-		return this.vault.publicKey.add(publicKeyData);
-	}
-
-	async getPublicKey(id) {
-		return this.vault.publicKey.get(id);
-	}
-
-	async updatePublicKey(id, publicKeyData) {
-		return this.vault.publicKey.update(id, publicKeyData);
-	}
-
-	async deletePublicKey(id) {
-		return this.vault.publicKey.delete(id);
-	}
-
-	// Profile methods
-	async insertProfile(profileData) {
-		return this.vault.profile.add(profileData);
-	}
-
-	async getProfile(id) {
-		return this.vault.profile.get(id);
-	}
-
-	async updateProfile(id, profileData) {
-		return this.vault.profile.update(id, profileData);
-	}
-
-	async deleteProfile(id) {
-		return this.vault.profile.delete(id);
-	}
-
-	// WebAuthn methods
-	async createPublicKeyCredential(): Promise<PublicKeyCredentialRequestOptions> {
-		const publicKeyCredentialCreationOptions = {
-			challenge: new Uint8Array(32),
-			rp: {
-				name: this.config.motr.origin,
-				id: new URL(this.config.motr.origin).hostname,
-			},
-			user: {
-				id: new TextEncoder().encode(options.subject),
-				name: options.subject,
-				displayName: options.label,
-			},
-			pubKeyCredParams: [
-				{ alg: -7, type: "public-key" },
-				{ alg: -257, type: "public-key" },
-			],
-			authenticatorSelection: {
-				authenticatorAttachment: "platform",
-				userVerification: "required",
-			},
-			timeout: 60000,
-			attestation: "direct",
-		};
-
-		try {
-			const credential = await navigator.credentials.create({
-				publicKey: publicKeyCredentialCreationOptions,
-			});
-
-			const publicKeyJwk = await crypto.subtle.exportKey(
-				"jwk",
-				credential.response.getPublicKey(),
-			);
-
-			return {
-				id: credential.id,
-				publicKey: publicKeyJwk,
-				type: credential.type,
-				transports: credential.response.getTransports(),
-			};
-		} catch (error) {
-			console.error("Error creating credential:", error);
-			throw error;
-		}
-	}
-
-	async getPublicKeyCredential(options) {
-		const publicKeyCredentialRequestOptions = {
-			challenge: new Uint8Array(32),
-			rpId: new URL(this.config.motr.origin).hostname,
-			allowCredentials: options.allowCredentials || [],
-			userVerification: "required",
-			timeout: 60000,
-		};
-
-		try {
-			const assertion = await navigator.credentials.get({
-				publicKey: publicKeyCredentialRequestOptions,
-			});
-
-			return {
-				id: assertion.id,
-				type: assertion.type,
-				rawId: new Uint8Array(assertion.rawId),
-				response: {
-					authenticatorData: new Uint8Array(
-						assertion.response.authenticatorData,
-					),
-					clientDataJSON: new Uint8Array(assertion.response.clientDataJSON),
-					signature: new Uint8Array(assertion.response.signature),
-					userHandle: new Uint8Array(assertion.response.userHandle),
-				},
-			};
-		} catch (error) {
-			console.error("Error getting credential:", error);
-			throw error;
-		}
-	}
-}

nebula/src/motr.ts

@@ -0,0 +1,5 @@
+import "htmx.org";
+import "alpinejs";
+import Dexie from "dexie";
+
+console.log("Hello from TypeScript!");

nebula/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "outDir": "./assets",
+    "outDir": "./assets/js",
     "rootDir": "./src",
     "target": "ES6",
     "module": "ES6",

x/vault/internal/index.templ

@@ -1,6 +1,5 @@
 package vault
 
-
 var motrHandle = templ.NewOnceHandle()
 
 templ importScripts() {
@@ -10,13 +9,13 @@ templ importScripts() {
 }
 
 templ indexFile(cfg string) {
-    <!doctype html>
+	<!DOCTYPE html>
 	<html lang="en">
 		<head>
-            <meta charset="UTF-8" />
-            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-            <link href="https://cdn.sonr.io/stylesheet.css" rel="stylesheet" />
+			<meta charset="UTF-8"/>
+			<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<link href="https://cdn.sonr.io/stylesheet.css" rel="stylesheet"/>
 			@importScripts()
 			<style>
                 [x-cloak] {
@@ -44,7 +43,7 @@ templ indexFile(cfg string) {
 				<div id="output">Loading...</div>
 			</main>
 			@motrHandle.Once() {
-                <script src="./motr.mjs" type="module"></script>
+				<script src="/assets/main.js" type="module"></script>
 				@initializeMotr(cfg)
 			}
 		</body>
@@ -52,7 +51,7 @@ templ indexFile(cfg string) {
 }
 
 templ serviceWorker() {
-<script>
+	<script>
 </script>
 }
 
@@ -108,4 +107,3 @@ script initializeMotr(config string) {
     // Run the demo when the page loads
     window.onload = demo;
 }
-