refactor: move document head includes out of via configuration into their own append funcs; update examples

internal/examples/livereload/livereload.go

@@ -16,42 +16,39 @@ func LiveReloadPlugin(v *via.V) {
 
 		<-r.Context().Done()
 	})
-}
-
-func liveReloadScript() h.H {
-	return h.Script(h.Raw(`
-if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-  const evtSource = new EventSource('/dev/reload');
-  let overlay = null;
-  let showTimer = null;
-  
-  evtSource.onerror = () => {
-    evtSource.close();
-    
-    showTimer = setTimeout(() => {
-      if (!overlay) {
-        overlay = document.createElement('div');
-        overlay.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(200, 200, 200, 0.95); padding: 20px 40px; border-radius: 8px; color: #333; font-size: 24px; z-index: 999999; font-family: -apple-system, sans-serif;';
-        overlay.textContent = '🔌 Reconnecting...';
-        document.body.appendChild(overlay);
-      }
-    }, 1000);
-    
-    (async function poll() {
-      for (let i = 0; i < 100; i++) {
-        try {
-          const res = await fetch('/', { method: 'HEAD', signal: AbortSignal.timeout(1000) });
-          if (res.ok) {
-            clearTimeout(showTimer);
-            if (overlay) overlay.remove();
-            location.reload();
-            return;
-          }
-        } catch (e) {}
-        await new Promise(r => setTimeout(r, 50));
-      }
-    })();
-  };
-}
-`))
+	v.AppendToFoot(h.Script(h.Raw(`
+		if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+			const evtSource = new EventSource('/dev/reload');
+			let overlay = null;
+			let showTimer = null;
+			
+			evtSource.onerror = () => {
+				evtSource.close();
+				
+				showTimer = setTimeout(() => {
+					if (!overlay) {
+						overlay = document.createElement('div');
+						overlay.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(200, 200, 200, 0.95); padding: 20px 40px; border-radius: 8px; color: #333; font-size: 24px; z-index: 999999; font-family: -apple-system, sans-serif;';
+						overlay.textContent = '🔌 Reconnecting...';
+						document.body.appendChild(overlay);
+					}
+				}, 1000);
+				
+				(async function poll() {
+					for (let i = 0; i < 100; i++) {
+						try {
+							const res = await fetch('/', { method: 'HEAD', signal: AbortSignal.timeout(1000) });
+							if (res.ok) {
+								clearTimeout(showTimer);
+								if (overlay) overlay.remove();
+								location.reload();
+								return;
+							}
+						} catch (e) {}
+						await new Promise(r => setTimeout(r, 50));
+					}
+				})();
+			};
+		}
+`)))
 }

internal/examples/livereload/main.go

@@ -10,13 +10,9 @@ type Counter struct{ Count int }
 func main() {
 	v := via.New()
 
-	LiveReloadPlugin(v)
-
 	v.Config(via.Options{
 		DocumentTitle: "Live Reload",
-		DocumentHeadIncludes: []h.H{
-			liveReloadScript(),
-		},
+		Plugins:       []via.Plugin{LiveReloadPlugin},
 	})
 
 	v.Page("/", func(c *via.Context) {
@@ -29,7 +25,7 @@ func main() {
 		})
 
 		c.View(func() h.H {
-			return h.Div(h.Class("container"),
+			return h.Div(
 				h.H1(h.Text("Live Reload")),
 				h.P(h.Textf("Count: %d", data.Count)),
 				h.P(h.Span(h.Text("Step: ")), h.Span(step.Text())),

internal/examples/picocss/main.go

@@ -8,12 +8,7 @@ import (
 func main() {
 	v := via.New()
 
-	v.Config(via.Options{
-		DocumentTitle: "Via",
-		DocumentHeadIncludes: []h.H{
-			h.Link(h.Rel("stylesheet"), h.Href("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css")),
-		},
-	})
+	v.AppendToHead(h.Link(h.Rel("stylesheet"), h.Href("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css")))
 
 	v.Page("/", func(c *via.Context) {
 		c.View(func() h.H {

internal/examples/plugins/main.go

@@ -8,8 +8,8 @@ import (
 	"github.com/go-via/via/h"
 )
 
-// In this example we create a Via application with a plugin that adds PicoCSS. The plugin
-// is handed to Via in the app Configuration.
+// Example of a Via application with a plugin that adds PicoCSS. The plugin
+// is handed to Via in the Configuration.
 
 //go:embed pico.yellow.min.css
 var picoCSSFile []byte
@@ -41,9 +41,5 @@ func PicoCSSPlugin(v *via.V) {
 		w.Header().Set("Content-Type", "text/css")
 		_, _ = w.Write(picoCSSFile)
 	})
-	v.Config(via.Options{
-		DocumentHeadIncludes: []h.H{
-			h.Link(h.Rel("stylesheet"), h.Href("/_plugins/picocss/assets/style.css")),
-		},
-	})
+	v.AppendToHead(h.Link(h.Rel("stylesheet"), h.Href("/_plugins/picocss/assets/style.css")))
 }

internal/examples/realtimechart/main.go

@@ -13,13 +13,10 @@ import (
 func main() {
 	v := via.New()
 
-	v.Config(via.Options{
-		DocumentTitle: "Via",
-		DocumentHeadIncludes: []h.H{
-			h.Link(h.Rel("stylesheet"), h.Href("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css")),
-			h.Script(h.Src("https://unpkg.com/echarts@6.0.0/dist/echarts.min.js")),
-		},
-	})
+	v.AppendToHead(
+		h.Link(h.Rel("stylesheet"), h.Href("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css")),
+		h.Script(h.Src("https://unpkg.com/echarts@6.0.0/dist/echarts.min.js")),
+	)
 
 	v.Page("/", func(c *via.Context) {
 		chartComp := c.Component(chartCompFn)