Compare commits

...

2 commits

Author SHA1 Message Date
0c7f7a6853 Add remove color swap option 2026-05-15 20:00:31 -04:00
c18a36d24f Fix comments 2026-05-15 09:21:07 -04:00
3 changed files with 40 additions and 11 deletions

View file

@ -30,8 +30,8 @@ This requires the following environment variables to be defined:
GH_API_KEY=
FJ_API_KEY=
FJ_USER=
FJ_URL=
GL_API_KEY= //Optional default to gitlab.com
FJ_URL= //Optional: defaults to codeberg.org
GL_API_KEY= //Optional: default to gitlab.com
GL_USER=
GL_URL=
```
@ -65,6 +65,22 @@ or as a partial to your html templates:
{{ partial "git-heatmap.html" . }}
```
You can configure the colors and captions, see the example from my site's configuration below:
```toml
[params.heatmap]
caption = "This is my unified git heatmap from my <a href='https://forge.alexselimov.com/aselimov'>Forgejo</a> and <a href='https://github.com/aselimov'>Github</a>"
color_empty_light = "#e8e4dc"
color_empty_dark = "#2a2a2a"
color_max = "#7a5010"
color_high = "#C47E1A"
color_mid = "#EF9F27"
color_low = "#F7C46A"
swap_colors = true # Optional, defaults to true
```
The colors swap, `color_low <--> color_max, color_mid <--> color_high` based on the user prefers setting by default. Set `swap_colors = false` to keep the same low-to-max color order in both light and dark modes.
### Keeping activity in-sync
I host my site (and some other self-hosted stuff) on a Vultr vps.
@ -74,10 +90,10 @@ To keep my activity in sync, I just set up a cron job that does:
*/30 * * * * go run forge.alexselimov.com/aselimov/hugo-unified-git-activity/get_history@latest -o /var/www/alexselimov.com/activity.json
```
If you aren't on a VPS and using actions to deploy your site ([That's how I deploy my personal blog](https://forge.alexselimov.com/aselimov/AlexSelimov.com/src/branch/master/.forgejo/workflows/build_and_deploy_site.yml)), you can just add an action to update your `static/activity.json` and deploy however often you want.
If you aren't on a VPS and using actions to deploy your site ([that's how I deploy my personal blog](https://forge.alexselimov.com/aselimov/AlexSelimov.com/src/branch/master/.forgejo/workflows/build_and_deploy_site.yml)), you can just add an action to update your `static/activity.json` and deploy however often you want.
## Important Notes
- I originally wrote it in Typescript but thought go would be better to distribute to Hugo users (since you probably already have go installed) **so the go version is a completely vibed port**. I didn't look at the code, but it's probably fine? I did verify it's not sending credentials anywhere at least haha.
- I originally wrote it in Typescript but thought go would be better to distribute to Hugo users (since you probably already have go installed) **so the go version is a completely vibed port**. I didn't look at the code, but it's probably fine? I did verify it's not sending credentials anywhere at least.
- Private repo contributions are tracked, but they are anonymized in the activity.json. It shows up as `"private": "<count>"`.
- I added Gitlab functionality but I don't use Gitlab so it may have issues. I set up a test account and did a quick test to make sure a new commit showed up, but good likelihood of edge cases.

View file

@ -1,9 +1,13 @@
baseURL = 'https://example.org/'
locale = 'en-us'
title = 'My New Hugo Project'
baseURL = 'http://localhost:1313/'
languageCode = 'en-us'
title = 'Heatmap Example'
[params.heatmap]
color_empty = "#F5F5F5"
color_low = "#BDD7EE"
color_mid = "#2E86C1"
color_high = "#1A5276"
color_empty_light = "#e8e4dc"
color_empty_dark = "#2a2a2a"
color_low = "#7a5010"
color_mid = "#C47E1A"
color_high = "#EF9F27"
color_max = "#F7C46A"
caption = "Git contributions over the last year"
swap_colors = true

View file

@ -1,13 +1,22 @@
{{ $js := resources.Get "js/build_heatmap.js" }}
{{ $p := .Site.Params.heatmap }}
{{ $swapColors := true }}
{{ if isset $p "swap_colors" }}{{ $swapColors = $p.swap_colors }}{{ end }}
<style>
:root {
--color-empty: {{ $p.color_empty_dark }};
{{ if $swapColors }}
--color-l1: {{ $p.color_max }};
--color-l2: {{ $p.color_high }};
--color-l3: {{ $p.color_mid }};
--color-l4: {{ $p.color_low }};
{{ else }}
--color-l1: {{ $p.color_low }};
--color-l2: {{ $p.color_mid }};
--color-l3: {{ $p.color_high }};
--color-l4: {{ $p.color_max }};
{{ end }}
}
@media (prefers-color-scheme: light) {
:root {