-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
task: adjusting the html to use gomponents (less dependencies)
- Loading branch information
1 parent
e153a6a
commit 9a74756
Showing
8 changed files
with
155 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,30 @@ | ||
| package todos | ||
|
|
||
| import . "github.com/delaneyj/gostar/elements" | ||
| import ( | ||
| . "maragu.dev/gomponents" | ||
| . "maragu.dev/gomponents/html" | ||
| ) | ||
|
|
||
| func page(yield ElementRenderer) ElementRenderer { | ||
| return HTML().Children( | ||
| HEAD().Children( | ||
| META().NAME("viewport").CONTENT("width=device-width, initial-scale=1"), | ||
| META().CHARSET("utf-8"), | ||
| TITLE().Text("Todo"), | ||
| SCRIPT().SRC("https://unpkg.com/[email protected]/dist/htmx.min.js"), | ||
| SCRIPT().SRC("https://unpkg.com/[email protected]"), | ||
| func page(yield Node) Node { | ||
| return HTML( | ||
| Head( | ||
| Meta(Name("viewport"), Content("width=device-width, initial-scale=1")), | ||
| Meta(Charset("utf-8")), | ||
|
|
||
| LINK().REL("stylesheet").HREF("/public/application.css"), | ||
| TitleEl(Text("TodoX")), | ||
| Script(Src("https://unpkg.com/[email protected]/dist/htmx.min.js")), | ||
| Script(Src("https://unpkg.com/[email protected]")), | ||
| Script(Src("https://cdn.tailwindcss.com?plugins=forms,typography,line-clamp")), | ||
| ), | ||
| BODY().CLASS("h-full bg-gray-100 pb-10 pt-10").Children( | ||
| DIV().CLASS("max-w-[1500px] mx-auto px-5").Children( | ||
| H1().CLASS("text-2xl mb-2 font-bold").Text("Todo List"), | ||
|
|
||
| Body( | ||
| Class("h-full bg-gray-100 pb-10 pt-10"), | ||
| Div( | ||
| Class("max-w-[1500px] mx-auto px-5"), | ||
| H1( | ||
| Class("text-2xl mb-2 font-bold"), | ||
| Text("TodoX List"), | ||
| ), | ||
|
|
||
| // here goes the thing you want to render. | ||
| yield, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,85 @@ | ||
| package todos | ||
|
|
||
| import . "github.com/delaneyj/gostar/elements" | ||
|
|
||
| func todoHTML(t Instance) ElementRenderer { | ||
| return LI().CLASS("p-3 border flex flex-row items-center rounded gap-2").Children( | ||
| SPAN().CLASS("flex h-6 items-center").Children( | ||
| DIV( | ||
| INPUT().NAME("Completed").CHECKEDSet(t.Completed).TYPE("checkbox").ID("complete_"+t.ID.String()).Attr("hx-put", "/todos/"+t.ID.String()+"/complete").Attr("hx-include", "#not_complete_"+t.ID.String()).Attr("hx-target", "closest li").Attr("hx-swap", "outerHTML").Attr("aria-describedby", "comments-description").CLASS("h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"), | ||
| INPUT().NAME("Completed").TYPE("hidden").VALUE("false").ID("not_complete_"+t.ID.String()), | ||
| import ( | ||
| . "maragu.dev/gomponents" | ||
| . "maragu.dev/gomponents/html" | ||
|
|
||
| hx "maragu.dev/gomponents-htmx" | ||
| ) | ||
|
|
||
| func todoHTML(t Instance) Node { | ||
| return Li( | ||
| Class("bg-white p-3 border flex flex-row items-center rounded gap-2"), | ||
| If(t.Completed, Class("bg-gray-50")), | ||
| If(!t.Completed, Class("bg-white")), | ||
|
|
||
| Span( | ||
| Class("flex h-6 items-center"), | ||
| Div( | ||
| Input( | ||
| Name("Completed"), If(t.Completed, Checked()), Type("checkbox"), ID("complete_"+t.ID.String()), | ||
| hx.Put("/todos/"+t.ID.String()+"/complete"), | ||
| hx.Include("#not_complete_"+t.ID.String()), | ||
| hx.Target("closest li"), | ||
| hx.Swap("outerHTML"), | ||
|
|
||
| Class("h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"), | ||
| ), | ||
| Input( | ||
| Name("Completed"), Type("hidden"), Value("false"), ID("not_complete_"+t.ID.String()), | ||
| ), | ||
| ), | ||
| ), | ||
|
|
||
| SPAN().CLASS("flex-grow items-center").IfChildren( | ||
| t.Completed, | ||
| SPAN().CLASS("line-through").Text(t.Content), | ||
| ).IfChildren( | ||
| !t.Completed, | ||
| SPAN().Attr("hx-get", "/todos/"+t.ID.String()+"/edit").Attr("hx-target", "closest li").Attr("hx-swap", "outerHTML").CLASS("cursor-pointer underline flex flex-row gap-2 items-center").Attr("_", "on htmx:afterRequest if detail.successful tell #content set you.value to ''").Children( | ||
| SPAN().Text(t.Content), | ||
| SVG_SVG().Attr("xmlns", "http://www.w3.org/2000/svg").Attr("fill", "none").Attr("viewBox", "0 0 24 24").Attr("stroke-width", "1.5").Attr("stroke", "currentColor").CLASS("w-4 h-4").Children( | ||
| SVG_PATH().Attr("stroke-linecap", "round").Attr("stroke-linejoin", "round").Attr("d", "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"), | ||
| Span( | ||
| Class("flex-grow items-center"), | ||
| If(t.Completed, Span(Class("line-through"), Text(t.Content))), | ||
| If(!t.Completed, | ||
| Span( | ||
| Class("cursor-pointer underline flex flex-row gap-2 items-center"), | ||
|
|
||
| Attr("_", "on htmx:afterRequest if detail.successful tell #content set you.value to ''"), | ||
| hx.Get("/todos/"+t.ID.String()+"/edit"), | ||
| hx.Target("closest li"), | ||
| hx.Swap("outerHTML"), | ||
|
|
||
| Span(Text(t.Content)), | ||
| Raw( | ||
| `<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#5f6368"> | ||
| <path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/> | ||
| </svg>`, | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
|
|
||
| SPAN().CLASS("bg-red-500 text-white py-2 px-3 rounded cursor-pointer").Text("Delete").Attr("hx-delete", "/todos/"+t.ID.String()).Attr("hx-target", "closest li").Attr("hx-swap", "outerHTML").Attr("hx-confirm", "Are you sure you wish to delete this TODO?").Attr("_", "on htmx:afterRequest if detail.successful send keyup to #search"), | ||
| ).IfCLASS(t.Completed, "bg-gray-50").IfCLASS(!t.Completed, "bg-white") | ||
| Span( | ||
| Class("bg-red-500 text-white py-2 px-3 rounded cursor-pointer"), | ||
| hx.Confirm("Are you sure you wish to delete this TODO?"), | ||
| hx.Delete("/todos/"+t.ID.String()), | ||
| hx.Swap("outerHTML"), | ||
| hx.Target("closest li"), | ||
| Text("Delete"), | ||
|
|
||
| Attr("_", "on htmx:afterRequest if detail.successful send keyup to #search"), | ||
| ), | ||
| ) | ||
| } | ||
|
|
||
| func todoListHTML(todos []Instance) ElementRenderer { | ||
| func todoListHTML(todos []Instance) Group { | ||
| if len(todos) == 0 { | ||
| return LI().CLASS("p-10 bg-white rounded border text-center").Text("No todos found.") | ||
| return []Node{ | ||
| Li( | ||
| Class("p-10 bg-white rounded border text-center"), | ||
| Text("No todos found."), | ||
| ), | ||
| } | ||
| } | ||
|
|
||
| els := []ElementRenderer{} | ||
| els := []Node{} | ||
| for _, todo := range todos { | ||
| els = append(els, todoHTML(todo)) | ||
| } | ||
|
|
||
| return Group(els...) | ||
| return els | ||
| } |
This file was deleted.
Oops, something went wrong.