jtom38/newsbot-portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: jtom38:cd5ff71df4db487889955611e3e46474a665335d
Branches Tags
jtom38:main
..
compare: jtom38:5733d3af9f330d0613ab07caf1c12a1ca1e6f1c8
Branches Tags
jtom38:main

9 Commits
cd5ff71df4 ... 5733d3af9f

Author SHA1 Message Date
James Tombleson
5733d3af9f testing out table view 2024-07-13 10:39:05 -07:00
James Tombleson
9c1aa2939e refactor 2024-07-13 10:38:54 -07:00
James Tombleson
175a42f58c Adding a table view for articles 2024-07-13 10:38:40 -07:00
James Tombleson
9eb97d892f minor changes and starting to add examples of how to use it 2024-07-13 10:38:02 -07:00
James Tombleson
90f847b757 added table components 2024-07-13 10:36:26 -07:00
James Tombleson
cce768dad8 split TextInput to have an option for color as its own func 2024-07-13 10:36:15 -07:00
James Tombleson
262cd8b897 added more layout components 2024-07-13 10:35:36 -07:00
James Tombleson
174516f34f moved html components as a child of bulma. They can be moved out of this project if needed 2024-07-13 10:34:59 -07:00
James Tombleson
58ca5b3546 added component to add bulma into head 2024-07-13 10:34:28 -07:00
26 changed files with 247 additions and 76 deletions
Show Stats Expand all files Collapse all files

8
components/bulma/block.templ Normal file
View File

@ -0,0 +1,8 @@
package bulma
// Simple spacer that accepts children
templ Block() {
<div class="block">
{ children... }
</div>
}

19
components/bulma/example/example.templ Normal file
View File

@ -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... }
}
}
}
}

1
components/bulma/example/layout.templ Normal file
View File

@ -0,0 +1 @@
package example

6
components/bulma/form/input.templ
View File

@ -1,6 +1,10 @@
package form 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 == "" { if color == "" {
<input class={ "input" } name={ id } id={ id } type={ fieldType } placeholder={ placeholder }/> <input class={ "input" } name={ id } id={ id } type={ fieldType } placeholder={ placeholder }/>
} else { } else {

10
components/bulma/hero.templ
View File

@ -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>
}

2
components/templ-html/br.templ → components/bulma/html/br.templ
View File

@ -1,4 +1,4 @@
package templhtml package html
templ Br(){ templ Br(){
<br/> <br/>

2
components/templ-html/href.templ → components/bulma/html/href.templ
View File

@ -1,4 +1,4 @@
package templhtml package html
templ ALink(url, title string) { templ ALink(url, title string) {
<a href={ templ.SafeURL(url) }>{ title }</a> <a href={ templ.SafeURL(url) }>{ title }</a>

26
components/bulma/html/html.templ Normal file
View File

@ -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>
}

7
components/bulma/layout/container.templ Normal file
View File

@ -0,0 +1,7 @@
package layout
templ Container(breakpoint string) {
<div class={ "container", breakpoint }>
{ children... }
</div>
}

37
components/bulma/layout/hero.templ Normal file
View File

@ -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>
}

9
components/bulma/layout/section.templ Normal file
View File

@ -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>
}

5
components/bulma/script.templ Normal file
View File

@ -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"/>
}

11
components/bulma/section.templ
View File

@ -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>
}

37
components/bulma/table.templ Normal file
View File

@ -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>
}

6
components/bulma/util.go
View File

@ -11,4 +11,10 @@ const (
SizeNormal = "is-normal" SizeNormal = "is-normal"
SizeMedium = "is-medium" SizeMedium = "is-medium"
SizeLarge = "is-large" SizeLarge = "is-large"
BreakpointDefault = ""
BreakpointWidescreen = "is-widescreen"
BreakpointFullHd = "is-fullhd"
BreakpointMaxDesktop = "is-max-desktop"
BreakpointMaxWidescreen = "is-max-widescreen"
) )

2
internal/handlers/articles.go
View File

@ -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))
} }

32
internal/views/articles/table.templ Normal file
View File

@ -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")
}
}
}
}
}
}
}

8
internal/views/home/about.templ
View File

@ -1,15 +1,15 @@
package home package home
import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout" import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
templ About() { templ About() {
@layout.WithTemplate(){ @layout.WithTemplate(){
<h1 class="title"> About this project</h1> @bulma.Title("About this project")
@bulma.Block() {
<section class="section">
Newsbot started a small project to send out notifications to discord servers. 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. 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. That feature still exists because I think that keeping a communitiy aware and engaged is important and not everyone follows the same news.
</section> }
} }
} }

45
internal/views/home/index.templ
View File

