feat: implement CDN support for assets

This commit is contained in:
Prad Nukala 2024-10-07 16:38:10 -04:00
parent 8bd68c4269
commit fa7b11198e
3 changed files with 171 additions and 144 deletions

View File

@ -1797,10 +1797,6 @@ select{
background-color: rgb(24 24 27 / var(--tw-bg-opacity)); background-color: rgb(24 24 27 / var(--tw-bg-opacity));
} }
.bg-opacity-50{
--tw-bg-opacity: 0.5;
}
.bg-opacity-90{ .bg-opacity-90{
--tw-bg-opacity: 0.9; --tw-bg-opacity: 0.9;
} }

View File

@ -4,9 +4,22 @@ const (
CDNPath = "https://cdn.sonr.id" CDNPath = "https://cdn.sonr.id"
) )
var serviceWorkerHandle = templ.NewOnceHandle() var (
serviceWorkerHandle = templ.NewOnceHandle()
stylesHandle = templ.NewOnceHandle()
alpineHandle = templ.NewOnceHandle()
htmxHandle = templ.NewOnceHandle()
)
script RegisterServiceWorker() { func cdnPath(path string, local bool) string {
if local {
return path
}
return CDNPath + path
}
templ RegisterServiceWorker() {
<script>
if ("serviceWorker" in navigator) { if ("serviceWorker" in navigator) {
window.addEventListener("load", function() { window.addEventListener("load", function() {
navigator.serviceWorker navigator.serviceWorker
@ -19,78 +32,24 @@ script RegisterServiceWorker() {
}); });
}); });
} }
</script>
} }
templ ImportScripts() { templ Styles(local bool) {
<script src="https://cdn.sonr.io/js/htmx.min.js"></script> @stylesHandle.Once() {
<script src="https://cdn.tailwindcss.com"></script> <link href={ cdnPath("/assets/css/styles.css", local) } rel="stylesheet"/>
<script src="https://unpkg.com/alpinejs" defer></script> }
} }
templ indexFile(cfg string) { templ Alpine(local bool) {
<!DOCTYPE html> @alpineHandle.Once() {
<html lang="en"> <script src={ cdnPath("/js/alpine.min.js", local) } defer></script>
<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"/>
@importScripts()
<style>
[x-cloak] {
display: none;
}
</style>
<title>Sonr DWN</title>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function() {
navigator.serviceWorker
.register("/sw.js")
.then(function (registration) {
console.log("Service Worker registered with scope:", registration.scope);
})
.catch(function (error) {
console.log("Service Worker registration failed:", error);
});
});
}
</script>
</head>
<body class="flex items-center justify-center h-full bg-neutral-50 lg:p-24 md:16 p-4">
<main class="flex-row items-center justify-center mx-auto w-fit max-w-screen-sm gap-y-3">
<div id="output">Loading...</div>
</main>
@ServiceWorkerHandle.Once() {
<script src="/assets/main.js" type="module"></script>
@initializeServiceWorker(cfg)
}
</body>
</html>
} }
script initializeServiceWorker(config string) { templ Htmx(local bool) {
const serviceWorker = new ServiceWorker(JSON.parse(config)); @htmxHandle.Once() {
<script src={ cdnPath("/js/htmx.min.js", local) }></script>
async function demo() { }
try {
// Insert a new account
const accountId = await serviceWorker.insertAccount({
name: 'John Doe',
address: '0x1234567890123456789012345678901234567890',
balance: 100,
});
console.log('Account created:', accountId);
// Get the account
const account = await serviceWorker.getAccount(accountId);
console.log('Account:', account);
}
catch (error) {
console.error('Error:', error);
}
}
} }

View File

