Blogposts are a thing now

src/bloglinks.go

@@ -1,4 +1,74 @@
 package main
 
+import (
+	"encoding/json"
+	"io"
+	"net/http"
+
+	"dutchellie.nl/DutchEllie/proper-website-2/entity"
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
+
 type blogLinks struct {
+	app.Compo
+
+	blogposts []entity.BlogPost
+}
+
+func (b *blogLinks) OnMount(ctx app.Context) {
+	b.LoadPosts(ctx)
+}
+
+func (b *blogLinks) Render() app.UI {
+	return newUIBlock().
+		Class("left").
+		Class("leftbarblock").
+		Class("blogpost-bar").
+		UI(
+			app.P().
+				Class("p-h3").
+				Style("margin-left", "10px").
+				Style("margin-top", "10px").
+				Style("text-decoration", "underline").
+				Text("Posts"),
+			app.Range(b.blogposts).Slice(func(i int) app.UI {
+				return app.P().
+					Class("blogpost-titles").
+					Style("cursor", "pointer").
+					Text(b.blogposts[i].Title).
+					OnClick(func(ctx app.Context, e app.Event) {
+						//e.PreventDefault()
+
+						// Calling the update-blogpost action defined in the blogpage.go file.
+						// There it's updated
+						ctx.NewAction("update-blogpost", app.T("blogpost", b.blogposts[i].Path))
+					})
+			}),
+		)
+}
+
+func (b *blogLinks) LoadPosts(ctx app.Context) {
+	// TODO: maybe you can put this in a localbrowser storage?
+	url := ApiURL + "/blogpost"
+	ctx.Async(func() {
+		res, err := http.Get(url)
+		if err != nil {
+			app.Log(err)
+			return
+		}
+		defer res.Body.Close()
+		jsondata, err := io.ReadAll(res.Body)
+		if err != nil {
+			app.Log(err)
+			return
+		}
+
+		ctx.Dispatch(func(ctx app.Context) {
+			err = json.Unmarshal(jsondata, &b.blogposts)
+			if err != nil {
+				app.Log(err)
+				return
+			}
+		})
+	})
 }

src/blogpage.go

@@ -1,9 +1,16 @@
 package main
 
-import "github.com/maxence-charriere/go-app/v9/pkg/app"
+import (
+	"fmt"
+
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
 
 type BlogPage struct {
 	app.Compo
+
+	display         bool
+	currentPostPath string
 }
 
 // TODO: write the backend API for this
@@ -18,11 +25,30 @@ func NewBlogPage() *BlogPage {
 	return &BlogPage{}
 }
 
+func (b *BlogPage) OnMount(ctx app.Context) {
+	ctx.Handle("update-blogpost", b.onUpdateBlogPost)
+	b.display = false
+}
+
 func (b *BlogPage) Render() app.UI {
 	return newPage().
 		Title("Blog").
 		LeftBar(
-			newHTMLBlock().
+			&blogLinks{},
-				Class("left leftbarblock"),
+		).
+		Main(
+			app.If(b.display,
+				newHTMLBlock().
+					Class("right").
+					Class("contentblock").
+					Src(b.currentPostPath),
+			),
 		)
 }
+
+func (b *BlogPage) onUpdateBlogPost(ctx app.Context, a app.Action) {
+	fmt.Printf("Called the update-blogpost ActionHandler\n")
+	blogpost := a.Tags.Get("blogpost")
+	b.currentPostPath = blogpost
+	b.display = true
+}

src/main.go

@@ -20,12 +20,11 @@ func main() {
 	aboutpage := NewAboutPage()
 	galaxiespage := NewGalaxiesPage()
 	undertalePage := NewUndertalePage()
-	emptyPage := NewEmptyPage()
 	app.Route("/", homepage)
 	app.Route("/about", aboutpage)
 	app.Route("/galaxies", galaxiespage)
 	app.Route("/undertale", undertalePage)
-	app.Route("/empty", emptyPage)
+	app.Route("/blog", NewBlogPage())
 
 	app.Handle(getHTML, handleGetHTML)
 

web/blocks/blogposts/testpost1.html

@@ -0,0 +1,6 @@
+<p class="p-h1">Test blogpost</p>
+<p>This is some text under the title</p>
+<p class="p-h2">Header 2</p>
+<p class="p-h3">Header 3</p>
+<p>Regular text here</p>
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, omnis nesciunt beatae dolorem laudantium quidem? Eos fugiat doloribus, ipsam, suscipit repudiandae culpa laboriosam accusamus alias atque esse rerum, tenetur illum.</p>

web/static/style.css

@@ -138,6 +138,15 @@ body {
 	margin-bottom: 5px;
 }
 
+.blogpost-bar {
+	
+}
+
+.blogpost-titles {
+	margin-left: 10px;
+	text-decoration: none;
+    color: rgb(252, 230, 255);
+}
 
 /*
 .content p {