@ -1,32 +1,27 @@
package home package home
import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout" import (
import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma" 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() { templ Index() {
@layout.WithTemplate() { @layout.WithTemplate() {
@bulma.Hero("Welcome to Newsbot!", "Your new home for your news.") @bl.Hero("Welcome to Newsbot!", "Your new home for your news.")
@b.Block() {
<section class="section"> News bot is a self hostable solution to aggregating your news.
<p> You can run `Newsbot` as an API or interact with it with this site.
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)
</p> @b.Block() {
</section> 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.
<div class="block"> It still has those roots but now its starting to scale up to a full Aggregation platform.
<h2 class="title">Why Newsbot</h2> }
I started to build this tool to help me avoid sitting on the big platform websites. @b.Block() {
I wanted a tool that would work for me, not them. This project is a passion project of mine as I
}
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>
} }
} }

4
internal/views/layout/header.templ
View File

@ -1,7 +1,9 @@
package layout package layout
import "git.jamestombleson.com/jtom38/newsbot-portal/components/bulma"
templ header() { 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"/> <link rel="stylesheet" href="/css/main.css"/>
<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script> <script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
<meta charset="utf-8"/> <meta charset="utf-8"/>

19
internal/views/sources/add.templ
View File

@ -2,25 +2,28 @@ package sources
import ( import (
"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma" "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/models"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout" "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
) )
var ( var (
p = form.NewParam{ p = bf.NewParam{
HxPost: "/sources/add", HxPost: "/sources/add",
} }
) )
templ Add(model models.AddSourcePayloadModel) { templ Add(model models.AddSourcePayloadModel) {
@layout.WithTemplate() { @layout.WithTemplate() {
@bulma.H2("New Source", false) @bl.Hero("New Source", "")
<p>At this time only direct RSS links are allowed to be provided.</p> @bulma.Block() {
@form.New(p) { At this time only direct RSS links are allowed to be provided.
@form.TextInput("", "name", form.InputTypeText, "Name of the site") }
@form.TextInput("", "url", form.InputTypeText, "RSS URL") @bf.New(p) {
@form.Submit("Submit", bulma.ColorPrimary) @bf.TextInput("name", bf.InputTypeText, "Name of the site")
@bf.TextInput("url", bf.InputTypeText, "RSS URL")
@bf.Submit("Submit", bulma.ColorPrimary)
} }
} }
} }

8
internal/views/sources/listAll.templ
View File

@ -2,7 +2,7 @@ package sources
import ( import (
"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma" "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/models"
"git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout" "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
) )
@ -10,10 +10,10 @@ import (
templ ListAll(model models.ListAllSourcesViewModel) { templ ListAll(model models.ListAllSourcesViewModel) {
@layout.WithTemplate() { @layout.WithTemplate() {
@bulma.Button() { @bulma.Button() {
@templhtml.ALink("/sources/add", "New Source") @bh.ALink("/sources/add", "New Source")
} }
@templhtml.Br() @bh.Br()
@templhtml.Br() @bh.Br()
for _, item := range model.Items { for _, item := range model.Items {
@bulma.ButtonColor(bulma.ColorPrimary) { @bulma.ButtonColor(bulma.ColorPrimary) {
@bulma.ANewTab(item.Url, item.DisplayName) @bulma.ANewTab(item.Url, item.DisplayName)

4
internal/views/users/login copy.templ
View File

@ -17,13 +17,13 @@ templ LoginNew() {
@form.Field() { @form.Field() {
@form.Label("Username") @form.Label("Username")
@form.Control() { @form.Control() {
@form.TextInput("", "username", "text", "email address") @form.TextInput("username", "text", "email address")
} }
} }
@form.Field() { @form.Field() {
@form.Label("Password") @form.Label("Password")
@form.Control() { @form.Control() {
@form.TextInput("", "password", form.InputTypePassword, "") @form.TextInput("password", form.InputTypePassword, "")
} }
} }
@form.Submit("Submit", "is-primary") @form.Submit("Submit", "is-primary")

4
internal/views/users/logout.templ
View File

@ -1,10 +1,10 @@
package users package users
import "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout" 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() { templ Logout() {
@layout.WithTemplate(){ @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.")
} }
} }

7
internal/views/users/profile.templ
View File

@ -2,17 +2,18 @@ package users
import ( import (
"git.jamestombleson.com/jtom38/newsbot-portal/components/bulma" "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" "git.jamestombleson.com/jtom38/newsbot-portal/internal/views/layout"
) )
templ Profile() { templ Profile() {
@layout.WithTemplate() { @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.H2("Sessions", false)
@bulma.Button() { @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.") @bulma.Subitle("This will force you to login again as the application will give you a new session value.")
} }

4
internal/views/users/signup.templ
View File

@ -11,13 +11,13 @@ templ SignUp() {
@form.Field(){ @form.Field(){
@form.Label("Username") @form.Label("Username")
@form.Control() { @form.Control() {
@form.TextInput("", "username", form.InputTypeText, "username or email address") @form.TextInput("username", form.InputTypeText, "username or email address")
} }
} }
@form.Field() { @form.Field() {
@form.Label("Password") @form.Label("Password")
@form.Control() { @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", "") @form.Submit("Submit", "")