fix formatting on docs
This commit is contained in:
parent
0ada050eff
commit
f62d47e2fb
22 changed files with 111 additions and 102 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
## **Introduction**
|
## Introduction
|
||||||
|
|
||||||
htmgo is a lightweight pure go way to build interactive websites / web applications using go & htmx.
|
htmgo is a lightweight pure go way to build interactive websites / web applications using go & htmx.
|
||||||
We give you the utilities to build html using pure go code in a reusable way (go functions are components) while also providing htmx functions to add interactivity to your app.
|
We give you the utilities to build html using pure go code in a reusable way (go functions are components) while also providing htmx functions to add interactivity to your app.
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
## **Getting Started**
|
## Getting Started
|
||||||
|
|
||||||
|
|
||||||
##### **Prerequisites:**
|
##### **Prerequisites:**
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
## Pages ##
|
## Pages
|
||||||
|
|
||||||
Pages are the entry point of an htmgo application.
|
Pages are the entry point of an htmgo application.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
## Partials ##
|
## Partials
|
||||||
|
|
||||||
Partials are where things get interesting. Partials allow you to start adding interactivity to your website by swapping in content, setting headers, redirecting, etc.
|
Partials are where things get interesting. Partials allow you to start adding interactivity to your website by swapping in content, setting headers, redirecting, etc.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
**Components**
|
## Components
|
||||||
|
|
||||||
Components are re-usable bits of logic to render HTML. Similar to how in React components are Javascript functions, in htmgo, components are pure go functions.
|
Components are re-usable bits of logic to render HTML. Similar to how in React components are Javascript functions, in htmgo, components are pure go functions.
|
||||||
|
|
||||||
|
|
@ -26,4 +26,4 @@ If you are familiar with React, then you would likely place this fetch logic ins
|
||||||
|
|
||||||
With **htmgo**, the only way to update content on the page is to use htmx to swap out the content from loading a partial. Therefore you control exactly when this Card component is called, not the framework behind the scenes.
|
With **htmgo**, the only way to update content on the page is to use htmx to swap out the content from loading a partial. Therefore you control exactly when this Card component is called, not the framework behind the scenes.
|
||||||
|
|
||||||
See [#interactivity-swapping](#interactivity-swapping) for more information
|
See [#interactivity-swapping](#interactivity-swapping) for more information
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
**HTML Tags**
|
## HTML Tags
|
||||||
|
|
||||||
htmgo provides many methods to render html tags:
|
htmgo provides many methods to render html tags:
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
**Attributes**
|
## Attributes
|
||||||
|
|
||||||
Attributes are one of the main ways we can add interactivity to the pages with [htmx](http://htmx.org). If you have not read over the htmx documentation, please do so before continuing.
|
Attributes are one of the main ways we can add interactivity to the pages with [htmx](http://htmx.org). If you have not read over the htmx documentation, please do so before continuing.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
**Rendering Raw Html**
|
## Rendering Raw Html
|
||||||
|
|
||||||
In some cases, you may want to render raw HTML instead of using htmgo's functions.
|
In some cases, you may want to render raw HTML instead of using htmgo's functions.
|
||||||
This can be done by using the following methods:
|
This can be done by using the following methods:
|
||||||
|
|
@ -19,4 +19,4 @@ h.UnsafeRawScript("alert('Hello World')")
|
||||||
Important: Be careful when using these methods, these methods do not escape the HTML content
|
Important: Be careful when using these methods, these methods do not escape the HTML content
|
||||||
and should **never** be used with user input unless you have sanitized the input.
|
and should **never** be used with user input unless you have sanitized the input.
|
||||||
|
|
||||||
Sanitizing input can be done using the `html.EscapeString` function or by using https://github.com/microcosm-cc/bluemonday.
|
Sanitizing input can be done using the `html.EscapeString` function or by using https://github.com/microcosm-cc/bluemonday.
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
**If / Else Statements**
|
## Conditional Statements
|
||||||
|
|
||||||
If / else statements are useful when you want to conditionally render attributes or elements / components.
|
If / else statements are useful when you want to conditionally render attributes or elements / components.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
**Loops / Dealing With Lists**
|
## Loops / Dealing With Lists
|
||||||
|
|
||||||
Very commonly you will need to render a list or slice of items onto the page. Frameworks generally solve this in different ways, such as React uses regular JS .map function to solve it.
|
Very commonly you will need to render a list or slice of items onto the page. Frameworks generally solve this in different ways, such as React uses regular JS .map function to solve it.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
### Interactivity
|
## Interactivity / Swapping
|
||||||
|
|
||||||
1. Adding interactivity to your website is done through [htmx](http://htmx.org) by utilizing various attributes/headers. This should cover most use cases.
|
1. Adding interactivity to your website is done through [htmx](http://htmx.org) by utilizing various attributes/headers. This should cover most use cases.
|
||||||
htmgo offers utility methods to make this process a bit easier
|
htmgo offers utility methods to make this process a bit easier
|
||||||
|
|
@ -82,4 +82,4 @@ When the **CompleteAll** button is clicked, a **POST** will be sent to the **Com
|
||||||
Note: These partial swap methods use https://htmx.org/attributes/hx-swap-oob/ behind the scenes, so it must match
|
Note: These partial swap methods use https://htmx.org/attributes/hx-swap-oob/ behind the scenes, so it must match
|
||||||
the swap target by id.
|
the swap target by id.
|
||||||
|
|
||||||
**If** you are only wanting to swap the element that made the xhr request for the partial in the first place, just use `h.NewPartial` instead, it will use the default htmx swapping, and not hx-swap-oob.
|
**If** you are only wanting to swap the element that made the xhr request for the partial in the first place, just use `h.NewPartial` instead, it will use the default htmx swapping, and not hx-swap-oob.
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
**Events**
|
## Events Handlers / Commands
|
||||||
|
|
||||||
Sometimes you need to update elements client side without having to do a network call. For this you generally have to target an element with javascript and set an attribute, change the innerHTML, etc.
|
Sometimes you need to update elements client side without having to do a network call. For this you generally have to target an element with javascript and set an attribute, change the innerHTML, etc.
|
||||||
|
|
||||||
|
|
@ -42,81 +42,4 @@ OnClick(cmd ...Command) *LifeCycle
|
||||||
HxOnAfterSwap(cmd ...Command) *LifeCycle
|
HxOnAfterSwap(cmd ...Command) *LifeCycle
|
||||||
HxOnLoad(cmd ...Command) *LifeCycle
|
HxOnLoad(cmd ...Command) *LifeCycle
|
||||||
```
|
```
|
||||||
**Note:** Each command you attach to the event handler will be passed 'self' and 'event' (if applicable) as arguments.
|
|
||||||
'self' is the current element, and 'event' is the event object.
|
|
||||||
|
|
||||||
If you use the OnEvent directly, event names may be any [HTML DOM](https://www.w3schools.com/jsref/dom_obj_event.asp) events, or any [HTMX events](https://htmx.org/events/).
|
|
||||||
|
|
||||||
Commands:
|
|
||||||
|
|
||||||
```go
|
|
||||||
js.AddAttribute(string, value)
|
|
||||||
js.RemoveAttribute(string)
|
|
||||||
js.AddClass(string, value)
|
|
||||||
js.SetText(string)
|
|
||||||
js.Increment(count)
|
|
||||||
js.SetInnerHtml(Ren)
|
|
||||||
js.SetOuterHtml(Ren)
|
|
||||||
js.SetDisabled(bool)
|
|
||||||
js.RemoveClass(string)
|
|
||||||
js.Alert(string)
|
|
||||||
js.EvalJs(string) // eval arbitrary js, use 'self' to get the current element as a reference
|
|
||||||
js.InjectScript(string)
|
|
||||||
js.InjectScriptIfNotExist(string)
|
|
||||||
js.GetPartial(PartialFunc)
|
|
||||||
js.GetPartialWithQs(PartialFunc, Qs)
|
|
||||||
js.PostPartial(PartialFunc)
|
|
||||||
js.PostPartialWithQs(PartialFunc, Qs)
|
|
||||||
js.GetWithQs(string, Qs)
|
|
||||||
js.PostWithQs(string, Qs)
|
|
||||||
js.ToggleClass(string)
|
|
||||||
js.ToggleClassOnElement(string, string)
|
|
||||||
|
|
||||||
// The following methods are used to evaluate JS on nearby elements.
|
|
||||||
// Use 'element' to get the element as a reference for the EvalJs methods.
|
|
||||||
js.EvalJsOnParent(string)
|
|
||||||
js.EvalJsOnSibling(string, string)
|
|
||||||
js.EvalJsOnChildren(string, string)
|
|
||||||
js.SetClassOnParent(string)
|
|
||||||
js.RemoveClassOnParent(string)
|
|
||||||
js.SetClassOnChildren(string, string)
|
|
||||||
js.RemoveClassOnChildren(string, string)
|
|
||||||
js.SetClassOnSibling(string, string)
|
|
||||||
js.RemoveClassOnSibling(string, string)
|
|
||||||
|
|
||||||
```
|
|
||||||
For more usages: see https://github.com/maddalax/htmgo/blob/master/htmgo-site/pages/form.go
|
|
||||||
|
|
||||||
|
|
||||||
**Example:** Evaluating arbitrary JS
|
|
||||||
|
|
||||||
```go
|
|
||||||
func MyButton() *h.Element {
|
|
||||||
return h.Button(
|
|
||||||
h.Text("Submit"),
|
|
||||||
h.OnClick(
|
|
||||||
// make sure you use 'self' instead of 'this'
|
|
||||||
// for referencing the current element
|
|
||||||
h.EvalJs(`
|
|
||||||
if(Math.random() > 0.5) {
|
|
||||||
self.innerHTML = "Success!";
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
tip: If you are using Jetbrains IDE's, you can write `// language=js` as a comment above the function call (h.EvalJS) and it will automatically give you syntax highlighting on the raw JS.
|
|
||||||
|
|
||||||
```go
|
|
||||||
// language=js
|
|
||||||
h.EvalJs(`
|
|
||||||
if(Math.random() > 0.5) {
|
|
||||||
self.innerHTML = "Success!";
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
),
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
## Evaluating Javascript In Event Handlers
|
||||||
|
|
||||||
|
Event handlers are useful by attaching **commands** to elements to execute javascript on the client side.
|
||||||
|
|
||||||
|
See [#interactivity-events](#interactivity-events) for more information on event handlers.
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
**Note:** Each command you attach to the event handler will be passed 'self' and 'event' (if applicable) as arguments.
|
||||||
|
'self' is the current element, and 'event' is the event object.
|
||||||
|
|
||||||
|
If you use the OnEvent directly, event names may be any [HTML DOM](https://www.w3schools.com/jsref/dom_obj_event.asp) events, or any [HTMX events](https://htmx.org/events/).
|
||||||
|
|
||||||
|
Commands:
|
||||||
|
|
||||||
|
```go
|
||||||
|
js.AddAttribute(string, value)
|
||||||
|
js.RemoveAttribute(string)
|
||||||
|
js.AddClass(string, value)
|
||||||
|
js.SetText(string)
|
||||||
|
js.Increment(count)
|
||||||
|
js.SetInnerHtml(Ren)
|
||||||
|
js.SetOuterHtml(Ren)
|
||||||
|
js.SetDisabled(bool)
|
||||||
|
js.RemoveClass(string)
|
||||||
|
js.Alert(string)
|
||||||
|
js.EvalJs(string) // eval arbitrary js, use 'self' to get the current element as a reference
|
||||||
|
js.InjectScript(string)
|
||||||
|
js.InjectScriptIfNotExist(string)
|
||||||
|
js.GetPartial(PartialFunc)
|
||||||
|
js.GetPartialWithQs(PartialFunc, Qs)
|
||||||
|
js.PostPartial(PartialFunc)
|
||||||
|
js.PostPartialWithQs(PartialFunc, Qs)
|
||||||
|
js.GetWithQs(string, Qs)
|
||||||
|
js.PostWithQs(string, Qs)
|
||||||
|
js.ToggleClass(string)
|
||||||
|
js.ToggleClassOnElement(string, string)
|
||||||
|
|
||||||
|
// The following methods are used to evaluate JS on nearby elements.
|
||||||
|
// Use 'element' to get the element as a reference for the EvalJs methods.
|
||||||
|
js.EvalJsOnParent(string)
|
||||||
|
js.EvalJsOnSibling(string, string)
|
||||||
|
js.EvalJsOnChildren(string, string)
|
||||||
|
js.SetClassOnParent(string)
|
||||||
|
js.RemoveClassOnParent(string)
|
||||||
|
js.SetClassOnChildren(string, string)
|
||||||
|
js.RemoveClassOnChildren(string, string)
|
||||||
|
js.SetClassOnSibling(string, string)
|
||||||
|
js.RemoveClassOnSibling(string, string)
|
||||||
|
|
||||||
|
```
|
||||||
|
For more usages: see https://github.com/maddalax/htmgo/blob/master/htmgo-site/pages/form.go
|
||||||
|
|
||||||
|
|
||||||
|
**Example:** Evaluating arbitrary JS
|
||||||
|
|
||||||
|
```go
|
||||||
|
func MyButton() *h.Element {
|
||||||
|
return h.Button(
|
||||||
|
h.Text("Submit"),
|
||||||
|
h.OnClick(
|
||||||
|
// make sure you use 'self' instead of 'this'
|
||||||
|
// for referencing the current element
|
||||||
|
h.EvalJs(`
|
||||||
|
if(Math.random() > 0.5) {
|
||||||
|
self.innerHTML = "Success!";
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
tip: If you are using Jetbrains IDE's, you can write `// language=js` as a comment above the function call (h.EvalJS) and it will automatically give you syntax highlighting on the raw JS.
|
||||||
|
|
||||||
|
```go
|
||||||
|
// language=js
|
||||||
|
h.EvalJs(`
|
||||||
|
if(Math.random() > 0.5) {
|
||||||
|
self.innerHTML = "Success!";
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
),
|
||||||
|
```
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
**Caching Components Globally**
|
## Performance
|
||||||
|
### Caching Components Globally
|
||||||
|
|
||||||
You may want to cache components to improve performance. This is especially useful for components that are expensive to render
|
You may want to cache components to improve performance. This is especially useful for components that are expensive to render
|
||||||
or make external requests for data.
|
or make external requests for data.
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
**Caching Components Per User**
|
## Caching Components Per User
|
||||||
|
|
||||||
If you need to cache a component per user, you can use the `CachedPerKey` functions.
|
If you need to cache a component per user, you can use the `CachedPerKey` functions.
|
||||||
These functions allow you to cache a component by a specific key. This key can be any string that uniquely identifies the user.
|
These functions allow you to cache a component by a specific key. This key can be any string that uniquely identifies the user.
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
**Server Sent Events (SSE)**
|
## Server Sent Events (SSE)
|
||||||
|
|
||||||
htmgo supports server-sent events (SSE) out of the box.
|
htmgo supports server-sent events (SSE) out of the box.
|
||||||
This allows you to push data from the server to the client in real-time.
|
This allows you to push data from the server to the client in real-time.
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
### HTMX Extensions
|
## HTMX Extensions
|
||||||
|
|
||||||
htmgo provides a few extra htmx extensions to make common tasks easier.
|
htmgo provides a few extra htmx extensions to make common tasks easier.
|
||||||
Some of these extensions are optional, and some of these are required for htmgo to work correctly.
|
Some of these extensions are optional, and some of these are required for htmgo to work correctly.
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
### HTMX Extensions - Trigger Children
|
## HTMX Extensions - Trigger Children
|
||||||
|
|
||||||
The `trigger-children` extension allows you to trigger an event on all children and siblings of an element.
|
The `trigger-children` extension allows you to trigger an event on all children and siblings of an element.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
### HTMX Extensions - Mutation Error
|
## HTMX Extensions - Mutation Error
|
||||||
|
|
||||||
The `mutation-error` extension allows you to trigger an event when a request returns a >= 400 status code.
|
The `mutation-error` extension allows you to trigger an event when a request returns a >= 400 status code.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
### Tailwind intellisense
|
## Tailwind intellisense
|
||||||
|
|
||||||
Tailwind's language server allows you to specify custom configuration on what it should match to start giving you tailwind intellisense.
|
Tailwind's language server allows you to specify custom configuration on what it should match to start giving you tailwind intellisense.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
### Converting Raw HTML to Go
|
## Converting Raw HTML to Go
|
||||||
|
|
||||||
In some cases, you may want to convert raw HTML to Go code.
|
In some cases, you may want to convert raw HTML to Go code.
|
||||||
A tool to do this automatically is available here: https://htmgo.dev/html-to-go
|
A tool to do this automatically is available here: https://htmgo.dev/html-to-go
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
## **Troubleshooting:**
|
## Troubleshooting:
|
||||||
|
|
||||||
**command not found: htmgo**
|
**command not found: htmgo**
|
||||||
ensure you installed htmgo above and ensure GOPATH is set in your shell
|
ensure you installed htmgo above and ensure GOPATH is set in your shell
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue