Add vecty example

2025-01-18 04:03:21 -08:00 · 2019-07-01 20:11:14 +01:00
parent 497bc79f39
commit f488b6c469
5 changed files with 137 additions and 0 deletions
--- a/vecty/index.html
+++ b/vecty/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<!--
+Copyright 2018 The Go Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html>
+
+<head>
+    <meta charset="utf-8">
+</head>
+
+<body>
+    <!--
+	Add the following polyfill for Microsoft Edge 17/18 support:
+	<script src="https://cdn.jsdelivr.net/npm/text-encoding@0.7.0/lib/encoding.min.js"></script>
+	(see https://caniuse.com/#feat=textencoder)
+	-->
+    <script src="wasm_exec.js"></script>
+    <script>
+        if (!WebAssembly.instantiateStreaming) { // polyfill
+            WebAssembly.instantiateStreaming = async (resp, importObject) => {
+                const source = await (await resp).arrayBuffer();
+                return await WebAssembly.instantiate(source, importObject);
+            };
+        }
+
+        const go = new Go();
+        let mod, inst;
+        WebAssembly.instantiateStreaming(fetch("test.wasm"), go.importObject).then((result) => {
+            mod = result.module;
+            inst = result.instance;
+            go.run(inst);
+        }).catch((err) => {
+            console.error(err);
+        });
+    </script>
+</body>
+
+</html>
--- a/vecty/main.go
+++ b/vecty/main.go
@@ -0,0 +1,78 @@
+package main
+
+import (
+	"github.com/gopherjs/vecty"
+	"github.com/gopherjs/vecty/elem"
+	"github.com/gopherjs/vecty/event"
+	"github.com/microcosm-cc/bluemonday"
+	"github.com/slimsag/blackfriday"
+)
+
+func main() {
+	vecty.SetTitle("Markdown Demo")
+	vecty.RenderBody(&PageView{
+		Input: `# Markdown Example
+
+This is a live editor, try editing the Markdown on the right of the page.
+`,
+	})
+}
+
+// PageView is our main page component.
+type PageView struct {
+	vecty.Core
+	Input string
+}
+
+// Render implements the vecty.Component interface.
+func (p *PageView) Render() vecty.ComponentOrHTML {
+	return elem.Body(
+		// Display a textarea on the right-hand side of the page.
+		elem.Div(
+			vecty.Markup(
+				vecty.Style("float", "right"),
+			),
+			elem.TextArea(
+				vecty.Markup(
+					vecty.Style("font-family", "monospace"),
+					vecty.Property("rows", 14),
+					vecty.Property("cols", 70),
+
+					// When input is typed into the textarea, update the local
+					// component state and rerender.
+					event.Input(func(e *vecty.Event) {
+						p.Input = e.Target.Get("value").String()
+						vecty.Rerender(p)
+					}),
+				),
+				vecty.Text(p.Input), // initial textarea text.
+			),
+		),
+
+		// Render the markdown.
+		&Markdown{Input: p.Input},
+	)
+}
+
+// Markdown is a simple component which renders the Input markdown as sanitized
+// HTML into a div.
+type Markdown struct {
+	vecty.Core
+	Input string `vecty:"prop"`
+}
+
+// Render implements the vecty.Component interface.
+func (m *Markdown) Render() vecty.ComponentOrHTML {
+	// Render the markdown input into HTML using Blackfriday.
+	unsafeHTML := blackfriday.Run([]byte(m.Input))
+
+	// Sanitize the HTML.
+	safeHTML := string(bluemonday.UGCPolicy().SanitizeBytes(unsafeHTML))
+
+	// Return the HTML, which we guarantee to be safe / sanitized.
+	return elem.Div(
+		vecty.Markup(
+			vecty.UnsafeHTML(safeHTML),
+		),
+	)
+}