From 0206d848943aa70acaf0f1f2e658650c7e6015a7 Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Tue, 9 Jul 2024 08:32:24 -0700
Subject: [PATCH 01/17] Created some components for bulma to make it easier to
 build new pages

---
 internal/views/bulma/button.templ       | 34 +++++++++++++++++++++++++
 internal/views/bulma/form/control.templ |  8 ++++++
 internal/views/bulma/form/field.templ   |  8 ++++++
 internal/views/bulma/form/input.templ   |  9 +++++++
 internal/views/bulma/form/label.templ   |  6 +++++
 internal/views/bulma/form/new.templ     |  7 +++++
 internal/views/bulma/form/submit.templ  |  5 ++++
 internal/views/bulma/form/util.go       |  6 +++++
 internal/views/bulma/util.go            | 10 ++++++++
 9 files changed, 93 insertions(+)
 create mode 100644 internal/views/bulma/button.templ
 create mode 100644 internal/views/bulma/form/control.templ
 create mode 100644 internal/views/bulma/form/field.templ
 create mode 100644 internal/views/bulma/form/input.templ
 create mode 100644 internal/views/bulma/form/label.templ
 create mode 100644 internal/views/bulma/form/new.templ
 create mode 100644 internal/views/bulma/form/submit.templ
 create mode 100644 internal/views/bulma/form/util.go
 create mode 100644 internal/views/bulma/util.go

diff --git a/internal/views/bulma/button.templ b/internal/views/bulma/button.templ
new file mode 100644
index 0000000..865a605
--- /dev/null
+++ b/internal/views/bulma/button.templ
@@ -0,0 +1,34 @@
+package bulma
+
+templ Button(color string, isLight, isDark bool) {
+	if isLight {
+		<button type="button" class={ "button", "is-light", color }>
+			{ children... }
+		</button>
+	}
+	if isDark {
+		<button type="button" class={ "button", "is-dark", color }>
+			{ children... }
+		</button>
+	}
+	if !isLight && !isDark {
+		<button type="button" class={ "button", color }>
+		{ children... }
+	</button>
+	}
+}
+
+templ ButtonNewTab(url, text string) {
+	<button type="button" class="button">
+		<a href={ templ.SafeURL(url) } target="_blank" rel="noopener noreferrer">{ text }</a>
+	</button>
+}
+
+
+templ ALink(url, title string) {
+	<a href={ templ.SafeURL(url) }>{ title }</a>
+}
+
+templ ANewTab(url, text string) {
+	<a href={ templ.SafeURL(url) } target="_blank" rel="noopener noreferrer">{ text }</a>
+}
diff --git a/internal/views/bulma/form/control.templ b/internal/views/bulma/form/control.templ
new file mode 100644
index 0000000..d5183b2
--- /dev/null
+++ b/internal/views/bulma/form/control.templ
@@ -0,0 +1,8 @@
+package form
+
+// Div container to add a input field to.
+templ Control() {
+    <div class="control">
+        { children... }
+    </div>
+}
\ No newline at end of file
diff --git a/internal/views/bulma/form/field.templ b/internal/views/bulma/form/field.templ
new file mode 100644
index 0000000..ad7b0c3
--- /dev/null
+++ b/internal/views/bulma/form/field.templ
@@ -0,0 +1,8 @@
+package form
+
+// This creates a field that you can add a Label, Control or Input object.
+templ Field() {
+	<div class="field">
+		{ children... }
+	</div>
+}
\ No newline at end of file
diff --git a/internal/views/bulma/form/input.templ b/internal/views/bulma/form/input.templ
new file mode 100644
index 0000000..5255d18
--- /dev/null
+++ b/internal/views/bulma/form/input.templ
@@ -0,0 +1,9 @@
+package form
+
+templ Input(color, id, fieldType string) {
+	if color == "" {
+		<input class={ "input" } id={ id } type={ fieldType }/>
+	} else {
+		<input class={ "input", color } id={ id } type={ fieldType }/>
+	}
+}
diff --git a/internal/views/bulma/form/label.templ b/internal/views/bulma/form/label.templ
new file mode 100644
index 0000000..66deea3
--- /dev/null
+++ b/internal/views/bulma/form/label.templ
@@ -0,0 +1,6 @@
+package form
+
+// This will create a small bit of text to add context to the form.
+templ Label(text string) {
+	<label class="label">{ text }</label>
+}
\ No newline at end of file
diff --git a/internal/views/bulma/form/new.templ b/internal/views/bulma/form/new.templ
new file mode 100644
index 0000000..a0a4190
--- /dev/null
+++ b/internal/views/bulma/form/new.templ
@@ -0,0 +1,7 @@
+package form
+
+templ New(postUrl string) {
+    <form hx-post={ postUrl }>
+        { children... }
+    </form>
+}
\ No newline at end of file
diff --git a/internal/views/bulma/form/submit.templ b/internal/views/bulma/form/submit.templ
new file mode 100644
index 0000000..e12ada7
--- /dev/null
+++ b/internal/views/bulma/form/submit.templ
@@ -0,0 +1,5 @@
+package form
+
+templ Submit(text, color string) {
+    <button type="submit" class={ "button", color }>{ text }</button>
+}
\ No newline at end of file
diff --git a/internal/views/bulma/form/util.go b/internal/views/bulma/form/util.go
new file mode 100644
index 0000000..34750a1
--- /dev/null
+++ b/internal/views/bulma/form/util.go
@@ -0,0 +1,6 @@
+package form
+
+const (
+	InputTypeText     = "text"
+	InputTypePassword = "password"
+)
diff --git a/internal/views/bulma/util.go b/internal/views/bulma/util.go
new file mode 100644
index 0000000..f53dfd9
--- /dev/null
+++ b/internal/views/bulma/util.go
@@ -0,0 +1,10 @@
+package bulma
+
+const (
+	ColorPrimary = "is-primary"
+	ColorInfo    = "is-info"
+	ColorLink    = "is-link"
+	ColorWarning = "is-warning"
+	ColorSuccess = "is-success"
+	ColorError   = "is-error"
+)

From bb135917cfb53cf1bd1eb94006c264977063de05 Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Tue, 9 Jul 2024 08:32:38 -0700
Subject: [PATCH 02/17] new login page with the new components

---
 internal/views/users/login copy.templ | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 internal/views/users/login copy.templ

diff --git a/internal/views/users/login copy.templ b/internal/views/users/login copy.templ
new file mode 100644
index 0000000..8cb72a2
--- /dev/null
+++ b/internal/views/users/login copy.templ	
@@ -0,0 +1,26 @@
+package users
+
+import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma/form"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+)
+
+templ LoginNew() {
+	@layout.WithTemplate() {
+		@form.New("/users/login") {
+			@form.Field() {
+				@form.Label("Username")
+				@form.Control() {
+					@form.Input("", "username", "text")
+				}
+			}
+			@form.Field(){
+				@form.Label("Password")
+				@form.Control(){
+					@form.Input("", "password", form.InputTypePassword)
+				}
+			}
+			@form.Submit("Submit", "is-primary")
+		}
+	}
+}

From d1f72aa0f1bae37584503ac98f2d475c7b6c43e2 Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Tue, 9 Jul 2024 08:32:59 -0700
Subject: [PATCH 03/17] /logout was not working correctly because it was doing
 jwt checks

---
 internal/handlers/handler.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/internal/handlers/handler.go b/internal/handlers/handler.go
