get all figma files from mdx and store in json fil;e

Author: lukasoppermann

.github/workflows/getFigmaImages.yml

@@ -0,0 +1,24 @@
+name: Get Figma Images
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  findNodeReferences:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci --no-audit --no-fund --include=dev --ignore-scripts
+      - name: Get Figma Images
+        run: node scripts/getFigmaImages.js '**/*.mdx'
+      - name: Log file content
+        run: cat figmaImageNodeUrls.json

content/components/avatar.mdx

@@ -37,6 +37,12 @@ Avatars start at 16px and increment by base-4 until 32px. At 32px, the scale swi
   src="https://user-images.githubusercontent.com/586552/207139770-429f7327-c3e5-4e38-aa58-185a03d82304.png"
 />
 
+<img
+  width="960"
+  alt="Demo"
+  src="https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=26998-2424&t=eruKCwLaYv3FX2Vu-4"
+/>
+
 ### Shape
 
 Avatars appear as two different shapes, each with their own functional purpose.

figmaImageNodeUrls.json

@@ -0,0 +1,3 @@
+[
+  "https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=26998-2424&t=eruKCwLaYv3FX2Vu-4"
+]

package.json

@@ -20,8 +20,8 @@
     "@primer/gatsby-theme-doctocat": "^4.7.1",
     "@primer/octicons-react": "^17.3.0",
     "@primer/react": "35.5.0",
-    "@styled-system/props": "^5.1.5",
     "@styled-system/prop-types": "5.1.5",
+    "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
     "@svgr/webpack": "^6.5.1",
     "@tanstack/react-query": "^4.23.0",
@@ -51,6 +51,7 @@
   "devDependencies": {
     "@github/markdownlint-github": "^0.3.0",
     "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 = /<img\s+[^>]*src="([^"]+)"[^>]*>/g
+  // find matches in find
+  const matches = await findMatches(pattern, files)
+  // write the matches to a file
+  await fs.writeFile('figmaImageNodeUrls.json', JSON.stringify(matches, null, 2))
+
+}
+
+run()