Fix: Complete rewrite of check-media-attachments workflow with all review fixes

[Copilot]

Summary

This PR completely fixes the check-media-attachments.yml workflow that was originally introduced in PR #670 to resolve issue #571 (SyntaxError: Unexpected token '|'). The original PR had 13+ review comments from CodeRabbit and Copilot that needed to be addressed. This PR implements all requested fixes and follows GitHub Actions best practices.

Issues Fixed

Critical Issues (4)

1. SyntaxError resolved - Fixed all JavaScript syntax errors in the workflow script
2. Upgraded to actions/github-script@v7 - The original used outdated v6 which was flagged by actionlint
3. Fixed image alt detection regex - Changed from \salt= to \balt= (word boundary) as requested in review
4. Fixed figure caption detection - Completely rewrote to properly parse figure blocks instead of using an incorrect negative lookahead in the opening tag

YAML Linting Issues (3)

5. Quoted 'on' keyword - Prevents YAML from treating it as a boolean value
6. Removed all trailing whitespace - Cleaned up 28+ lines with trailing spaces
7. Added EOF newline - File now ends with a proper newline character

Performance & Security Improvements (5)

8. Added file pagination - Uses github.paginate() to handle PRs with more than 30 files
9. Removed unnecessary checkout step - The workflow fetches content via API, so checkout is not needed
10. Added permissions block - Implements least-privilege access (read for contents, write for PRs/issues)
11. Added concurrency control - Prevents duplicate workflow runs and cancels outdated runs
12. Added paths filter - Only triggers on HTML file changes, reducing unnecessary runs

Enhanced Media Detection (5)

13. Enhanced media detection - Now checks poster attributes and properly parses srcset entries
14. Added data: URI filtering - Excludes base64-encoded inline images from media file counts
15. Added content truncation handling - Falls back to git.getBlob for files larger than 1MB
16. Extended file type support - Now handles .html, .htm, and .xhtml files (case-insensitive)
17. Linked issue media detection - Automatically detects and reports media attachments found in GitHub issues linked to the PR (e.g., "Fixes darkmode/about #123", "Closes combine the navigation so it’s not separate for mobile and desktop fixes #456")

Key Changes

Workflow Trigger

"on":
  pull_request:
    types: [opened, synchronize, reopened]
    paths:
      - '**/*.html'
      - '**/*.htm'
      - '**/*.xhtml'

concurrency:
  group: check-media-attachments-${{ github.event.pull_request.number }}
  cancel-in-progress: true

Security & Permissions

permissions:
  contents: read
  pull-requests: write
  issues: write

Enhanced Detection Logic

Before:

const mediaMatches = content.match(/(src|href)=["'][^"']*\.(jpg|jpeg|png|...)["']/gi);

After:

// Direct media attributes (src, href, poster)
const direct = [...content.matchAll(/\b(?:src|href|poster)\s*=\s*["']([^"']+\.(jpg|jpeg|...))(?:\?[^"']*)?["']/gi)]
  .map(m => m[1])
  .filter(u => !/^data:/i.test(u));

// Srcset entries
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])];

Linked Issue Detection

The workflow now automatically detects issues linked in the PR description:

• Extracts issue numbers using patterns like "Fixes darkmode/about #123", "Closes combine the navigation so it’s not separate for mobile and desktop fixes #456", "Resolves fix: Add Virtual Labs link to mobile navigation menu #789"
• Fetches each linked issue via GitHub API
• Scans issue body for media attachments (both HTML tags and Markdown image syntax)
• Reports findings in a separate "Media Files Found in Linked Issues" section

This helps track media files referenced in related issues when HTML files are modified.

Testing

All validation tests passed:

• ✅ YAML syntax validated with Python's yaml.safe_load()
• ✅ JavaScript syntax verified with Node.js --check flag
• ✅ Regex patterns tested against realistic HTML samples
• ✅ API calls follow GitHub's Octokit best practices

Impact

This workflow will now:

• Run only when HTML files are modified (more efficient)
• Handle large PRs correctly with pagination
• Follow security best practices with proper permissions
• Detect more accessibility issues (alt text, figcaptions)
• Provide more comprehensive media file analysis
• Avoid duplicate runs with concurrency control
• Track media attachments in linked GitHub issues

The workflow is informational only and does not fail PRs. It posts a comment with:

• Images missing alt attributes
• Figures missing figcaptions
• All media file references in changed HTML files
• Media file references found in linked issues
• Suggestions to use WebP format for better performance

Related Issues

Fixes #571
Supersedes #670

Original prompt

please fix this @alphaonelabs/alphaonelabs-education-website/pull/670

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[A1L13N]

@copilot we want this to detect attachments in the github issue if an html file was changed

[Copilot]

@copilot we want this to detect attachments in the github issue if an html file was changed

Added linked issue media detection in commit e0869f4. The workflow now:

1. Extracts issue numbers from the PR body (e.g., "Fixes issue with checking for media attachments #571", "Closes darkmode/about #123")
2. Fetches each linked issue and checks its body for media attachments
3. Detects both HTML media tags and Markdown image syntax (e.g., ![alt](image.jpg))
4. Reports findings in a separate "Media Files Found in Linked Issues" section

The comment will now show media from both changed HTML files and linked issues.