@@ -0,0 +1,154 @@
+package main
+
+import (
+	g "go.alanpearce.eu/gomponents"
+	c "go.alanpearce.eu/gomponents/components"
+	. "go.alanpearce.eu/gomponents/html"
+)
+
+const style = `
+:root {
+  --width: 800px;
+  --font-main: Verdana, sans-serif;
+  --font-secondary: Verdana, sans-serif;
+  --font-scale: 1em;
+  --background-color: #fff;
+  --heading-color: #222;
+  --text-color: #444;
+  --link-color: #3273dc;
+  --visited-color: #8b6fcb;
+  --code-background-color: #f2f2f2;
+  --code-color: #222;
+  --blockquote-color: #222;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #01242e;
+    --heading-color: #eee;
+    --text-color: #ddd;
+    --link-color: #8cc2dd;
+    --visited-color: #8b6fcb;
+    --code-background-color: #000;
+    --code-color: #ddd;
+    --blockquote-color: #ccc;
+  }
+}
+
+body {
+  font-family: var(--font-secondary);
+  font-size: var(--font-scale);
+  margin: auto;
+  padding: 20px;
+  max-width: var(--width);
+  text-align: left;
+  background-color: var(--background-color);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  line-height: 1.5;
+  color: var(--text-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-main);
+  color: var(--heading-color);
+  & > a {
+    color: var(--heading-color);
+  }
+}
+
+a {
+  color: var(--link-color);
+  cursor: pointer;
+}
+
+nav a {
+  margin-right: 8px;
+}
+
+strong,
+b {
+  color: var(--heading-color);
+}
+
+main {
+  margin-top: 2ex;
+  line-height: 1.6;
+}
+
+table {
+  width: 100%;
+}
+`
+
+func Page(config *Config, pkg string, children ...g.Node) g.Node {
+	return c.HTML5(c.HTML5Props{
+		Title:    config.Title,
+		Language: "en-GB",
+		Head: []g.Node{
+			g.If(pkg != "",
+				g.Group{
+					Meta(Name("go-import"), Content(importString(config, pkg))),
+					Meta(Name("go-source"), Content(sourceString(config, pkg))),
+				},
+			),
+			StyleEl(g.Raw(style)),
+		},
+		Body: []g.Node{
+			Header(
+				H1(g.Text(config.Title)),
+				Nav(
+					g.Map(config.Menu, func(link *MenuLink) g.Node {
+						return A(Href(link.URL), g.Text(link.Name))
+					}),
+				),
+			),
+			Main(
+				children...,
+			),
+		},
+		HTMLAttrs: []g.Node{},
+	})
+}
+
+func ListPage(config *Config) g.Node {
+	return Page(config, "",
+		Table(
+			THead(
+				Tr(
+					Th(g.Text("Name")),
+					Th(g.Text("Source")),
+					Th(g.Text("Documentation")),
+				),
+			),
+			TBody(
+				g.Map(config.Packages, func(pkg string) g.Node {
+					return Tr(
+						Td(g.Text(packageImportPath(config, pkg))),
+						Td(A(Href(packageForgeURL(config, pkg)), g.Text("Source"))),
+						Td(GodocBadge(config, pkg)),
+					)
+				}),
+			),
+		),
+	)
+}
+
+func PackagePage(config *Config, pkg string) g.Node {
+	return Page(config, pkg,
+		P(
+			g.Text("You're probably looking for the "),
+			A(Href(godocURL(config, pkg)), g.Text("documentation")),
+			g.Text("."),
+		),
+	)
+}
+
+func GodocBadge(config *Config, pkg string) g.Node {
+	return A(Href(godocURL(config, pkg)), g.Text("Go Reference"))
+}