add tailwind intellisense notes

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
+
+<br>
+
+### 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\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`"]
+  ]
+}
+```

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"),

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)),
+	)
+}

tailwind-lsp-config.json

@@ -38,9 +38,11 @@
   },
   "experimental": {
     "configFile": null,
-    "classRegex": [[
-      "Class|h.Class\\(([^)]*)\\)",
-      "[\"'`]([^\"'`]*).*?[\"'`]"
-    ]]
+    "classRegex": [
+      ["Class\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"],
+      ["ClassX\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"],
+      ["ClassIf\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"],
+      ["Classes\\(([^)]*)\\)", "[\"`]([^\"`]*)[\"`]"]
+    ]
   }
 }