index 8015ba8..500554c 100644
--- a/internal/handlers/handler.go
+++ b/internal/handlers/handler.go
@@ -71,8 +71,8 @@ func NewServer(ctx context.Context, configs config.Configs, apiClient apiclient.
 	users.POST("/login", s.UserAfterLogin)
 	users.GET("/signup", s.UserSignUp)
 	users.POST("/signup", s.UserAfterSignUp)
-	users.Use(ValidateJwtMiddleware(configs.JwtSecret))
 	users.GET("/logout", s.UsersLogout)
+	users.Use(ValidateJwtMiddleware(configs.JwtSecret))
 	users.GET("/profile", s.UserProfile)
 
 	s.Router = router

From b6a6bb0043b74cbeee6badcf8e5361a285a7a1cc Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Tue, 9 Jul 2024 08:33:15 -0700
Subject: [PATCH 04/17] playing with more components

---
 internal/views/sources/add.templ     | 15 ++++++++++++---
 internal/views/sources/listAll.templ | 11 ++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/internal/views/sources/add.templ b/internal/views/sources/add.templ
index a61a503..bdd3cda 100644
--- a/internal/views/sources/add.templ
+++ b/internal/views/sources/add.templ
@@ -1,10 +1,19 @@
 package sources
 
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
+import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma/form"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+)
 
 templ Add(model models.AddSourcePayloadModel) {
 	@layout.WithTemplate() {
-		<form hx-post="/sources/add"></form>
+		<h2>New Source</h2>
+		<p>At this time only direct RSS links are allowed to be provided</p>
+		@form.New("/sources/add") {
+			@form.Input("", "url", "text")
+			@form.Submit("Submit", bulma.ColorPrimary)
+		}
 	}
 }
diff --git a/internal/views/sources/listAll.templ b/internal/views/sources/listAll.templ
index f1872a5..6f2379b 100644
--- a/internal/views/sources/listAll.templ
+++ b/internal/views/sources/listAll.templ
@@ -1,12 +1,17 @@
 package sources
 
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
+import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+)
 
 templ ListAll(model models.ListAllSourcesViewModel) {
 	@layout.WithTemplate() {
 		for _, item := range model.Items {
-			<a href={ templ.SafeURL(item.Url) } target="_blank" rel="noopener noreferrer">{ item.DisplayName } - { item.Source } </a> 
+			@bulma.Button(bulma.ColorPrimary, false, false) {
+				@bulma.ANewTab(item.Url, item.DisplayName)
+			}
 			<br/>
 		}
 	}

From 435dfbda40a29022fd293a2bb0b251a33779612a Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Tue, 9 Jul 2024 08:33:25 -0700
Subject: [PATCH 05/17] moved login to use my new form

---
 internal/handlers/users.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/internal/handlers/users.go b/internal/handlers/users.go
index 44bb90a..cc05b12 100644
--- a/internal/handlers/users.go
+++ b/internal/handlers/users.go
@@ -11,7 +11,7 @@ import (
 )
 
 func (h *Handler) UserLogin(c echo.Context) error {
-	return Render(c, http.StatusOK, users.Login())
+	return Render(c, http.StatusOK, users.LoginNew())
 }
 
 func (h *Handler) UserAfterLogin(c echo.Context) error {

From 574695bfb01184f23663b875b09ab9a0c8a3b66f Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Thu, 11 Jul 2024 08:08:58 -0700
Subject: [PATCH 06/17] moved view components out of internal and added some
 more

---
 .../views => components}/bulma/button.templ   | 26 +++++-----
 .../views => components}/bulma/card.templ     |  0
 .../bulma/form/control.templ                  |  0
 .../bulma/form/field.templ                    |  0
 components/bulma/form/input.templ             | 15 ++++++
 .../bulma/form/label.templ                    |  0
 components/bulma/form/new.templ               | 13 +++++
 components/bulma/form/select.templ            | 33 +++++++++++++
 .../bulma/form/submit.templ                   |  0
 components/bulma/form/textarea.templ          |  5 ++
 components/bulma/form/util.go                 |  8 +++
 .../views => components}/bulma/hero.templ     |  0
 components/bulma/notification.templ           |  7 +++
 .../views => components}/bulma/section.templ  |  0
 components/bulma/tags.templ                   | 13 +++++
 components/bulma/title.templ                  | 49 +++++++++++++++++++
 {internal/views => components}/bulma/util.go  |  4 ++
 components/templ-html/br.templ                |  5 ++
 components/templ-html/href.templ              |  9 ++++
 internal/views/articles/list.templ            |  7 ++-
 internal/views/bulma/form/input.templ         |  9 ----
 internal/views/bulma/form/new.templ           |  7 ---
 internal/views/bulma/form/util.go             |  6 ---
 internal/views/home/index.templ               |  2 +-
 internal/views/sources/add.templ              | 19 ++++---
 internal/views/sources/addAfter.templ         | 11 +++++
 internal/views/sources/listAll.templ          | 10 +++-
 internal/views/users/afterLogin.templ         | 13 +++--
 internal/views/users/afterSignUp.templ        | 10 ++--
 internal/views/users/login copy.templ         | 18 ++++---
 internal/views/users/logout.templ             |  2 +-
 internal/views/users/profile.templ            | 18 ++++---
 internal/views/users/signup.templ             | 35 +++++++------
 33 files changed, 261 insertions(+), 93 deletions(-)
 rename {internal/views => components}/bulma/button.templ (55%)
 rename {internal/views => components}/bulma/card.templ (100%)
 rename {internal/views => components}/bulma/form/control.templ (100%)
 rename {internal/views => components}/bulma/form/field.templ (100%)
 create mode 100644 components/bulma/form/input.templ
 rename {internal/views => components}/bulma/form/label.templ (100%)
 create mode 100644 components/bulma/form/new.templ
 create mode 100644 components/bulma/form/select.templ
 rename {internal/views => components}/bulma/form/submit.templ (100%)
 create mode 100644 components/bulma/form/textarea.templ
 create mode 100644 components/bulma/form/util.go
 rename {internal/views => components}/bulma/hero.templ (100%)
 create mode 100644 components/bulma/notification.templ
 rename {internal/views => components}/bulma/section.templ (100%)
 create mode 100644 components/bulma/tags.templ
 create mode 100644 components/bulma/title.templ
 rename {internal/views => components}/bulma/util.go (71%)
 create mode 100644 components/templ-html/br.templ
 create mode 100644 components/templ-html/href.templ
 delete mode 100644 internal/views/bulma/form/input.templ
 delete mode 100644 internal/views/bulma/form/new.templ
 delete mode 100644 internal/views/bulma/form/util.go
 create mode 100644 internal/views/sources/addAfter.templ

diff --git a/internal/views/bulma/button.templ b/components/bulma/button.templ
similarity index 55%
rename from internal/views/bulma/button.templ
rename to components/bulma/button.templ
index 865a605..5385978 100644
--- a/internal/views/bulma/button.templ
+++ b/components/bulma/button.templ
@@ -1,21 +1,18 @@
 package bulma
 
