https://github.com/haatos/goshipit
goship.it - Go + Templ + HTMX component library
https://github.com/haatos/goshipit
golang htmx templates
Last synced: about 1 year ago
JSON representation
goship.it - Go + Templ + HTMX component library
- Host: GitHub
- URL: https://github.com/haatos/goshipit
- Owner: haatos
- License: mit
- Created: 2024-10-26T03:30:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-27T13:41:58.000Z (about 1 year ago)
- Last Synced: 2025-03-27T14:45:11.603Z (about 1 year ago)
- Topics: golang, htmx, templates
- Language: templ
- Homepage: https://goship.it
- Size: 3.45 MB
- Stars: 222
- Watchers: 5
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# GoShip.it
Golang + Templ + HTMX (+ TailwindCSS + DaisyUI) component library to enhance developing an application using the GOTH stack.
The library contains DaisyUI components translated into Templ components that can be easily customized using both TailwindCSS and DaisyUI.
Updated to support DaisyUI 5. If you're looking for DaisyUI 4 compatible components, take a look [here](https://old.goship.it)
## Getting started
Install node dependencies:
`npm i -D`
Build TailwindCSS:
`make tw`
Generate component code/json, generate templates and run the server:
`make dev`
## Code/data generation
`cmd/generate/main.go` is used to generate JSON, markdown and Go code from source code. JSON is used to store and load component and example component source code to be displayed in HTML. The generator also generates a markdown file that contains up-to-date types for components (from `internal/model/components.go`), and .go file containing a mapping of example names to _templ_ components.
## Contributing
Components are placed in individual .templ files in `internal/views/components/`. The name of the file is used as the name of the component (converted from snake_case to Capitalized Component Name). The .templ file starts with a category name as a comment, e.g. `// data_display`.
For example
`internal/views/components/accordion.templ`
```go
// data_display
package components
type AccordionRowProps struct {
Label string
Type string
Name string
}
templ AccordionRow(props AccordionRowProps) {
{ label }
{ children... }
}
```
Each component also has an examples file with a corresponding name in `internal/views/examples/`. The file can contain multiple examples, each starting with a comment `// example` with any lines below this line belonging to the example up to the next `// example` line or EOF. E.g.:
`internal/views/examples/textarea.templ`
```go
package examples
import "github.com/haatos/goshipit/internal/views/components"
// example
templ BasicTextarea() {
@components.Textarea(
components.TextareaProps{
Label: "Description",
Name: "description",
},
)
}
// example
templ BasicTextareaWithError() {
@components.Textarea(
components.TextareaProps{
Label: "Description",
Name: "description",
Err: "Description cannot be empty",
},
)
}
```
Some examples have corresponding handler functions to provide dummy data for the component to display its usage. E.g. `internal/handler/components.go` contains the handler for lazy-loading example:
```go
// LazyLoadExample
func GetLazyLoadExample(c echo.Context) error {
time.Sleep(2 * time.Second)
return render(c, http.StatusOK, examples.LazyLoadResult())
}
// LazyLoadExample
```
The handler must be enclosed with the name of the example component as comment on both sides of the handler's function(s).