Laid the groundwork!

components/aboutpage.go

@@ -0,0 +1,31 @@
+package components
+
+import "github.com/maxence-charriere/go-app/v9/pkg/app"
+
+type AboutPage struct {
+	app.Compo
+}
+
+func NewAboutPage() *AboutPage {
+	return &AboutPage{}
+}
+
+func (a *AboutPage) Render() app.UI {
+	return app.Div().Body(
+		&header{},
+		app.Div().Body(
+			newNavbar(),
+			&aboutPanel{},
+		).Class("main"),
+	)
+}
+
+type aboutPanel struct {
+	app.Compo
+}
+
+func (a *aboutPanel) Render() app.UI {
+	return app.Div().Body(
+		app.Raw(`<p>I am a 21 year old computer science student, living and studying in The Netherlands.</p>`),
+	).Class("content")
+}

components/content-view.go

@@ -0,0 +1,23 @@
+package components
+
+import (
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
+
+type contentView struct {
+	app.Compo
+
+	panels []app.UI
+}
+
+func newContentView(panels ...app.UI) *contentView {
+	return &contentView{panels: panels}
+}
+
+func (c *contentView) Render() app.UI {
+	return app.Div().Body(
+		app.Range(c.panels).Slice(func(i int) app.UI {
+			return c.panels[i]
+		}),
+	)
+}

components/homepage.go

@@ -6,24 +6,24 @@ import (
 
 type Homepage struct {
 	app.Compo
+
+	content *contentView
 }
 
 func NewHomepage() *Homepage {
-	return &Homepage{}
+	p1 := newHomePanel()
+	c := newContentView(p1)
+	return &Homepage{content: c}
 }
 
 func (p *Homepage) Render() app.UI {
 	return app.Div().Body(
 		&header{},
 		app.Div().Body(
-			app.Div().Body(
+			newNavbar(),
-				app.Ul().Body(
+			newHomePanel(),
-					app.Li().Body(
+			newHomePanel(),
-						app.A().Href("/").Text("Home"),
+			newHomePanel(),
-					),
-				),
-			).Class("navbar"),
-			app.Div().Text("Dit is test tekst voor in de div content").Class("content"),
 		).Class("main"),
 	)
 }

components/homepanel.go

@@ -0,0 +1,21 @@
+package components
+
+import "github.com/maxence-charriere/go-app/v9/pkg/app"
+
+type homePanel struct {
+	app.Compo
+}
+
+func newHomePanel() *homePanel {
+	return &homePanel{}
+}
+
+func (p *homePanel) Render() app.UI {
+	return app.Div().Body(
+		app.Raw(`<p>Welcome to my website, internet traveler!
+This website is my creative outlet and a way of expressing myself.
+As of now, it's probably the most impressive thing I've ever coded.
+<br>
+Please enjoy yourself and do sign the guestbook!!</p>`),
+	).Class("content")
+}

components/navbar.go

@@ -0,0 +1,24 @@
+package components
+
+import "github.com/maxence-charriere/go-app/v9/pkg/app"
+
+type navbar struct {
+	app.Compo
+}
+
+func newNavbar() *navbar {
+	return &navbar{}
+}
+
+func (n *navbar) Render() app.UI {
+	return app.Div().Body(
+		app.Ul().Body(
+			app.Li().Body(
+				app.A().Href("/").Text("Home"),
+			),
+			app.Li().Body(
+				app.A().Href("/about").Text("About"),
+			),
+		),
+	).Class("navbar")
+}

main.go

@@ -10,7 +10,9 @@ import (
 
 func main() {
 	homepage := components.NewHomepage()
+	aboutpage := components.NewAboutPage()
 	app.Route("/", homepage)
+	app.Route("/about", aboutpage)
 
 	// This is executed on the client side only.
 	// It handles client side stuff

test-website/static/style.css

@@ -46,8 +46,11 @@ body {
 	border-radius: 4px;
 	border-color: rgb(252, 230, 255);
 	background-color: rgb(54, 39, 48);
+	margin-bottom: 5px;
 	position: relative;
 	float:right;
 	width: 633px;
+	padding: 10px;
+
 
 }

web/static/style.css

@@ -46,8 +46,16 @@ body {
 	border-radius: 4px;
 	border-color: rgb(252, 230, 255);
 	background-color: rgb(54, 39, 48);
+	margin-bottom: 5px;
 	position: relative;
 	float:right;
-	width: 633px;
+	width: 614px;
-
+	padding: 10px;
+}
+
+.content p {
+	width: 80%;
+	margin-left: 10px;
+	margin-top: 5px;
+	margin-bottom: 5px;
 }