fix: use github blob urls for images instead of raw.githubusercontent to fix issues of unavailable images in private repositories

[Copilot]

Changes

Migrates image URL structure in the start-exercise workflow from raw.githubusercontent.com to GitHub blob URLs with ?raw=true parameter.

Replaced action in .github/workflows/start-exercise.yml:

The implementation now uses actions/github-script@v8 instead of jacobtomlinson/gha-find-replace@v3 because the latter does not support regex capture groups in replacement strings.

// Custom JavaScript implementation using github-script
const fs = require('fs');
const path = require('path');

// Find all step markdown files using pre-loaded glob (@actions/glob)
const globber = await glob.create('.github/steps/*.md');
const files = await globber.glob();

files.forEach(file => {
  const content = fs.readFileSync(file, 'utf8');
  
  // Replace relative image URLs with GitHub blob URLs
  // This handles both markdown syntax ![](../images/file.png) and HTML <img src="../images/file.png">
  const updatedContent = content.replace(
    /\.\.\/images\/([^\s)"']+)/g,
    'https://github.com/${{ github.repository }}/blob/${{ github.ref_name }}/.github/images/$1?raw=true'
  );
  
  if (content !== updatedContent) {
    fs.writeFileSync(file, updatedContent, 'utf8');
  }
});

The implementation uses the pre-loaded glob module from actions/github-script which is @actions/glob. The correct API requires two steps: first create a globber with await glob.create(pattern), then retrieve files with await globber.glob().

The regex pattern /\.\.\/images\/([^\s)"']+)/g captures the image filename while excluding whitespace, quotes, and parentheses. This ensures ?raw=true is correctly placed before closing delimiters in both Markdown syntax ![](../images/file.png) and HTML syntax <img src="../images/file.png">.

URL transformation:

• Before: ../images/my-image.png
• After: https://github.com/{repo}/blob/{ref}/.github/images/my-image.png?raw=true

Supported formats:

• Markdown images: ![alt](../images/file.png) → ![alt](https://github.com/{repo}/blob/{ref}/.github/images/file.png?raw=true)
• HTML with double quotes: <img src="../images/file.png"> → <img src="https://github.com/{repo}/blob/{ref}/.github/images/file.png?raw=true">
• HTML with single quotes: <img src='../images/file.png'> → <img src='https://github.com/{repo}/blob/{ref}/.github/images/file.png?raw=true'>

Checklist

• I have added or updated appropriate labels to this PR
• I have tested my changes
• I have updated the documentation if needed

Original prompt

Change the way the image links are replaced in the start-exercise workflow

Instead of this structure
https://raw.githubusercontent.com/${{github.repository}}/${{ github.ref_name }}/.github/images/image-name.png" />

use this structure

https://github.com/${{github.repository}}/blob/${{ github.ref_name }}/.github/images/image-name.png?raw=true" />

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[FidelusAleksander]

@copilot i got this error

Unhandled error: SyntaxError: Identifier 'glob' has already been declared

some of these libraries are already loaded by github-script

[Copilot]

@copilot i got this error

Unhandled error: SyntaxError: Identifier 'glob' has already been declared
...

Fixed. The glob module is pre-loaded by actions/github-script, so I removed the require('glob') line and now use the pre-loaded glob directly with await glob.glob(). Commit: 942bb82

[FidelusAleksander]

@copilot i'm getting this error now

"Unhandled error: TypeError: glob.glob is not a function"

Make sure you research which libraries github-script imports and how to use them

[Copilot]

@copilot i'm getting this error now

"Unhandled error: TypeError: glob.glob is not a function"
...

Fixed. The correct API for the pre-loaded glob module is glob.create(pattern) to create a globber, then await globber.glob() to get the files. Commit: 57142f7

[FidelusAleksander]

@copilot

The replacement isn't ideal - here is an example

was replaced with

<img width="300" alt="search box with 'python' value" src="https://github.com/FidelusAleksander/test-github-raw/blob/main/.github/images/python-search-box.png"?raw=true />

the ?raw=true part is misplaced

[Copilot]

@copilot

The replacement isn't ideal - here is an example
...

Fixed. Updated the regex pattern from ([^\s)]+) to ([^\s)"']+) to exclude quotes. This now properly handles both Markdown ![](../images/file.png) and HTML <img src="../images/file.png"> syntax, placing ?raw=true before the closing quote/parenthesis. Commit: f0ce19a

[FidelusAleksander]

Tested the solution and it now works on private repositories

[Copilot]

Pull request overview

This PR updates the reusable “Start Exercise” workflow to rewrite step-file image links to GitHub blob URLs (with ?raw=true) instead of raw.githubusercontent.com, using actions/github-script to support regex capture groups.

Changes:

• Replaced jacobtomlinson/gha-find-replace@v3 with actions/github-script@v8 for image URL rewriting.
• Implemented a JavaScript-based regex replacement that preserves closing delimiters for Markdown/HTML image syntax.
• Introduced STEP_FILES_GLOB env var to parameterize which step markdown files are processed.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.