@ -12,30 +12,21 @@ const (
CDNPath = "https://cdn.sonr.id" CDNPath = "https://cdn.sonr.id"
) )
var serviceWorkerHandle = templ.NewOnceHandle() var (
serviceWorkerHandle = templ.NewOnceHandle()
stylesHandle = templ.NewOnceHandle()
alpineHandle = templ.NewOnceHandle()
htmxHandle = templ.NewOnceHandle()
)
func RegisterServiceWorker() templ.ComponentScript { func cdnPath(path string, local bool) string {
return templ.ComponentScript{ if local {
Name: `__templ_RegisterServiceWorker_a2fb`, return path
Function: `function __templ_RegisterServiceWorker_a2fb(){if ("serviceWorker" in navigator) {
window.addEventListener("load", function() {
navigator.serviceWorker
.register("/sw.js")
.then(function (registration) {
console.log("Service Worker registered with scope:", registration.scope);
})
.catch(function (error) {
console.log("Service Worker registration failed:", error);
});
});
}
}`,
Call: templ.SafeScript(`__templ_RegisterServiceWorker_a2fb`),
CallInline: templ.SafeScriptInline(`__templ_RegisterServiceWorker_a2fb`),
} }
return CDNPath + path
} }
func ImportScripts() templ.Component { func RegisterServiceWorker() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@ -56,7 +47,7 @@ func ImportScripts() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent templ_7745c5c3_Var1 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script src=\"https://cdn.sonr.io/js/htmx.min.js\"></script><script src=\"https://cdn.tailwindcss.com\"></script><script src=\"https://unpkg.com/alpinejs\" defer></script>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\n if (\"serviceWorker\" in navigator) {\n window.addEventListener(\"load\", function() {\n navigator.serviceWorker\n .register(\"/sw.js\")\n .then(function (registration) {\n console.log(\"Service Worker registered with scope:\", registration.scope);\n })\n .catch(function (error) {\n console.log(\"Service Worker registration failed:\", error);\n });\n });\n }\n </script>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -64,7 +55,7 @@ func ImportScripts() templ.Component {
}) })
} }
func indexFile(cfg string) templ.Component { func Styles(local bool) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@ -85,18 +76,6 @@ func indexFile(cfg string) templ.Component {
templ_7745c5c3_Var2 = templ.NopComponent templ_7745c5c3_Var2 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!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\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = importScripts().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<style>\n [x-cloak] {\n display: none;\n }\n </style><title>Sonr DWN</title><script>\n if (\"serviceWorker\" in navigator) {\n window.addEventListener(\"load\", function() {\n navigator.serviceWorker\n .register(\"/sw.js\")\n .then(function (registration) {\n console.log(\"Service Worker registered with scope:\", registration.scope);\n })\n .catch(function (error) {\n console.log(\"Service Worker registration failed:\", error);\n });\n });\n }\n </script></head><body class=\"flex items-center justify-center h-full bg-neutral-50 lg:p-24 md:16 p-4\"><main class=\"flex-row items-center justify-center mx-auto w-fit max-w-screen-sm gap-y-3\"><div id=\"output\">Loading...</div></main>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Var3 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { templ_7745c5c3_Var3 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W) templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
@ -109,21 +88,26 @@ func indexFile(cfg string) templ.Component {
}() }()
} }
ctx = templ.InitializeContext(ctx) ctx = templ.InitializeContext(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script src=\"/assets/main.js\" type=\"module\"></script> ") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link href=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = initializeServiceWorker(cfg).Render(ctx, templ_7745c5c3_Buffer) var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(cdnPath("/assets/css/styles.css", local))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/global/state/worker.templ`, Line: 40, Col: 55}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" rel=\"stylesheet\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
return templ_7745c5c3_Err return templ_7745c5c3_Err
}) })
templ_7745c5c3_Err = ServiceWorkerHandle.Once().Render(templ.WithChildren(ctx, templ_7745c5c3_Var3), templ_7745c5c3_Buffer) templ_7745c5c3_Err = stylesHandle.Once().Render(templ.WithChildren(ctx, templ_7745c5c3_Var3), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</body></html>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -131,36 +115,124 @@ func indexFile(cfg string) templ.Component {
}) })
} }
func initializeServiceWorker(config string) templ.ComponentScript { func Alpine(local bool) templ.Component {
return templ.ComponentScript{ return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
Name: `__templ_initializeServiceWorker_8c3c`, templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
Function: `function __templ_initializeServiceWorker_8c3c(config){const serviceWorker = new ServiceWorker(JSON.parse(config)); if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var5 := templ.GetChildren(ctx)
if templ_7745c5c3_Var5 == nil {
templ_7745c5c3_Var5 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Var6 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script src=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(cdnPath("/js/alpine.min.js", local))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/global/state/worker.templ`, Line: 46, Col: 51}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" defer></script>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
templ_7745c5c3_Err = alpineHandle.Once().Render(templ.WithChildren(ctx, templ_7745c5c3_Var6), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
}
async function demo() { func Htmx(local bool) templ.Component {
try { return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
// Insert a new account templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
const accountId = await serviceWorker.insertAccount({ if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
name: 'John Doe', return templ_7745c5c3_CtxErr
address: '0x1234567890123456789012345678901234567890', }
balance: 100, templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
}); if !templ_7745c5c3_IsBuffer {
defer func() {
console.log('Account created:', accountId); templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
// Get the account templ_7745c5c3_Err = templ_7745c5c3_BufErr
const account = await serviceWorker.getAccount(accountId); }
}()
console.log('Account:', account); }
ctx = templ.InitializeContext(ctx)
} templ_7745c5c3_Var8 := templ.GetChildren(ctx)
catch (error) { if templ_7745c5c3_Var8 == nil {
console.error('Error:', error); templ_7745c5c3_Var8 = templ.NopComponent
} }
} ctx = templ.ClearChildren(ctx)
}`, templ_7745c5c3_Var9 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
Call: templ.SafeScript(`__templ_initializeServiceWorker_8c3c`, config), templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
CallInline: templ.SafeScriptInline(`__templ_initializeServiceWorker_8c3c`, config), templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
} if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script src=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(cdnPath("/js/htmx.min.js", local))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/global/state/worker.templ`, Line: 52, Col: 51}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></script>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
templ_7745c5c3_Err = htmxHandle.Once().Render(templ.WithChildren(ctx, templ_7745c5c3_Var9), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
} }
var _ = templruntime.GeneratedTemplate var _ = templruntime.GeneratedTemplate