Major refactor

Dockerfile

@@ -3,8 +3,8 @@ ARG APIURL
 WORKDIR /project
 ADD . /project/
 RUN go mod tidy
-RUN GOARCH=wasm GOOS=js go build -ldflags="-X 'dutchellie.nl/DutchEllie/proper-website-2/components.ApiURL=$APIURL'" -o web/app.wasm
+RUN GOARCH=wasm GOOS=js go build -o web/app.wasm -ldflags="-X 'main.ApiURL=$APIURL'" ./src
-RUN	go build -ldflags="-X 'dutchellie.nl/DutchEllie/proper-website-2/components.ApiURL=$APIURL'" -o app
+RUN	go build -o app -ldflags="-X 'main.ApiURL=$APIURL'" ./src
 
 FROM alpine:latest AS staging
 RUN apk --no-cache add ca-certificates

Makefile

@@ -2,12 +2,12 @@ APIURL_prod := https://api.nicecock.eu/api/comment
 APIURL_staging := https://api.nicecock.eu/api/testingcomment
 
 build:
-	GOARCH=wasm GOOS=js go build -ldflags="-X 'dutchellie.nl/DutchEllie/proper-website-2/components.ApiURL=${APIURL_staging}'" -o web/app.wasm
+	GOARCH=wasm GOOS=js go build -o web/app.wasm -ldflags="-X 'main.ApiURL=${APIURL_staging}'"  ./src
-	go build -ldflags="-X 'dutchellie.nl/DutchEllie/proper-website-2/components.ApiURL=${APIURL_staging}'" -o app
+	go build -o app -ldflags="-X 'main.ApiURL=${APIURL_staging}'" ./src
 
 build-prod:
-	GOARCH=wasm GOOS=js go build -ldflags="-X 'dutchellie.nl/DutchEllie/proper-website-2/components.ApiURL=${APIURL_prod}'" -o web/app.wasm
+	GOARCH=wasm GOOS=js go build -o web/app.wasm -ldflags="-X 'main.ApiURL=${APIURL_prod}'" ./src
-	go build -ldflags="-X 'dutchellie.nl/DutchEllie/proper-website-2/components.ApiURL=${APIURL_prod}'" -o app
+	go build -o app -ldflags="-X 'main.ApiURL=${APIURL_prod}'" ./src
 
 run: build
 	./app

components/content-view.go

@@ -1,23 +0,0 @@
-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

@@ -1,67 +0,0 @@
-package components
-
-import (
-	"bytes"
-	"encoding/json"
-	"fmt"
-	"net/http"
-
-	"dutchellie.nl/DutchEllie/proper-website-2/entity"
-	"github.com/maxence-charriere/go-app/v9/pkg/app"
-)
-
-var (
-	ApiURL string
-)
-
-type Homepage struct {
-	app.Compo
-
-	showGuestbook bool
-
-	page string
-}
-
-func NewHomepage() *Homepage {
-	return &Homepage{showGuestbook: true, page: "home"}
-}
-
-func (p *Homepage) Render() app.UI {
-	gbp := newGuestbookPanel()
-	return app.Div().Body(
-		&header{},
-		&navbar{},
-		&homePanel{
-			onShowClick: func() {
-				p.showGuestbook = !p.showGuestbook
-			},
-		},
-		&bannerPanel{},
-		&guestbookForm{
-			OnSubmit: func(name, message string) {
-				var comment entity.Comment
-				comment.Name = name
-				comment.Message = message
-
-				jsondata, err := json.Marshal(comment)
-				if err != nil {
-					fmt.Printf("err: %v\n", err)
-					return
-				}
-				url := ApiURL
-
-				req, err := http.Post(url, "application/json", bytes.NewBuffer(jsondata))
-				if err != nil {
-					fmt.Printf("err: %v\n", err)
-					return
-				}
-				if req.StatusCode == 200 {
-					p.Update()
-				}
-				defer req.Body.Close()
-			},
-		},
-		//app.If(p.showGuestbook, gbp),
-		gbp.Render(),
-	).Class("main")
-}

src/aboutpage.go

