PassionWeek: Get Figma images from .mdx files

.github/workflows/deploy.yml

@@ -29,7 +29,6 @@ jobs:
           client-id: ${{ vars.DOTCOM_SHARED_COMPONENTS_APP_CLIENT_ID }}
           client-secret: ${{ secrets.DOTCOM_SHARED_COMPONENTS_APP_CLIENT_SECRET }}
           installation-id: ${{ vars.DOTCOM_SHARED_COMPONENTS_APP_INSTALLATION_ID }}
-
       - name: Checkout default branch
         uses: actions/checkout@v2
 
@@ -53,6 +52,7 @@ jobs:
         run: yarn build
         env:
           GITHUB_TOKEN: ${{ steps.get-dotcom-access-token.outputs.access-token }}
+          FIGMA_API_TOKEN: ${{ secrets.FIGMA_TOKEN }}
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

.github/workflows/deploy_preview.yml

@@ -48,6 +48,7 @@ jobs:
         run: yarn build:preview
         env:
           GITHUB_TOKEN: ${{ steps.get-dotcom-access-token.outputs.access-token }}
+          FIGMA_API_TOKEN: ${{ secrets.FIGMA_TOKEN }}
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2

README.md

@@ -21,6 +21,13 @@ This repository is evolving as our documentation needs change. See our [contribu
 4. `yarn` to install dependencies
 5. `yarn start` to start the dev server
 
+### Figma API token
+
+To get images downloaded from the Figma API, you'll need to create a `.env` file in the root of the project and add your Figma API token. You can create a new token [here](https://www.figma.com/developers/api#access-tokens).
+
+```sh
+`FIGMA_API_TOKEN=your-token-here`
+``
 
 ## Deployment
 

content/components/banner.mdx

@@ -13,11 +13,12 @@ import {Box} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
 import {AccessibilityLink} from '~/src/components/accessibility-link'
+import {FigmaImage} from '~/src/components/figma-image'
 
-<img
+<FigmaImage
   width="960"
-  alt="Image displaying each variant of banner, from top: critical, warning, success, info, upsell."
-  src="https://github.com/primer/design/assets/813754/1f221ea9-0a82-4f4f-a8eb-b1d61ef1903d"
+  alt="Image displaying each variant of the banner component, from top: critical, warning, success, info, upsell."
+  src="https://www.figma.com/design/YlBTqHTbdRwYQt0bfIHvGw/Interface-guidelines?node-id=2825-15487&t=5Kg6u9zn7VW7tsip-4"
 />
 
 ## Usage

package.json

@@ -3,15 +3,15 @@
   "repository": "primer/design",
   "version": "1.0.0",
   "scripts": {
-    "start": "gatsby develop",
+    "start": "yarn build:figma-images && gatsby develop",
     "clean": "gatsby clean",
-    "build": "npm run copy:figma-images && gatsby build",
+    "build": "yarn build:figma-images && gatsby build",
+    "build:figma-images": "node scripts/buildFigmaImages.mjs",
+    "build:preview": "yarn build:figma-images && gatsby build",
     "serve": "gatsby serve",
-    "build:preview": "npm run copy:figma-images && gatsby build",
     "now-build": "yarn build",
     "lint": "eslint .",
-    "markdownlint": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!.github\" \"!node_modules\"",
-    "copy:figma-images": "mkdir -p public/images && cp -r content/images/figma public/images || true"
+    "markdownlint": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!.github\" \"!node_modules\""
   },
   "dependencies": {
     "@github/prettier-config": "^0.0.6",
@@ -21,8 +21,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,7 +51,8 @@
   },
   "devDependencies": {
     "@github/markdownlint-github": "^0.3.0",
-    "@primer/figma-images": "^0.1.2",
+    "@primer/figma-images": "^0.1.5",
+    "dotenv": "^16.4.5",
     "esm": "^3.2.25",
     "fast-glob": "^3.3.2",
     "markdownlint-cli2": "^0.5.1",

scripts/buildFigmaImages.mjs

@@ -0,0 +1,57 @@
+// Import necessary modules
+import fs from 'fs/promises'
+import fastGlob from 'fast-glob'
+import {config} from 'dotenv'
+import figmaImages from '@primer/figma-images'
+
+config()
+
+const fileGlob = '**/*.mdx'
+const outputDir = 'public/images/figma/'
+
+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 () => {
+  // check for Figma API token before proceeding
+  if (!process.env.FIGMA_API_TOKEN) {
+    console.warn('⚠️ No Figma API token provided. Skipping image download from Figma.')
+    console.log('To get a Figma API token, visit https://www.figma.com/developers/api#access-tokens')
+    console.log('Then, add the token to an .env file in the root of the project with: FIGMA_API_TOKEN=your-token-here')
+    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 nodeURLs = await findMatches(pattern, files)
+
+  // fetch and download images
+  await figmaImages(process.env.FIGMA_API_TOKEN, {
+    nodeURLs,
+    outputDir,
+    missingImagesLogLevel: 'warn',
+  })
+}
+
+run()

src/components/figma-image.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import styled from 'styled-components'
+import {parseFigmaNodeUrl} from '@primer/figma-images/src/utils'
+import {LinkButton, StyledOcticon} from '@primer/react'
+import {PencilIcon} from '@primer/octicons-react'
+
+type FigmaImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+  src: string
+  caption?: string
+}
+
+const StyledImg = styled.img`
+  max-width: 100%;
+  height: auto;
+`
+
+const StyledLinkButton = styled(LinkButton)`
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  opacity: 0;
+`
+
+const StyledFigure = styled.figure`
+  position: relative;
+  width: 100%;
+  margin: 0;
+
+  &:hover ${StyledLinkButton} {
+    opacity: 1;
+  }
+`
+
+const StyledCaption = styled.figcaption``
+
+const FigmaImageDir = '/images/figma'
+export const FigmaImage: React.FC<FigmaImageProps> = ({src, caption, ...props}) => {
+  // check for missing prop
+  if (src === undefined) throw new Error('src is required on FigmaImage component')
+  // get real image url
+  const {nodeId, fileId} = parseFigmaNodeUrl(src)
+  const imagePath = `${FigmaImageDir}/${fileId}-${nodeId}.png`
+  // return image component
+  return (
+    <StyledFigure className="FigmaImage">
+      <StyledImg src={imagePath} {...props} />
+      <StyledLinkButton variant="default" href={src} target="_blank">
+        <StyledOcticon icon={PencilIcon} sx={{mr: 2}} size="small" />
+        Edit in Figma
+      </StyledLinkButton>
+      {caption && <StyledCaption>{caption}</StyledCaption>}
+    </StyledFigure>
+  )
+}

yarn.lock

@@ -1992,10 +1992,10 @@
   resolved "https://registry.npmjs.org/@primer/component-metadata/-/component-metadata-0.5.1.tgz"
   integrity sha512-+3tuJScHWRifOAyMV+cn1I533j+PcprvPXbKnH1W7N+vhaGyaaHTao8Dkyyhxbhklmumcf8XR+Lz6dK1ojDrCg==
 
-"@primer/figma-images@^0.1.2":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@primer/figma-images/-/figma-images-0.1.2.tgz#e8fe6df96e23eaa9c1f69b6eb0f674e1be82173d"
-  integrity sha512-dfWVbs67GePlYyyKoXi0AiKdTxKP3ko5nkV7+mjiOVa9Hkba6ry1KUnTVnwhs8Xceube/BoXxU/LgfdflZkxag==
+"@primer/figma-images@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@primer/figma-images/-/figma-images-0.1.5.tgz#0f073ae968b6d725cd3c115bee2143a75bb5d6d7"
+  integrity sha512-GsKIJ+pVKdui30fiXSj/sQkZLS5WkEbwYFQcJIehzU2dQ+r5DeL1IP+gwn0x8hvi5B9PELvdXMzsrGtb2at+rg==
   dependencies:
     axios "^1.3.4"
     dotenv "^16.0.3"
@@ -5766,7 +5766,7 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
-dotenv@^16.0.3:
+dotenv@^16.0.3, dotenv@^16.4.5:
   version "16.4.5"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
   integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==