Fix: Add missing media attachments checker workflow#670
Conversation
Resolves issue alphaonelabs#571 - SyntaxError: Unexpected token '|' - Adds comprehensive HTML media attachment validation - Includes accessibility and performance checks - Uses proper YAML and JavaScript syntax
|
Note Gemini is unable to generate a summary for this pull request due to the file types involved not being currently supported. |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a GitHub Actions workflow at Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as Developer
participant GH as GitHub (PR)
participant Runner as Actions Runner
participant Checkout as actions/checkout
participant Script as actions/github-script
participant API as GitHub REST API
Note over GH,Runner: Trigger on PR opened/synchronize/reopened when HTML files changed
Dev->>GH: Open / update PR
GH->>Runner: Start workflow
Runner->>Checkout: Checkout repo
Runner->>Script: Run JS check script
Script->>API: Get PR details (number, body)
API-->>Script: PR data
Script->>API: List PR comments
API-->>Script: Comments
Script->>Script: Aggregate body+comments, extract media refs (regex + host/extension filters)
alt Media found
Script->>API: Find prior bot comment by marker
API-->>Script: Found?
alt Found
Script->>API: Delete bot warning comment
else
Note right of Script: No warning to remove
end
Script-->>Runner: Exit success
else Media not found
Script->>API: Find prior bot comment by marker
API-->>Script: Found?
alt Found
Script->>API: Update bot warning comment
else
Script->>API: Create bot warning comment
end
Script->>Runner: Fail workflow (block merge)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
.github/workflows/check-media-attachments.yml(1 hunks)
🧰 Additional context used
🪛 actionlint (1.7.7)
.github/workflows/check-media-attachments.yml
19-19: the runner of "actions/github-script@v6" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
🪛 YAMLlint (1.37.1)
.github/workflows/check-media-attachments.yml
[warning] 3-3: truthy value should be one of [false, true]
(truthy)
[error] 25-25: trailing spaces
(trailing-spaces)
[error] 27-27: trailing spaces
(trailing-spaces)
[error] 34-34: trailing spaces
(trailing-spaces)
[error] 36-36: trailing spaces
(trailing-spaces)
[error] 37-37: trailing spaces
(trailing-spaces)
[error] 40-40: trailing spaces
(trailing-spaces)
[error] 45-45: trailing spaces
(trailing-spaces)
[error] 48-48: trailing spaces
(trailing-spaces)
[error] 52-52: trailing spaces
(trailing-spaces)
[error] 55-55: trailing spaces
(trailing-spaces)
[error] 64-64: trailing spaces
(trailing-spaces)
[error] 66-66: trailing spaces
(trailing-spaces)
[error] 74-74: trailing spaces
(trailing-spaces)
[error] 80-80: trailing spaces
(trailing-spaces)
[error] 82-82: trailing spaces
(trailing-spaces)
[error] 89-89: trailing spaces
(trailing-spaces)
[error] 95-95: trailing spaces
(trailing-spaces)
[error] 101-101: trailing spaces
(trailing-spaces)
[error] 104-104: trailing spaces
(trailing-spaces)
[error] 109-109: trailing spaces
(trailing-spaces)
[error] 121-121: trailing spaces
(trailing-spaces)
[error] 123-123: trailing spaces
(trailing-spaces)
[error] 130-130: trailing spaces
(trailing-spaces)
[error] 135-135: trailing spaces
(trailing-spaces)
[error] 155-155: trailing spaces
(trailing-spaces)
[error] 161-161: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (2)
.github/workflows/check-media-attachments.yml (2)
156-161: Non-blocking result handling is appropriate.Logging instead of failing aligns with the PR goal to inform without blocking merges.
18-23: Confirm ‘Unexpected token ‘|’’ error is resolved: Verify that the “Check PR for media attachments when HTML files change” workflow run completes successfully without theUnexpected token '|'error by reviewing the latest run logs on GitHub.
|
@A1L13N This PR is ready for your review |
1 similar comment
|
@A1L13N This PR is ready for your review |
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new GitHub Actions workflow to automatically check HTML files in pull requests for media attachment issues and accessibility concerns.
- Introduces automated HTML validation for media elements
- Provides accessibility checks for images and figures
- Implements performance recommendations for image formats
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
@A1L13N could you please look at this? |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (9)
.github/workflows/check-media-attachments.yml (9)
3-8: Quoteon, add paths filter, and serialize runs with concurrency.Limits noise and prevents parallel duplicate runs.
-on: +"on": pull_request: - types: [opened, synchronize] + types: [opened, synchronize, reopened] + paths: + - '**/*.html' + - '**/*.htm' + - '**/*.xhtml' + +concurrency: + group: check-media-attachments-${{ github.event.pull_request.number }} + cancel-in-progress: true
9-12: Add least‑privilege permissions.Needed to read files and post/update comments, and hardens the workflow.
jobs: check-media-attachments: runs-on: ubuntu-latest name: Check media attachments in HTML files + permissions: + contents: read + pull-requests: read + issues: write
13-16: Remove unused checkout step.Workspace isn’t used; content is fetched via API.
- - name: Checkout code - uses: actions/checkout@v4 - with: - fetch-depth: 0
18-21: Bump github-script to v7 and make step resilient.Use Node 20 and don’t fail the job on script errors.
- - name: Check for media attachments in HTML files - uses: actions/github-script@v6 + - name: Check for media attachments in HTML files + uses: actions/github-script@v7 with: github-token: ${{ secrets.GITHUB_TOKEN }} + continue-on-error: true
29-33: Paginate changed files to avoid missing HTML in large PRs.- const { data: files } = await github.rest.pulls.listFiles({ - owner, - repo, - pull_number: number - }); + const files = await github.paginate( + github.rest.pulls.listFiles, + { owner, repo, pull_number: number, per_page: 100 } + );
36-39: Broaden HTML filter and include renamed files.- const htmlFiles = files.filter(file => - file.filename.endsWith('.html') && - (file.status === 'added' || file.status === 'modified') - ); + const htmlFiles = files.filter(file => + /\.(?:html?|xhtml)$/i.test(file.filename) && + ['added', 'modified', 'renamed'].includes(file.status) + );
58-66: Harden getContent handling (non-file/truncated).Avoids crashes and false negatives on large files/dirs.
- const { data: fileData } = await github.rest.repos.getContent({ + const { data: fileData } = await github.rest.repos.getContent({ owner, repo, path: file.filename, ref: context.payload.pull_request.head.sha }); - - const content = Buffer.from(fileData.content, 'base64').toString('utf8'); + if (Array.isArray(fileData) || fileData.type !== 'file') { + throw new Error('Not a file content response'); + } + let content; + if (fileData.encoding === 'base64' && fileData.content) { + content = Buffer.from(fileData.content, 'base64').toString('utf8'); + } else if (fileData.sha) { + const { data: blob } = await github.rest.git.getBlob({ owner, repo, file_sha: fileData.sha }); + content = Buffer.from(blob.content, 'base64').toString('utf8'); + } else { + throw new Error('Unable to retrieve file content'); + }
75-88: Capture poster/srcset, ignore data URIs, and improve WebP advice.- const mediaMatches = content.match(/(src|href)=["'][^"']*\.(jpg|jpeg|png|gif|webp|svg|mp4|avi|mov|pdf)["']/gi); - if (mediaMatches && mediaMatches.length > 0) { - mediaReferences.push(`**${file.filename}**: References ${mediaMatches.length} media file(s)`); - console.log(` - Found ${mediaMatches.length} media reference(s)`); - - // Check for large image formats that could be optimized - const unoptimizedImages = mediaMatches.filter(match => - /\.(jpg|jpeg|png)["']/i.test(match) - ); + const direct = [...content.matchAll(/\b(?:src|href|poster)\s*=\s*["']([^"']+\.(?:jpg|jpeg|png|gif|webp|svg|mp4|avi|mov|pdf))(?:\?[^"']*)?["']/gi)] + .map(m => m[1]) + .filter(u => !/^data:/i.test(u)); + const srcsetUrls = [...content.matchAll(/\bsrcset\s*=\s*["']([^"']+)["']/gi)] + .flatMap(m => m[1].split(',').map(s => s.trim().split(/\s+/)[0])) + .filter(u => /\.(?:jpg|jpeg|png|gif|webp|svg)$/i.test(u) && !/^data:/i.test(u)); + const allMedia = [...new Set([...direct, ...srcsetUrls])]; + if (allMedia.length > 0) { + mediaReferences.push(`**${file.filename}**: References ${allMedia.length} media file(s)`); + console.log(` - Found ${allMedia.length} media reference(s)`); + + // Check for large image formats that could be optimized + const unoptimizedImages = allMedia.filter(u => /\.(jpg|jpeg|png)$/i.test(u)); if (unoptimizedImages.length > 0) { issues.push(`**${file.filename}**: Consider using WebP format for ${unoptimizedImages.length} image(s) for better performance`); } }
1-162: YAML lint hygiene.Strip trailing spaces and ensure a single newline at EOF to keep linters green.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
.github/workflows/check-media-attachments.yml(1 hunks)
🔇 Additional comments (2)
.github/workflows/check-media-attachments.yml (2)
68-73: Good fix: robustwithout alt detection.
90-95: Good fix: figure/figcaption detection avoids false negatives.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
It looks like the functionality is not correct. What the github action should be doing is checking that there are screenshots in the pull request that correspond to any change HTML we don't have to look at the HML itself. We should be looking at the comments of the GitHub pull request. |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
.github/workflows/check-media-attachments.yml (1)
31-38: Paginate PR comments to avoid missing screenshots.
issues.listCommentsreturns only the first page (30 comments). In a busy PR the screenshot comment can sit on a later page, leading this job to miss it and fail the build erroneously. Switch togithub.paginate(...)(or loop onpage) so every comment is inspected before deciding to fail.
- const { data: comments } = await github.rest.issues.listComments({ - owner, - repo, - issue_number: prNumber, - }); + const comments = await github.paginate( + github.rest.issues.listComments, + { owner, repo, issue_number: prNumber, per_page: 100 } + );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
.github/workflows/check-media-attachments.yml(1 hunks)
🧰 Additional context used
🪛 GitHub Check: CodeQL
.github/workflows/check-media-attachments.yml
[warning] 11-91: Workflow does not contain permissions
Actions job or workflow does not limit the permissions of the GITHUB_TOKEN. Consider setting an explicit permissions block, using the following as a minimal starting point: {{contents: read}}
🪛 YAMLlint (1.37.1)
.github/workflows/check-media-attachments.yml
[warning] 3-3: truthy value should be one of [false, true]
(truthy)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Run Tests
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
.github/workflows/check-media-attachments.yml (3)
35-41: Paginate PR comments to reliably find/update existing bot comment.Prevents duplicates on PRs with many comments.
- const { data: comments } = await github.rest.issues.listComments({ - owner, - repo, - issue_number: prNumber, - }); + const comments = await github.paginate( + github.rest.issues.listComments, + { owner, repo, issue_number: prNumber, per_page: 100 } + );
18-19: Remove unused checkout step.Workspace isn’t used; API calls suffice. Reduce attack surface and time.
- - name: Checkout code - uses: actions/checkout@v4
3-9: Quoteonand add concurrency to serialize runs.Quoting fixes YAML lint; concurrency avoids duplicate parallel runs on the same PR.
-on: +"on": pull_request: types: [opened, synchronize, reopened] paths: - '**/*.html' + +concurrency: + group: check-media-attachments-${{ github.event.pull_request.number }} + cancel-in-progress: true
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
.github/workflows/check-media-attachments.yml(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Run Tests
🔇 Additional comments (1)
.github/workflows/check-media-attachments.yml (1)
13-16: Least‑privilege permissions look good.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
.github/workflows/check-media-attachments.yml(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Run Tests
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
.github/workflows/check-media-attachments.yml (2)
3-8: Quote "on", broaden paths, and add concurrency to avoid duplicate runs.Quoting fixes YAML lint; broader patterns catch .htm/.xhtml; concurrency cancels parallel runs on busy PRs.
-name: Check PR for Screenshots when HTML changes - -on: +name: Check PR for Screenshots when HTML changes + +"on": pull_request: types: [opened, synchronize, reopened] paths: - - '**/*.html' + - '**/*.html' + - '**/*.htm' + - '**/*.xhtml' + +concurrency: + group: check-media-attachments-${{ github.event.pull_request.number }} + cancel-in-progress: true
17-20: Remove unused checkout step.Workspace isn’t used; APIs fetch everything. Shrinks attack surface and time.
- - name: Checkout code - uses: actions/checkout@v4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
.github/workflows/check-media-attachments.yml(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Run Tests
🔇 Additional comments (3)
.github/workflows/check-media-attachments.yml (3)
13-16: Permissions look good.Least-privileged token aligns with security guidance and CodeQL alert.
35-41: Good: comment pagination prevents duplicate bot posts.Solid use of github.paginate to scan all prior comments.
45-64: Robust media detection.Covers Markdown images, plain URLs, and GitHub user-attachments without extensions. LGTM.
|
@A1L13N i changed that |
🚨 Missing Open Issue LinkThis pull request does not reference any open GitHub issue via the Development section. PRs must be linked to an open issue using GitHub’s "Development" section (on the right sidebar). How to fix this:
This PR will be automatically closed. You can reopen it after linking an open issue. Thank you! |
Resolves issue #571 - SyntaxError: Unexpected token '|'
Related issues
Fixes #571
Checklist
Summary by CodeRabbit