Updater

src/aboutpage.go

@@ -16,37 +16,15 @@ func (a *AboutPage) Render() app.UI {
 	return newPage().
 		Title("About me").
 		LeftBar(
-			&bannerPanel{},
+			newHTMLBlock().
+				Class("left").
+				Class("leftbarblock").
+				Src("/web/blocks/snippets/bannerpanel.html"),
 		).
 		Main(
 			newHTMLBlock().
 				Class("right").
-				Src("/web/blocks/about.html"),
+				Class("contentblock").
+				Src("/web/blocks/pages/about.html"),
 		)
 }
-
-type aboutPanel struct {
-	app.Compo
-
-	aboutText string
-}
-
-func (a *aboutPanel) Render() app.UI {
-	return app.Div().Body(
-		app.Img().Src("/web/static/images/rin-1.gif").Styles(map[string]string{"width": "100px", "position": "absolute", "top": "10px", "right": "10px"}),
-		app.Raw(`<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>`),
-	).Class("content")
-}

src/galaxiespage.go

@@ -14,99 +14,15 @@ func (f *GalaxiesPage) Render() app.UI {
 	return newPage().
 		Title("Galaxies").
 		LeftBar(
-			&bannerPanel{},
+			newHTMLBlock().
+				Class("left").
+				Class("leftbarblock").
+				Src("/web/blocks/snippets/bannerpanel.html"),
 		).
 		Main(
 			newHTMLBlock().
 				Class("right").
-				Src("/web/blocks/galaxies.html"),
+				Class("contentblock").
+				Src("/web/blocks/pages/galaxies.html"),
 		)
 }
-
-type galaxiesPanel struct {
-	app.Compo
-}
-
-func (b *galaxiesPanel) Render() app.UI {
-	return app.Div().Body(
-		app.P().
-			Text(`Galaxies`).
-			Class("p-h1"),
-		app.P().
-			Class("content-text").
-			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!`),
-		app.Div().
-			Body(
-				app.P().
-					Class("p-h2 mt-20 mb-10 bold").
-					Text("My friends!"),
-				app.Ul().Body(
-					app.Li().Body(
-						app.Div().Body(
-							// TODO: Create a modal popup for each name!!!
-							app.A().Href("https://forestofunix.xyz").
-								Class("p-h3 m-t5").
-								Text("Forest of Unix"),
-							app.P().
-								Class("m-t5").
-								Text(`A website by Sebastiaan. A massive Linux fanboy, runs Gentoo on his
-								ThinkPad. Absolutely based.`),
-						),
-					),
-					app.Li().Body(
-						app.Div().Body(
-							// TODO: Create a modal popup for each name!!!
-							app.A().Href("https://nymphali.neocities.org").
-								Class("p-h3 m-t5").
-								Text("Nymphali"),
-							app.P().
-								Class("m-t5").
-								Text(`The website made by ■■■■■■, whoops Nymphali. They have an awesome
-								minimalist website that's just lovely.`),
-						),
-					),
-					app.Li().Body(
-						app.Div().Body(
-							// TODO: Create a modal popup for each name!!!
-							app.A().Href("https://kristypixel.neocities.org").
-								Class("p-h3 m-t5").
-								Text("Kristy"),
-							app.P().
-								Class("m-t5").
-								Text(`Website made by Kristy. Very cute website, I love it! Keep up the
-								awesome work!`),
-						),
-					),
-				),
-			),
-		app.Div().
-			Body(
-				app.P().
-					Class("p-h2 mt-20 mb-10 bold").
-					Text("Neat webspaces"),
-				app.P().
-					Class("m-t5").
-					Style("margin-left", "10px").
-					Text(`Just very neat websites I found. Not necessarily by people I know.
-					I just thought it would be nice to share them here!`),
-				app.Ul().Body(
-					app.Li().Body(
-						app.Div().Body(
-							// TODO: Create a modal popup for each name!!!
-							app.A().Href("https://evillious.ylimegirl.com/").
-								Class("p-h3 m-t5").
-								Text("Evillious Chronicles fan guide"),
-							app.P().
-								Class("m-t5").
-								Text(`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!`),
-						),
-					),
-				),
-			),
-	).Class("content")
-}

src/guestbookform.go

