Add remove color swap option
This commit is contained in:
parent
c18a36d24f
commit
0c7f7a6853
3 changed files with 38 additions and 9 deletions
20
README.md
20
README.md
|
|
@ -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.
|
||||
|
|
|
|||
18
hugo.toml
18
hugo.toml
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue