Merge pull request #1 from ArthurLobopro/improve-docs

ArthurLobopro · web-flow · commit 9f4c33046f80 · 2024-04-22T18:49:39.000-03:00
Improve docs
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -79,16 +79,46 @@ jobs:
           outputs: |
             dist/grid-snake.svg
             dist/grid-snake-dark.svg?palette=github-dark
-            dist/grid-without-progressbar.svg?hide_stack=true
-            dist/grid-snake-long.svg?snake_size=5
+            dist/grid-snake-colored.svg?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
 
       - name: ensure the generated file exists
         run: |
           ls dist
           test -f dist/grid-snake.svg
           test -f dist/grid-snake-dark.svg
-          test -f dist/grid-without-progressbar.svg
-          test -f dist/grid-snake-long.svg
+          test -f dist/grid-snake-colored.svg
+
+      - name: Generate Without Progressbar
+        uses: ./svg-only
+        with:
+          github_user_name: arthurlobopro
+          outputs: |
+            dist/stack/grid-without-progressbar.svg?hide_stack=true
+            dist/stack/grid-without-progressbar-dark.svg?hide_stack=true&palette=github-dark
+
+      - name: ensure the generated file exists
+        run: |
+          ls dist/stack
+          test -f dist/stack/grid-without-progressbar.svg
+          test -f dist/stack/grid-without-progressbar-dark.svg
+
+      - name: Generate Snake Sizes
+        uses: ./svg-only
+        with:
+          github_user_name: arthurlobopro
+          outputs: |
+            dist/size/grid-snake-short.svg?snake_size=2
+            dist/size/grid-snake-short-dark.svg?snake_size=2&palette=github-dark
+            dist/size/grid-snake-long.svg?snake_size=6
+            dist/size/grid-snake-long-dark.svg?snake_size=6&palette=github-dark
+
+      - name: Ensure Size Outputs Exists
+        run: |
+          ls dist/size
+          test -f dist/size/grid-snake-short.svg
+          test -f dist/size/grid-snake-short-dark.svg
+          test -f dist/size/grid-snake-long.svg
+          test -f dist/size/grid-snake-long-dark.svg
 
       - name: Generate Speed Custom
         uses: ./svg-only
@@ -98,14 +128,20 @@ jobs:
             dist/speed/grid-snake-slow.svg?speed=slow
             dist/speed/grid-snake-normal.svg?speed=normal
             dist/speed/grid-snake-fast.svg?speed=fast
+            dist/speed/grid-snake-slow-dark.svg?speed=slow&palette=github-dark
+            dist/speed/grid-snake-normal-dark.svg?speed=normal&palette=github-dark
+            dist/speed/grid-snake-fast-dark.svg?speed=fast&palette=github-dark
 
       - name: Ensure Speed Outputs Exists
         run: |
           ls dist/speed
           test -f dist/speed/grid-snake-slow.svg
           test -f dist/speed/grid-snake-normal.svg
           test -f dist/speed/grid-snake-fast.svg
-      
+          test -f dist/speed/grid-snake-slow-dark.svg
+          test -f dist/speed/grid-snake-normal-dark.svg
+          test -f dist/speed/grid-snake-fast-dark.svg
+
       - name: Generate Dot Shape Custom
         uses: ./svg-only
         with:
@@ -114,13 +150,19 @@ jobs:
             dist/shape/grid-snake-square.svg?dot_shape=square
             dist/shape/grid-snake-rounded-square.svg?dot_shape=rounded-square
             dist/shape/grid-snake-circle.svg?dot_shape=circle
-      
+            dist/shape/grid-snake-square-dark.svg?dot_shape=square&palette=github-dark
+            dist/shape/grid-snake-rounded-square-dark.svg?dot_shape=rounded-square&palette=github-dark
+            dist/shape/grid-snake-circle-dark.svg?dot_shape=circle&palette=github-dark
+
       - name: Ensure Speed Outputs Exists
         run: |
           ls dist/shape
           test -f dist/shape/grid-snake-square.svg
           test -f dist/shape/grid-snake-rounded-square.svg
           test -f dist/shape/grid-snake-circle.svg
