Ohhhh this is great!!

components/header.go

@@ -0,0 +1,11 @@
+package components
+
+import "github.com/maxence-charriere/go-app/v9/pkg/app"
+
+type header struct {
+	app.Compo
+}
+
+func (h *header) Render() app.UI {
+	return app.Div().Text("Internetica Galactica").Class("header")
+}

components/homepage.go

@@ -0,0 +1,29 @@
+package components
+
+import (
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
+
+type Homepage struct {
+	app.Compo
+}
+
+func NewHomepage() *Homepage {
+	return &Homepage{}
+}
+
+func (p *Homepage) Render() app.UI {
+	return app.Div().Body(
+		&header{},
+		app.Div().Body(
+			app.Div().Body(
+				app.Ul().Body(
+					app.Li().Body(
+						app.A().Href("/").Text("Home"),
+					),
+				),
+			).Class("navbar"),
+			app.Div().Text("Dit is test tekst voor in de div content").Class("content"),
+		).Class("main"),
+	)
+}

main.go

@@ -4,43 +4,31 @@ import (
 	"log"
 	"net/http"
 
+	"git.home.dutchellie.nl/DutchEllie/proper-website-2/components"
 	"github.com/maxence-charriere/go-app/v9/pkg/app"
 )
 
-// The main function is the entry point where the app is configured and started.
-// It is executed in 2 different environments: A client (the web browser) and a
-// server.
 func main() {
-	// The first thing to do is to associate the hello component with a path.
-	//
-	// This is done by calling the Route() function,  which tells go-app what
-	// component to display for a given path, on both client and server-side.
-	app.Route("/", &hello{})
+	homepage := components.NewHomepage()
+	app.Route("/", homepage)
 
-	// Once the routes set up, the next thing to do is to either launch the app
-	// or the server that serves the app.
-	//
-	// When executed on the client-side, the RunWhenOnBrowser() function
-	// launches the app,  starting a loop that listens for app events and
-	// executes client instructions. Since it is a blocking call, the code below
-	// it will never be executed.
-	//
-	// When executed on the server-side, RunWhenOnBrowser() does nothing, which
-	// lets room for server implementation without the need for precompiling
-	// instructions.
+	// This is executed on the client side only.
+	// It handles client side stuff
+	// It exits immediately on the server side
 	app.RunWhenOnBrowser()
 
-	// Finally, launching the server that serves the app is done by using the Go
-	// standard HTTP package.
-	//
-	// The Handler is an HTTP handler that serves the client and all its
-	// required resources to make it work into a web browser. Here it is
-	// configured to handle requests with a path that starts with "/".
 	http.Handle("/", &app.Handler{
 		Name:        "Internetica Galactica",
 		Description: "A 1990's style PWA!",
-		,
-
+		Styles: []string{
+			"/web/static/style.css",
+			"/web/static/anisha.css",
+		},
+		CacheableResources: []string{
+			"/web/static/style.css",
+			"/web/static/anisha.css",
+			"/web/static/images/background_star.gif",
+		},
 	})
 
 	if err := http.ListenAndServe(":8000", nil); err != nil {

web/static/style.css

@@ -0,0 +1,53 @@
+html {
+	background-image: url(images/background_star.gif);
+}
+
+body {
+	width: 900px;
+	position: relative;
+	margin-left: auto;
+	margin-right: auto;
+	color:aliceblue;
+}
+
+.header {
+	border: 3px solid;
+	border-radius: 4px;
+	border-color: rgb(252, 230, 255);
+	background-color: rgb(54, 39, 48);
+	font-size: 5em;
+	font-family: anisha;
+	text-align: center;
+}
+
+.main {
+	margin-top: 5px;
+}
+
+.navbar {
+	border: 3px solid;
+	border-radius: 4px;
+	border-color: rgb(252, 230, 255);
+	background-color: rgb(54, 39, 48);
+	position: relative;
+	float:left;
+	width: 250px;
+	text-decoration: none;
+	list-style: none;
+}
+
+.navbar a, a:link, a:visited{
+	text-decoration: none;
+	color:rgb(252, 230, 255)
+}
+
+.content {
+	border: 3px solid;
+	border-radius: 4px;
+	border-color: rgb(252, 230, 255);
+	background-color: rgb(54, 39, 48);
+	position: relative;
+	float:right;
+	width: 633px;
+
+}