layout styles for home page

go.mod

···
 require (
 	codeberg.org/gruf/go-ulid v1.1.0
 	github.com/aidarkhanov/nanoid v1.0.8
+	github.com/alecthomas/chroma/v2 v2.14.0
 	github.com/aws/aws-sdk-go-v2 v1.30.3
 	github.com/glebarez/sqlite v1.11.0
 	github.com/go-chi/cors v1.2.1
···
 	github.com/aws/aws-sdk-go-v2/service/sts v1.30.3 // indirect
 	github.com/aws/smithy-go v1.20.3 // indirect
 	github.com/cespare/xxhash/v2 v2.3.0 // indirect
+	github.com/dlclark/regexp2 v1.11.0 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
 	github.com/glebarez/go-sqlite v1.21.2 // indirect
 	github.com/go-sql-driver/mysql v1.8.1 // indirect

go.sum

···
 github.com/a-h/templ v0.2.747/go.mod h1:69ObQIbrcuwPCU32ohNaWce3Cb7qM5GMiqN1K+2yop4=
 github.com/aidarkhanov/nanoid v1.0.8 h1:yxyJkgsEDFXP7+97vc6JevMcjyb03Zw+/9fqhlVXBXA=
 github.com/aidarkhanov/nanoid v1.0.8/go.mod h1:vadfZHT+m4uDhttg0yY4wW3GKtl2T6i4d2Age+45pYk=
+github.com/alecthomas/assert/v2 v2.7.0 h1:QtqSACNS3tF7oasA8CU6A6sXZSBDqnm7RfpLl9bZqbE=
+github.com/alecthomas/assert/v2 v2.7.0/go.mod h1:Bze95FyfUr7x34QZrjL+XP+0qgp/zg8yS+TtBj1WA3k=
+github.com/alecthomas/chroma/v2 v2.14.0 h1:R3+wzpnUArGcQz7fCETQBzO5n9IMNi13iIs46aU4V9E=
+github.com/alecthomas/chroma/v2 v2.14.0/go.mod h1:QolEbTfmUHIMVpBqxeDnNBj2uoeI4EbYP4i6n68SG4I=
+github.com/alecthomas/repr v0.4.0 h1:GhI2A8MACjfegCPVq9f1FLvIBS+DrQ2KQBFZP1iFzXc=
+github.com/alecthomas/repr v0.4.0/go.mod h1:Fr0507jx4eOXV7AlPV6AVZLYrLIuIeSOWtW57eE/O/4=
 github.com/andybalholm/cascadia v1.3.1/go.mod h1:R4bJ1UQfqADjvDa4P6HZHLh/3OxWWEqc0Sk8XGwHqvA=
 github.com/aws/aws-sdk-go-v2 v1.30.3 h1:jUeBtG0Ih+ZIFH0F4UkmL9w3cSpaMv9tYYDbzILP8dY=
 github.com/aws/aws-sdk-go-v2 v1.30.3/go.mod h1:nIQjQVp5sfpQcTc9mPSr1B0PaWK5ByX9MOoDadSN4lc=
···
 github.com/cespare/xxhash/v2 v2.3.0/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dlclark/regexp2 v1.11.0 h1:G/nrcoOa7ZXlpoa/91N3X7mM3r8eIlMBBJZvsz/mxKI=
+github.com/dlclark/regexp2 v1.11.0/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
 github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
 github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
 github.com/glebarez/go-sqlite v1.21.2 h1:3a6LFC4sKahUunAmynQKLZceZCOzUthkRkEAl9gAXWo=
···
 github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/h2non/filetype v1.1.3 h1:FKkx9QbD7HR/zjK1Ia5XiBsq9zdLi5Kf3zGyFTAFkGg=
 github.com/h2non/filetype v1.1.3/go.mod h1:319b3zT68BvV+WRj7cwy856M2ehB3HqNOt6sy1HndBY=
+github.com/hexops/gotextdiff v1.0.3 h1:gitA9+qJrrTCsiCl7+kh75nPqQt1cx4ZkudSTLoUqJM=
+github.com/hexops/gotextdiff v1.0.3/go.mod h1:pSWU5MAI3yDq+fZBTazCSJysOMbxWL1BSow5/V2vxeg=
 github.com/jackc/pgpassfile v1.0.0 h1:/6Hmqy13Ss2zCq62VdNG8tM1wchn8zjSGOBJ6icpsIM=
 github.com/jackc/pgpassfile v1.0.0/go.mod h1:CEx0iS5ambNFdcRtxPj5JhEz+xB6uRky5eyVu/W2HEg=
 github.com/jackc/pgservicefile v0.0.0-20231201235250-de7065d80cb9 h1:L0QtFUgDarD7Fpv9jeVMgy/+Ec0mtnmYuImjTz6dtDA=

html/pages/home.templ

···
 package pages
 
-import "github.com/puregarlic/space/models"
-import "fmt"
-import "encoding/json"
+import (
+  "encoding/json"
+  "bytes"
 
-func getPostPropertyValue(post *models.Post, name string) any {
-  props := make(map[string]any)
-  if err := json.Unmarshal(post.Properties, &props); err != nil {
+  "github.com/puregarlic/space/models"
+  "github.com/alecthomas/chroma/v2/formatters/html"
+  "github.com/alecthomas/chroma/v2/styles"
+  "github.com/alecthomas/chroma/v2/lexers"
+)
+
+func formatUnknownPost(post *models.Post) string {
+  style := styles.Get("rose-pine")
+  lexer := lexers.Get("json")
+  formatter := html.New(
+    html.TabWidth(2),
+  )
+
+  contents, err := json.MarshalIndent(post.Properties, "", "  ")
+  if err != nil {
     panic(err)
   }
 
-  return props[name]
+  iterator, err := lexer.Tokenise(nil, string(contents))
+
+  var buf bytes.Buffer
+  formatter.Format(&buf, style, iterator)
+
+  return buf.String()
 }
 
 templ Home(posts []*models.Post) {
-  <!DOCTYPE html>
-  <html>
-    <head>
-      <title>Micropub and IndieAuth Server Demo</title>
-      <link rel="authorization_endpoint" href="/authorization">
-      <link rel="token_endpoint" href="/token">
-      <link rel="micropub" href="/micropub">
-
-      // <link rel="stylesheet" href="/static/styles.css" />
-    </head>
-    <body>
-      <h1>Micropub and IndieAuth Server Demo</h1>
-
-      <h2>Posts</h2>
-
-      <p>You can create posts using a Micropub client.</p>
-      <ul>
-      for _, post := range posts {
-        <li><a href={ templ.URL("/posts/" + post.ID.String()) }>{ post.ID.String() }</a> - { fmt.Sprint(getPostPropertyValue(post, "content")) }</li>
+  <div class="px-4 py-8 md:py-20 md:mx-auto md:max-w-screen-lg grid md:grid-cols-[1fr_2fr] gap-12 md:gap-16">
+    <aside class="min-w-0">
+      <h1 class="font-extrabold">puregarlic dot space</h1>
+      <p class="font-light mt-3 text-sm text-subtle">this space is mine, it was <a class="underline" href="https://github.com/puregarlic/space">made by me</a>!</p>
+    </aside>
+    <main class="min-w-0">
+      <ul class="flex flex-col gap-6">
+      if len(posts) > 0 {
+        for _, post := range posts {
+          <li>
+            <div class="mb-1 flex items-center justify-between text-muted text-xs">
+            	<p>{ post.CreatedAt.Format("01/02/2006 at 3:04 PM") }</p>
+              <p>oops, unimplemented!</p>
+            </div>
+            <a href={ templ.URL("/posts/" + post.ID.String()) } class="block p-4 bg-base overflow-x-scroll min-w-0">
+              @templ.Raw(formatUnknownPost(post))
+            </a>
+          </li>
+        }
+      } else {
+        <li class="text-highlightLow italic font-light bg-base p-4 text-center">
+          intention rich, content poor
+        </li>
       }
       </ul>
-    </body>
-  </html>
+    </main>
+  </div>
+
 }
+  

html/pages/home_templ.go

···
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-import "github.com/puregarlic/space/models"
-import "fmt"
-import "encoding/json"
+import (
+	"bytes"
+	"encoding/json"
 
-func getPostPropertyValue(post *models.Post, name string) any {
-	props := make(map[string]any)
-	if err := json.Unmarshal(post.Properties, &props); err != nil {
+	"github.com/alecthomas/chroma/v2/formatters/html"
+	"github.com/alecthomas/chroma/v2/lexers"
+	"github.com/alecthomas/chroma/v2/styles"
+	"github.com/puregarlic/space/models"
+)
+
+func formatUnknownPost(post *models.Post) string {
+	style := styles.Get("rose-pine")
+	lexer := lexers.Get("json")
+	formatter := html.New(
+		html.TabWidth(2),
+	)
+
+	contents, err := json.MarshalIndent(post.Properties, "", "  ")
+	if err != nil {
 		panic(err)
 	}
 
-	return props[name]
+	iterator, err := lexer.Tokenise(nil, string(contents))
+
+	var buf bytes.Buffer
+	formatter.Format(&buf, style, iterator)
+
+	return buf.String()
 }
 
 func Home(posts []*models.Post) templ.Component {
···
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html><head><title>Micropub and IndieAuth Server Demo</title><link rel=\"authorization_endpoint\" href=\"/authorization\"><link rel=\"token_endpoint\" href=\"/token\"><link rel=\"micropub\" href=\"/micropub\"></head><body><h1>Micropub and IndieAuth Server Demo</h1><h2>Posts</h2><p>You can create posts using a Micropub client.</p><ul>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"px-4 py-8 md:py-20 md:mx-auto md:max-w-screen-lg grid md:grid-cols-[1fr_2fr] gap-12 md:gap-16\"><aside class=\"min-w-0\"><h1 class=\"font-extrabold\">puregarlic dot space</h1><p class=\"font-light mt-3 text-sm text-subtle\">this space is mine, it was <a class=\"underline\" href=\"https://github.com/puregarlic/space\">made by me</a>!</p></aside><main class=\"min-w-0\"><ul class=\"flex flex-col gap-6\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		for _, post := range posts {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li><a href=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var2 templ.SafeURL = templ.URL("/posts/" + post.ID.String())
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(post.ID.String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/pages/home.templ`, Line: 35, Col: 82}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a> - ")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprint(getPostPropertyValue(post, "content")))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/pages/home.templ`, Line: 35, Col: 142}
+		if len(posts) > 0 {
+			for _, post := range posts {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li><div class=\"mb-1 flex items-center justify-between text-muted text-xs\"><p>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var2 string
+				templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(post.CreatedAt.Format("01/02/2006 at 3:04 PM"))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/pages/home.templ`, Line: 45, Col: 64}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p><p>oops, unimplemented!</p></div><a href=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var3 templ.SafeURL = templ.URL("/posts/" + post.ID.String())
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var3)))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"block p-4 bg-base overflow-x-scroll min-w-0\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templ.Raw(formatUnknownPost(post)).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></li>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</li>")
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li class=\"text-highlightLow italic font-light bg-base p-4 text-center\">intention rich, content poor</li>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</ul></body></html>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</ul></main></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}