-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement HTMX for dynamic updates
- Loading branch information
Showing
9 changed files
with
807 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| package types |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| package embed | ||
|
|
||
| import ( | ||
| "encoding/json" | ||
|
|
||
| "github.com/ipfs/boxo/files" | ||
| motr "github.com/onsonr/motr/pkg/config" | ||
| ) | ||
|
|
||
| const SchemaVersion = 1 | ||
| const ( | ||
| AppManifestFileName = "app.webmanifest" | ||
| DWNConfigFileName = "dwn.json" | ||
| IndexHTMLFileName = "index.html" | ||
| MainJSFileName = "main.js" | ||
| ServiceWorkerFileName = "sw.js" | ||
| ) | ||
|
|
||
| // spawnVaultDirectory creates a new directory with the default files | ||
| func NewVaultFS(cfg *motr.Config) (files.Directory, error) { | ||
| manifestBz, err := NewWebManifest() | ||
| if err != nil { | ||
| return nil, err | ||
| } | ||
| cnfBz, err := json.Marshal(cfg) | ||
| if err != nil { | ||
| return nil, err | ||
| } | ||
| return files.NewMapDirectory(map[string]files.Node{ | ||
| AppManifestFileName: files.NewBytesFile(manifestBz), | ||
| DWNConfigFileName: files.NewBytesFile(cnfBz), | ||
| IndexHTMLFileName: files.NewBytesFile(IndexHTML), | ||
| MainJSFileName: files.NewBytesFile(MainJS), | ||
| ServiceWorkerFileName: files.NewBytesFile(WorkerJS), | ||
| }), nil | ||
| } | ||
|
|
||
| // NewVaultConfig returns the default vault config | ||
| func NewVaultConfig(addr string, ucanCID string) *motr.Config { | ||
| return &motr.Config{ | ||
| MotrToken: ucanCID, | ||
| MotrAddress: addr, | ||
| IpfsGatewayUrl: "http://localhost:80", | ||
| SonrApiUrl: "http://localhost:1317", | ||
| SonrRpcUrl: "http://localhost:26657", | ||
| SonrChainId: "sonr-testnet-1", | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| <!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" /> | ||
| <title>Sonr DWN</title> | ||
|
|
||
| <!-- HTMX --> | ||
| <script src="https://unpkg.com/htmx.org@1.9.10"></script> | ||
|
|
||
| <!-- WASM Support --> | ||
| <script src="https://cdn.jsdelivr.net/gh/golang/go@go1.22.5/misc/wasm/wasm_exec.js"></script> | ||
|
|
||
| <!-- Main JS --> | ||
| <script src="main.js"></script> | ||
|
|
||
| <!-- Tailwind (assuming you're using it based on your classes) --> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
|
|
||
| <!-- Add manifest for PWA support --> | ||
| <link | ||
| rel="manifest" | ||
| href="/app.webmanifest" | ||
| crossorigin="use-credentials" | ||
| /> | ||
|
|
||
| <!-- Offline detection styles --> | ||
| <style> | ||
| .offline-indicator { | ||
| display: none; | ||
| } | ||
|
|
||
| body.offline .offline-indicator { | ||
| display: block; | ||
| background: #f44336; | ||
| color: white; | ||
| text-align: center; | ||
| padding: 0.5rem; | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| z-index: 1000; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body | ||
| class="flex items-center justify-center h-full bg-zinc-50 lg:p-24 md:16 p-4" | ||
| > | ||
| <!-- Offline indicator --> | ||
| <div class="offline-indicator"> | ||
| You are currently offline. Some features may be limited. | ||
| </div> | ||
|
|
||
| <!-- Loading indicator --> | ||
| <div | ||
| id="loading-indicator" | ||
| class="fixed top-0 left-0 w-full h-1 bg-blue-200 transition-all duration-300" | ||
| style="display: none" | ||
| > | ||
| <div class="h-full bg-blue-600 w-0 transition-all duration-300"></div> | ||
| </div> | ||
|
|
||
| <main | ||
| class="flex-row items-center justify-center mx-auto w-fit max-w-screen-sm gap-y-3" | ||
| > | ||
| <div | ||
| id="content" | ||
| hx-get="/#" | ||
| hx-trigger="load" | ||
| hx-swap="outerHTML" | ||
| hx-indicator="#loading-indicator" | ||
| > | ||
| Loading... | ||
| </div> | ||
| </main> | ||
|
|
||
| <!-- WASM Ready Indicator (hidden) --> | ||
| <div | ||
| id="wasm-status" | ||
| class="hidden fixed bottom-4 right-4 p-2 rounded-md bg-green-500 text-white" | ||
| hx-swap-oob="true" | ||
| > | ||
| WASM Ready | ||
| </div> | ||
|
|
||
| <script> | ||
| // Initialize service worker | ||
| if ("serviceWorker" in navigator) { | ||
| window.addEventListener("load", async function () { | ||
| try { | ||
| const registration = | ||
| await navigator.serviceWorker.register("/sw.js"); | ||
| console.log( | ||
| "Service Worker registered with scope:", | ||
| registration.scope, | ||
| ); | ||
| } catch (error) { | ||
| console.error("Service Worker registration failed:", error); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| // HTMX loading indicator | ||
| htmx.on("htmx:beforeRequest", function (evt) { | ||
| document.getElementById("loading-indicator").style.display = "block"; | ||
| }); | ||
|
|
||
| htmx.on("htmx:afterRequest", function (evt) { | ||
| document.getElementById("loading-indicator").style.display = "none"; | ||
| }); | ||
|
|
||
| // WASM ready event handler | ||
| document.addEventListener("wasm-ready", function () { | ||
| const status = document.getElementById("wasm-status"); | ||
| status.classList.remove("hidden"); | ||
| setTimeout(() => { | ||
| status.classList.add("hidden"); | ||
| }, 3000); | ||
| }); | ||
|
|
||
| // Offline status handler | ||
| window.addEventListener("offline", function () { | ||
| document.body.classList.add("offline"); | ||
| }); | ||
|
|
||
| window.addEventListener("online", function () { | ||
| document.body.classList.remove("offline"); | ||
| }); | ||
|
|
||
| // Initial offline check | ||
| if (!navigator.onLine) { | ||
| document.body.classList.add("offline"); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.