docs/.github/workflows/deploy-prs.yml

name: Deploy Preview
on: [pull_request]

jobs:
  vercel-deployment:
    runs-on: ubuntu-latest
    steps:
      - name: Cancel Previous Runs
        uses: styfle/cancel-workflow-action@0.5.0
        with:
          access_token: ${{ github.token }}
      - uses: actions/checkout@v2
      - uses: aulneau/vercel-action@v20.0.0
        id: vercel_deployment_preview
        if: github.event_name == 'pull_request'
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          scope: ${{ secrets.VERCEL_SCOPE }}
          alias-domains: pr-{{ PR_NUMBER }}.docs.stacks.engineering
      - id: file_changes
        name: Check diff of PR
        uses: trilom/file-changes-action@v1.2.4
        with:
          prNumber: ${{ github.event.pull_request.number }}
      - name: Comment on PR
        uses: actions/github-script@v2
        id: comment
        if: github.event_name == 'pull_request'
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |
            const getPageUrl = (changed) => {
              const pageUrl = changed.replace('src/pages/', '/').replace('.md', '')
              if(pageUrl === '/index') return '/'
              return pageUrl
            }

            const makeUrl = (path, url) => `${url}${path}`
            const getScreenshotUrl = (path, url) => `https://api.microlink.io/?url=${makeUrl(path, url)}&meta=false&screenshot=&overlay.browser=dark&screenshot&embed=screenshot.url`

            const getChangedPages = (changed, url) => {
              let changedPages = []
              changed.forEach(file => {
                if(file.includes('src/pages')){
                  const path = getPageUrl(file)
                  changedPages.push({
                    url: makeUrl(path, url),
                    screenshot: getScreenshotUrl(path, url)
                  })
                }
              })
                // group by screenshots by 3
              const grouped = changedPages.reduce((pv, cv, i) => {
                const j = Math.floor(i / 2)
                ;(pv[j] || (pv[j] = [])).push(cv)
                return pv
              }, [])

              return grouped
            }

            const ellipsis = (txt, l = 25) => {
              return txt.length > l ? `…${txt.slice(-22)}` : txt;
            };

            const escapeLinkTitle = txt => {
              // escape [ and ] with \
              return txt.replace(/\[/g, '\\[').replace(/\]/g, '\\]');
            };

            const createChangedPagesMarkdown = (changed, url) => {
              if(changed.length === 0) return ''
              const grouped = getChangedPages(changed, url)
              if(grouped.length === 0) return ''
              let md = `
            #### 📝  Changed routes:`
              md += grouped
                .map(
                  group => `
            |${group
                  .map(({ url: routeUrl }) => ` [**${escapeLinkTitle(ellipsis(routeUrl.replace(url, '')))}**](${routeUrl}) |`)
                  .join('')}
            |${':-:|'.repeat(group.length)}
            |${group
                  .map(
                    ({ url: routeUrl, screenshot }) =>
                      `<a href="${routeUrl}"><img src="${screenshot}" alt="Screenshot of ${routeUrl.replace(url, '')}" width="420"></a>` +
                      '<br />' +
                      `<sup><a href="${screenshot}">(view full size)</a>` +
                      ' |'
                  )
                  .join('')}
            `).join('');
              return md
            }

            const firstLine = `Blockstack docs have been deployed with Vercel using the code from this PR!`;
            const {data} = await github.issues.listComments({
              ...context.repo,
              issue_number: context.issue.number,
            });
            const vercelPreviewURLComment = data.find((comment) =>
              comment.body.includes(firstLine)
            );
            const commentId = vercelPreviewURLComment && vercelPreviewURLComment.id || undefined;

            const prUrl = '${{steps.vercel_deployment_preview.outputs.preview-url}}'
            const changed = ${{steps.file_changes.outputs.files_modified}}
            const added = ${{steps.file_changes.outputs.files_added}}
            const removed = ${{steps.file_changes.outputs.files_removed}}
            const all_files = ${{steps.file_changes.outputs.files}}

            const commentBody = `
            #### Blockstack Documentation
            ${ firstLine }

            - [Blockstack Docs](${prUrl})
            ${createChangedPagesMarkdown([...changed, ...added], prUrl)}
            Built with commit ${context.sha}.
            `;

            if (context.issue.number) {
              if (commentId) {
                await github.issues.updateComment({
                  ...context.repo,
                  comment_id: commentId,
                  body: commentBody,
                });
              } else {
                await github.issues.createComment({
                  ...context.repo,
                  issue_number: context.issue.number,
                  body: commentBody,
                });
              }
            }