+          test -f dist/shape/grid-snake-square-dark.svg
+          test -f dist/shape/grid-snake-rounded-square-dark.svg
+          test -f dist/shape/grid-snake-circle-dark.svg
 
       - uses: crazy-max/ghaction-github-pages@v3.1.0
         with:
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,4 @@
 {
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  }
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
 }
diff --git a/README.md b/README.md
@@ -50,7 +50,15 @@ Available as github action. It can automatically generate a new image each day.
     #  - color_dots:  Coma separated list of dots color.
     #                 The first one is 0 contribution, then it goes from the low contribution to the highest.
     #                 Exactly 5 colors are expected.
-    #  - hide_stack: On svg builds, you can hide the progressbar by this option
+    #  - hide_stack: If should hide progressbar, by default is false
+    #  - dot_shape: The shape of the contribution dots,
+    #               must be one of [square, square-rounded, circle].
+    #               By default is square-rounded.
+    #  - speed: The speed of animation, must be one of [fast, normal, slow].
+    #           By default is normal
+    #  - snake_size: The size of the snake, must be a number between 1 and 6.
+    #                By default is 4.
+
     outputs: |
       dist/github-snake.svg
       dist/github-snake-dark.svg?palette=github-dark
diff --git a/action.yml b/action.yml
@@ -27,7 +27,15 @@ inputs:
       - color_dots:   Coma separated list of dots color. 
                       The first one is 0 contribution, then it goes from the low contribution to the highest.
                       Exactly 5 colors are expected.
-      - hide_stack: On svg builds, you can hide the progressbar by this option
+      - hide_stack: If should hide progressbar, by default is false
+      - dot_shape: The shape of the contribution dots, 
+                   must be one of [square, square-rounded, circle]. 
+                   By default is square-rounded.
+      - speed: The speed of animation, must be one of [fast, normal, slow].
+               By default is normal
+      - snake_size: The size of the snake, must be a number between 1 and 6.
+                    By default is 4.
+
       example:
         outputs: |
           dark.svg?palette=github-dark&color_snake=blue&hide_stack=true
