components/bulma/card.templ

@@ -14,9 +14,39 @@ templ ArticleCardWithThumbnail(title, thumbnailUrl, url, datePosted, sourceName
 				</div>
 			</div>
 			<div class="content">
-				{ datePosted }<br/>
+				{ datePosted }
+				<br/>
 				{ sourceName }
 			</div>
 		</div>
 	</div>
 }
+
+// Creates a card container.
+// Accepts children
+templ Card() {
+	<div class="card">
+		{ children... }
+	</div>
+}
+
+// Creates a image card container.
+// Accepts children
+templ CardImage() {
+	<div class="card-image">
+		{ children... }
+	</div>
+}
+
+//
+templ CardImageSize(size string) {
+	<figure class={ "image", size }>
+		{ children... }
+	</figure>
+}
+
+templ CardContentContainer() {
+	<div class="card-content">
+		{ children... }
+	</div>
+}

components/bulma/example/layout.templ

@@ -1 +0,0 @@
-package example

components/bulma/html/img.templ

@@ -0,0 +1,9 @@
+package html
+
+templ Img(src string) {
+    <img src={ src } />
+}
+
+templ ImgAlt(src, alt string) {
+    <img src={ src } alt={ alt }/>
+}

components/bulma/image.templ

@@ -0,0 +1,10 @@
+package bulma
+
+// Creates a image wrapper.
+// This accepts children.
+// Use html.Img() to load a image as a child
+templ Image(image string) {
+    <figure class={ "image", image }>
+        { children... }
+    </figure>
+}

components/bulma/layout/section.templ

