ugit

diff --git a/_example/articles/introduction.md b/_example/articles/introduction.md
index ac53dbc5a9a19fa49dab18849b89e6f1fa8b26ee..dbfe7bdf145abbcdae98620c1d7638e23697ba7e 100644
--- a/_example/articles/introduction.md
+++ b/_example/articles/introduction.md
@@ -2,6 +2,7 @@ ---
 title: "Introduction"
 summary: "An introduction of `blog`"
 time: 2024-02-17
+category: Miscellaneous
 authors:
   - name: "jolheiser"
     email: "john+blog@jolheiser.com"
@@ -25,8 +26,8 @@ ````
 
 Things it can do:
 
-- [x] Render code
-- [ ] Fill the void
+- [x] Render code :pencil:
+- [ ] Fill the void :black_circle:
 
 ## Why was blog created?
 
@@ -34,3 +35,15 @@ ~~Because I needed a specific thing that other generators couldn't give me. Blog is up to 1000 times faster than \<hot other blog generator\>!!!~~
 
 Because I wanted to, like many other projects in this space. Blog is designed to be simple (to me) with enough flexibility for someone else to use without
 cursing at me (too much).
+
+---
+
+`blog` parses some templates and articles (in markdown format), renders them, and pushes them to an output directory.
+
+It can handle emoji :bomb: and code highlighting:
+
+```python
+def main():
+  print("Hello, blog!")
+```
+

diff --git a/_example/templates/article.tmpl b/_example/templates/article.tmpl
index 63c40605857d22e08af8ee9b7ad86b377094dd97..db4e9ecb5eab85d4a3d0f5bbc553b3b5f6659c02 100644
--- a/_example/templates/article.tmpl
+++ b/_example/templates/article.tmpl
@@ -1,4 +1,8 @@
-{{template "head" .article.Title}}
+{{template "head" .Article.Title}}
 <body>
-<main>{{.article.Content}}</main>
+<header>
+ <a href="index.html">{{.Author.Name}}</a>
+</header>
+<hr/>
+<main>{{.Article.Content}}</main>
 </body>

diff --git a/_example/templates/base.tmpl b/_example/templates/base.tmpl
index ea524bba9a9adc390eb0fa0525bdcc34ee7cac80..a089ae02dcc490efe40f367e703a87220e1e80a8 100644
--- a/_example/templates/base.tmpl
+++ b/_example/templates/base.tmpl
@@ -2,11 +2,22 @@ {{define "head"}}
 <!DOCTYPE html>
 <head>
 <title>{{.}}</title>
-<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakura.css/css/sakura.css" type="text/css"> -->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
-/>
+<link id="style" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"/>
 <link rel="stylesheet" href="chroma.css"/>
+
+<script>
+  (() => {
+    const params = new URLSearchParams(window.location.search);
+    const style = params.get('style');
+    const $style = document.querySelector('#style');
+    let href = "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css";
+    if (style === null) href = localStorage.getItem("style") ?? href;
+    if (style === "pico") href = "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css";
+    if (style === "simple") href = "simple.css";
+    if (style === "sakura") href = "sakura.css";
+    $style.href = href;
+    localStorage.setItem("style", href)
+  })()
+</script>
 </head>
 {{end}}

diff --git a/_example/templates/index.tmpl b/_example/templates/index.tmpl
index 8f02204de131292ae68007925ca62f4a782d2d87..20ddba201b1aab26c30e6d8bc357fddfaaed7f0b 100644
--- a/_example/templates/index.tmpl
+++ b/_example/templates/index.tmpl
@@ -1,8 +1,17 @@
-{{template "head" .author.Name}}
+{{template "head" (printf "%s's Blog" .Author.Name)}}
 <body>
+<header>
+	<h1>{{.Author.Name}}</h1>
+	<p>I really like to hack on Gitea and I use Catppuccin (btw)</p>
+</header>
 <main>
-{{range $article := .articles}}
-<a href="{{$article.Filename}}.html">{{$article.Title}}</a>
+{{range $category, $articles := .ArticlesByCategory}}
+	<h3>{{$category}}</h3>
+	<ul>
+	{{range $article := $articles}}
+		<li><a href="{{$article.Filename}}.html">{{$article.Title}}</a> ({{$article.Time.Format "01/02/2006"}}) - {{$article.Summary}}</li>
+	{{end}}
+	</ul>
 {{end}}
 </main>
 </body>

diff --git a/blog.go b/blog.go
index 644353a354057efe605a8a87576faa2ecb9dc9c9..5e4bdef0e3fbb23e7ccc2bb4d612d74887d864e0 100644
--- a/blog.go
+++ b/blog.go
@@ -105,17 +105,22 @@ }
 
 // Index renders the blog index to w
 func (b *Blog) Index(w io.Writer) error {
+	byCat := make(map[string][]Article)
+	for _, article := range b.Articles {
+		byCat[article.Category] = append(byCat[article.Category], article)
+	}
 	return b.indexTemplate.Execute(w, map[string]any{
-		"articles": b.Articles,
-		"author":   b.Author,
+		"Articles":           b.Articles,
+		"ArticlesByCategory": byCat,
+		"Author":             b.Author,
 	})
 }
 
 // Article renders an article to w
 func (b *Blog) Article(w io.Writer, a Article) error {
 	return b.articleTemplate.Execute(w, map[string]any{
-		"article": a,
-		"author":  b.Author,
+		"Article": a,
+		"Author":  b.Author,
 	})
 }

diff --git a/cmd/chromacss/main.go b/cmd/chromacss/main.go
index edf8cd5022a0e2574837c673ee0f869f4389a39f..e2b1eefe7aa3763e530c534812bee0f951a768b8 100644
--- a/cmd/chromacss/main.go
+++ b/cmd/chromacss/main.go
@@ -7,6 +7,7 @@ 	"os"
 
 	"github.com/alecthomas/chroma/v2/formatters/html"
 	"github.com/alecthomas/chroma/v2/styles"
+	"go.jolheiser.com/blog"
 )
 
 func main() {
@@ -38,7 +39,7 @@ 		defer fi.Close()
 		out = fi
 	}
 
-	formatter := html.New(html.WithClasses(true), html.WithAllClasses(true))
+	formatter := html.New(blog.ChromaOpts...)
 
 	lightStyle := *lightFlag
 	darkStyle := *darkFlag

diff --git a/goldmark.go b/goldmark.go
index 404e8a5ff1189ddd0c7569bb22b4a44217dca46b..195e16337b248d03814a8d54db027cad16c6ec19 100644
--- a/goldmark.go
+++ b/goldmark.go
@@ -26,11 +26,14 @@ 		meta.Meta,
 		emoji.Emoji,
 		highlighting.NewHighlighting(
 			highlighting.WithFormatOptions(
-				chromahtml.WithClasses(true),
-				chromahtml.WithAllClasses(true),
-				chromahtml.WithLineNumbers(true),
-				chromahtml.WithLinkableLineNumbers(true, "code-"),
+				ChromaOpts...,
 			),
 		),
 	),
 )
+
+var ChromaOpts = []chromahtml.Option{
+	chromahtml.WithClasses(true),
+	chromahtml.WithAllClasses(true),
+	chromahtml.WithLineNumbers(true),
+}

Home