feat: add git-glimpse logo to PR comment header#7
Merged
DeDuckProject merged 1 commit intomainfrom Mar 11, 2026
Merged
Conversation
Adds a compressed logo asset (120x120px, 28KB) and embeds it inline in the PR comment heading via raw.githubusercontent.com URL. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
🎬 UI Demo PreviewChanges detected in: What changed: The GitHub comment header for UI demo previews now displays the git-glimpse logo image inline next to the 'UI Demo Preview' title, replacing the plain 🎬 emoji. A new small square logo asset has been added to the repository.
Demo script (auto-generated)import type { Page } from '@playwright/test';
export async function demo(page: Page): Promise<void> {
// Navigate to the home page
await page.goto('http://localhost:3000');
await page.waitForLoadState('networkidle');
await page.waitForTimeout(1500);
// Create a mock GitHub PR comment UI to demonstrate the logo change
// Inject a simulated GitHub comment section into the page to show the before/after
await page.evaluate(() => {
// Create overlay container
const overlay = document.createElement('div');
overlay.id = 'git-glimpse-demo';
overlay.style.cssText = `
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: #f6f8fa;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 40px 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
overflow-y: auto;
`;
overlay.innerHTML = `
<div style="max-width: 800px; width: 100%;">
<h2 style="color: #24292f; margin-bottom: 24px; font-size: 20px;">
GitHub Pull Request — Automated Comment Preview
</h2>
<!-- BEFORE card -->
<div style="margin-bottom: 32px;">
<div style="background: #eaeef2; color: #57606a; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 4px 4px 0 0; display: inline-block; letter-spacing: 0.5px;">BEFORE</div>
<div id="before-card" style="border: 1px solid #d0d7de; border-radius: 0 6px 6px 6px; background: #fff; padding: 24px;">
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
<img src="https://avatars.githubusercontent.com/u/9919?s=40&v=4" width="40" height="40" style="border-radius: 50%;" alt="bot avatar" />
<div>
<span style="font-weight: 600; color: #24292f;">git-glimpse</span>
<span style="color: #57606a; font-size: 13px; margin-left: 6px;">bot commented</span>
</div>
</div>
<div style="border-top: 1px solid #d0d7de; padding-top: 16px;">
<h2 style="font-size: 22px; color: #24292f; margin: 0 0 12px 0;">🎬 UI Demo Preview</h2>
<p style="color: #57606a; font-size: 14px; margin: 0;"><strong>Changes detected in</strong>: src/components/Button.tsx, src/pages/Home.tsx</p>
</div>
</div>
</div>
<!-- Arrow -->
<div style="text-align: center; font-size: 28px; color: #57606a; margin-bottom: 32px;">↓</div>
<!-- AFTER card -->
<div>
<div style="background: #dafbe1; color: #1a7f37; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 4px 4px 0 0; display: inline-block; letter-spacing: 0.5px;">AFTER — New Logo Icon</div>
<div id="after-card" style="border: 2px solid #2da44e; border-radius: 0 6px 6px 6px; background: #fff; padding: 24px; box-shadow: 0 0 0 4px rgba(45,164,78,0.1);">
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
<img src="https://avatars.githubusercontent.com/u/9919?s=40&v=4" width="40" height="40" style="border-radius: 50%;" alt="bot avatar" />
<div>
<span style="font-weight: 600; color: #24292f;">git-glimpse</span>
<span style="color: #57606a; font-size: 13px; margin-left: 6px;">bot commented</span>
</div>
</div>
<div style="border-top: 1px solid #d0d7de; padding-top: 16px;">
<h2 style="font-size: 22px; color: #24292f; margin: 0 0 12px 0; display: flex; align-items: center; gap: 10px;">
<img
src="https://raw.githubusercontent.com/DeDuckProject/git-glimpse/main/assets/logo_square_small.png"
width="40"
height="40"
style="vertical-align: middle; border-radius: 4px;"
alt="git-glimpse logo"
/>
UI Demo Preview
</h2>
<p style="color: #57606a; font-size: 14px; margin: 0;"><strong>Changes detected in</strong>: src/components/Button.tsx, src/pages/Home.tsx</p>
</div>
</div>
</div>
<div style="margin-top: 28px; background: #fff8c5; border: 1px solid #d4a72c; border-radius: 6px; padding: 12px 16px; font-size: 13px; color: #633c01;">
<strong>What changed:</strong> The 🎬 film clapper emoji in the comment heading has been replaced with the inline git-glimpse logo image displayed beside "UI Demo Preview".
</div>
</div>
`;
document.body.appendChild(overlay);
});
await page.waitForTimeout(2000);
// Highlight the BEFORE section
await page.evaluate(() => {
const beforeCard = document.getElementById('before-card');
if (beforeCard) {
beforeCard.style.boxShadow = '0 0 0 4px rgba(208,55,55,0.3)';
beforeCard.style.borderColor = '#cf222e';
}
});
await page.waitForTimeout(2000);
// Scroll down to show the AFTER section clearly
await page.evaluate(() => {
const afterCard = document.getElementById('after-card');
if (afterCard) {
afterCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
await page.waitForTimeout(1500);
// Pulse-highlight the AFTER card logo heading
await page.evaluate(() => {
const afterCard = document.getElementById('after-card');
if (afterCard) {
afterCard.style.transition = 'box-shadow 0.3s ease';
afterCard.style.boxShadow = '0 0 0 6px rgba(45,164,78,0.4)';
}
});
await page.waitForTimeout(2000);
// Zoom in on the logo in the after card
await page.evaluate(() => {
const logoImg = document.querySelector('#after-card img[alt="git-glimpse logo"]') as HTMLElement;
if (logoImg) {
logoImg.style.transform = 'scale(1.4)';
logoImg.style.transition = 'transform 0.4s ease';
logoImg.style.boxShadow = '0 0 0 3px #2da44e';
logoImg.style.borderRadius = '6px';
}
});
await page.waitForTimeout(2000);
// Reset zoom
await page.evaluate(() => {
const logoImg = document.querySelector('#after-card img[alt="git-glimpse logo"]') as HTMLElement;
if (logoImg) {
logoImg.style.transform = 'scale(1)';
}
});
await page.waitForTimeout(1500);
// Final wide view — scroll back to top
await page.evaluate(() => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
await page.waitForTimeout(2000);
}Generated by git-glimpse |
Owner
Author
Not really what we want, but points for the creativity. We might want to adjust the prompt a bit. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
assets/logo_square_small.png, 120×120px / 28KB, down from 1535×1535px / 2.7MB)raw.githubusercontent.comTest plan
🤖 Generated with Claude Code