adding scripts and workflows (#869)

Author: lukasoppermann

.github/workflows/deploy_preview.yml

@@ -2,6 +2,10 @@ name: Deploy Preview
 
 on:
   pull_request:
+  workflow_run:
+    workflows: [Get Figma Images]
+    types:
+      - completed
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/get_figma_images.yml

@@ -0,0 +1,48 @@
+name: Get Figma Images
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types:
+      - labeled
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  findNodeReferences:
+    if: ${{ github.event.label.name == 'update figma images' || github.event_name == 'push' }}
+    runs-on: ubuntu-latest
+    env:
+      FilesToScan: '**/*.mdx'
+      ImageUrlFile: figmaImageNodeUrls.json
+      ImageOutputDir: content/images/figma
+      FigmaToken: ${{ secrets.FIGMA_TOKEN }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn
+      - name: Get Figma Images
+        run: node scripts/getFigmaImages.js "${{env.FilesToScan}}" > ${{env.ImageUrlFile}}
+      - name: Log file content
+        run: cat ${{env.ImageUrlFile}}
+      - name: Download images from figma
+        run: npx @primer/figma-images --figmaToken ${{env.FigmaToken}} --nodeURLsFile ${{env.ImageUrlFile}} --outputDir ${{env.ImageOutputDir}}
+      - name: Log output dir content
+        run: ls ${{env.ImageOutputDir}}
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: github-actions[bot] Update figma images
+      - uses: actions-ecosystem/action-remove-labels@v1
+        if: always()
+        with:
+          labels: 'update figma images'

package.json

@@ -5,12 +5,13 @@
   "scripts": {
     "start": "gatsby develop",
     "clean": "gatsby clean",
-    "build": "gatsby build",
+    "build": "npm run copy:figma-images && gatsby build",
     "serve": "gatsby serve",
-    "build:preview": "gatsby build",
+    "build:preview": "npm run copy:figma-images && gatsby build",
     "now-build": "yarn build",
     "lint": "eslint .",
-    "markdownlint": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!.github\" \"!node_modules\""
+    "markdownlint": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!.github\" \"!node_modules\"",
+    "copy:figma-images": "mkdir -p public/images && cp -r content/images/figma public/images || true"
   },
   "dependencies": {
     "@github/prettier-config": "^0.0.6",
@@ -50,7 +51,9 @@
   },
   "devDependencies": {
     "@github/markdownlint-github": "^0.3.0",
+    "@primer/figma-images": "^0.1.2",
     "esm": "^3.2.25",
+    "fast-glob": "^3.3.2",
     "markdownlint-cli2": "^0.5.1",
     "markdownlint-cli2-formatter-pretty": "^0.0.3",
     "mustache": "^4.2.0",

scripts/getFigmaImages.js

@@ -0,0 +1,42 @@
+// Import necessary modules
+const fs = require('fs').promises;
+const fastGlob = require('fast-glob');
+
+const isFigmaLink = (match) => {
+  return match.startsWith('https://www.figma.com/design/')
+}
+
+const findMatches = async (regexPattern, files) => {
+  const matches = await Promise.all(
+    files.map(async (filePath) => {
+      // read file content
+      const content = await fs.readFile(filePath, { encoding: 'utf8' })
+      // try to find all matches in the file content
+      const matches = [...content.matchAll(regexPattern)]
+      // for each match, return the first group
+      return matches.map((match) => match[1]).filter(isFigmaLink);
+    })
+  )
+  //
+  return matches.flat()
+}
+
+const run = async () => {
+  // get arguments
+  const [fileGlob] = process.argv.slice(2)
+  if(!fileGlob) {
+    console.error('❌ Please provide a file glob as the argument. It needs to be wrapped in quotes.')
+    return
+  }
+  // get all files that match the file glob
+  const files = await fastGlob([fileGlob])
+  // define the regex pattern to search
+  const pattern = /<FigmaImage\s+[^>]*src="([^"]+)"[^>]*>/g
+  // find matches in find
+  const matches = await findMatches(pattern, files)
+  // output result
+  console.log(JSON.stringify(matches, null, 2))
+
+}
+
+run()