diff --git a/docs/index.md b/docs/index.md
@@ -0,0 +1,10 @@
+# SNK Api
+
+## Samples
+
+- [Palette](./samples/palette.md)
+- [Custom Colors](./samples/colors.md)
+- [Hide Progressbar (Stack)](./samples/progressbar.md)
+- [Snake Size](./samples/snake-size.md)
+- [Dot Shape](./samples/dot-shape.md)
+- [Speed](./samples/speed.md)
diff --git a/docs/samples/colors.md b/docs/samples/colors.md
@@ -0,0 +1,14 @@
+# Custom Colors
+
+You can customize the snake color by the `color_snake` option and the dots colors by the `color_dots` option.
+
+The `color_snake` option must be a named color or a hexadecimal color.
+The `color_dots` option must be a array of 5 colors. The first one is 0 contribution, then it goes from the low contribution to the highest.
+
+### Custom Color Sample:
+
+```yml
+color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
+```
+
+![Color Sample](https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/grid-snake-colored.svg)
diff --git a/docs/samples/dot-shape.md b/docs/samples/dot-shape.md
@@ -0,0 +1,29 @@
+# Dot Shape Samples
+
+The `dot_shape` option must be one of `square`, `square-rounded` or `circle`
+
+Here are `dot_shape` samples:
+
+### dot_shape=square
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/shape/grid-snake-square-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/shape/grid-snake-square.svg">
+  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/shape/grid-snake-square.svg">
+</picture>
+
+### dot_shape=square-rounded
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/shape/grid-snake-rounded-square-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/shape/grid-snake-rounded-square.svg">
+  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/shape/grid-snake-rounded-square.svg">
+</picture>
+
+### dot_shape=circle
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/shape/grid-snake-circle-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/shape/grid-snake-circle.svg">
+  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/shape/grid-snake-circle.svg">
+</picture>
diff --git a/docs/samples/palette.md b/docs/samples/palette.md
@@ -0,0 +1,15 @@
+# Palette samples
+
+The `palette` option must be one of `github`, `github-dark` or `github-light`.
+
+The options `github` and `github-light` are the same palette.
+
+Here are some `palette` samples:
+
+### palette=github or palette=github-light
+
+![Light palette](https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/grid-snake.svg)
+
+### palette=github-dark
+
+![Dark palette](https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/grid-snake-dark.svg)
diff --git a/docs/samples/progressbar.md b/docs/samples/progressbar.md
@@ -0,0 +1,21 @@
+# Progressbar (Stack)
+
+The `hide_stack` option must be boolean and by default it's `false`
+
+Here are `hide_stack` samples:
+
+### hide_stack=false
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/grid-snake-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/grid-snake.svg">
+  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/grid-snake.svg">
+</picture>
+
+### hide_stack=true
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/stack/grid-without-progressbar-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/stack/grid-without-progressbar.svg">
+  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/stack/grid-without-progressbar.svg">
+</picture>
diff --git a/docs/samples/snake-size.md b/docs/samples/snake-size.md
@@ -0,0 +1,28 @@
+# Snake Size samples
+
+The `snake_size` option must be an integer between 1 and 6.
+
+Here are some `snake_size` samples:
+
+### snake_size=2
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/size/grid-snake-short-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/size/grid-snake-short.svg">
+  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/size/grid-snake-short.svg">
+</picture>
+
+### snake_size=4
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/grid-snake-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/grid-snake.svg">
+  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/grid-snake.svg">
+</picture>
+
+### snake_size=6
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/size/grid-snake-long-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/size/grid-snake-long.svg">
+  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/size/grid-snake-long.svg">
diff --git a/docs/samples/speed.md b/docs/samples/speed.md
@@ -0,0 +1,29 @@
+# Speed samples
+
+The `speed` option must be one of `slow`, `normal` or `fast`.
+
+Here are some `speed` samples:
+
+### speed=slow
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/speed/grid-snake-slow-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/speed/grid-snake-slow.svg">
+  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/speed/grid-snake-slow.svg">
+</picture>
+
+### speed=normal
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/speed/grid-snake-normal-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/speed/grid-snake-normal.svg">
+  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/speed/grid-snake-normal.svg">
+</picture>
+
+### speed=fast
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/speed/grid-snake-fast-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/speed/grid-snake-fast.svg">
+  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/ArthurLobopro/snk/output-svg-only/speed/grid-snake-fast.svg">
+</picture>
diff --git a/packages/action/parsers/parseSnakeSize.ts b/packages/action/parsers/parseSnakeSize.ts
@@ -1,4 +1,6 @@
 const DEFAULT_SNAKE_SIZE = 4;
+const MIN_SIZE = 1;
+const MAX_SIZE = 6;
 
 export function parseSnakeSize(searchParams: URLSearchParams) {
   if (searchParams.has("snake_size")) {
@@ -17,9 +19,9 @@ export function parseSnakeSize(searchParams: URLSearchParams) {
         );
       }
 
-      if (paramsSnakeSize <= 0 || paramsSnakeSize > 9) {
+      if (paramsSnakeSize < MIN_SIZE || paramsSnakeSize > MAX_SIZE) {
         throw new Error(
-          "Invalid snake_size provided, snake_size must be between 1 and 9"
+          `Invalid snake_size provided, snake_size must be between ${MIN_SIZE} and ${MAX_SIZE}`
         );
       }
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,4 @@`
`1`	`1`	`{`
`2`		`- "[typescript]": {`
`3`		`- "editor.defaultFormatter": "esbenp.prettier-vscode",`
`4`		`- "editor.formatOnSave": true`
`5`		`- }`
	`2`	`+ "editor.defaultFormatter": "esbenp.prettier-vscode",`
	`3`	`+ "editor.formatOnSave": true`
`6`	`4`	`}`