-templ Button(color string, isLight, isDark bool) {
-	if isLight {
-		<button type="button" class={ "button", "is-light", color }>
-			{ children... }
-		</button>
-	}
-	if isDark {
-		<button type="button" class={ "button", "is-dark", color }>
-			{ children... }
-		</button>
-	}
-	if !isLight && !isDark {
-		<button type="button" class={ "button", color }>
+// This creates a button that accepts children under it.
+templ Button() {
+	<button type="button" class={ "button" }>
+		{ children... }
+	</button>
+}
+
+// Used to create a button and lets you define the color.
+// Accepts children.
+templ ButtonColor(color string) {
+	<button type="button" class={ "button", color }>
 		{ children... }
 	</button>
-	}
 }
 
 templ ButtonNewTab(url, text string) {
@@ -24,7 +21,6 @@ templ ButtonNewTab(url, text string) {
 	</button>
 }
 
-
 templ ALink(url, title string) {
 	<a href={ templ.SafeURL(url) }>{ title }</a>
 }
diff --git a/internal/views/bulma/card.templ b/components/bulma/card.templ
similarity index 100%
rename from internal/views/bulma/card.templ
rename to components/bulma/card.templ
diff --git a/internal/views/bulma/form/control.templ b/components/bulma/form/control.templ
similarity index 100%
rename from internal/views/bulma/form/control.templ
rename to components/bulma/form/control.templ
diff --git a/internal/views/bulma/form/field.templ b/components/bulma/form/field.templ
similarity index 100%
rename from internal/views/bulma/form/field.templ
rename to components/bulma/form/field.templ
diff --git a/components/bulma/form/input.templ b/components/bulma/form/input.templ
new file mode 100644
index 0000000..d793c66
--- /dev/null
+++ b/components/bulma/form/input.templ
@@ -0,0 +1,15 @@
+package form
+
+templ TextInput(color, id, fieldType, placeholder string) {
+	if color == "" {
+		<input class={ "input" } name={ id } id={ id } type={ fieldType } placeholder={ placeholder }/>
+	} else {
+		<input class={ "input", color } name={ id } id={ id } type={ fieldType } placeholder={ placeholder }/>
+	}
+}
+
+templ Checkbox(text, id string) {
+	<label class="checkbox">
+		<input type="checkbox" id={ id }/> { text }
+	</label>
+}
diff --git a/internal/views/bulma/form/label.templ b/components/bulma/form/label.templ
similarity index 100%
rename from internal/views/bulma/form/label.templ
rename to components/bulma/form/label.templ
diff --git a/components/bulma/form/new.templ b/components/bulma/form/new.templ
new file mode 100644
index 0000000..8f5029e
--- /dev/null
+++ b/components/bulma/form/new.templ
@@ -0,0 +1,13 @@
+package form
+
+type NewParam struct {
+	HxPost string
+}
+
+templ New(param NewParam) {
+	if param.HxPost != "" {
+		<form hx-post={ param.HxPost }>
+			{ children... }
+		</form>
+	}
+}
diff --git a/components/bulma/form/select.templ b/components/bulma/form/select.templ
new file mode 100644
index 0000000..8adffdc
--- /dev/null
+++ b/components/bulma/form/select.templ
@@ -0,0 +1,33 @@
+package form
+
+templ SelectOne(color string, isRound bool) {
+	if isRound {
+		<div class="select is-round">
+			<select>
+				{ children... }
+			</select>
+		</div>
+	} else {
+		<div class="select">
+			<select>
+				{ children... }
+			</select>
+		</div>
+	}
+}
+
+templ SelectOneItem(name string) {
+	<option>{ name }</option>
+}
+
+templ SelectMany(howManySelectable int, color string, isRound bool) {
+	<div class="select is-multiple">
+		<select multiple size="{ howManySelectable }">
+			{ children... }
+		</select>
+	</div>
+}
+
+templ SelectManyItem(name string) {
+	<option value={ name }>{ name }</option>
+}
diff --git a/internal/views/bulma/form/submit.templ b/components/bulma/form/submit.templ
similarity index 100%
rename from internal/views/bulma/form/submit.templ
rename to components/bulma/form/submit.templ
diff --git a/components/bulma/form/textarea.templ b/components/bulma/form/textarea.templ
new file mode 100644
index 0000000..d922742
--- /dev/null
+++ b/components/bulma/form/textarea.templ
@@ -0,0 +1,5 @@
+package form
+
+templ TextArea(id, placeholder, color string) {
+    <textarea class={ "textarea", color } id={ id } placeholder={ placeholder }/>
+}
\ No newline at end of file
diff --git a/components/bulma/form/util.go b/components/bulma/form/util.go
new file mode 100644
index 0000000..9b22a74
--- /dev/null
+++ b/components/bulma/form/util.go
@@ -0,0 +1,8 @@
+package form
+
+const (
+	InputTypeText        = "text"
+	InputTypePassword    = "password"
+	InputTypeEmail       = "email"
+	InputTypePhoneNumber = "tel"
+)
diff --git a/internal/views/bulma/hero.templ b/components/bulma/hero.templ
similarity index 100%
rename from internal/views/bulma/hero.templ
rename to components/bulma/hero.templ
diff --git a/components/bulma/notification.templ b/components/bulma/notification.templ
new file mode 100644
index 0000000..13f34a8
--- /dev/null
+++ b/components/bulma/notification.templ
@@ -0,0 +1,7 @@
+package bulma
+
+templ Notification(message, color string) {
+	<div class={ "notification", color }>
+		{ message }
+	</div>
+}
diff --git a/internal/views/bulma/section.templ b/components/bulma/section.templ
similarity index 100%
rename from internal/views/bulma/section.templ
rename to components/bulma/section.templ
diff --git a/components/bulma/tags.templ b/components/bulma/tags.templ
new file mode 100644
index 0000000..12b6735
--- /dev/null
+++ b/components/bulma/tags.templ
@@ -0,0 +1,13 @@
+package bulma
+
+templ Tag(message string) {
+	<span class={ "tag" }>{ message }</span>
+}
+
+templ TagColor(message, color string) {
+	<span class={ "tag", color }>{ message }</span>
+}
+
+templ TagColorSize(message, color, size string) {
+	<span class={ "tag", color, size }>{ message }</span>
+}
diff --git a/components/bulma/title.templ b/components/bulma/title.templ
new file mode 100644
index 0000000..2f95eba
--- /dev/null
+++ b/components/bulma/title.templ
@@ -0,0 +1,49 @@
+package bulma
+
+templ Title(message string) {
+	<h1 class="title">{ message }</h1>
+}
+
+templ Subitle(message string) {
+	<h2 class="subtitle">{ message }</h2>
+}
+
+templ H1(message string, isSubtitle bool) {
+	if isSubtitle {
+		<h1 class="subtitle is-1">{ message }</h1>
+	} else {
+		<h1 class="title is-1">{ message }</h1>
+	}
+}
+
+templ H2(message string, isSubtitle bool) {
+	if isSubtitle {
+		<h2 class="subtitle is-2">{ message }</h2>
+	} else {
+		<h2 class="title is-2">{ message }</h2>
+	}
+}
+
+templ H3(message string, isSubtitle bool) {
+	if isSubtitle {
+		<h3 class="subtitle is-3">{ message }</h3>
+	} else {
+		<h3 class="title is-3">{ message }</h3>
+	}
+}
+
+templ H4(message string, isSubtitle bool) {
+	if isSubtitle {
+		<h4 class="subtitle is-4">{ message }</h4>
+	} else {
+		<h4 class="title is-4">{ message }</h4>
+	}
+}
+
+templ H5(message string, isSubtitle bool) {
+	if isSubtitle {
+		<h5 class="subtitle is-5">{ message }</h5>
+	} else {
+		<h5 class="title is-5">{ message }</h5>
+	}
+}
diff --git a/internal/views/bulma/util.go b/components/bulma/util.go
similarity index 71%
rename from internal/views/bulma/util.go
rename to components/bulma/util.go
index f53dfd9..319fbca 100644
--- a/internal/views/bulma/util.go
+++ b/components/bulma/util.go
@@ -7,4 +7,8 @@ const (
 	ColorWarning = "is-warning"
 	ColorSuccess = "is-success"
 	ColorError   = "is-error"
+
+	SizeNormal = "is-normal"
+	SizeMedium = "is-medium"
+	SizeLarge  = "is-large"
 )
diff --git a/components/templ-html/br.templ b/components/templ-html/br.templ
new file mode 100644
index 0000000..13177ec
--- /dev/null
+++ b/components/templ-html/br.templ
@@ -0,0 +1,5 @@
+package templhtml
+
+templ Br(){
+    <br/>
+}
\ No newline at end of file
diff --git a/components/templ-html/href.templ b/components/templ-html/href.templ
new file mode 100644
index 0000000..038cbdb
--- /dev/null
+++ b/components/templ-html/href.templ
@@ -0,0 +1,9 @@
+package templhtml
+
+templ ALink(url, title string) {
+	<a href={ templ.SafeURL(url) }>{ title }</a>
+}
+
+templ ANewTab(url, text string) {
+	<a href={ templ.SafeURL(url) } target="_blank" rel="noopener noreferrer">{ text }</a>
+}
\ No newline at end of file
diff --git a/internal/views/articles/list.templ b/internal/views/articles/list.templ
index 10cff5d..1d9497c 100644
--- a/internal/views/articles/list.templ
+++ b/internal/views/articles/list.templ
@@ -1,17 +1,16 @@
 package articles
 
 import (
-	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
-	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 )
 
 templ List(model models.ListArticlesViewModel) {
 	@layout.WithTemplate() {
 		@filterBar()
 		for _, item := range model.Items {
-			@bulma.ArticleCardWithThumbnail(item.Article.Title, item.Article.Thumbnail, item.Article.Url, item.Article.PubDate.String(), item.Source.DisplayName )
-			
+			@bulma.ArticleCardWithThumbnail(item.Article.Title, item.Article.Thumbnail, item.Article.Url, item.Article.PubDate.String(), item.Source.DisplayName)
 		}
 	}
 }
diff --git a/internal/views/bulma/form/input.templ b/internal/views/bulma/form/input.templ
deleted file mode 100644
index 5255d18..0000000
--- a/internal/views/bulma/form/input.templ
+++ /dev/null
@@ -1,9 +0,0 @@
-package form
-
-templ Input(color, id, fieldType string) {
-	if color == "" {
-		<input class={ "input" } id={ id } type={ fieldType }/>
-	} else {
-		<input class={ "input", color } id={ id } type={ fieldType }/>
-	}
-}
diff --git a/internal/views/bulma/form/new.templ b/internal/views/bulma/form/new.templ
deleted file mode 100644
index a0a4190..0000000
--- a/internal/views/bulma/form/new.templ
+++ /dev/null
@@ -1,7 +0,0 @@
-package form
-
-templ New(postUrl string) {
-    <form hx-post={ postUrl }>
-        { children... }
-    </form>
-}
\ No newline at end of file
diff --git a/internal/views/bulma/form/util.go b/internal/views/bulma/form/util.go
deleted file mode 100644
index 34750a1..0000000
--- a/internal/views/bulma/form/util.go
+++ /dev/null
@@ -1,6 +0,0 @@
-package form
-
-const (
-	InputTypeText     = "text"
-	InputTypePassword = "password"
-)
diff --git a/internal/views/home/index.templ b/internal/views/home/index.templ
index b90be24..8ecaa65 100644
--- a/internal/views/home/index.templ
+++ b/internal/views/home/index.templ
@@ -1,7 +1,7 @@
 package home
 
 import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
 
 templ Index() {
 	@layout.WithTemplate() {
diff --git a/internal/views/sources/add.templ b/internal/views/sources/add.templ
index bdd3cda..7a7d546 100644
--- a/internal/views/sources/add.templ
+++ b/internal/views/sources/add.templ
@@ -1,18 +1,25 @@
 package sources
 
 import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+	"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/bulma"
-	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma/form"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 )
 
+var (
+	p = form.NewParam{
+		HxPost: "/sources/add",
+	}
+)
+
 templ Add(model models.AddSourcePayloadModel) {
 	@layout.WithTemplate() {
-		<h2>New Source</h2>
-		<p>At this time only direct RSS links are allowed to be provided</p>
-		@form.New("/sources/add") {
-			@form.Input("", "url", "text")
+		@bulma.H2("New Source", false)
+		<p>At this time only direct RSS links are allowed to be provided.</p>
+		@form.New(p) {
+			@form.TextInput("", "name", form.InputTypeText, "Name of the site")
+			@form.TextInput("", "url", form.InputTypeText, "RSS URL")
 			@form.Submit("Submit", bulma.ColorPrimary)
 		}
 	}
diff --git a/internal/views/sources/addAfter.templ b/internal/views/sources/addAfter.templ
new file mode 100644
index 0000000..c0d9046
--- /dev/null
+++ b/internal/views/sources/addAfter.templ
@@ -0,0 +1,11 @@
+package sources
+
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+
+templ AddAfter(message string, isError bool) {
+    if isError {
+        @bulma.Notification(message, bulma.ColorError)
+    } else {
+        @bulma.Notification("The requested source was added to the server", bulma.ColorSuccess)
+    }
+}
\ No newline at end of file
diff --git a/internal/views/sources/listAll.templ b/internal/views/sources/listAll.templ
index 6f2379b..2c3786e 100644
--- a/internal/views/sources/listAll.templ
+++ b/internal/views/sources/listAll.templ
@@ -1,15 +1,21 @@
 package sources
 
 import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+	templhtml "git.jamestombleson.com/jtom38/newsbot-portal/components/templ-html"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
-	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 )
 
 templ ListAll(model models.ListAllSourcesViewModel) {
 	@layout.WithTemplate() {
+		@bulma.Button() {
+			@templhtml.ALink("/sources/add", "New Source")
+		}
+		@templhtml.Br()
+		@templhtml.Br()
 		for _, item := range model.Items {
-			@bulma.Button(bulma.ColorPrimary, false, false) {
+			@bulma.ButtonColor(bulma.ColorPrimary) {
 				@bulma.ANewTab(item.Url, item.DisplayName)
 			}
 			<br/>
diff --git a/internal/views/users/afterLogin.templ b/internal/views/users/afterLogin.templ
index 213f221..1c0a0e1 100644
--- a/internal/views/users/afterLogin.templ
+++ b/internal/views/users/afterLogin.templ
@@ -1,17 +1,16 @@
 package users
 
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
+import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
+)
 
 // This is returned after the user logs into the application.
 // It just returns a partial view because it will overlap with the existing template.
 templ AfterLogin(vm models.AfterLoginViewModel) {
 	if vm.Success {
-		<div class="notification is-success">
-			{ vm.Message }
-		</div>
+		@bulma.Notification(vm.Message, bulma.ColorSuccess)
 	} else {
-		<div class="notification is-error">
-			{ vm.Message }
-		</div>
+		@bulma.Notification(vm.Message, bulma.ColorError)
 	}
 }
diff --git a/internal/views/users/afterSignUp.templ b/internal/views/users/afterSignUp.templ
index dfe3fd5..699dbf6 100644
--- a/internal/views/users/afterSignUp.templ
+++ b/internal/views/users/afterSignUp.templ
@@ -1,15 +1,13 @@
 package users
 
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+
 // This is returned after the user creates an account.
 // It just returns a partial view because it will overlap with the existing template.
 templ AfterSignUp(message string, success bool) {
 	if success {
-		<div class="notification is-success">
-			{ message }
-		</div>
+		@bulma.Notification(message, bulma.ColorSuccess)
 	} else {
-        <div class="notification is-error">
-			{ message }
-		</div>
+		@bulma.Notification(message, bulma.ColorError)
     }
 }
diff --git a/internal/views/users/login copy.templ b/internal/views/users/login copy.templ
index 8cb72a2..2f47cf2 100644
--- a/internal/views/users/login copy.templ	
+++ b/internal/views/users/login copy.templ	
@@ -1,23 +1,29 @@
 package users
 
 import (
-	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma/form"
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/form"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 )
 
+var (
+	p = form.NewParam{
+		HxPost: "/users/login",
+	}
+)
+
 templ LoginNew() {
 	@layout.WithTemplate() {
-		@form.New("/users/login") {
+		@form.New(p) {
 			@form.Field() {
 				@form.Label("Username")
 				@form.Control() {
-					@form.Input("", "username", "text")
+					@form.TextInput("", "username", "text", "email address")
 				}
 			}
-			@form.Field(){
+			@form.Field() {
 				@form.Label("Password")
-				@form.Control(){
-					@form.Input("", "password", form.InputTypePassword)
+				@form.Control() {
+					@form.TextInput("", "password", form.InputTypePassword, "")
 				}
 			}
 			@form.Submit("Submit", "is-primary")
diff --git a/internal/views/users/logout.templ b/internal/views/users/logout.templ
index 8bfb52b..7f43639 100644
--- a/internal/views/users/logout.templ
+++ b/internal/views/users/logout.templ
@@ -1,7 +1,7 @@
 package users
 
 import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
 
 templ Logout() {
     @layout.WithTemplate(){
diff --git a/internal/views/users/profile.templ b/internal/views/users/profile.templ
index 8edd35e..7a0962c 100644
--- a/internal/views/users/profile.templ
+++ b/internal/views/users/profile.templ
@@ -1,15 +1,19 @@
 package users
 
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/bulma"
+import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+	templhtml "git.jamestombleson.com/jtom38/newsbot-portal/components/templ-html"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+)
 
 templ Profile() {
 	@layout.WithTemplate() {
 		@bulma.Hero("Profile", "Here you can update your profile 😀")
-		
-		<button type="button" class="button">
-            <a href="/users/forcelogout">Logout Everywhere</a>
-        Logout Everywhere</button>
-        <p class="subtitle">This will force all active sessions to stop working and require a new login.</p>
+
+		@bulma.H2("Sessions", false)
+		@bulma.Button() {
+			@templhtml.ALink("/users/forcelogout", "Terminate all active sessions")
+		}
+		@bulma.Subitle("This will force you to login again as the application will give you a new session value.")
 	}
 }
diff --git a/internal/views/users/signup.templ b/internal/views/users/signup.templ
index 03c8a7e..ba46e98 100644
--- a/internal/views/users/signup.templ
+++ b/internal/views/users/signup.templ
@@ -1,23 +1,26 @@
 package users
 
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/form"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+)
 
 templ SignUp() {
 	@layout.WithTemplate() {
-		<form hx-post="/users/signup">
-			<div class="field">
-				<label class="label">Username</label>
-				<div class="control">
-					<input class="input" type="text" name="username" id="username"/>
-				</div>
-			</div>
-			<div class="field">
-				<label class="label">Password</label>
-				<div class="control">
-					<input class="input" type="password" name="password" id="exampleInputPassword1"/>
-				</div>
-			</div>
-			<button type="submit" class="button is-primary">Submit</button>
-		</form>
+		@form.New(form.NewParam{HxPost: "/users/signup"}) {
+			@form.Field(){
+				@form.Label("Username")
+				@form.Control() {
+					@form.TextInput("", "username", form.InputTypeText, "username or email address")
+				}
+			}
+			@form.Field() {
+				@form.Label("Password")
+				@form.Control() {
+					@form.TextInput("", "password", form.InputTypePassword, "Nice strong password, like Ox!")
+				}
+			}
+			@form.Submit("Submit", "")
+		}
 	}
 }

From 7d46b602873a485744df9d68c65eafffe6c204ff Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Thu, 11 Jul 2024 08:09:32 -0700
Subject: [PATCH 07/17] UI can now add sources to the api

---
 apiclient/sources.go         | 29 +++++++++++++++++++++--
 apiclient/util.go            | 45 ++++++++++++++++++++++++++++++++++++
 internal/handlers/handler.go |  1 +
 internal/handlers/sources.go | 10 ++++++++
 4 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/apiclient/sources.go b/apiclient/sources.go
index 5af6d9f..0d9f9b7 100644
--- a/apiclient/sources.go
+++ b/apiclient/sources.go
@@ -16,6 +16,7 @@ const (
 type Sources interface {
 	ListAll(jwt string, page int) (domain.SourcesResponse, error)
 	GetById(jwt string, id int64) (domain.SourcesResponse, error)
+	NewRss(jwt, name, url, sourceType string) (domain.SourcesResponse, error)
 }
 
 type sourceClient struct {
@@ -53,7 +54,7 @@ func (c sourceClient) ListAll(jwt string, page int) (domain.SourcesResponse, err
 		return bind, err
 	}
 
-	if (resp.StatusCode != 200) {
+	if resp.StatusCode != 200 {
 		return bind, errors.New(bind.Message)
 	}
 
@@ -69,9 +70,33 @@ func (c sourceClient) GetById(jwt string, id int64) (domain.SourcesResponse, err
 		return bind, err
 	}
 
-	if (statusCode != 200) {
+	if statusCode != 200 {
 		return bind, errors.New(bind.Message)
 	}
 
 	return bind, nil
 }
+
+func (c sourceClient) NewRss(jwt, name, url, sourceType string) (domain.SourcesResponse, error) {
+	param := domain.NewSourceParamRequest{
+		Name: name,
+		Url:  url,
+		Tags: "",
+	}
+	bind := domain.SourcesResponse{}
+	var endpoint string
+	if sourceType == domain.SourceCollectorRss {
+		endpoint = fmt.Sprintf("%s/%s/new/rss", c.serverAddress, SourcesBaseRoute)
+	}
+
+	statusCode, err := PostBodyUrlAuthorized(c.client, endpoint, jwt, param, &bind)
+	if err != nil {
+		return bind, err
+	}
+
+	if statusCode != 200 {
+		return bind, errors.New("got the wrong status code back from the API")
+	}
+
+	return bind, nil
+}
diff --git a/apiclient/util.go b/apiclient/util.go
index 8be09a0..d161eb9 100644
--- a/apiclient/util.go
+++ b/apiclient/util.go
@@ -58,6 +58,35 @@ func PostUrlAuthorized(client http.Client, endpoint, jwtToken string, t any) err
 	return nil
 }
 
+func PostBodyUrlAuthorized(client http.Client, endpoint, jwtToken string, body any, t any) (int, error) {
+	jsonBody, err := json.Marshal(body)
+	if err != nil {
+		return 0, err
+	}
+
+	req, err := http.NewRequest(http.MethodPost, endpoint, bytes.NewBuffer(jsonBody))
+	if err != nil {
+		return 0, err
+	}
+	req.Header.Add(HeaderAuthorization, fmt.Sprintf("%s %s", "Bearer", jwtToken))
+	req.Header.Add(HeaderContentType, ApplicationJson)
+
+	//response, err := http.Post(endpoint, ApplicationJson, bytes.NewBuffer(jsonBody))
+	response, err := client.Do(req)
+	if err != nil {
+		return response.StatusCode, err
+	}
+
+	defer response.Body.Close()
+	decoder := json.NewDecoder(response.Body)
+	err = decoder.Decode(&t)
+	if err != nil {
+		return response.StatusCode, err
+	}
+
+	return response.StatusCode, nil
+}
+
 func PostBodyUrl(client http.Client, endpoint string, body any, t any) error {
 	jsonBody, err := json.Marshal(body)
 	if err != nil {
@@ -79,6 +108,22 @@ func PostBodyUrl(client http.Client, endpoint string, body any, t any) error {
 	return nil
 }
 
+func PostQuery(client http.Client, endpoint string, t any) (int, error) {
+	response, err := http.Post(endpoint, ApplicationJson, nil)
+	if err != nil {
+		return response.StatusCode, err
+	}
+
+	defer response.Body.Close()
+	decoder := json.NewDecoder(response.Body)
+	err = decoder.Decode(&t)
+	if err != nil {
+		return response.StatusCode, err
+	}
+
+	return response.StatusCode, nil
+}
+
 func Get(client http.Client, endpoint, jwt string, t any) (int, error) {
 	req, err := http.NewRequest(http.MethodGet, endpoint, nil)
 	if err != nil {
diff --git a/internal/handlers/handler.go b/internal/handlers/handler.go
index 500554c..cc2d951 100644
--- a/internal/handlers/handler.go
+++ b/internal/handlers/handler.go
@@ -65,6 +65,7 @@ func NewServer(ctx context.Context, configs config.Configs, apiClient apiclient.
 	//sources.Use(ValidateJwtMiddleware(configs.JwtSecret))
 	sources.GET("", s.ListAllSources)
 	sources.GET("/add", s.AddSource)
+	sources.POST("/add", s.AddSourceAfter)
 
 	users := router.Group("/users")
 	users.GET("/login", s.UserLogin)
diff --git a/internal/handlers/sources.go b/internal/handlers/sources.go
index 5a23c69..04e2533 100644
--- a/internal/handlers/sources.go
+++ b/internal/handlers/sources.go
@@ -36,3 +36,13 @@ func (h *Handler) AddSource(c echo.Context) error {
 
 	return Render(c, http.StatusOK, sources.Add(models.AddSourcePayloadModel{}))
 }
+
+func (h *Handler) AddSourceAfter(c echo.Context) error {
+	name := c.FormValue("name")
+	url := c.FormValue("url")
+	resp, err := h.api.Sources.NewRss(GetJwtToken(c), name, url, "rss")
+	if err != nil {
+		return Render(c, http.StatusOK, sources.AddAfter(err.Error(), true))
+	}
+	return Render(c, http.StatusOK, sources.AddAfter(resp.Message, false))
+}
\ No newline at end of file

From cd5ff71df4db487889955611e3e46474a665335d Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Thu, 11 Jul 2024 08:10:01 -0700
Subject: [PATCH 08/17] Updated api domain

---
 go.mod | 2 +-
 go.sum | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/go.mod b/go.mod
index d4c7720..e6cd14d 100644
--- a/go.mod
+++ b/go.mod
@@ -3,7 +3,7 @@ module git.jamestombleson.com/jtom38/newsbot-portal
 go 1.22.1
 
 require (
-	git.jamestombleson.com/jtom38/newsbot-api v0.0.0-20240603002809-9237369e5a76
+	git.jamestombleson.com/jtom38/newsbot-api v0.0.0-20240710142335-56199a795a2b // indirect
 	github.com/a-h/templ v0.2.747
 	github.com/golang-jwt/jwt/v5 v5.2.1
 	github.com/joho/godotenv v1.5.1
diff --git a/go.sum b/go.sum
index a7a9974..0518da0 100644
--- a/go.sum
+++ b/go.sum
@@ -1,5 +1,7 @@
 git.jamestombleson.com/jtom38/newsbot-api v0.0.0-20240603002809-9237369e5a76 h1:B9t5fcfVerMjqnXXPUmYwdmUk76EoEL8x9IRehqg2c4=
 git.jamestombleson.com/jtom38/newsbot-api v0.0.0-20240603002809-9237369e5a76/go.mod h1:A3UdJyQ/IEy3utEwJiC4nbi0ohfgrUNRLTei2iZhLLA=
+git.jamestombleson.com/jtom38/newsbot-api v0.0.0-20240710142335-56199a795a2b h1:XAXD6OSFDzrJ2O1+wma/vnYfLJdcQZRD6NFjfjxjKv4=
+git.jamestombleson.com/jtom38/newsbot-api v0.0.0-20240710142335-56199a795a2b/go.mod h1:A3UdJyQ/IEy3utEwJiC4nbi0ohfgrUNRLTei2iZhLLA=
 github.com/a-h/templ v0.2.747 h1:D0dQ2lxC3W7Dxl6fxQ/1zZHBQslSkTSvl5FxP/CfdKg=
 github.com/a-h/templ v0.2.747/go.mod h1:69ObQIbrcuwPCU32ohNaWce3Cb7qM5GMiqN1K+2yop4=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=

From 58ca5b35469d9beea54fd88f4a31e5a17b81d9c6 Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Sat, 13 Jul 2024 10:34:28 -0700
Subject: [PATCH 09/17] added component to add bulma into head

---
 components/bulma/script.templ      | 5 +++++
 internal/views/layout/header.templ | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 components/bulma/script.templ

diff --git a/components/bulma/script.templ b/components/bulma/script.templ
new file mode 100644
index 0000000..8c72096
--- /dev/null
+++ b/components/bulma/script.templ
@@ -0,0 +1,5 @@
+package bulma
+
+templ UseBulmaCdn() {
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.1/css/bulma.min.css"/>
+}
\ No newline at end of file
diff --git a/internal/views/layout/header.templ b/internal/views/layout/header.templ
index 942e76f..0da3df2 100644
--- a/internal/views/layout/header.templ
+++ b/internal/views/layout/header.templ
@@ -1,7 +1,9 @@
 package layout
 
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+
 templ header() {
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css"/>
+	@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"/>

From 174516f34f62cbee0eb7346f1341578f90a10a72 Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Sat, 13 Jul 2024 10:34:59 -0700
Subject: [PATCH 10/17] moved html components as a child of bulma.  They can be
 moved out of this project if needed

---
 .../{templ-html => bulma/html}/br.templ       |  2 +-
 .../{templ-html => bulma/html}/href.templ     |  2 +-
 components/bulma/html/html.templ              | 26 +++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)
 rename components/{templ-html => bulma/html}/br.templ (57%)
 rename components/{templ-html => bulma/html}/href.templ (91%)
 create mode 100644 components/bulma/html/html.templ

diff --git a/components/templ-html/br.templ b/components/bulma/html/br.templ
similarity index 57%
rename from components/templ-html/br.templ
rename to components/bulma/html/br.templ
index 13177ec..f62f03a 100644
--- a/components/templ-html/br.templ
+++ b/components/bulma/html/br.templ
@@ -1,4 +1,4 @@
-package templhtml
+package html
 
 templ Br(){
     <br/>
diff --git a/components/templ-html/href.templ b/components/bulma/html/href.templ
similarity index 91%
rename from components/templ-html/href.templ
rename to components/bulma/html/href.templ
index 038cbdb..87a353c 100644
--- a/components/templ-html/href.templ
+++ b/components/bulma/html/href.templ
@@ -1,4 +1,4 @@
-package templhtml
+package html
 
 templ ALink(url, title string) {
 	<a href={ templ.SafeURL(url) }>{ title }</a>
diff --git a/components/bulma/html/html.templ b/components/bulma/html/html.templ
new file mode 100644
index 0000000..ad16efe
--- /dev/null
+++ b/components/bulma/html/html.templ
@@ -0,0 +1,26 @@
+package html
+
+templ Doctype() {
+	<!DOCTYPE html>
+}
+
+// Creates <html> that accepts children
+templ New(lang string) {
+	<html lang={ lang }>
+		{ children... }
+	</html>
+}
+
+// Creates <head> that accepts children
+templ NewHeader() {
+    <head>
+        { children... }
+    </head>
+}
+
+// Creates <body> that accepts children
+templ NewBody() {
+    <body>
+        { children... }
+    </body>
+}

From 262cd8b897fa40854f0efa5f1c80c4bab1b1fefa Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Sat, 13 Jul 2024 10:35:36 -0700
Subject: [PATCH 11/17] added more layout components

---
 components/bulma/hero.templ             | 10 -------
 components/bulma/layout/container.templ |  7 +++++
 components/bulma/layout/hero.templ      | 37 +++++++++++++++++++++++++
 components/bulma/layout/section.templ   |  9 ++++++
 components/bulma/section.templ          | 11 --------
 5 files changed, 53 insertions(+), 21 deletions(-)
 delete mode 100644 components/bulma/hero.templ
 create mode 100644 components/bulma/layout/container.templ
 create mode 100644 components/bulma/layout/hero.templ
 create mode 100644 components/bulma/layout/section.templ
 delete mode 100644 components/bulma/section.templ

diff --git a/components/bulma/hero.templ b/components/bulma/hero.templ
deleted file mode 100644
index ce5dd39..0000000
--- a/components/bulma/hero.templ
+++ /dev/null
@@ -1,10 +0,0 @@
-package bulma
-
-templ Hero(title, subtitle string) {
-	<section class="hero">
-		<div class="hero-body">
-			<p class="title">{ title }</p>
-			<p class="subtitle">{ subtitle }</p>
-		</div>
-	</section>
-}
diff --git a/components/bulma/layout/container.templ b/components/bulma/layout/container.templ
new file mode 100644
index 0000000..88ab181
--- /dev/null
+++ b/components/bulma/layout/container.templ
@@ -0,0 +1,7 @@
+package layout
+
+templ Container(breakpoint string) {
+	<div class={ "container", breakpoint }>
+		{ children... }
+	</div>
+}
diff --git a/components/bulma/layout/hero.templ b/components/bulma/layout/hero.templ
new file mode 100644
index 0000000..1dfd6a3
--- /dev/null
+++ b/components/bulma/layout/hero.templ
@@ -0,0 +1,37 @@
+package layout
+
+templ Hero(title, subtitle string) {
+	<section class="hero">
+		<div class="hero-body">
+			<p class="title">{ title }</p>
+			<p class="subtitle">{ subtitle }</p>
+		</div>
+	</section>
+}
+
+templ HeroSize(title, subtitle, size string) {
+	<section class={ "hero", size }>
+		<div class="hero-body">
+			<p class="title">{ title }</p>
+			<p class="subtitle">{ subtitle }</p>
+		</div>
+	</section>
+} 
+
+templ HeroColor(title, subtitle, color string) {
+	<section class={ "hero", color }>
+		<div class="hero-body">
+			<p class="title">{ title }</p>
+			<p class="subtitle">{ subtitle }</p>
+		</div>
+	</section>
+}
+
+templ HeroColorSize(title, subtitle, color, size string) {
+	<section class={ "hero", color, size }>
+		<div class="hero-body">
+			<p class="title">{ title }</p>
+			<p class="subtitle">{ subtitle }</p>
+		</div>
+	</section>
+}
\ No newline at end of file
diff --git a/components/bulma/layout/section.templ b/components/bulma/layout/section.templ
new file mode 100644
index 0000000..4775db4
--- /dev/null
+++ b/components/bulma/layout/section.templ
@@ -0,0 +1,9 @@
+package bulma
+
+// Creates a <section> object thats good to break up a page of content.
+templ Section(title, subtitle string) {
+	<section class="section">
+		<h1 class="title">{ title }</h1>
+		<h2 class="subtitle">{ subtitle }</h2>
+	</section>
+}
diff --git a/components/bulma/section.templ b/components/bulma/section.templ
deleted file mode 100644
index 1726976..0000000
--- a/components/bulma/section.templ
+++ /dev/null
@@ -1,11 +0,0 @@
-package bulma
-
-templ Section(title, subtitle string) {
-	<section class="section">
-		<h1 class="title">Section</h1>
-		<h2 class="subtitle">
-			A simple container to divide your page into <strong>sections</strong>, like
-			the one you're currently reading.
-		</h2>
-	</section>
-}

From cce768dad86be8111a6a8cdbd7404d7afc4ee712 Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Sat, 13 Jul 2024 10:36:15 -0700
Subject: [PATCH 12/17] split TextInput to have an option for color as its own
 func

---
 components/bulma/form/input.templ | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/bulma/form/input.templ b/components/bulma/form/input.templ
index d793c66..12a45bc 100644
--- a/components/bulma/form/input.templ
+++ b/components/bulma/form/input.templ
@@ -1,6 +1,10 @@
 package form
 
-templ TextInput(color, id, fieldType, placeholder string) {
+templ TextInput(id, fieldType, placeholder string) {
+	<input class={ "input" } name={ id } id={ id } type={ fieldType } placeholder={ placeholder }/>
+}
+
+templ TextInputColor(color, id, fieldType, placeholder string) {
 	if color == "" {
 		<input class={ "input" } name={ id } id={ id } type={ fieldType } placeholder={ placeholder }/>
 	} else {

From 90f847b75732e0b808fe994c54d6655203a1db8d Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Sat, 13 Jul 2024 10:36:26 -0700
Subject: [PATCH 13/17] added table components

---
 components/bulma/table.templ | 37 ++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 components/bulma/table.templ

diff --git a/components/bulma/table.templ b/components/bulma/table.templ
new file mode 100644
index 0000000..2356404
--- /dev/null
+++ b/components/bulma/table.templ
@@ -0,0 +1,37 @@
+package bulma
+
+// Creates a <table> that accepts children
+templ Table(){
+    <table class="table">
+        { children... }
+    </table>
+}
+
+// Creates a <thead> that accepts children.
+templ TableHeader() {
+    <thead>{ children... }</thead>
+}
+
+// Creates a <tf> that accepts children.
+templ TableRow() {
+    <tr>{ children... }</tr>
+}
+
+// Creates a <th> and writes the given value
+templ TableHeaderData(value string) {
+    <th>{ value }</th>
+}
+
+// Creates a <th> that allows you to also add a tooltip value
+templ TableHeaderDataToolTip(value, tooltip string) {
+    <th><abbr title={ tooltip }>{ value }</abbr></th>
+}
+
+// Creates a <td> that accepts children.
+templ TableDataChildren() {
+    <td>{ children... }</td>
+}
+
+templ TableData(value string) {
+    <td>{ value }</td>
+}
\ No newline at end of file

From 9eb97d892fa3293c27641eb82e15f31a6d94d0ed Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Sat, 13 Jul 2024 10:38:02 -0700
Subject: [PATCH 14/17] minor changes and starting to add examples of how to
 use it

---
 components/bulma/block.templ           |  8 ++++++++
 components/bulma/example/example.templ | 19 +++++++++++++++++++
 components/bulma/example/layout.templ  |  1 +
 components/bulma/util.go               |  6 ++++++
 4 files changed, 34 insertions(+)
 create mode 100644 components/bulma/block.templ
 create mode 100644 components/bulma/example/example.templ
 create mode 100644 components/bulma/example/layout.templ

diff --git a/components/bulma/block.templ b/components/bulma/block.templ
new file mode 100644
index 0000000..57d129b
--- /dev/null
+++ b/components/bulma/block.templ
@@ -0,0 +1,8 @@
+package bulma
+
+// Simple spacer that accepts children
+templ Block() {
+    <div class="block">
+        { children... }
+    </div>
+}
\ No newline at end of file
diff --git a/components/bulma/example/example.templ b/components/bulma/example/example.templ
new file mode 100644
index 0000000..8940fe2
--- /dev/null
+++ b/components/bulma/example/example.templ
@@ -0,0 +1,19 @@
+package example
+
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/html"
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/layout"
+
+templ example() {
+	@html.Doctype()
+	@html.New("en"){
+		@html.NewHeader(){
+			@bulma.UseBulmaCdn()
+		}
+		@html.NewBody() {
+			@layout.Container(bulma.BreakpointDefault) {
+				{ children... }
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/components/bulma/example/layout.templ b/components/bulma/example/layout.templ
new file mode 100644
index 0000000..f7ec372
--- /dev/null
+++ b/components/bulma/example/layout.templ
@@ -0,0 +1 @@
+package example
diff --git a/components/bulma/util.go b/components/bulma/util.go
index 319fbca..1617019 100644
--- a/components/bulma/util.go
+++ b/components/bulma/util.go
@@ -11,4 +11,10 @@ const (
 	SizeNormal = "is-normal"
 	SizeMedium = "is-medium"
 	SizeLarge  = "is-large"
+
+	BreakpointDefault       = ""
+	BreakpointWidescreen    = "is-widescreen"
+	BreakpointFullHd        = "is-fullhd"
+	BreakpointMaxDesktop    = "is-max-desktop"
+	BreakpointMaxWidescreen = "is-max-widescreen"
 )

From 175a42f58ce03ef67b87b39309e2562251bef958 Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Sat, 13 Jul 2024 10:38:40 -0700
Subject: [PATCH 15/17] Adding a table view for articles

---
 internal/views/articles/table.templ | 32 +++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 internal/views/articles/table.templ

diff --git a/internal/views/articles/table.templ b/internal/views/articles/table.templ
new file mode 100644
index 0000000..08aeabf
--- /dev/null
+++ b/internal/views/articles/table.templ
@@ -0,0 +1,32 @@
+package articles
+
+import (
+	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
+	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+)
+
+templ ListArticlesTable(model models.ListArticlesViewModel) {
+	@layout.WithTemplate() {
+		@bulma.Table() {
+			@bulma.TableHeader() {
+				@bulma.TableRow() {
+					@bulma.TableHeaderData("Title")
+					@bulma.TableHeaderData("Source")
+					@bulma.TableHeaderData("View")
+				}
+			}
+			for _, item := range model.Items {
+				@bulma.TableRow() {
+					@bulma.TableData(item.Article.Title)
+					@bulma.TableData(item.Source.DisplayName)
+					@bulma.TableDataChildren() {
+						@bulma.Button() {
+							@bulma.ANewTab(item.Article.Url, "View")
+						}
+					}
+				}
+			}
+		}
+	}
+}

From 9c1aa2939e05a0a10e3f9e7f67169bb43b20761f Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Sat, 13 Jul 2024 10:38:54 -0700
Subject: [PATCH 16/17] refactor

---
 internal/views/home/about.templ       |  8 ++---
 internal/views/home/index.templ       | 45 ++++++++++++---------------
 internal/views/sources/add.templ      | 19 ++++++-----
 internal/views/sources/listAll.templ  |  8 ++---
 internal/views/users/login copy.templ |  4 +--
 internal/views/users/logout.templ     |  4 +--
 internal/views/users/profile.templ    |  7 +++--
 internal/views/users/signup.templ     |  4 +--
 8 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/internal/views/home/about.templ b/internal/views/home/about.templ
index 306ee41..b580198 100644
--- a/internal/views/home/about.templ
+++ b/internal/views/home/about.templ
@@ -1,15 +1,15 @@
 package home
 
 import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
+import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
 
 templ About() {
     @layout.WithTemplate(){
-        <h1 class="title"> About this project</h1>
-
-        <section class="section">
+        @bulma.Title("About this project")
+        @bulma.Block() {
             Newsbot started a small project to send out notifications to discord servers.
             I wanted to be able to keep the small communitiy aware of new posts about a game we all played.
             That feature still exists because I think that keeping a communitiy aware and engaged is important and not everyone follows the same news.
-        </section>
+        }
     }
 }
\ No newline at end of file
diff --git a/internal/views/home/index.templ b/internal/views/home/index.templ
index 8ecaa65..c614456 100644
--- a/internal/views/home/index.templ
+++ b/internal/views/home/index.templ
@@ -1,32 +1,27 @@
 package home
 
-import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
-import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+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/views/layout"
+)
 
 templ Index() {
 	@layout.WithTemplate() {
-        @bulma.Hero("Welcome to Newsbot!", "Your new home for your news.")
-
-        <section class="section">
-            <p>
-                News bot is a self hostable solution to aggregating your news.
-                You can run `Newsbot` as an API or interact with it with this site. 
-            </p>
-        </section>
-
-
-        <div class="block">
-            <h2 class="title">Why Newsbot</h2>
-            I started to build this tool to help me avoid sitting on the big platform websites.
-            I wanted a tool that would work for me, not them.
-
-            This tool started as a notification system that would let me redirect RSS posts over to Discord servers.
-            It still has those roots but now its starting to scale up to a full Aggregation platform.
-            
-        </div>
-        <p>
-            This project is a passion project of mine as I 
-        </p>
-
+		@bl.Hero("Welcome to Newsbot!", "Your new home for your news.")
+		@b.Block() {
+			News bot is a self hostable solution to aggregating your news.
+			You can run `Newsbot` as an API or interact with it with this site. 
+		}
+		@b.H2("Why Newsbot", false)
+		@b.Block() {
+			I started to build this tool to help me avoid sitting on the big platform websites.
+			I wanted a tool that would work for me, not them.
+			This tool started as a notification system that would let me redirect RSS posts over to Discord servers.
+			It still has those roots but now its starting to scale up to a full Aggregation platform.
+		}
+		@b.Block() {
+			This project is a passion project of mine as I 
+		}
 	}
 }
diff --git a/internal/views/sources/add.templ b/internal/views/sources/add.templ
index 7a7d546..cf49057 100644
--- a/internal/views/sources/add.templ
+++ b/internal/views/sources/add.templ
@@ -2,25 +2,28 @@ package sources
 
 import (
 	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
-	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/form"
+	bf "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/form"
+	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"
 )
 
 var (
-	p = form.NewParam{
+	p = bf.NewParam{
 		HxPost: "/sources/add",
 	}
 )
 
 templ Add(model models.AddSourcePayloadModel) {
 	@layout.WithTemplate() {
-		@bulma.H2("New Source", false)
-		<p>At this time only direct RSS links are allowed to be provided.</p>
-		@form.New(p) {
-			@form.TextInput("", "name", form.InputTypeText, "Name of the site")
-			@form.TextInput("", "url", form.InputTypeText, "RSS URL")
-			@form.Submit("Submit", bulma.ColorPrimary)
+		@bl.Hero("New Source", "")
+		@bulma.Block() {
+			At this time only direct RSS links are allowed to be provided.
+		}
+		@bf.New(p) {
+			@bf.TextInput("name", bf.InputTypeText, "Name of the site")
+			@bf.TextInput("url", bf.InputTypeText, "RSS URL")
+			@bf.Submit("Submit", bulma.ColorPrimary)
 		}
 	}
 }
diff --git a/internal/views/sources/listAll.templ b/internal/views/sources/listAll.templ
index 2c3786e..24f0fbd 100644
--- a/internal/views/sources/listAll.templ
+++ b/internal/views/sources/listAll.templ
@@ -2,7 +2,7 @@ package sources
 
 import (
 	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
-	templhtml "git.jamestombleson.com/jtom38/newsbot-portal/components/templ-html"
+	bh "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/html"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/models"
 	"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
 )
@@ -10,10 +10,10 @@ import (
 templ ListAll(model models.ListAllSourcesViewModel) {
 	@layout.WithTemplate() {
 		@bulma.Button() {
-			@templhtml.ALink("/sources/add", "New Source")
+			@bh.ALink("/sources/add", "New Source")
 		}
-		@templhtml.Br()
-		@templhtml.Br()
+		@bh.Br()
+		@bh.Br()
 		for _, item := range model.Items {
 			@bulma.ButtonColor(bulma.ColorPrimary) {
 				@bulma.ANewTab(item.Url, item.DisplayName)
diff --git a/internal/views/users/login copy.templ b/internal/views/users/login copy.templ
index 2f47cf2..6aca252 100644
--- a/internal/views/users/login copy.templ	
+++ b/internal/views/users/login copy.templ	
@@ -17,13 +17,13 @@ templ LoginNew() {
 			@form.Field() {
 				@form.Label("Username")
 				@form.Control() {
-					@form.TextInput("", "username", "text", "email address")
+					@form.TextInput("username", "text", "email address")
 				}
 			}
 			@form.Field() {
 				@form.Label("Password")
 				@form.Control() {
-					@form.TextInput("", "password", form.InputTypePassword, "")
+					@form.TextInput("password", form.InputTypePassword, "")
 				}
 			}
 			@form.Submit("Submit", "is-primary")
diff --git a/internal/views/users/logout.templ b/internal/views/users/logout.templ
index 7f43639..a0a45ef 100644
--- a/internal/views/users/logout.templ
+++ b/internal/views/users/logout.templ
@@ -1,10 +1,10 @@
 package users
 
 import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
-import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
+import bl "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma/layout"
 
 templ Logout() {
     @layout.WithTemplate(){
-        @bulma.Hero("You are out of here!", "Please login again when you are ready.")
+        @bl.Hero("You are out of here!", "Please login again when you are ready.")
     }
 }
\ No newline at end of file
diff --git a/internal/views/users/profile.templ b/internal/views/users/profile.templ
index 7a0962c..fea8a29 100644
--- a/internal/views/users/profile.templ
+++ b/internal/views/users/profile.templ
@@ -2,17 +2,18 @@ package users
 
 import (
 	"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
-	templhtml "git.jamestombleson.com/jtom38/newsbot-portal/components/templ-html"
+	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/views/layout"
 )
 
 templ Profile() {
 	@layout.WithTemplate() {
-		@bulma.Hero("Profile", "Here you can update your profile 😀")
+		@bl.Hero("Profile", "Here you can update your profile 😀")
 
 		@bulma.H2("Sessions", false)
 		@bulma.Button() {
-			@templhtml.ALink("/users/forcelogout", "Terminate all active sessions")
+			@bh.ALink("/users/forcelogout", "Terminate all active sessions")
 		}
 		@bulma.Subitle("This will force you to login again as the application will give you a new session value.")
 	}
diff --git a/internal/views/users/signup.templ b/internal/views/users/signup.templ
index ba46e98..f915538 100644
--- a/internal/views/users/signup.templ
+++ b/internal/views/users/signup.templ
@@ -11,13 +11,13 @@ templ SignUp() {
 			@form.Field(){
 				@form.Label("Username")
 				@form.Control() {
-					@form.TextInput("", "username", form.InputTypeText, "username or email address")
+					@form.TextInput("username", form.InputTypeText, "username or email address")
 				}
 			}
 			@form.Field() {
 				@form.Label("Password")
 				@form.Control() {
-					@form.TextInput("", "password", form.InputTypePassword, "Nice strong password, like Ox!")
+					@form.TextInput("password", form.InputTypePassword, "Nice strong password, like Ox!")
 				}
 			}
 			@form.Submit("Submit", "")

From 5733d3af9f330d0613ab07caf1c12a1ca1e6f1c8 Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Sat, 13 Jul 2024 10:39:05 -0700
Subject: [PATCH 17/17] testing out table view

---
 internal/handlers/articles.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/internal/handlers/articles.go b/internal/handlers/articles.go
index bf602ed..fd4a15d 100644
--- a/internal/handlers/articles.go
+++ b/internal/handlers/articles.go
@@ -36,5 +36,5 @@ func (h *Handler) ArticlesList(c echo.Context) error {
 
 	}
 
-	return Render(c, http.StatusOK, articles.List(vm))
+	return Render(c, http.StatusOK, articles.ListArticlesTable(vm))
 }