@@ -1,4 +1,4 @@
-package bulma
+package layout
 
 // Creates a <section> object thats good to break up a page of content.
 templ Section(title, subtitle string) {

internal/handlers/articles.go

@@ -20,7 +20,12 @@ func (h *Handler) ArticlesList(c echo.Context) error {
 		return RenderError(c, err)
 	}
 
-	vm := models.ListArticlesViewModel{}
+	vm := models.ListArticlesViewModel{
+		HeaderMetaTags: models.HeaderMetaTags{
+			Title: "Articles",
+			Type:  "Page",
+		},
+	}
 
 	for _, article := range resp.Payload {
 		source, err := h.api.Sources.GetById(GetJwtToken(c), article.SourceID)
@@ -36,5 +41,5 @@ func (h *Handler) ArticlesList(c echo.Context) error {
 
 	}
 
-	return Render(c, http.StatusOK, articles.ListArticlesTable(vm))
+	return Render(c, http.StatusOK, articles.List(vm))
 }

internal/handlers/home.go

@@ -3,14 +3,27 @@ package handlers
 import (
 	"net/http"
 
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/home"
 	"github.com/labstack/echo/v4"
 )
 
 func (h *Handler) HomeIndex(c echo.Context) error {
-	return Render(c, http.StatusOK, home.Index())
+	return Render(c, http.StatusOK, home.Index(models.HomeIndexViewModel{
+		HeaderMetaTags: models.HeaderMetaTags{
+			Title:       "Newsbot",
+			Description: "Welcome to your news",
+			Url:         "",
+			Type:        "Page",
+		},
+	}))
 }
 
 func (h *Handler) HomeAbout(c echo.Context) error {
-	return Render(c, http.StatusOK, home.About())
+	return Render(c, http.StatusOK, home.About(models.HomeAboutViewModel{
+		HeaderMetaTags: models.HeaderMetaTags{
+			Title: "About",
+			Type:  "Page",
+		},
+	}))
 }

internal/handlers/users.go

@@ -11,7 +11,12 @@ import (
 )
 
 func (h *Handler) UserLogin(c echo.Context) error {
-	return Render(c, http.StatusOK, users.LoginNew())
+	return Render(c, http.StatusOK, users.LoginNew(models.UsersLoginViewModel{
+		HeaderMetaTags: models.HeaderMetaTags{
+			Title: "Login",
+			Type:  "Page",
+		},
+	}))
 }
 
 func (h *Handler) UserAfterLogin(c echo.Context) error {

internal/models/articles.go

@@ -3,10 +3,12 @@ package models
 import "git.jamestombleson.com/jtom38/newsbot-api/domain"
 
 type ListArticlesViewModel struct {
+	HeaderMetaTags
 	Items []ListArticleSourceModel
 }
 
 type ListArticleSourceModel struct {
+	HeaderMetaTags
 	Article domain.ArticleDto
 	Source  domain.SourceDto
 }

internal/models/debug.go

@@ -1,6 +1,7 @@
 package models
 
 type DebugCookiesViewModel struct {
+	HeaderMetaTags
 	Username     string
 	Token        string
 	RefreshToken string

internal/models/home.go

@@ -0,0 +1,9 @@
+package models
+
+type HomeIndexViewModel struct {
+	HeaderMetaTags
+}
+
+type HomeAboutViewModel struct {
+	HeaderMetaTags
+}

internal/models/layout.go

@@ -4,3 +4,11 @@ type LayoutIsLoggedInViewModel struct {
 	IsLoggedIn bool
 	Username   string
 }
+
+type HeaderMetaTags struct {
+	Title       string
+	Url         string
+	Image       string
+	Description string
+	Type        string
+}

internal/models/sources.go

@@ -3,11 +3,12 @@ package models
 import "git.jamestombleson.com/jtom38/newsbot-api/domain"
 
 type ListAllSourcesViewModel struct {
+	HeaderMetaTags
 	IsError bool
 	Message string
 	Items   []domain.SourceDto
 }
 
 type AddSourcePayloadModel struct {
-	
+	HeaderMetaTags
 }

internal/models/users.go

@@ -1,5 +1,9 @@
 package models
 
+type UsersLoginViewModel struct {
+	HeaderMetaTags
+}
+
 type AfterLoginViewModel struct {
 	Message string
 	Success bool

internal/views/articles/list.templ

@@ -7,7 +7,7 @@ import (
 )
 
 templ List(model models.ListArticlesViewModel) {
-	@layout.WithTemplate() {
+	@layout.WithTemplate(model.HeaderMetaTags) {
 		@filterBar()
 		for _, item := range model.Items {
 			@bulma.ArticleCardWithThumbnail(item.Article.Title, item.Article.Thumbnail, item.Article.Url, item.Article.PubDate.String(), item.Source.DisplayName)

internal/views/articles/table.templ

@@ -7,12 +7,13 @@ import (
 )
 
 templ ListArticlesTable(model models.ListArticlesViewModel) {
-	@layout.WithTemplate() {
+	@layout.WithTemplate(model.HeaderMetaTags) {
 		@bulma.Table() {
 			@bulma.TableHeader() {
 				@bulma.TableRow() {
 					@bulma.TableHeaderData("Title")
 					@bulma.TableHeaderData("Source")
+					@bulma.TableHeaderDataToolTip("Pub", "Date Published")
 					@bulma.TableHeaderData("View")
 				}
 			}
@@ -20,6 +21,7 @@ templ ListArticlesTable(model models.ListArticlesViewModel) {
 				@bulma.TableRow() {
 					@bulma.TableData(item.Article.Title)
 					@bulma.TableData(item.Source.DisplayName)
+					@bulma.TableData(item.Article.PubDate.String())
 					@bulma.TableDataChildren() {
 						@bulma.Button() {
 							@bulma.ANewTab(item.Article.Url, "View")

internal/views/debug/cookies.templ

@@ -4,7 +4,7 @@ import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 import "git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
 
 templ Cookies(vm models.DebugCookiesViewModel) {
-	@layout.WithTemplate() {
+	@layout.WithTemplate(vm.HeaderMetaTags) {
 		<p>
 		Token: { vm.Token }
 		</p>

internal/views/home/about.templ

@@ -2,9 +2,10 @@ package home
 
 import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+import "git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
 
-templ About() {
+templ About(vm models.HomeAboutViewModel) {
-    @layout.WithTemplate(){
+    @layout.WithTemplate(vm.HeaderMetaTags){
         @bulma.Title("About this project")
         @bulma.Block() {
             Newsbot started a small project to send out notifications to discord servers.

internal/views/home/index.templ

@@ -3,11 +3,12 @@ package home
 import (
 	b "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
 	bl "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/layout"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 )
 
-templ Index() {
+templ Index(vm models.HomeIndexViewModel) {
-	@layout.WithTemplate() {
+	@layout.WithTemplate(vm.HeaderMetaTags) {
 		@bl.Hero("Welcome to Newsbot!", "Your new home for your news.")
 		@b.Block() {
 			News bot is a self hostable solution to aggregating your news.

internal/views/layout/error.templ

@@ -1,7 +1,12 @@
 package layout
 
+import "git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
+
 templ Error(err error) {
-	@WithTemplate() {
+	@WithTemplate(models.HeaderMetaTags{
+		Title:       "Error",
+		Description: err.Error(),
+	}) {
 		<h1 class="title">Error</h1>
 		<h2 class="subtitle">{ err.Error() } </h2>
 	}

internal/views/layout/header.templ

@@ -1,17 +1,18 @@
 package layout
 
 import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+import "git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
 
-templ header() {
+templ header(meta models.HeaderMetaTags) {
 	@bulma.UseBulmaCdn()
 	<link rel="stylesheet" href="/css/main.css"/>
 	<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
 	<meta charset="utf-8"/>
-	<meta property="og:title" content=""/>
+	<meta property="og:title" content={ meta.Title }/>
-	<meta property="og:url" content=""/>
+	<meta property="og:url" content={ meta.Url }/>
-	<meta property="og:image" content=""/>
+	<meta property="og:image" content={ meta.Image }/>
-	<meta property="og:description" content=""/>
+	<meta property="og:description" content={ meta.Image }/>
-	<meta property="og:type" content=""/>
+	<meta property="og:type" content={ meta.Type }/>
 	<style type="text/css">
 	.pin-bottom {
     position: absolute;

internal/views/layout/withTemplate.templ

@@ -1,18 +1,24 @@
 package layout
 
-templ WithTemplate() {
+import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+	bl "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/layout"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
+)
+
+templ WithTemplate(meta models.HeaderMetaTags) {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
-			@header()
+			@header(meta)
 		</head>
 		<body>
 			@navBar()
 			<br/>
-			<div class="container is-widescreen">
+			@bl.Container(bulma.BreakpointDefault) {
 				{ children... }
 				@footer()
-			</div>
+			}
 		</body>
 	</html>
 }

internal/views/sources/add.templ

@@ -15,7 +15,7 @@ var (
 )
 
 templ Add(model models.AddSourcePayloadModel) {
-	@layout.WithTemplate() {
+	@layout.WithTemplate(model.HeaderMetaTags) {
 		@bl.Hero("New Source", "")
 		@bulma.Block() {
 			At this time only direct RSS links are allowed to be provided.

internal/views/sources/listAll.templ

@@ -8,7 +8,7 @@ import (
 )
 
 templ ListAll(model models.ListAllSourcesViewModel) {
-	@layout.WithTemplate() {
+	@layout.WithTemplate(model.HeaderMetaTags) {
 		@bulma.Button() {
 			@bh.ALink("/sources/add", "New Source")
 		}

internal/views/users/login copy.templ

@@ -3,6 +3,7 @@ package users
 import (
 	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/form"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
 )
 
 var (
@@ -11,8 +12,8 @@ var (
 	}
 )
 
-templ LoginNew() {
+templ LoginNew(vm models.UsersLoginViewModel) {
-	@layout.WithTemplate() {
+	@layout.WithTemplate(vm.HeaderMetaTags) {
 		@form.New(p) {
 			@form.Field() {
 				@form.Label("Username")

internal/views/users/login.templ

@@ -1,9 +1,10 @@
 package users
 
 import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+import "git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
 
-templ Login() {
+templ Login(vm models.UsersLoginViewModel) {
-	@layout.WithTemplate() {
+	@layout.WithTemplate(vm.HeaderMetaTags) {
 		<form hx-post="/users/login">
 			<div class="field">
 				<label class="label">Username</label>

internal/views/users/logout.templ

@@ -1,10 +1,16 @@
 package users
 
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+import (
-import bl "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/layout"
+	bl "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/layout"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+)
 
 templ Logout() {
-    @layout.WithTemplate(){
+	@layout.WithTemplate(models.HeaderMetaTags{
+		Title: "Logged Out",
+		Type:  "Page",
+	}) {
 		@bl.Hero("You are out of here!", "Please login again when you are ready.")
 	}
 }

internal/views/users/profile.templ

@@ -4,13 +4,16 @@ import (
 	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
 	bh "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/html"
 	bl "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/layout"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 )
 
 templ Profile() {
-	@layout.WithTemplate() {
+	@layout.WithTemplate(models.HeaderMetaTags{
+		Title: "Profile",
+		Type:  "Page",
+	}) {
 		@bl.Hero("Profile", "Here you can update your profile 😀")
-
 		@bulma.H2("Sessions", false)
 		@bulma.Button() {
 			@bh.ALink("/users/forcelogout", "Terminate all active sessions")

internal/views/users/signup.templ

@@ -2,13 +2,17 @@ package users
 
 import (
 	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/form"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 )
 
 templ SignUp() {
-	@layout.WithTemplate() {
+	@layout.WithTemplate(models.HeaderMetaTags{
+		Title: "Signup",
+		Type:  "Page",
+	}) {
 		@form.New(form.NewParam{HxPost: "/users/signup"}) {
-			@form.Field(){
+			@form.Field() {
 				@form.Label("Username")
 				@form.Control() {
 					@form.TextInput("username", form.InputTypeText, "username or email address")