trying to get the JSs to work (#43)

* trying to get the JSs to work * finally got the highlight working and the copy
Skarlso · Dec 31, 2023 · d7e3849 · d7e3849
1 parent 762448b
commit d7e3849
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 89 deletions.
diff --git a/wasm/app-worker.js b/wasm/app-worker.js
@@ -1,8 +1,8 @@
-const cacheName = "app-" + "e31aa1c4d4bf560a2b0d649865fab57a2bf48d9c";
-const resourcesToCache = ["/","/app.css","/app.js","/manifest.webmanifest","/wasm_exec.js","/web/app.wasm","/web/css/alert.css","/web/img/logo.png","https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js","https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css","https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js","https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/yaml.min.js","https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"];
+const cacheName = "app-" + "15bb89e03821d00f824b9b5cbea7b5b036e6fe2a";
+const resourcesToCache = ["/","/app.css","/app.js","/manifest.webmanifest","/wasm_exec.js","/web/app.wasm","/web/css/alert.css","/web/img/logo.png","https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js","https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css","https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css","https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css"];
 
 self.addEventListener("install", (event) => {
-  console.log("installing app worker e31aa1c4d4bf560a2b0d649865fab57a2bf48d9c");
+  console.log("installing app worker 15bb89e03821d00f824b9b5cbea7b5b036e6fe2a");
 
   event.waitUntil(
     caches
@@ -28,7 +28,7 @@ self.addEventListener("activate", (event) => {
       );
     })
   );
-  console.log("app worker e31aa1c4d4bf560a2b0d649865fab57a2bf48d9c is activated");
+  console.log("app worker 15bb89e03821d00f824b9b5cbea7b5b036e6fe2a is activated");
 });
 
 self.addEventListener("fetch", (event) => {

diff --git a/wasm/app.go b/wasm/app.go
@@ -4,6 +4,7 @@ import (
 	"bytes"
 	"fmt"
 	"sort"
+	"strconv"
 
 	"github.com/maxence-charriere/go-app/v9/pkg/app"
 	"k8s.io/apiextensions-apiserver/pkg/apis/apiextensions/v1beta1"
@@ -89,17 +90,30 @@ func (h *crdView) Render() app.UI {
 		yamlContent := app.Div().Class("accordion").ID("yaml-accordion-" + version.Version).Body(
 			app.Div().Class("accordion-item").Body(
 				app.H2().Class("accordion-header").Body(
-					app.Button().Class("accordion-button").Type("button").DataSets(
-						map[string]any{
-							"bs-toggle": "collapse",
-							"bs-target": "#yaml-accordion-collapse-" + version.Version}).
-						Aria("expanded", "false").
-						Aria("controls", "yaml-accordion-collapse-"+version.Version).
-						Body(app.Text("Details")),
+					app.Div().Class("container").Body(app.Div().Class("row").Body(
+						app.Div().Class("col").Body(
+							app.Button().Class("accordion-button").Type("button").DataSets(
+								map[string]any{
+									"bs-toggle": "collapse",
+									"bs-target": "#yaml-accordion-collapse-" + version.Version}).
+								Aria("expanded", "false").
+								Aria("controls", "yaml-accordion-collapse-"+version.Version).
+								Body(app.Text("Details")),
+						),
+						app.Div().Class("col").Body(
+							app.Button().Class("clippy-"+strconv.Itoa(i)).DataSet("clipboard-target", "#yaml-sample-"+version.Version).Body(
+								app.Script().Text(fmt.Sprintf("new ClipboardJS('.clippy-%d');", i)),
+								app.I().Class("fa fa-clipboard"),
+							),
+						),
+					)),
 				),
 				app.Div().Class("accordion-collapse collapse").ID("yaml-accordion-collapse-"+version.Version).DataSet("bs-parent", "#yaml-accordion-"+version.Version).Body(
 					app.Div().Class("accordion-body").Body(
-						app.Pre().Body(app.Code().Class("language-yaml").Body(app.Text(version.YAML))),
+						app.Pre().Body(
+							app.Code().Class("language-yaml").ID("yaml-sample-"+version.Version).Body(
+								app.Text(version.YAML),
+							)),
 					),
 				),
 			),
@@ -123,7 +137,11 @@ func (h *crdView) Render() app.UI {
 		return div
 	}))
 
-	return wrapper.Body(container)
+	return wrapper.Body(
+		app.Script().Src("https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"),
+		app.Script().Src("https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"),
+		container,
+	)
 }
 
 var borderOpacity = map[int]string{

diff --git a/wasm/app.js b/wasm/app.js
@@ -5,7 +5,7 @@ var goappNav = function () {};
 var goappOnUpdate = function () {};
 var goappOnAppInstallChange = function () {};
 
-const goappEnv = {"GOAPP_INTERNAL_URLS":"null","GOAPP_ROOT_PREFIX":"","GOAPP_STATIC_RESOURCES_URL":"","GOAPP_VERSION":"e31aa1c4d4bf560a2b0d649865fab57a2bf48d9c"};
+const goappEnv = {"GOAPP_INTERNAL_URLS":"null","GOAPP_ROOT_PREFIX":"","GOAPP_STATIC_RESOURCES_URL":"","GOAPP_VERSION":"15bb89e03821d00f824b9b5cbea7b5b036e6fe2a"};
 const goappLoadingLabel = "{progress}%";
 const goappWasmContentLengthHeader = "";
 

diff --git a/wasm/index.html b/wasm/index.html
@@ -3,69 +3,67 @@
 <head>
 <meta charset="UTF-8">
 <meta name="author" content="Gergely Brautigam">
-<meta content name="description">
+<meta name="description" content>
 <meta name="keywords" content>
 <meta name="theme-color" content="#2d2c2c">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">
-<meta property="og:url" content="http://127.0.0.1:49600/">
+<meta property="og:url" content="http://127.0.0.1:55692/">
 <meta property="og:title" content="Preview CRDs">
 <meta property="og:description" content>
 <meta property="og:type" content="website">
-<meta property="og:image" content>
+<meta content property="og:image">
 <title>Preview CRDs</title>
-<link href="/app.css" as="style" type="text/css" rel="preload">
-<link type="text/css" rel="preload" href="/web/css/alert.css" as="style">
-<link type="text/css" rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" as="style">
-<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" as="style" type="text/css">
-<link type="text/css" rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" as="style">
-<link href="https://raw.githubusercontent.com/maxence-charriere/go-app/master/docs/web/icon.svg" rel="icon">
+<link as="style" type="text/css" rel="preload" href="/app.css">
+<link as="style" type="text/css" rel="preload" href="/web/css/alert.css">
+<link type="text/css" rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css" as="style">
+<link type="text/css" rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" as="style">
+<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" as="style" type="text/css">
+<link rel="icon" href="https://raw.githubusercontent.com/maxence-charriere/go-app/master/docs/web/icon.svg">
 <link rel="apple-touch-icon" href="/web/img/logo.png">
 <link rel="manifest" href="/manifest.webmanifest">
 <link rel="stylesheet" type="text/css" href="/app.css">
-<link rel="stylesheet" type="text/css" href="/web/css/alert.css">
-<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+<link href="/web/css/alert.css" rel="stylesheet" type="text/css">
+<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css" rel="stylesheet" type="text/css">
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css">
-<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <script defer src="/wasm_exec.js"></script>
 <script defer src="/app.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/yaml.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-<script>hljs.highlightAll();</script>
-			<meta charset="utf-8">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
+<meta charset="utf-8">
 			<meta name="viewport" content="width=device-width, initial-scale=1">
 			<style>
-    header{
-        margin: 0px;
-        padding: 20px 20px 0px  ;
-        border-bottom: 1px solid black;
-    }
-    nav{
-        display: flex;
-    }
-    .title{
-        position: relative;
-        top: -5px;
-        margin-right: auto;
-        font-size: 25px;
-    }
-    .title:hover{
-        color: rgb(0, 0, 164);
-        cursor: pointer;
-    }
-    li{
-        width: 50px;
-        margin-left: 20px;
-        display: inline-block;
-        list-style: none;
-    }
-</style>
+				header{
+					margin: 0px;
+					padding: 20px 20px 0px  ;
+					border-bottom: 1px solid black;
+				}
+				nav{
+					display: flex;
+				}
+				.title{
+					position: relative;
+					top: -5px;
+					margin-right: auto;
+					font-size: 25px;
+				}
+				.title:hover{
+					color: rgb(0, 0, 164);
+					cursor: pointer;
+				}
+				li{
+					width: 50px;
+					margin-left: 20px;
+					display: inline-block;
+					list-style: none;
+				}
+			</style>
 </head>
 <body>
 <main></main>
 <aside id="app-wasm-loader" class="goapp-app-info">
-<img class="goapp-logo goapp-spin" src="/web/img/logo.png" id="app-wasm-loader-icon">
-<p id="app-wasm-loader-label" class="goapp-label">0%</p>
+<img id="app-wasm-loader-icon" class="goapp-logo goapp-spin" src="/web/img/logo.png">
+<p class="goapp-label" id="app-wasm-loader-label">0%</p>
 </aside>
 </body>
 </html>
diff --git a/wasm/main.go b/wasm/main.go
@@ -49,46 +49,44 @@ func main() {
 		HTML:   func() app.HTMLHtml { return app.Html().DataSet("bs-core", "modern").DataSet("bs-theme", "dark") },
 		Styles: []string{
 			"web/css/alert.css",
-			"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css",
+			"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css",
 			"https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css",
 			"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css",
 		},
 		RawHeaders: []string{
 			`
-			<script>hljs.highlightAll();</script>
 			<meta charset="utf-8">
 			<meta name="viewport" content="width=device-width, initial-scale=1">
 			<style>
-    header{
-        margin: 0px;
-        padding: 20px 20px 0px  ;
-        border-bottom: 1px solid black;
-    }
-    nav{
-        display: flex;
-    }
-    .title{
-        position: relative;
-        top: -5px;
-        margin-right: auto;
-        font-size: 25px;
-    }
-    .title:hover{
-        color: rgb(0, 0, 164);
-        cursor: pointer;
-    }
-    li{
-        width: 50px;
-        margin-left: 20px;
-        display: inline-block;
-        list-style: none;
-    }
-</style>`,
+				header{
+					margin: 0px;
+					padding: 20px 20px 0px  ;
+					border-bottom: 1px solid black;
+				}
+				nav{
+					display: flex;
+				}
+				.title{
+					position: relative;
+					top: -5px;
+					margin-right: auto;
+					font-size: 25px;
+				}
+				.title:hover{
+					color: rgb(0, 0, 164);
+					cursor: pointer;
+				}
+				li{
+					width: 50px;
+					margin-left: 20px;
+					display: inline-block;
+					list-style: none;
+				}
+			</style>`,
 		},
 		Scripts: []string{
-			"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js",
-			"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/yaml.min.js",
 			"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
+			"https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js",
 		},
 		Icon: app.Icon{
 			Default: "/web/img/logo.png",

diff --git a/wasm/web/app.wasm b/wasm/web/app.wasm