@@ -1,4 +1,4 @@
-package components
+package main
 
 import (
 	"github.com/maxence-charriere/go-app/v9/pkg/app"
@@ -13,10 +13,15 @@ func NewAboutPage() *AboutPage {
 }
 
 func (a *AboutPage) Render() app.UI {
-	return app.Div().Body(
+	return newPage().
-		&header{},
+		Title("About me").
-		&navbar{},
+		LeftBar(
-		&aboutPanel{},
+			&bannerPanel{},
+		).
+		Main(
+			newHTMLBlock().
+				Class("right").
+				Src("/web/blocks/about.html"),
 		)
 }
 

src/bannerpanel.go

@@ -1,4 +1,4 @@
-package components
+package main
 
 import "github.com/maxence-charriere/go-app/v9/pkg/app"
 

src/block.go

@@ -0,0 +1,74 @@
+package main
+
+import (
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
+
+type htmlBlock struct {
+	app.Compo
+
+	Iclass string
+	Isrc   string // HTML document source
+
+	// TODO: implement invisibility for other background functions
+}
+
+func newHTMLBlock() *htmlBlock {
+	return &htmlBlock{}
+}
+
+func (b *htmlBlock) Class(v string) *htmlBlock {
+	b.Iclass = app.AppendClass(b.Iclass, v)
+	return b
+}
+
+func (b *htmlBlock) Src(v string) *htmlBlock {
+	b.Isrc = v
+	return b
+}
+
+func (b *htmlBlock) Render() app.UI {
+	return app.Div().
+		Class("block").
+		Class(b.Iclass).
+		Body(
+			newRemoteHTMLDoc().
+				Src(b.Isrc),
+		)
+}
+
+// ==================
+// UI element block
+// ==================
+
+type uiBlock struct {
+	app.Compo
+
+	Iclass string
+	Iui    []app.UI
+}
+
+func newUIBlock() *uiBlock {
+	return &uiBlock{}
+}
+
+func (b *uiBlock) Class(v string) *uiBlock {
+	b.Iclass = app.AppendClass(b.Iclass, v)
+	return b
+}
+
+func (b *uiBlock) UI(v ...app.UI) *uiBlock {
+	b.Iui = app.FilterUIElems(v...)
+	return b
+}
+
+func (b *uiBlock) Render() app.UI {
+	return app.Div().
+		Class("block").
+		Class(b.Iclass).
+		Body(
+			app.Range(b.Iui).Slice(func(i int) app.UI {
+				return b.Iui[i]
+			}),
+		)
+}

src/galaxiespage.go

@@ -1,4 +1,4 @@
-package components
+package main
 
 import "github.com/maxence-charriere/go-app/v9/pkg/app"
 
@@ -11,12 +11,16 @@ func NewGalaxiesPage() *GalaxiesPage {
 }
 
 func (f *GalaxiesPage) Render() app.UI {
-	return app.Div().Body(
+	return newPage().
-		&header{},
+		Title("Galaxies").
-		&navbar{},
+		LeftBar(
-		&galaxiesPanel{},
 			&bannerPanel{},
-	).Class("main")
+		).
+		Main(
+			newHTMLBlock().
+				Class("right").
+				Src("/web/blocks/galaxies.html"),
+		)
 }
 
 type galaxiesPanel struct {

src/guestbookform.go

@@ -1,4 +1,4 @@
-package components
+package main
 
 import (
 	"fmt"

src/guestbookpanel.go

@@ -1,4 +1,4 @@
-package components
+package main
 
 import (
 	"encoding/json"
@@ -35,13 +35,15 @@ func newGuestbookPanel() *guestbookPanel {
 }
 
 func (g *guestbookPanel) Render() app.UI {
-	return app.Div().Body(
+	return newUIBlock().
+		Class("right").
+		UI(
 			app.Range(g.comments).Slice(func(i int) app.UI {
 				return &guestbookComment{
 					Comment: g.comments[i],
 				}
 			}),
-	).Class("content gbp")
+		)
 }
 
 func (g *guestbookPanel) LoadComments() {

src/header.go

@@ -1,4 +1,4 @@
-package components
+package main
 
 import "github.com/maxence-charriere/go-app/v9/pkg/app"
 

src/homepage.go

@@ -0,0 +1,101 @@
+package main
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"net/http"
+
+	"dutchellie.nl/DutchEllie/proper-website-2/entity"
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
+
+var (
+	ApiURL string
+)
+
+type Homepage struct {
+	app.Compo
+
+	showGuestbook bool
+}
+
+func NewHomepage() *Homepage {
+	return &Homepage{}
+}
+
+func (p *Homepage) Render() app.UI {
+	gbp := newGuestbookPanel()
+	return newPage().
+		Title("Homepage").
+		LeftBar(
+			&bannerPanel{},
+		).
+		Main(
+			newHTMLBlock().
+				Class("right").
+				Src("/web/blocks/intro.html"),
+			&guestbookForm{
+				OnSubmit: func(name, message string) {
+					var comment entity.Comment
+					comment.Name = name
+					comment.Message = message
+
+					jsondata, err := json.Marshal(comment)
+					if err != nil {
+						fmt.Printf("err: %v\n", err)
+						return
+					}
+					url := ApiURL
+
+					req, err := http.Post(url, "application/json", bytes.NewBuffer(jsondata))
+					if err != nil {
+						fmt.Printf("err: %v\n", err)
+						return
+					}
+					if req.StatusCode == 200 {
+						p.Update()
+					}
+					defer req.Body.Close()
+				},
+			},
+			gbp.Render(),
+		)
+	/*
+		return app.Div().Body(
+			&header{},
+			&navbar{},
+			&homePanel{
+				onShowClick: func() {
+					p.showGuestbook = !p.showGuestbook
+				},
+			},
+			&bannerPanel{},
+			&guestbookForm{
+				OnSubmit: func(name, message string) {
+					var comment entity.Comment
+					comment.Name = name
+					comment.Message = message
+
+					jsondata, err := json.Marshal(comment)
+					if err != nil {
+						fmt.Printf("err: %v\n", err)
+						return
+					}
+					url := ApiURL
+
+					req, err := http.Post(url, "application/json", bytes.NewBuffer(jsondata))
+					if err != nil {
+						fmt.Printf("err: %v\n", err)
+						return
+					}
+					if req.StatusCode == 200 {
+						p.Update()
+					}
+					defer req.Body.Close()
+				},
+			},
+			//app.If(p.showGuestbook, gbp),
+			gbp.Render(),
+		).Class("main")*/
+}

src/homepanel.go

@@ -1,4 +1,4 @@
-package components
+package main
 
 import "github.com/maxence-charriere/go-app/v9/pkg/app"
 

src/html-doc.go

@@ -0,0 +1,75 @@
+package main
+
+import (
+	"fmt"
+
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
+
+type htmlDoc struct {
+	app.Compo
+
+	Ihtml string
+}
+
+func newHTMLDoc() *htmlDoc {
+	return &htmlDoc{}
+}
+
+func (h *htmlDoc) HTML(v string) *htmlDoc {
+	h.Ihtml = fmt.Sprintf("<div>%s</div>", v)
+	return h
+}
+
+func (h *htmlDoc) Render() app.UI {
+	return app.Raw(h.Ihtml)
+}
+
+type remoteHTMLDoc struct {
+	app.Compo
+
+	Isrc string
+
+	html htmlContent
+}
+
+func newRemoteHTMLDoc() *remoteHTMLDoc {
+	return &remoteHTMLDoc{}
+}
+
+func (h *remoteHTMLDoc) Src(v string) *remoteHTMLDoc {
+	h.Isrc = v
+	return h
+}
+
+func (h *remoteHTMLDoc) OnMount(ctx app.Context) {
+	h.load(ctx)
+}
+
+func (h *remoteHTMLDoc) OnNav(ctx app.Context) {
+	h.load(ctx)
+}
+
+func (h *remoteHTMLDoc) load(ctx app.Context) {
+	src := h.Isrc
+	ctx.ObserveState(htmlState(src)).
+		While(func() bool {
+			return src == h.Isrc
+		}).
+		OnChange(func() {
+
+		}).
+		Value(&h.html)
+
+	ctx.NewAction(getHTML, app.T("path", h.Isrc))
+}
+
+func (h *remoteHTMLDoc) Render() app.UI {
+	return app.Div().
+		Body(
+			app.If(h.html.Status == loaded,
+				newHTMLDoc().
+					HTML(h.html.Data),
+			).Else(),
+		)
+}

src/html.go

@@ -0,0 +1,63 @@
+package main
+
+import (
+	"errors"
+
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
+
+const (
+	getHTML = "/html/get"
+)
+
+func handleGetHTML(ctx app.Context, a app.Action) {
+	path := a.Tags.Get("path")
+	if path == "" {
+		app.Log(errors.New("getting html failed"))
+		return
+	}
+
+	state := htmlState(path)
+
+	var ht htmlContent
+	ctx.GetState(state, &ht)
+	switch ht.Status {
+	case loading, loaded:
+		return
+	}
+
+	ht.Status = loading
+	ht.Error = nil
+	ctx.SetState(state, ht)
+
+	res, err := get(ctx, path)
+	if err != nil {
+		ht.Status = loadingErr
+		ht.Error = err
+		ctx.SetState(state, ht)
+		return
+	}
+
+	ht.Status = loaded
+	ht.Data = string(res)
+	ctx.SetState(state, ht)
+}
+
+func htmlState(src string) string {
+	return src
+}
+
+type htmlContent struct {
+	Status status
+	Error  error
+	Data   string
+}
+
+type status int
+
+const (
+	neverLoaded status = iota
+	loading
+	loadingErr
+	loaded
+)

src/http.go

@@ -0,0 +1,41 @@
+package main
+
+import (
+	"fmt"
+	"io"
+	"net/http"
+	"strings"
+
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
+
+func get(ctx app.Context, path string) ([]byte, error) {
+	url := path
+	if !strings.HasPrefix(url, "http") {
+		u := ctx.Page().URL()
+		u.Path = path
+		url = u.String()
+	}
+
+	req, err := http.NewRequestWithContext(ctx, http.MethodGet, url, nil)
+	if err != nil {
+		fmt.Printf("Error at getting html page\n")
+		return nil, err
+	}
+	res, err := http.DefaultClient.Do(req)
+	if err != nil {
+		return nil, err
+	}
+	defer res.Body.Close()
+
+	// Which means either client or server error
+	if res.StatusCode >= 400 {
+		return nil, err
+	}
+
+	b, err := io.ReadAll(res.Body)
+	if err != nil {
+		return nil, err
+	}
+	return b, nil
+}

src/main.go

@@ -4,7 +4,6 @@ import (
 	"log"
 	"net/http"
 
-	"dutchellie.nl/DutchEllie/proper-website-2/components"
 	"github.com/maxence-charriere/go-app/v9/pkg/app"
 )
 
@@ -19,13 +18,15 @@ const (
 )
 
 func main() {
-	homepage := components.NewHomepage()
+	homepage := NewHomepage()
-	aboutpage := components.NewAboutPage()
+	aboutpage := NewAboutPage()
-	galaxiespage := components.NewGalaxiesPage()
+	galaxiespage := NewGalaxiesPage()
 	app.Route("/", homepage)
 	app.Route("/about", aboutpage)
 	app.Route("/galaxies", galaxiespage)
 
+	app.Handle(getHTML, handleGetHTML)
+
 	// This is executed on the client side only.
 	// It handles client side stuff
 	// It exits immediately on the server side

src/modal.go

@@ -1,4 +1,4 @@
-package components
+package main
 
 import "github.com/maxence-charriere/go-app/v9/pkg/app"
 

src/navbar.go

@@ -1,4 +1,4 @@
-package components
+package main
 
 import "github.com/maxence-charriere/go-app/v9/pkg/app"
 

src/page.go

@@ -0,0 +1,61 @@
+package main
+
+import "github.com/maxence-charriere/go-app/v9/pkg/app"
+
+// Page is a generic page. By default it has a header, navbar and a default leftbar
+type page struct {
+	app.Compo
+
+	Ititle string
+	/*Description
+	Blah blah
+	etc*/
+
+	IleftBar []app.UI
+	Imain    []app.UI
+
+	// TODO: Possibly add "updateavailable" here, so it shows up on every page
+}
+
+func newPage() *page {
+	return &page{}
+}
+
+func (p *page) Title(t string) *page {
+	p.Ititle = t
+	return p
+}
+
+func (p *page) LeftBar(v ...app.UI) *page {
+	p.IleftBar = app.FilterUIElems(v...)
+	return p
+}
+
+func (p *page) Main(v ...app.UI) *page {
+	p.Imain = app.FilterUIElems(v...)
+	return p
+}
+
+func (p *page) Render() app.UI {
+	return app.Div().
+		Class("main").
+		Body(
+			// Header and navbar
+			&header{},
+			app.Div().
+				Class("left").
+				Body(
+					&navbar{},
+					app.Range(p.IleftBar).Slice(func(i int) app.UI {
+						return p.IleftBar[i]
+					}),
+				),
+			app.Div().
+				Class("right").
+				Body(
+					app.Range(p.Imain).Slice(func(i int) app.UI {
+						return p.Imain[i]
+					}),
+				),
+		)
+}

src/updater.go

@@ -1,4 +1,4 @@
-package components
+package main
 
 import "github.com/maxence-charriere/go-app/v9/pkg/app"
 

web/blocks/about.html

@@ -0,0 +1,22 @@
+<img src="/web/static/images/rin-1.gif" style="width:100px;position:absolute;top:10px;right:10px;">
+<p class="content-text">I am a 21 year old computer science student (they/them, he/him, she/her), living and studying in
+	The Netherlands. I like Docker, Kubernetes and Golang!
+	<br>
+	I made this website because I was inspired again by the amazing Neocities pages that I discovered because of my
+	friends.
+	They also have their own pages (you can find them on the friends tab, do check them out!) and I just had to get a
+	good website of my own!
+	<br>
+	I am not that great at web development, especially design, but I love trying it regardless!
+	<br><br>
+	To say a bit more about me personally, I love all things computers. From servers to embedded devices! I love the
+	cloud and all that it brings
+	(except for big megacorps, but alright) and it's my goal to work for a big cloud company!
+	<br>
+	Aside from career path ambitions,ボーカロイドはすきです！ I love vocaloid and other Japanese music and culture!!
+	I also like Vtubers, especially from Hololive and it's my goal to one day finally understand them in their native
+	language!
+	<br><br>
+	There is a lot more to say in words, but who cares about those! Have a look around my creative digital oasis and see
+	what crazy stuff you can find!
+</p>

web/blocks/galaxies.html

@@ -0,0 +1,46 @@
+<p class="p-h1">
+	Galaxies
+</p>
+<p class="content-text">
+	Here you can find some really really really cool pages that I found on the internet.
+	Some of these are blogs or even blogposts I found, but the ones on top are special!
+	They're the websites of friends of mine! Please visit them, because they worked really hard
+	on their websites as well!
+</p>
+<div>
+	<p class="p-h2 mt-20 mb-10 bold">My friends!</p>
+	<ul>
+		<li>
+			<div><a href="https://forestofunix.xyz" class="p-h3 m-t5">Forest of Unix</a>
+				<p class="m-t5">A website by Sebastiaan. A massive Linux fanboy, runs Gentoo on his
+					ThinkPad. Absolutely based.</p>
+			</div>
+		</li>
+		<li>
+			<div><a href="https://nymphali.neocities.org" class="p-h3 m-t5">Nymphali</a>
+				<p class="m-t5">The website made by ■■■■■■, whoops Nymphali. They have an awesome
+					minimalist website that's just lovely.</p>
+			</div>
+		</li>
+		<li>
+			<div><a class="p-h3 m-t5" href="https://kristypixel.neocities.org">Kristy</a>
+				<p class="m-t5">Website made by Kristy. Very cute website, I love it! Keep up the
+					awesome work!</p>
+			</div>
+		</li>
+	</ul>
+</div>
+<div>
+	<p class="p-h2 mt-20 mb-10 bold">Neat webspaces</p>
+	<p class="m-t5" style="margin-left:10px;">Just very neat websites I found. Not necessarily by people I know.
+		I just thought it would be nice to share them here!</p>
+	<ul>
+		<li>
+			<div><a href="https://evillious.ylimegirl.com/" class="p-h3 m-t5">Evillious Chronicles fan guide</a>
+				<p class="m-t5">A VERY cool website made by Ylimegirl! They wrote a whole
+					website dedicated to Evillious Chronicles, which is a super
+					good Japanese light novel and vocaloid series!! Definitely look it up!</p>
+			</div>
+		</li>
+	</ul>
+</div>

web/blocks/intro.html

@@ -0,0 +1,18 @@
+<p class="p-h1">Welcome, internet surfer!</p>
+<div style="position:absolute; top:10px; right:5px;">
+	<p class="small">Please sign my guestbook</p>
+	<img src="/web/static/images/email3.gif" alt="" style="width:40px; position:absolute; bottom:0px; right:0px;">
+</div>
+<img src="/web/static/images/rin-len1.webp" alt="" height="230" style="float:right; margin-bottom: 10px;">
+<p class="content-text">
+Welcome to my webspace! Whether you stumbled across this page by accident
+or were linked here, you're more than welcome! This is my personal project that I like
+to work on! I was inspired by a couple friends of mine, please do check their webspaces
+out as well under "Galaxies" on the left side there!
+If you like this page, there is a lot more, so have a look around! You can also leave a
+nice message for me in the guestbook! There is no registration (unlike the rest of the "modern"
+internet) so nothing of that sort!
+That said, this website is my creative outlet and a way to introduce myself, so be kind please!
+Also its code is entirely open-source and can be found 
+<a href="https://dutchellie.nl/DutchEllie/proper-website-2">here</a> so if you like that sort 
+of stuff, be my guest it's cool!</p>

web/static/style.css

@@ -46,6 +46,16 @@ body {
 	color:rgb(252, 230, 255)
 }
 
+.left {
+	float:left;
+	max-width: 250px;
+}
+
+.right {
+	float:right;
+	max-width: 614px;
+}
+
 .leftbar {
 	border: 3px solid;
 	border-radius: 4px;
@@ -57,6 +67,17 @@ body {
 	padding: 5px 0px;
 }
 
+.block {
+	border: 3px solid;
+	border-radius: 4px;
+	border-color: rgb(252, 230, 255);
+	background-color: rgb(54, 39, 48);
+	margin-bottom: 5px;
+	position: relative;
+	width: 614px;
+	padding: 10px;
+}
+
 .content {
 	border: 3px solid;
 	border-radius: 4px;