Skip to content

Conversation

@devin-ai-integration
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Oct 20, 2025

Description

Adds a page-specific "Edit this page" link to the footer that replaces the "Powered by Mintlify" link. The link dynamically points to the corresponding .mdx file in the GitHub repository.

Example: On /statsig-warehouse-native/connecting-your-warehouse/athena, the footer shows "Edit this page" linking to https://github.com/statsig-io/docs/blob/main/statsig-warehouse-native/connecting-your-warehouse/athena.mdx

Implementation: Custom JavaScript file (edit-page.js) that:

  • Detects current page URL and generates corresponding GitHub edit URL
  • Finds and replaces "Powered by Mintlify" link text and href
  • Uses MutationObserver with 100ms debouncing to handle client-side routing
  • Implements retry logic (max 10 retries) to handle delayed footer rendering
  • Opens links in new tab

⚠️ Testing Limitations: This implementation was not fully tested in a live browser due to technical constraints. It relies on Mintlify's documented behavior that .js files in the content directory are automatically included on all pages.

Key Review Points

1. URL Mapping Assumptions (Lines 18-23)

The code assumes all page URLs map directly to .mdx files at the same path:

let cleanPath = currentPath.replace(/^\//, '').replace(/\/$/, '');
if (cleanPath === '' || cleanPath === '/') {
  cleanPath = 'welcome';
}
const githubEditUrl = `https://github.com/statsig-io/docs/blob/main/${cleanPath}.mdx`;

Needs testing:

  • Pages with special characters or URL encoding
  • Root page (/) → should map to welcome.mdx
  • Verify all actual page URLs match this pattern

2. Footer Detection & Retry Logic (Lines 26-32)

Implements bounded retry to prevent infinite loops if footer never appears:

const footer = document.querySelector('footer');
if (!footer) {
  if (retryCount < MAX_RETRIES) {
    retryCount++;
    setTimeout(addEditPageLink, 500);
  }
  return;
}

Needs verification: Does the footer consistently appear within 10 retries (5 seconds)?

3. MutationObserver Performance (Lines 67-71)

Observes entire document body with subtree: true which could be expensive:

observer.observe(document.body, {
  childList: true,
  subtree: true
});

Needs monitoring: Performance on slower devices. The 100ms debouncing should help but worth testing.

4. Fallback Logic (Lines 34-57)

Multiple fallback paths for finding/creating the link:

  1. First tries to find "Powered by Mintlify" link
  2. Falls back to finding existing GitHub edit link
  3. Creates new link if neither found

Needs verification: Test against Mintlify's actual footer structure to ensure this works correctly.

Best practice checklist

  • I've considered the best practices on where to put your doc and what to put in your doc (N/A - JavaScript file, not doc content)
  • I've deleted and redirected old pages to this one, if any (N/A - no pages changed)
  • I've updated links affected by this change, if any (N/A - only footer link changed)
  • I've updated screenshots affected by this change, if any (N/A - footer change only)

Human Review Checklist

Please thoroughly test before merging:

Basic Functionality

  1. ✅ Verify the script loads without errors (check browser console)
  2. ✅ Verify "Edit this page" appears in footer instead of "Powered by Mintlify"
  3. ✅ Click the link and verify it opens the correct GitHub file in a new tab

Page-Specific Links

  1. ✅ Test on multiple pages in different sections:
    • Root page (/)
    • Product docs (e.g., /experiments/overview)
    • Warehouse Native (e.g., /statsig-warehouse-native/connecting-your-warehouse/athena)
    • SDK docs (e.g., /client/javascript-sdk)
  2. ✅ Verify each link points to the correct .mdx file on GitHub

Client-Side Routing

  1. ✅ Navigate between pages without full page reloads
  2. ✅ Verify the "Edit this page" link updates to match the new page

Edge Cases

  1. ✅ Test pages with special characters in the URL
  2. ✅ Test deeply nested pages
  3. ✅ Verify link works on mobile devices

Performance

  1. ✅ Check browser console for excessive DOM mutations
  2. ✅ Test on slower devices/connections if possible

Questions?

Reach out to Brock, Tore, or Logan on Slack!


Link to Devin run: https://app.devin.ai/sessions/fbe45751af4b46af9491a0cf0fc7ec26
Requested by: [email protected] (@xhuang-statsig)

- Replaces 'Powered by Mintlify' link with 'Edit this page' link
- Link is dynamically generated based on current page URL
- Points to corresponding .mdx file on GitHub main branch
- Handles client-side routing and edge cases
- Uses MutationObserver to detect page changes
@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

- Added MAX_RETRIES constant (10 retries max)
- Reset retry count when path changes
- Prevents infinite setTimeout loop if footer never appears
@xhuang-statsig xhuang-statsig merged commit a54799e into main Oct 24, 2025
2 of 3 checks passed
@xhuang-statsig xhuang-statsig deleted the devin/1760984753-add-edit-page-link branch October 24, 2025 05:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant