- commit
- cdca8c4
- parent
- 01c88ba
- author
- Eric Bower
- date
- 2024-04-25 13:31:36 +0000 UTC
feat: better theme support
9 files changed,
+77,
-223
M
Makefile
+1,
-1
1@@ -28,7 +28,7 @@ static: build clean
2 --desc "static site generator for git" \
3 --clone-url "https://github.com/picosh/pgit.git" \
4 --home-url "https://git.erock.io" \
5- --theme "algol" \
6+ --theme "dracula" \
7 --revs main
8 .PHONY:
9
+16,
-0
1@@ -23,6 +23,22 @@ To learn more about the options run:
2 ./pgit --help
3 ```
4
5+## themes
6+
7+We support all [chroma](https://xyproto.github.io/splash/docs/all.html) themes.
8+We do our best to adapt the theme of the entire site to match the chroma syntax
9+highlighting theme. This is a "closet approximation" as we are not testing every
10+single theme.
11+
12+```bash
13+./pgit --revs main --label pico --out ./public --theme onedark
14+```
15+
16+The default theme is `dracula`. If you want to change the colors for your site,
17+we generate a `vars.css` file that you are welcome to overwrite before
18+deploying, it will _not_ change the syntax highlighting colors, only the main
19+site colors.
20+
21 # inspiration
22
23 This project was heavily inspired by
M
go.mod
+2,
-2
1@@ -3,13 +3,13 @@ module github.com/picosh/pgit
2 go 1.18
3
4 require (
5- github.com/alecthomas/chroma v0.10.0
6+ github.com/alecthomas/chroma/v2 v2.13.0
7 github.com/dustin/go-humanize v1.0.0
8 github.com/gogs/git-module v1.6.0
9 )
10
11 require (
12- github.com/dlclark/regexp2 v1.7.0 // indirect
13+ github.com/dlclark/regexp2 v1.11.0 // indirect
14 github.com/mcuadros/go-version v0.0.0-20190308113854-92cdf37c5b75 // indirect
15 github.com/stretchr/testify v1.8.1 // indirect
16 golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4 // indirect
M
go.sum
+7,
-6
1@@ -1,15 +1,17 @@
2-github.com/alecthomas/chroma v0.10.0 h1:7XDcGkCQopCNKjZHfYrNLraA+M7e0fMiJ/Mfikbfjek=
3-github.com/alecthomas/chroma v0.10.0/go.mod h1:jtJATyUxlIORhUOFNA9NZDWGAQ8wpxQQqNSB4rjA/1s=
4+github.com/alecthomas/assert/v2 v2.6.0 h1:o3WJwILtexrEUk3cUVal3oiQY2tfgr/FHWiz/v2n4FU=
5+github.com/alecthomas/chroma/v2 v2.13.0 h1:VP72+99Fb2zEcYM0MeaWJmV+xQvz5v5cxRHd+ooU1lI=
6+github.com/alecthomas/chroma/v2 v2.13.0/go.mod h1:BUGjjsD+ndS6eX37YgTchSEG+Jg9Jv1GiZs9sqPqztk=
7+github.com/alecthomas/repr v0.4.0 h1:GhI2A8MACjfegCPVq9f1FLvIBS+DrQ2KQBFZP1iFzXc=
8 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
9 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
10 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
11-github.com/dlclark/regexp2 v1.4.0/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
12-github.com/dlclark/regexp2 v1.7.0 h1:7lJfhqlPssTb1WQx4yvTHN0uElPEv52sbaECrAQxjAo=
13-github.com/dlclark/regexp2 v1.7.0/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
14+github.com/dlclark/regexp2 v1.11.0 h1:G/nrcoOa7ZXlpoa/91N3X7mM3r8eIlMBBJZvsz/mxKI=
15+github.com/dlclark/regexp2 v1.11.0/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
16 github.com/dustin/go-humanize v1.0.0 h1:VSnTsYCnlFHaM2/igO1h6X3HA71jcobQuxemgkq4zYo=
17 github.com/dustin/go-humanize v1.0.0/go.mod h1:HtrtbFcZ19U5GC7JDqmcUSB87Iq5E25KnS6fMYU6eOk=
18 github.com/gogs/git-module v1.6.0 h1:71GdRM9/pFxGgSUz8t2DKmm3RYuHUnTjsOuFInJXnkM=
19 github.com/gogs/git-module v1.6.0/go.mod h1:8jFYhDxLUwEOhM2709l2CJXmoIIslobU1xszpT0NcAI=
20+github.com/hexops/gotextdiff v1.0.3 h1:gitA9+qJrrTCsiCl7+kh75nPqQt1cx4ZkudSTLoUqJM=
21 github.com/mcuadros/go-version v0.0.0-20190308113854-92cdf37c5b75 h1:Pijfgr7ZuvX7QIQiEwLdRVr3RoMG+i0SbBO1Qu+7yVk=
22 github.com/mcuadros/go-version v0.0.0-20190308113854-92cdf37c5b75/go.mod h1:76rfSfYPWj01Z85hUf/ituArm797mNKcvINh1OlsZKo=
23 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
24@@ -18,7 +20,6 @@ github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+
25 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
26 github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
27 github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
28-github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
29 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
30 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
31 github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk=
+1,
-0
1@@ -10,6 +10,7 @@
2
3 {{template "meta" .}}
4
5+ <link rel="stylesheet" href="/vars.css" />
6 <link rel="stylesheet" href="/smol.css" />
7 <link rel="stylesheet" href="/main.css" />
8 </head>
+1,
-1
1@@ -26,7 +26,7 @@
2
3 <div class="flex items-center gap-xs">
4 <span>{{.AuthorStr}}</span>
5- <span>·</span>
6+ <span> · </span>
7 <span>{{.WhenStr}}</span>
8 </div>
9
M
main.go
+36,
-5
1@@ -16,10 +16,10 @@ import (
2 "sync"
3 "unicode/utf8"
4
5- "github.com/alecthomas/chroma"
6- formatterHtml "github.com/alecthomas/chroma/formatters/html"
7- "github.com/alecthomas/chroma/lexers"
8- "github.com/alecthomas/chroma/styles"
9+ "github.com/alecthomas/chroma/v2"
10+ formatterHtml "github.com/alecthomas/chroma/v2/formatters/html"
11+ "github.com/alecthomas/chroma/v2/lexers"
12+ "github.com/alecthomas/chroma/v2/styles"
13 "github.com/dustin/go-humanize"
14 git "github.com/gogs/git-module"
15 )
16@@ -1008,6 +1008,30 @@ func (c *Config) writeRevision(repo *git.Repository, pageData *PageData, refs []
17 return output
18 }
19
20+func style(theme chroma.Style) string {
21+ bg := theme.Get(chroma.Background)
22+ txt := theme.Get(chroma.Text)
23+ kw := theme.Get(chroma.Keyword)
24+ nv := theme.Get(chroma.NameVariable)
25+ cm := theme.Get(chroma.Comment)
26+ ln := theme.Get(chroma.LiteralNumber)
27+ return fmt.Sprintf(`:root {
28+ --bg-color: %s;
29+ --text-color: %s;
30+ --border: %s;
31+ --link-color: %s;
32+ --hover: %s;
33+ --visited: %s;
34+}`,
35+ bg.Background.String(),
36+ txt.Colour.String(),
37+ cm.Colour.String(),
38+ nv.Colour.String(),
39+ kw.Colour.String(),
40+ ln.Colour.String(),
41+ )
42+}
43+
44 func main() {
45 var outdir = flag.String("out", "./public", "output directory")
46 var rpath = flag.String("repo", ".", "path to git repo")
47@@ -1043,7 +1067,7 @@ func main() {
48
49 formatter := formatterHtml.New(
50 formatterHtml.WithLineNumbers(true),
51- formatterHtml.LinkableLineNumbers(true, ""),
52+ formatterHtml.WithLinkableLineNumbers(true, ""),
53 formatterHtml.WithClasses(true),
54 )
55
56@@ -1071,6 +1095,13 @@ func main() {
57 config.writeRepo()
58 config.copyStatic("static")
59
60+ styles := style(*theme)
61+ fmt.Println(styles)
62+ err = os.WriteFile(filepath.Join(out, "vars.css"), []byte(styles), 0644)
63+ if err != nil {
64+ panic(err)
65+ }
66+
67 fp := filepath.Join(out, "syntax.css")
68 w, err := os.OpenFile(fp, os.O_RDWR|os.O_CREATE|os.O_TRUNC, 0644)
69 if err != nil {
+10,
-6
1@@ -1,15 +1,19 @@
2+pre {
3+ border: 1px solid var(--border);
4+}
5+
6+body {
7+ max-width: 900px;
8+}
9+
10 .border-b {
11- border-bottom: 1px solid var(--grey);
12+ border-bottom: 1px solid var(--border);
13 }
14
15 .border-b:last-child {
16 border-bottom: 0;
17 }
18
19-body {
20- max-width: 900px;
21-}
22-
23 .box {
24 margin: 1rem 0;
25 }
26@@ -24,7 +28,7 @@ body {
27 }
28
29 .tree-row:hover {
30- background-color: var(--grey);
31+ background-color: var(--border);
32 }
33
34 @media only screen and (max-width: 900px) {
+3,
-202
1@@ -15,50 +15,6 @@
2 box-shadow: none;
3 }
4
5-@media (prefers-color-scheme: light) {
6- :root {
7- --main-hue: 250;
8- --white: #6a737d;
9- --white-light: #cfe0f4;
10- --white-dark: #9b9b9b;
11- --code: #e3e5e8;
12- --code-border: #e3e5e8;
13- --pre: #f6f8fa;
14- --bg-color: #fdfdfd;
15- --text-color: #24292f;
16- --link-color: #005cc5;
17- --visited: #6f42c1;
18- --blockquote: #005cc5;
19- --blockquote-bg: #cfe0f4;
20- --hover: #d73a49;
21- --grey: #ccc;
22- --grey-light: #6a708e;
23- --shadow: #e8e8e8;
24- }
25-}
26-
27-@media (prefers-color-scheme: dark) {
28- :root {
29- --main-hue: 250;
30- --white: #f2f2f2;
31- --white-light: #f2f2f2;
32- --white-dark: #c6c6c6;
33- --code: #414558;
34- --code-border: #252525;
35- --pre: #252525;
36- --bg-color: #282a36;
37- --text-color: #f2f2f2;
38- --link-color: #8be9fd;
39- --visited: #bd93f9;
40- --blockquote: #bd93f9;
41- --blockquote-bg: #414558;
42- --hover: #ff80bf;
43- --grey: #414558;
44- --grey-light: #6a708e;
45- --shadow: #252525;
46- }
47-}
48-
49 html {
50 background-color: var(--bg-color);
51 color: var(--text-color);
52@@ -106,7 +62,6 @@ pre > code {
53 background-color: inherit;
54 padding: 0;
55 border: none;
56- color: initial;
57 }
58
59 code {
60@@ -163,7 +118,7 @@ hr {
61 border: 0;
62 margin: 0;
63 height: 2px;
64- background: var(--grey);
65+ background: var(--border);
66 margin: 1rem auto;
67 text-align: center;
68 }
69@@ -182,15 +137,6 @@ a:visited {
70 color: var(--visited);
71 }
72
73-a.link-grey {
74- text-decoration: underline;
75- color: var(--white);
76-}
77-
78-a.link-grey:visited {
79- color: var(--white);
80-}
81-
82 section {
83 margin-bottom: 1.4rem;
84 }
85@@ -211,21 +157,6 @@ article {
86 overflow-wrap: break-word;
87 }
88
89-blockquote {
90- border-left: 5px solid var(--blockquote);
91- background-color: var(--blockquote-bg);
92- padding: 0.8rem;
93- margin: 1rem 0;
94-}
95-
96-blockquote > p {
97- margin: 0;
98-}
99-
100-blockquote code {
101- border: 1px solid var(--blockquote);
102-}
103-
104 ul,
105 ol {
106 padding: 0 0 0 2rem;
107@@ -287,45 +218,6 @@ figure {
108 monospace;
109 }
110
111-.link-alt-adj,
112-.link-alt-adj:visited,
113-.link-alt-adj:visited:hover,
114-.link-alt-adj:hover {
115- color: var(--link-color);
116- text-decoration: none;
117-}
118-
119-.link-alt-adj:visited:hover,
120-.link-alt-adj:hover {
121- text-decoration: underline;
122-}
123-
124-.link-alt-hover,
125-.link-alt-hover:visited,
126-.link-alt-hover:visited:hover,
127-.link-alt-hover:hover {
128- color: var(--hover);
129- text-decoration: none;
130-}
131-
132-.link-alt-hover:visited:hover,
133-.link-alt-hover:hover {
134- text-decoration: underline;
135-}
136-
137-.link-alt,
138-.link-alt:visited,
139-.link-alt:visited:hover,
140-.link-alt:hover {
141- color: var(--white);
142- text-decoration: none;
143-}
144-
145-.link-alt:visited:hover,
146-.link-alt:hover {
147- text-decoration: underline;
148-}
149-
150 .text-3xl {
151 font-size: 2.5rem;
152 }
153@@ -371,7 +263,7 @@ figure {
154 }
155
156 .border {
157- border: 2px solid var(--grey-light);
158+ border: 2px solid var(--border);
159 }
160
161 .text-left {
162@@ -594,10 +486,6 @@ figure {
163 justify-content: end;
164 }
165
166-.font-grey-light {
167- color: var(--grey-light);
168-}
169-
170 .hidden {
171 display: none;
172 }
173@@ -606,97 +494,10 @@ figure {
174 text-align: right;
175 }
176
177-/* ==== MARKDOWN ==== */
178-
179-.md h1,
180-.md h2,
181-.md h3,
182-.md h4 {
183- padding: 0;
184- margin: 1.5rem 0 0.9rem 0;
185- font-weight: bold;
186-}
187-
188-.md h1 a,
189-.md h2 a,
190-.md h3 a,
191-.md h4 a {
192- color: var(--grey-light);
193- text-decoration: none;
194-}
195-
196-.md h1 {
197- font-size: 1.6rem;
198- line-height: 1.15;
199- border-bottom: 2px solid var(--grey);
200- padding-bottom: 1rem;
201-}
202-
203-.md h2 {
204- font-size: 1.3rem;
205- line-height: 1.15;
206- color: var(--white-dark);
207-}
208-
209-.md h3 {
210- font-size: 1.2rem;
211- color: var(--white-dark);
212-}
213-
214-.md h4 {
215- font-size: 1rem;
216- color: var(--white-dark);
217-}
218-
219 /* ==== HELPERS ==== */
220
221-.logo-header {
222- line-height: 1;
223- display: inline-block;
224- background-color: #FF79C6;
225- background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
226- color: transparent;
227- background-clip: text;
228- border: 3px solid #FF79C6;
229- padding: 8px 10px 10px 10px;
230- border-radius: 10px;
231- box-shadow: 0px 5px 0px 0px var(--shadow);
232- background-size: 100%;
233- -webkit-background-clip: text;
234- -moz-background-clip: text;
235- -webkit-text-fill-color: transparent;
236- -moz-text-fill-color: transparent;
237-}
238-
239-.btn {
240- border: 2px solid var(--link-color);
241- color: var(--link-color);
242- padding: 0.4rem 1rem;
243- font-weight: bold;
244- display: inline-block;
245-}
246-
247-.btn-link:hover {
248- border: 2px solid var(--hover);
249-}
250-
251-.btn-link,
252-.btn-link:visited {
253- border: 2px solid var(--link-color);
254- color: var(--link-color);
255- padding: 0.4rem 1rem;
256- text-decoration: none;
257- font-weight: bold;
258- display: inline-block;
259-}
260-
261-.btn-link:visited:hover,
262-.btn-link:hover {
263- border: 2px solid var(--hover);
264-}
265-
266 .box {
267- border: 2px solid var(--grey-light);
268+ border: 2px solid var(--border);
269 padding: 0.5rem 0.75rem;
270 }
271