Commit cdca8c4

Eric Bower  ·  2024-04-25 09:31:36 -0400 EDT
parent 01c88ba 
feat: better theme support
9 files changed,  +77, -223
M Makefile
M README.md
M go.mod
M go.sum
M html/base.layout.tmpl
M html/log.page.tmpl
M main.go
M static/main.css
M static/smol.css
M Makefile
+1, -1
......@@ -28,7 +28,7 @@ static: build clean
2828 --desc "static site generator for git" \
2929 --clone-url "https://github.com/picosh/pgit.git" \
3030 --home-url "https://git.erock.io" \
31- --theme "algol" \
31+ --theme "dracula" \
3232 --revs main
3333 .PHONY:
3434
M README.md
+16, -0
......@@ -23,6 +23,22 @@ To learn more about the options run:
2323 ./pgit --help
2424 ```
2525
26+## themes
27+
28+We support all [chroma](https://xyproto.github.io/splash/docs/all.html) themes.
29+We do our best to adapt the theme of the entire site to match the chroma syntax
30+highlighting theme. This is a "closet approximation" as we are not testing every
31+single theme.
32+
33+```bash
34+./pgit --revs main --label pico --out ./public --theme onedark
35+```
36+
37+The default theme is `dracula`. If you want to change the colors for your site,
38+we generate a `vars.css` file that you are welcome to overwrite before
39+deploying, it will _not_ change the syntax highlighting colors, only the main
40+site colors.
41+
2642 # inspiration
2743
2844 This project was heavily inspired by
M go.mod
+2, -2
......@@ -3,13 +3,13 @@ module github.com/picosh/pgit
33 go 1.18
44
55 require (
6- github.com/alecthomas/chroma v0.10.0
6+ github.com/alecthomas/chroma/v2 v2.13.0
77 github.com/dustin/go-humanize v1.0.0
88 github.com/gogs/git-module v1.6.0
99 )
1010
1111 require (
12- github.com/dlclark/regexp2 v1.7.0 // indirect
12+ github.com/dlclark/regexp2 v1.11.0 // indirect
1313 github.com/mcuadros/go-version v0.0.0-20190308113854-92cdf37c5b75 // indirect
1414 github.com/stretchr/testify v1.8.1 // indirect
1515 golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4 // indirect
M go.sum
+7, -6
......@@ -1,15 +1,17 @@
1-github.com/alecthomas/chroma v0.10.0 h1:7XDcGkCQopCNKjZHfYrNLraA+M7e0fMiJ/Mfikbfjek=
2-github.com/alecthomas/chroma v0.10.0/go.mod h1:jtJATyUxlIORhUOFNA9NZDWGAQ8wpxQQqNSB4rjA/1s=
1+github.com/alecthomas/assert/v2 v2.6.0 h1:o3WJwILtexrEUk3cUVal3oiQY2tfgr/FHWiz/v2n4FU=
2+github.com/alecthomas/chroma/v2 v2.13.0 h1:VP72+99Fb2zEcYM0MeaWJmV+xQvz5v5cxRHd+ooU1lI=
3+github.com/alecthomas/chroma/v2 v2.13.0/go.mod h1:BUGjjsD+ndS6eX37YgTchSEG+Jg9Jv1GiZs9sqPqztk=
4+github.com/alecthomas/repr v0.4.0 h1:GhI2A8MACjfegCPVq9f1FLvIBS+DrQ2KQBFZP1iFzXc=
35 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
46 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
57 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
6-github.com/dlclark/regexp2 v1.4.0/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
7-github.com/dlclark/regexp2 v1.7.0 h1:7lJfhqlPssTb1WQx4yvTHN0uElPEv52sbaECrAQxjAo=
8-github.com/dlclark/regexp2 v1.7.0/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
8+github.com/dlclark/regexp2 v1.11.0 h1:G/nrcoOa7ZXlpoa/91N3X7mM3r8eIlMBBJZvsz/mxKI=
9+github.com/dlclark/regexp2 v1.11.0/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
910 github.com/dustin/go-humanize v1.0.0 h1:VSnTsYCnlFHaM2/igO1h6X3HA71jcobQuxemgkq4zYo=
1011 github.com/dustin/go-humanize v1.0.0/go.mod h1:HtrtbFcZ19U5GC7JDqmcUSB87Iq5E25KnS6fMYU6eOk=
1112 github.com/gogs/git-module v1.6.0 h1:71GdRM9/pFxGgSUz8t2DKmm3RYuHUnTjsOuFInJXnkM=
1213 github.com/gogs/git-module v1.6.0/go.mod h1:8jFYhDxLUwEOhM2709l2CJXmoIIslobU1xszpT0NcAI=
14+github.com/hexops/gotextdiff v1.0.3 h1:gitA9+qJrrTCsiCl7+kh75nPqQt1cx4ZkudSTLoUqJM=
1315 github.com/mcuadros/go-version v0.0.0-20190308113854-92cdf37c5b75 h1:Pijfgr7ZuvX7QIQiEwLdRVr3RoMG+i0SbBO1Qu+7yVk=
1416 github.com/mcuadros/go-version v0.0.0-20190308113854-92cdf37c5b75/go.mod h1:76rfSfYPWj01Z85hUf/ituArm797mNKcvINh1OlsZKo=
1517 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
......@@ -18,7 +20,6 @@ github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+
1820 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
1921 github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
2022 github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
21-github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
2223 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
2324 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
2425 github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk=
M html/base.layout.tmpl
+1, -0
......@@ -10,6 +10,7 @@
1010
1111 {{template "meta" .}}
1212
13+ <link rel="stylesheet" href="/vars.css" />
1314 <link rel="stylesheet" href="/smol.css" />
1415 <link rel="stylesheet" href="/main.css" />
1516 </head>
M html/log.page.tmpl
+1, -1
......@@ -26,7 +26,7 @@
2626
2727 <div class="flex items-center gap-xs">
2828 <span>{{.AuthorStr}}</span>
29- <span>&centerdot;</span>
29+ <span>&nbsp;&centerdot;&nbsp;</span>
3030 <span>{{.WhenStr}}</span>
3131 </div>
3232
M main.go
+36, -5
......@@ -16,10 +16,10 @@ import (
1616 "sync"
1717 "unicode/utf8"
1818
19- "github.com/alecthomas/chroma"
20- formatterHtml "github.com/alecthomas/chroma/formatters/html"
21- "github.com/alecthomas/chroma/lexers"
22- "github.com/alecthomas/chroma/styles"
19+ "github.com/alecthomas/chroma/v2"
20+ formatterHtml "github.com/alecthomas/chroma/v2/formatters/html"
21+ "github.com/alecthomas/chroma/v2/lexers"
22+ "github.com/alecthomas/chroma/v2/styles"
2323 "github.com/dustin/go-humanize"
2424 git "github.com/gogs/git-module"
2525 )
......@@ -1008,6 +1008,30 @@ func (c *Config) writeRevision(repo *git.Repository, pageData *PageData, refs []
10081008 return output
10091009 }
10101010
1011+func style(theme chroma.Style) string {
1012+ bg := theme.Get(chroma.Background)
1013+ txt := theme.Get(chroma.Text)
1014+ kw := theme.Get(chroma.Keyword)
1015+ nv := theme.Get(chroma.NameVariable)
1016+ cm := theme.Get(chroma.Comment)
1017+ ln := theme.Get(chroma.LiteralNumber)
1018+ return fmt.Sprintf(`:root {
1019+ --bg-color: %s;
1020+ --text-color: %s;
1021+ --border: %s;
1022+ --link-color: %s;
1023+ --hover: %s;
1024+ --visited: %s;
1025+}`,
1026+ bg.Background.String(),
1027+ txt.Colour.String(),
1028+ cm.Colour.String(),
1029+ nv.Colour.String(),
1030+ kw.Colour.String(),
1031+ ln.Colour.String(),
1032+ )
1033+}
1034+
10111035 func main() {
10121036 var outdir = flag.String("out", "./public", "output directory")
10131037 var rpath = flag.String("repo", ".", "path to git repo")
......@@ -1043,7 +1067,7 @@ func main() {
10431067
10441068 formatter := formatterHtml.New(
10451069 formatterHtml.WithLineNumbers(true),
1046- formatterHtml.LinkableLineNumbers(true, ""),
1070+ formatterHtml.WithLinkableLineNumbers(true, ""),
10471071 formatterHtml.WithClasses(true),
10481072 )
10491073
......@@ -1071,6 +1095,13 @@ func main() {
10711095 config.writeRepo()
10721096 config.copyStatic("static")
10731097
1098+ styles := style(*theme)
1099+ fmt.Println(styles)
1100+ err = os.WriteFile(filepath.Join(out, "vars.css"), []byte(styles), 0644)
1101+ if err != nil {
1102+ panic(err)
1103+ }
1104+
10741105 fp := filepath.Join(out, "syntax.css")
10751106 w, err := os.OpenFile(fp, os.O_RDWR|os.O_CREATE|os.O_TRUNC, 0644)
10761107 if err != nil {
M static/main.css
+10, -6
......@@ -1,15 +1,19 @@
1+pre {
2+ border: 1px solid var(--border);
3+}
4+
5+body {
6+ max-width: 900px;
7+}
8+
19 .border-b {
2- border-bottom: 1px solid var(--grey);
10+ border-bottom: 1px solid var(--border);
311 }
412
513 .border-b:last-child {
614 border-bottom: 0;
715 }
816
9-body {
10- max-width: 900px;
11-}
12-
1317 .box {
1418 margin: 1rem 0;
1519 }
......@@ -24,7 +28,7 @@ body {
2428 }
2529
2630 .tree-row:hover {
27- background-color: var(--grey);
31+ background-color: var(--border);
2832 }
2933
3034 @media only screen and (max-width: 900px) {
M static/smol.css
+3, -202
......@@ -15,50 +15,6 @@
1515 box-shadow: none;
1616 }
1717
18-@media (prefers-color-scheme: light) {
19- :root {
20- --main-hue: 250;
21- --white: #6a737d;
22- --white-light: #cfe0f4;
23- --white-dark: #9b9b9b;
24- --code: #e3e5e8;
25- --code-border: #e3e5e8;
26- --pre: #f6f8fa;
27- --bg-color: #fdfdfd;
28- --text-color: #24292f;
29- --link-color: #005cc5;
30- --visited: #6f42c1;
31- --blockquote: #005cc5;
32- --blockquote-bg: #cfe0f4;
33- --hover: #d73a49;
34- --grey: #ccc;
35- --grey-light: #6a708e;
36- --shadow: #e8e8e8;
37- }
38-}
39-
40-@media (prefers-color-scheme: dark) {
41- :root {
42- --main-hue: 250;
43- --white: #f2f2f2;
44- --white-light: #f2f2f2;
45- --white-dark: #c6c6c6;
46- --code: #414558;
47- --code-border: #252525;
48- --pre: #252525;
49- --bg-color: #282a36;
50- --text-color: #f2f2f2;
51- --link-color: #8be9fd;
52- --visited: #bd93f9;
53- --blockquote: #bd93f9;
54- --blockquote-bg: #414558;
55- --hover: #ff80bf;
56- --grey: #414558;
57- --grey-light: #6a708e;
58- --shadow: #252525;
59- }
60-}
61-
6218 html {
6319 background-color: var(--bg-color);
6420 color: var(--text-color);
......@@ -106,7 +62,6 @@ pre > code {
10662 background-color: inherit;
10763 padding: 0;
10864 border: none;
109- color: initial;
11065 }
11166
11267 code {
......@@ -163,7 +118,7 @@ hr {
163118 border: 0;
164119 margin: 0;
165120 height: 2px;
166- background: var(--grey);
121+ background: var(--border);
167122 margin: 1rem auto;
168123 text-align: center;
169124 }
......@@ -182,15 +137,6 @@ a:visited {
182137 color: var(--visited);
183138 }
184139
185-a.link-grey {
186- text-decoration: underline;
187- color: var(--white);
188-}
189-
190-a.link-grey:visited {
191- color: var(--white);
192-}
193-
194140 section {
195141 margin-bottom: 1.4rem;
196142 }
......@@ -211,21 +157,6 @@ article {
211157 overflow-wrap: break-word;
212158 }
213159
214-blockquote {
215- border-left: 5px solid var(--blockquote);
216- background-color: var(--blockquote-bg);
217- padding: 0.8rem;
218- margin: 1rem 0;
219-}
220-
221-blockquote > p {
222- margin: 0;
223-}
224-
225-blockquote code {
226- border: 1px solid var(--blockquote);
227-}
228-
229160 ul,
230161 ol {
231162 padding: 0 0 0 2rem;
......@@ -287,45 +218,6 @@ figure {
287218 monospace;
288219 }
289220
290-.link-alt-adj,
291-.link-alt-adj:visited,
292-.link-alt-adj:visited:hover,
293-.link-alt-adj:hover {
294- color: var(--link-color);
295- text-decoration: none;
296-}
297-
298-.link-alt-adj:visited:hover,
299-.link-alt-adj:hover {
300- text-decoration: underline;
301-}
302-
303-.link-alt-hover,
304-.link-alt-hover:visited,
305-.link-alt-hover:visited:hover,
306-.link-alt-hover:hover {
307- color: var(--hover);
308- text-decoration: none;
309-}
310-
311-.link-alt-hover:visited:hover,
312-.link-alt-hover:hover {
313- text-decoration: underline;
314-}
315-
316-.link-alt,
317-.link-alt:visited,
318-.link-alt:visited:hover,
319-.link-alt:hover {
320- color: var(--white);
321- text-decoration: none;
322-}
323-
324-.link-alt:visited:hover,
325-.link-alt:hover {
326- text-decoration: underline;
327-}
328-
329221 .text-3xl {
330222 font-size: 2.5rem;
331223 }
......@@ -371,7 +263,7 @@ figure {
371263 }
372264
373265 .border {
374- border: 2px solid var(--grey-light);
266+ border: 2px solid var(--border);
375267 }
376268
377269 .text-left {
......@@ -594,10 +486,6 @@ figure {
594486 justify-content: end;
595487 }
596488
597-.font-grey-light {
598- color: var(--grey-light);
599-}
600-
601489 .hidden {
602490 display: none;
603491 }
......@@ -606,97 +494,10 @@ figure {
606494 text-align: right;
607495 }
608496
609-/* ==== MARKDOWN ==== */
610-
611-.md h1,
612-.md h2,
613-.md h3,
614-.md h4 {
615- padding: 0;
616- margin: 1.5rem 0 0.9rem 0;
617- font-weight: bold;
618-}
619-
620-.md h1 a,
621-.md h2 a,
622-.md h3 a,
623-.md h4 a {
624- color: var(--grey-light);
625- text-decoration: none;
626-}
627-
628-.md h1 {
629- font-size: 1.6rem;
630- line-height: 1.15;
631- border-bottom: 2px solid var(--grey);
632- padding-bottom: 1rem;
633-}
634-
635-.md h2 {
636- font-size: 1.3rem;
637- line-height: 1.15;
638- color: var(--white-dark);
639-}
640-
641-.md h3 {
642- font-size: 1.2rem;
643- color: var(--white-dark);
644-}
645-
646-.md h4 {
647- font-size: 1rem;
648- color: var(--white-dark);
649-}
650-
651497 /* ==== HELPERS ==== */
652498
653-.logo-header {
654- line-height: 1;
655- display: inline-block;
656- background-color: #FF79C6;
657- background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
658- color: transparent;
659- background-clip: text;
660- border: 3px solid #FF79C6;
661- padding: 8px 10px 10px 10px;
662- border-radius: 10px;
663- box-shadow: 0px 5px 0px 0px var(--shadow);
664- background-size: 100%;
665- -webkit-background-clip: text;
666- -moz-background-clip: text;
667- -webkit-text-fill-color: transparent;
668- -moz-text-fill-color: transparent;
669-}
670-
671-.btn {
672- border: 2px solid var(--link-color);
673- color: var(--link-color);
674- padding: 0.4rem 1rem;
675- font-weight: bold;
676- display: inline-block;
677-}
678-
679-.btn-link:hover {
680- border: 2px solid var(--hover);
681-}
682-
683-.btn-link,
684-.btn-link:visited {
685- border: 2px solid var(--link-color);
686- color: var(--link-color);
687- padding: 0.4rem 1rem;
688- text-decoration: none;
689- font-weight: bold;
690- display: inline-block;
691-}
692-
693-.btn-link:visited:hover,
694-.btn-link:hover {
695- border: 2px solid var(--hover);
696-}
697-
698499 .box {
699- border: 2px solid var(--grey-light);
500+ border: 2px solid var(--border);
700501 padding: 0.5rem 0.75rem;
701502 }
702503