diff --git a/htmgo-site/assets/public/tailwind-intellisense.png b/htmgo-site/assets/public/tailwind-intellisense.png new file mode 100644 index 0000000..962c0b4 Binary files /dev/null and b/htmgo-site/assets/public/tailwind-intellisense.png differ diff --git a/htmgo-site/md/docs/8_miscellaneous/1_tailwind_intellisense.md b/htmgo-site/md/docs/8_miscellaneous/1_tailwind_intellisense.md new file mode 100644 index 0000000..b494125 --- /dev/null +++ b/htmgo-site/md/docs/8_miscellaneous/1_tailwind_intellisense.md @@ -0,0 +1,53 @@ +### Tailwind intellisense + +Tailwind's language server allows you to specify custom configuration on what it should match to start giving you tailwind intellisense. + + +![](/public/tailwind-intellisense.png) + +To make this work, you will need to update the tailwind lsp config with the config below: + +Main thing to note here is +1. "go" is added to the includeLanguages list +2. classRegex is updated to match the tailwind classes in the go code. + +### Jetbrains IDE's (GoLand) +```json +{ + "includeLanguages": { + "go": "html" + }, + "experimental": { + "configFile": null, + "classRegex": [ + ["Class\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"], + ["ClassX\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"], + ["ClassIf\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"], + ["Classes\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"] + ] + } +} +``` +To find this configuration in GoLand you can go to `Settings -> Languages & Frameworks -> Style Sheets -> Tailwind CSS` and update the configuration there. +These changes are additive, add these options to your existing tailwind lsp config, instead of replacing the entire file. + +See more: https://github.com/tailwindlabs/tailwindcss/issues/7553#issuecomment-735915659 + +
+ +### Visual Studio Code +For VSCode, you should be able to update your settings.json with the following values: + +```json +{ + "tailwindCSS.includeLanguages": { + "go": "html" + }, + "tailwindCSS.experimental.classRegex": [ + ["Class\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"], + ["ClassX\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"], + ["ClassIf\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"], + ["Classes\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`"] + ] +} +``` diff --git a/htmgo-site/md/docs/8_miscellaneous/1_converting_raw_html_to_go.md b/htmgo-site/md/docs/8_miscellaneous/2_converting_raw_html_to_go.md similarity index 100% rename from htmgo-site/md/docs/8_miscellaneous/1_converting_raw_html_to_go.md rename to htmgo-site/md/docs/8_miscellaneous/2_converting_raw_html_to_go.md diff --git a/htmgo-site/partials/html-to-go.go b/htmgo-site/partials/html-to-go.go index 0d6a844..3669db8 100644 --- a/htmgo-site/partials/html-to-go.go +++ b/htmgo-site/partials/html-to-go.go @@ -1,34 +1,18 @@ package partials import ( - "bytes" - "github.com/alecthomas/chroma/v2" - "github.com/alecthomas/chroma/v2/formatters/html" - "github.com/alecthomas/chroma/v2/lexers" - "github.com/alecthomas/chroma/v2/styles" "github.com/maddalax/htmgo/framework/h" "github.com/maddalax/htmgo/tools/html-to-htmgo/htmltogo" + "htmgo-site/ui" ) func ConvertHtmlToGo(ctx *h.RequestContext) *h.Partial { value := ctx.FormValue("html-input") parsed := htmltogo.Parse([]byte(value)) - var buf bytes.Buffer + formatted := ui.FormatCode(string(parsed), "height: 100%;") - lexer := lexers.Get("go") - style := styles.Get("github") - formatter := html.New(html.WithCustomCSS(map[chroma.TokenType]string{ - chroma.PreWrapper: "padding: 12px; height: 100%; overflow: auto;", - })) - iterator, err := lexer.Tokenise(nil, string(parsed)) - err = formatter.Format(&buf, style, iterator) - - if err != nil { - return h.SwapPartial(ctx, GoOutput(string(parsed))) - } - - return h.SwapPartial(ctx, GoOutput(buf.String())) + return h.SwapPartial(ctx, GoOutput(formatted)) } func HtmlInput() *h.Element { @@ -36,6 +20,7 @@ func HtmlInput() *h.Element { h.Class("h-[90%] w-1/2 min-w-1/2"), h.TextArea( h.Name("html-input"), + h.MaxLength(500*1000), h.PostPartial(ConvertHtmlToGo, "keyup delay:300ms"), h.Class("h-[90%] w-full p-4 rounded border border-slate-200"), h.Placeholder("Paste your HTML here"), diff --git a/htmgo-site/ui/snippet.go b/htmgo-site/ui/snippet.go new file mode 100644 index 0000000..68c9c1c --- /dev/null +++ b/htmgo-site/ui/snippet.go @@ -0,0 +1,34 @@ +package ui + +import ( + "bytes" + "fmt" + "github.com/alecthomas/chroma/v2" + "github.com/alecthomas/chroma/v2/formatters/html" + "github.com/alecthomas/chroma/v2/lexers" + "github.com/alecthomas/chroma/v2/styles" + "github.com/maddalax/htmgo/framework/h" + "strings" +) + +func FormatCode(code string, customStyles ...string) string { + var buf bytes.Buffer + lexer := lexers.Get("go") + style := styles.Get("github") + formatter := html.New( + html.WithCustomCSS(map[chroma.TokenType]string{ + chroma.PreWrapper: fmt.Sprintf("padding: 12px; overflow: auto; %s", strings.Join(customStyles, ";")), + })) + iterator, err := lexer.Tokenise(nil, code) + if err != nil { + return "" + } + err = formatter.Format(&buf, style, iterator) + return buf.String() +} + +func CodeSnippet(code string) *h.Element { + return h.Div( + h.UnsafeRaw(FormatCode(code)), + ) +} diff --git a/tailwind-lsp-config.json b/tailwind-lsp-config.json index f6afb22..ae70df6 100644 --- a/tailwind-lsp-config.json +++ b/tailwind-lsp-config.json @@ -38,9 +38,11 @@ }, "experimental": { "configFile": null, - "classRegex": [[ - "Class|h.Class\\(([^)]*)\\)", - "[\"'`]([^\"'`]*).*?[\"'`]" - ]] + "classRegex": [ + ["Class\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"], + ["ClassX\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"], + ["ClassIf\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"], + ["Classes\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"] + ] } -} \ No newline at end of file +}