@@ -64,7 +64,7 @@ func (g *guestbookForm) Render() app.UI {
 				},
 			},
 		),
-	).Class("content")
+	)
 }
 
 func (g *guestbookForm) clear() {

src/guestbookpanel.go

@@ -35,15 +35,12 @@ func newGuestbookPanel() *guestbookPanel {
 }
 
 func (g *guestbookPanel) Render() app.UI {
-	return newUIBlock().
-		Class("right").
-		UI(
-			app.Range(g.comments).Slice(func(i int) app.UI {
-				return &guestbookComment{
-					Comment: g.comments[i],
-				}
-			}),
-		)
+	return app.Range(g.comments).Slice(func(i int) app.UI {
+		return &guestbookComment{
+			Comment: g.comments[i],
+		}
+	},
+	)
 }
 
 func (g *guestbookPanel) LoadComments() {

src/header.go

@@ -7,5 +7,10 @@ type header struct {
 }
 
 func (h *header) Render() app.UI {
-	return app.Div().Text("Internetica Galactica").Class("header")
+	return app.Div().
+		Class("header").
+		Body(
+			app.Text("Internetica Galactica"),
+			&updater{},
+		)
 }

src/homepage.go

@@ -16,8 +16,6 @@ var (
 
 type Homepage struct {
 	app.Compo
-
-	showGuestbook bool
 }
 
 func NewHomepage() *Homepage {
@@ -29,73 +27,50 @@ func (p *Homepage) Render() app.UI {
 	return newPage().
 		Title("Homepage").
 		LeftBar(
-			&bannerPanel{},
+			newHTMLBlock().
+				Class("left").
+				Class("leftbarblock").
+				Src("/web/blocks/snippets/bannerpanel.html"),
 		).
 		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
+				Class("contentblock").
+				Src("/web/blocks/pages/intro.html"),
+			newUIBlock().
+				Class("right").
+				Class("contentblock").
+				UI(
+					&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
+							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(),
+							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()
+						},
+					},
+				),
+			newUIBlock().
+				Class("right").
+				Class("contentblock").
+				UI(
+					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,58 +0,0 @@
-package main
-
-import "github.com/maxence-charriere/go-app/v9/pkg/app"
-
-type homePanel struct {
-	app.Compo
-
-	onShowClick     func()
-	updateAvailable bool
-}
-
-func newHomePanel() *homePanel {
-	return &homePanel{}
-}
-
-func (p *homePanel) Render() app.UI {
-	return app.Div().Body(
-		app.P().Text("Welcome, internet surfer!").Class("p-h1"),
-		app.Div().Body(
-			app.P().Text("Please sign my guestbook!").Class("small"),
-			app.Img().Src("/web/static/images/email3.gif").Style("width", "40px").Style("position", "absolute").Style("bottom", "0px").Style("right", "0px"),
-		).Style("position", "absolute").Style("top", "10px").Style("right", "5px").
-			OnClick(func(ctx app.Context, e app.Event) {
-				e.PreventDefault()
-				p.onShowClick()
-			}),
-		app.Img().
-			Style("float", "right").
-			Style("margin-bottom", "10px").
-			Height(230).
-			Src("/web/static/images/rin-len1.webp"),
-		app.Raw(
-			`
-		<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>
-		`),
-		app.If(p.updateAvailable,
-			app.Div().Body(
-				app.P().
-					Class("content-text").
-					Text("An update is available! Reload to update!"),
-			)),
-	).Class("content")
-}
-
-func (p *homePanel) OnAppUpdate(ctx app.Context) {
-	p.updateAvailable = true
-}

src/main.go

@@ -13,10 +13,6 @@ import (
 //	collection *mongo.Collection
 //}
 
-const (
-	apiurl = "https://quenten.nl:8007/"
-)
-
 func main() {
 	homepage := NewHomepage()
 	aboutpage := NewAboutPage()
@@ -64,35 +60,7 @@ func main() {
 	}
 
 	app.GenerateStaticWebsite("./staticsite", handler)
-	/*
-		uri := "mongodb+srv://guestbook-database:5WUDzpvBKBBiiMCy@cluster0.wtt64.mongodb.net/myFirstDatabase?retryWrites=true&w=majority"
-
-		client, err := mongo.Connect(context.TODO(), options.Client().ApplyURI(uri))
-		if err != nil {
-			fmt.Println(err)
-			return
-		}
-		defer func() {
-			if err = client.Disconnect(context.TODO()); err != nil {
-				panic(err)
-			}
-		}()
-
-		// Ping the primary
-		if err := client.Ping(context.TODO(), readpref.Primary()); err != nil {
-			panic(err)
-		}
-		db := client.Database("guestbook")
-		coll := db.Collection("comments")
-
-		apiapp := &application{
-			client:     client,
-			database:   db,
-			collection: coll,
-		}
-	*/
 	http.Handle("/", handler)
-	//http.HandleFunc("/api/comment", apiapp.Comment)
 
 	if err := http.ListenAndServe(":8000", nil); err != nil {
 		log.Fatal(err)

src/updater.go

@@ -8,16 +8,27 @@ type updater struct {
 	updateAvailable bool
 }
 
-func (u *updater) onAppUpdate(ctx app.Context) {
+func (u *updater) OnAppUpdate(ctx app.Context) {
 	u.updateAvailable = ctx.AppUpdateAvailable()
 }
 
 func (u *updater) Render() app.UI {
 	return app.Div().Body(
 		app.If(u.updateAvailable,
-			app.Div().Body(
-				app.P().Text("An update for this website is available! Please click here to reload!"),
-			).Styles(map[string]string{"position": "absolute", "width": "100px", "bottom": "10px", "right": "10px"}).OnClick(u.onUpdateClick),
+			app.Div().
+				Class("update-box").
+				Body(
+					app.Img().
+						Class("pulsing").
+						Height(50).
+						Src("/web/static/images/hot1.gif"),
+					app.P().
+						Class("update-message").
+						Text("An update is available! Click here to reload!"),
+				).
+				OnClick(func(ctx app.Context, e app.Event) {
+					u.onUpdateClick(ctx, e)
+				}),
 		),
 	)
 }

test-website/base.html

@@ -4,7 +4,7 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" href="static/style.css">
+	<link rel="stylesheet" href="../web/static/style.css">
 	<link rel="stylesheet" href="static/anisha.css?family=anisha">
 	<link rel="stylesheet" href="static/adreena.css?family=adreena">
 	<link rel="stylesheet" href="static/havakana.css?family=havakana">
@@ -13,6 +13,12 @@
 <body>
 	<div class="header">
 		Internetica Galactica
+		<div class="update-box">
+			<img src="/web/static/images/hot1.gif" alt="" height="50px" style="" class="pulsing">
+			<p class="update-message">
+				An update is available! Click here to reload!
+			</p>
+		</div>
 	</div>
 	<div class="main">
 		<div class="navbar">

web/static/style.css

@@ -22,6 +22,15 @@ body {
 	font-size: 5em;
 	font-family: anisha;
 	text-align: center;
+	height: 100%;
+}
+
+.update-box {
+	position:absolute;
+	max-width: 100px;
+	top: 0px;
+	right: 0px;
+	font-size: 0.8rem;
 }
 
 .main {
@@ -74,6 +83,16 @@ body {
 	background-color: rgb(54, 39, 48);
 	margin-bottom: 5px;
 	position: relative;
+}
+
+.leftbarblock {
+	float:left;
+	width: 250px;
+	padding: 5px 0px;
+}
+
+.contentblock {
+	float:right;
 	width: 614px;
 	padding: 10px;
 }
@@ -236,6 +255,33 @@ div.comment-message p{
 	margin-bottom: 5px;
 }
 
+.update-message {
+	font-family: havakana;
+	margin-top: 0px;
+
+}
+
+.pulsing {
+	animation-name: pulsing;
+	animation-duration: 0.4s;
+	animation-timing-function: ease-out;
+	animation-direction: alternate;
+	animation-iteration-count: infinite;
+	animation-play-state: running;
+}
+
+@keyframes pulsing {
+            0% {
+                transform: scale(.7);
+            }
+  
+            50% {
+            }
+  
+            100% {
+                transform: scale(1.5);
+            }
+        }
 /*Margin top 5px*/
 .m-t5 {
 	margin-top: 5px;
@@ -261,4 +307,8 @@ div.comment-message p{
 
 .fit { 
 	width: fit-content;
+}
+
+.invisible {
+	visibility: hidden;
 }