From b60f030880d057e6b94eb560116ee463f181945c Mon Sep 17 00:00:00 2001 From: DutchEllie Date: Tue, 1 Mar 2022 17:07:33 +0100 Subject: [PATCH] Laid the groundwork! --- components/aboutpage.go | 31 +++++++++++++++++++++++++++++++ components/content-view.go | 23 +++++++++++++++++++++++ components/homepage.go | 18 +++++++++--------- components/homepanel.go | 21 +++++++++++++++++++++ components/navbar.go | 24 ++++++++++++++++++++++++ main.go | 2 ++ test-website/static/style.css | 3 +++ web/static/style.css | 12 ++++++++++-- 8 files changed, 123 insertions(+), 11 deletions(-) create mode 100644 components/aboutpage.go create mode 100644 components/content-view.go create mode 100644 components/homepanel.go create mode 100644 components/navbar.go diff --git a/components/aboutpage.go b/components/aboutpage.go new file mode 100644 index 0000000..7c5fc8e --- /dev/null +++ b/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(`

I am a 21 year old computer science student, living and studying in The Netherlands.

`), + ).Class("content") +} diff --git a/components/content-view.go b/components/content-view.go new file mode 100644 index 0000000..790248d --- /dev/null +++ b/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] + }), + ) +} diff --git a/components/homepage.go b/components/homepage.go index 4d46fc1..add9107 100644 --- a/components/homepage.go +++ b/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( - 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"), + newNavbar(), + newHomePanel(), + newHomePanel(), + newHomePanel(), ).Class("main"), ) } diff --git a/components/homepanel.go b/components/homepanel.go new file mode 100644 index 0000000..378e124 --- /dev/null +++ b/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(`

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. +
+Please enjoy yourself and do sign the guestbook!!

`), + ).Class("content") +} diff --git a/components/navbar.go b/components/navbar.go new file mode 100644 index 0000000..6cd6463 --- /dev/null +++ b/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") +} diff --git a/main.go b/main.go index 363f696..8b45928 100644 --- a/main.go +++ b/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 diff --git a/test-website/static/style.css b/test-website/static/style.css index e7d1a38..5503631 100644 --- a/test-website/static/style.css +++ b/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; + } \ No newline at end of file diff --git a/web/static/style.css b/web/static/style.css index e7d1a38..4058661 100644 --- a/web/static/style.css +++ b/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; +} -} \ No newline at end of file +.content p { + width: 80%; + margin-left: 10px; + margin-top: 5px; + margin-bottom: 5px; +}