Skip to content

Commit 0804138

Browse files
Bharath-codeBharath-code
committed
feat: Add responsive image loading for mobile, enhance copy-to-clipboard UI feedback, and improve analytics tracking.
1 parent 4025212 commit 0804138

File tree

8 files changed

+74
-23
lines changed

8 files changed

+74
-23
lines changed

‎docs/git-scope-demo-mobile-1.jpg‎

31.5 KB
Loading

‎docs/git-scope-demo-mobile-1.webp‎

-236 KB
Loading

‎docs/images/feature-radar-mobile.jpg‎

32.2 KB
Loading

‎docs/images/feature-search-mobile.jpg‎

23.8 KB
Loading

‎docs/images/feature-stats-mobile.jpg‎

42.1 KB
Loading

‎docs/index.html‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -432,6 +432,11 @@
432432
width: 100%;
433433
font-size: 1rem;
434434
line-height: 1.6;
435+
min-height: 100px;
436+
/* Prevent CLS */
437+
display: flex;
438+
align-items: center;
439+
justify-content: center;
435440
}
436441

437442
.install-box:hover {
@@ -991,8 +996,12 @@ <h1>Stop <span class="gradient-text">cd-ing.</span> <br> Start Coding.</h1>
991996
<div class="dot yellow"></div>
992997
<div class="dot green"></div>
993998
</div>
994-
<img src="git-scope-demo-1.webp" alt="Git Scope Demo" loading="eager" width="1200" height="800"
995-
style="width: 100%; height: auto; display: block;" decoding="async">
999+
<picture>
1000+
<source media="(max-width: 768px)" srcset="docs/git-scope-demo-mobile-1.webp"
1001+
type="image/webp">
1002+
<img src="docs/git-scope-demo-1.webp" alt="Git Scope Demo" loading="eager" width="1200"
1003+
height="800" style="width: 100%; height: auto; display: block;" decoding="async">
1004+
</picture>
9961005
</div>
9971006
</section>
9981007

@@ -1032,10 +1041,11 @@ <h2 style="font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: 2rem; font-weight
10321041
<div class="feature-row">
10331042
<div class="feature-visual">
10341043
<picture>
1035-
<source media="(max-width: 768px)" srcset="images/feature-search-mobile.webp"
1036-
type="image/webp">
1037-
<source srcset="images/feature-search-desktop.webp" type="image/webp">
1038-
<img src="images/feature-search.png" alt="Fuzzy Search" loading="lazy">
1044+
<source media="(max-width: 768px)" srcset="docs/images/feature-search-mobile.jpg"
1045+
type="image/jpeg">
1046+
<source srcset="docs/images/feature-search-desktop.webp" type="image/webp">
1047+
<img src="docs/images/feature-search.png" alt="Fuzzy Search" loading="lazy" width="662"
1048+
height="398">
10391049
</picture>
10401050
</div>
10411051
<div class="feature-text">
@@ -1049,10 +1059,11 @@ <h3><span style="color: var(--primary);">01.</span> Fuzzy Search</h3>
10491059
<div class="feature-row">
10501060
<div class="feature-visual">
10511061
<picture>
1052-
<source media="(max-width: 768px)" srcset="images/feature-radar-mobile.webp"
1053-
type="image/webp">
1054-
<source srcset="images/feature-radar-desktop.webp" type="image/webp">
1055-
<img src="images/feature-radar.png" alt="Dirty Radar" loading="lazy">
1062+
<source media="(max-width: 768px)" srcset="docs/images/feature-radar-mobile.jpg"
1063+
type="image/jpeg">
1064+
<source srcset="docs/images/feature-radar-desktop.webp" type="image/webp">
1065+
<img src="docs/images/feature-radar.png" alt="Dirty Radar" loading="lazy" width="662"
1066+
height="398">
10561067
</picture>
10571068
</div>
10581069
<div class="feature-text">
@@ -1066,10 +1077,11 @@ <h3><span style="color: var(--primary);">02.</span> Dirty Radar</h3>
10661077
<div class="feature-row">
10671078
<div class="feature-visual">
10681079
<picture>
1069-
<source media="(max-width: 768px)" srcset="images/feature-stats-mobile.webp"
1070-
type="image/webp">
1071-
<source srcset="images/feature-stats-desktop.webp" type="image/webp">
1072-
<img src="images/feature-stats.png" alt="Stats & Disk Usage" loading="lazy">
1080+
<source media="(max-width: 768px)" srcset="docs/images/feature-stats-mobile.jpg"
1081+
type="image/jpeg">
1082+
<source srcset="docs/images/feature-stats-desktop.webp" type="image/webp">
1083+
<img src="docs/images/feature-stats.png" alt="Stats & Disk Usage" loading="lazy" width="662"
1084+
height="398">
10731085
</picture>
10741086
</div>
10751087
<div class="feature-text">

‎docs/main.js‎

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -72,28 +72,52 @@ function showCopyFeedback() {
7272
function copyScriptCommand() {
7373
const command = "curl -sSL https://raw.githubusercontent.com/Bharath-code/git-scope/main/scripts/install.sh | sh";
7474

75+
// Fallback for non-secure contexts
7576
if (!navigator.clipboard) {
7677
const ta = document.createElement('textarea');
7778
ta.value = command;
7879
document.body.appendChild(ta);
7980
ta.select();
8081
document.execCommand('copy');
8182
document.body.removeChild(ta);
82-
} else {
83-
navigator.clipboard.writeText(command);
83+
showScriptCopyFeedback();
84+
trackEvent('script-command-copied', 'Copied curl install command');
85+
return;
8486
}
8587

86-
const feedback = document.getElementById('script-copy-feedback');
87-
if (feedback) {
88-
feedback.style.opacity = '1';
89-
setTimeout(() => { feedback.style.opacity = '0'; }, 2000);
90-
}
91-
trackEvent('script-command-copied', 'Copied curl install command');
88+
navigator.clipboard.writeText(command).then(() => {
89+
showScriptCopyFeedback();
90+
trackEvent('script-command-copied', 'Copied curl install command');
91+
}).catch(err => {
92+
console.error('Failed to copy: ', err);
93+
});
94+
}
95+
96+
function showScriptCopyFeedback() {
97+
const icon = document.getElementById('script-copy-icon');
98+
if (!icon) return;
99+
100+
const originalHTML = icon.innerHTML;
101+
102+
// Change to Checkmark
103+
icon.innerHTML = '<polyline points="20 6 9 17 4 12"></polyline>';
104+
icon.style.opacity = '1';
105+
icon.style.color = '#27C93F'; // Green from theme
106+
107+
setTimeout(() => {
108+
icon.innerHTML = originalHTML;
109+
icon.style.opacity = '0.5';
110+
icon.style.color = 'currentColor';
111+
}, 2000);
92112
}
93113

94114
// ===============================
95115
// CLICK TRACKING
96116
// ===============================
117+
document.querySelector('.support-btn')?.addEventListener('click', () => {
118+
trackEvent('sponsor-click', 'Clicked Sponsor Button in Nav');
119+
});
120+
97121
document.getElementById('nav-github-link')?.addEventListener('click', () => {
98122
trackEvent('github-star-click', 'Clicked GitHub Stars in Nav');
99123
});
@@ -117,7 +141,9 @@ document.getElementById('features-view-all')?.addEventListener('click', () => {
117141
document.querySelectorAll('footer a').forEach(link => {
118142
link.addEventListener('click', () => {
119143
const linkName = link.textContent.trim();
120-
trackEvent('footer-click-' + linkName.toLowerCase().replace(/\s+/g, '-'), 'Clicked ' + linkName + ' in footer');
144+
// Clean up SVG content if present in link text
145+
const cleanName = linkName || link.getAttribute('aria-label') || 'icon';
146+
trackEvent('footer-click-' + cleanName.toLowerCase().replace(/[^a-z0-9]+/g, '-'), 'Clicked ' + cleanName + ' in footer');
121147
});
122148
});
123149

‎scripts/optimize_images.sh‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#!/bin/bash
2+
3+
# Resize feature images (Use PNG sources -> Output 800px JPEG)
4+
echo "Optimizing feature images (PNG -> JPEG)..."
5+
sips -s format jpeg -Z 800 docs/images/feature-search.png --out docs/images/feature-search-mobile.jpg
6+
sips -s format jpeg -Z 800 docs/images/feature-radar.png --out docs/images/feature-radar-mobile.jpg
7+
sips -s format jpeg -Z 800 docs/images/feature-stats.png --out docs/images/feature-stats-mobile.jpg
8+
9+
# Resize Hero image (Use WebP source -> Output 800px JPEG)
10+
echo "Optimizing hero image (WebP -> JPEG)..."
11+
sips -s format jpeg -Z 800 docs/git-scope-demo-1.webp --out docs/git-scope-demo-mobile-1.jpg
12+
13+
echo "✅ Optimization complete. Generated mobile-optimized JPEGs (800px)."

0 commit comments

Comments
 (0)