adding scripts and workflows (#869)

.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()