🚀 add svg generation option to the github action

.github/workflows/main.yml

@@ -46,6 +46,7 @@ jobs:
         with:
           github_user_name: platane
           gif_out_path: dist/github-contribution-grid-snake.gif
+          svg_out_path: dist/github-contribution-grid-snake.svg
 
       - name: ensure the generated file exists
         run: |

action.yml

@@ -5,6 +5,8 @@ author: "platane"
 outputs:
   gif_out_path:
     description: "path of the generated gif"
+  svg_out_path:
+    description: "path of the generated svg"
 
 runs:
   using: "docker"
@@ -17,4 +19,8 @@ inputs:
   gif_out_path:
     description: "path of the generated gif"
     required: false
-    default: "./github-contribution-grid-snake.gif"
+    default: null
+  svg_out_path:
+    description: "path of the generated svg"
+    required: false
+    default: null

packages/action/__tests__/dev.ts

@@ -3,10 +3,17 @@ import * as path from "path";
 import { generateContributionSnake } from "../generateContributionSnake";
 
 (async () => {
-  const output = path.join(__dirname, "__snapshots__/out.gif");
+  const outputSvg = path.join(__dirname, "__snapshots__/out.svg");
+  const outputGif = path.join(__dirname, "__snapshots__/out.gif");
 
-  const buffer = await generateContributionSnake("platane");
+  const buffer = await generateContributionSnake("platane", {
+    svg: true,
+    gif: true,
+  });
 
-  console.log("💾 writing to", output);
+  console.log("💾 writing to", outputSvg);
-  fs.writeFileSync(output, buffer);
+  fs.writeFileSync(outputSvg, buffer.svg);
+
+  console.log("💾 writing to", outputGif);
+  fs.writeFileSync(outputGif, buffer.gif);
 })();

packages/action/generateContributionSnake.ts

@@ -1,28 +1,24 @@
 import { getGithubUserContribution } from "@snk/github-user-contribution";
-import { createGif } from "@snk/gif-creator";
-import { getBestRoute } from "@snk/compute/getBestRoute";
-import { createSnakeFromCells } from "@snk/types/snake";
 import { userContributionToGrid } from "./userContributionToGrid";
+import { getBestRoute } from "@snk/compute/getBestRoute";
+import { createGif } from "@snk/gif-creator";
+import { createSvg } from "../svg-creator";
+import { snake4 } from "@snk/types/__fixtures__/snake";
 
-export const generateContributionSnake = async (userName: string) => {
+export const generateContributionSnake = async (
+  userName: string,
+  format: { svg?: boolean; gif?: boolean }
+) => {
   console.log("🎣 fetching github user contribution");
   const { cells, colorScheme } = await getGithubUserContribution(userName);
 
-  const grid0 = userContributionToGrid(cells);
+  const grid = userContributionToGrid(cells);
+  const snake = snake4;
 
-  const snake0 = createSnakeFromCells([
-    { x: 3, y: -1 },
-    { x: 2, y: -1 },
-    { x: 1, y: -1 },
-    { x: 0, y: -1 },
-  ]);
-
-  // const upscale = 815 / (grid0.width + 2) / 16;
-  const upscale = 2;
   const drawOptions = {
-    sizeBorderRadius: 2 * upscale,
+    sizeBorderRadius: 2,
-    sizeCell: 16 * upscale,
+    sizeCell: 16,
-    sizeDot: 12 * upscale,
+    sizeDot: 12,
     colorBorder: "#1b1f230a",
     colorDots: colorScheme as any,
     colorEmpty: colorScheme[0],
@@ -33,10 +29,19 @@ export const generateContributionSnake = async (userName: string) => {
   const gifOptions = { frameDuration: 100, step: 1 };
 
   console.log("📡 computing best route");
-  const chain = getBestRoute(grid0, snake0)!;
+  const chain = getBestRoute(grid, snake)!;
 
-  console.log("📹 creating gif");
+  const output: Record<string, Buffer | string> = {};
-  const buffer = await createGif(grid0, chain, drawOptions, gifOptions);
 
-  return buffer;
+  if (format.gif) {
+    console.log("📹 creating gif");
+    output.gif = await createGif(grid, chain, drawOptions, gifOptions);
+  }
+
+  if (format.svg) {
+    console.log("🖌 creating svg");
+    output.svg = createSvg(grid, chain, drawOptions, gifOptions);
+  }
+
+  return output;
 };

packages/action/index.ts

@@ -5,13 +5,24 @@ import { generateContributionSnake } from "./generateContributionSnake";
 (async () => {
   try {
     const userName = core.getInput("github_user_name");
-    const gifOutPath = core.getInput("gif_out_path");
+    const format = {
+      svg: core.getInput("svg_out_path"),
+      gif: core.getInput("gif_out_path"),
+    };
 
-    const buffer = await generateContributionSnake(userName);
+    const { svg, gif } = await generateContributionSnake(
+      userName,
+      format as any
+    );
 
-    fs.writeFileSync(gifOutPath, buffer);
+    if (svg) {
-
+      fs.writeFileSync(format.svg, svg);
-    console.log(`::set-output name=gif_out_path::${gifOutPath}`);
+      console.log(`::set-output name=svg_out_path::${format.svg}`);
+    }
+    if (gif) {
+      fs.writeFileSync(format.gif, gif);
+      console.log(`::set-output name=gif_out_path::${format.gif}`);
+    }
   } catch (e) {
     core.setFailed(`Action failed with "${e.message}"`);
   }