Skip to content

feat: auto-theme star-tracker embed snippet #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wavekat-eason merged 5 commits into from
May 15, 2026
Merged

feat: auto-theme star-tracker embed snippet #55

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5615d91
feat: add auto-theme picture snippet to star-tracker
wavekat-eason May 15, 2026
a40d455
style: format HTML and auto-theme embed snippets on multiple lines
wavekat-eason May 15, 2026
2199e57
feat: mark auto-theme snippet as recommended
wavekat-eason May 15, 2026
3da57da
style: use thumbs-up emoji for recommended snippet badge
wavekat-eason May 15, 2026
afbc8ea
style: drop chip styling — bare 👍 next to auto theme label
wavekat-eason May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 35 additions & 5 deletions tools/star-tracker/src/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,9 @@ function shell(title: string, user: User | null, body: string): string {
dl.embed code { display: inline-block; max-width: 100%; }
.embed-row { display: flex; align-items: flex-start; gap: 6px; }
.embed-row code { flex: 1; min-width: 0; overflow-x: auto; }
.embed-row pre { flex: 1; min-width: 0; margin: 0; padding: 8px 10px; background: rgba(15,23,42,0.04); border-radius: 4px; overflow-x: auto; }
@media (prefers-color-scheme: dark) { .embed-row pre { background: rgba(255,255,255,0.04); } }
.embed-row pre code { display: block; padding: 0; background: none; white-space: pre; }
.embed-row .icon-btn { padding: 0 8px; flex: 0 0 auto; height: 32px; }
.secret-row { display: flex; align-items: stretch; gap: 8px; margin: .5rem 0 1rem; }
.secret-row .secret { flex: 1; margin: 0; padding: 10px 12px; }
Expand Down Expand Up @@ -246,11 +249,29 @@ ${body}
var base = embed.getAttribute('data-base');
var link = embed.getAttribute('data-link') || '';
var slug = embed.getAttribute('data-slug');
var url = base + buildQuery(currentTheme(), currentSplit(), currentStyle(), currentRange(), null);
var n = currentSplit();
var style = currentStyle();
var range = currentRange();
var url = base + buildQuery(currentTheme(), n, style, range, null);
// Picture snippet ignores the theme toggle — it serves both
// variants based on the viewer's prefers-color-scheme.
var darkUrl = base + buildQuery('dark', n, style, range, null);
var lightUrl = base + buildQuery('light', n, style, range, 'theme=light');
var md = embed.querySelector('[data-embed-md]');
var html = embed.querySelector('[data-embed-html]');
var picture = embed.querySelector('[data-embed-picture]');
if (md) md.textContent = '[![' + slug + ' stars](' + url + ')](' + link + ')';
if (html) html.textContent = '<a href="' + link + '"><img src="' + url + '" alt="' + slug + ' stars"></a>';
if (html) html.textContent =
'<a href="' + link + '">\n' +
' <img src="' + url + '" alt="' + slug + ' stars">\n' +
'</a>';
if (picture) picture.textContent =
'<a href="' + link + '">\n' +
' <picture>\n' +
' <source media="(prefers-color-scheme: dark)" srcset="' + darkUrl + '">\n' +
' <img alt="' + slug + ' stars" src="' + lightUrl + '">\n' +
' </picture>\n' +
'</a>';
}
document.querySelectorAll('input[name=chart-split], input[name=chart-theme], input[name=chart-style], input[name=chart-range]').forEach(function (r) {
r.addEventListener('change', function () {
Expand Down Expand Up @@ -424,8 +445,8 @@ function chartBlock(
</div>`
: '';
const paramsHint = showSplit
? `Snippets update as you change the controls above. Params: <code>?theme=dark</code>, <code>?split=N</code> (1–8), <code>?style=step</code>, <code>?range=30d|90d|1y</code>.`
: `Snippets update as you change the controls above. Params: <code>?theme=dark</code>, <code>?style=step</code>, <code>?range=30d|90d|1y</code>.`;
? `Snippets update as you change the controls above. Params: <code>?theme=dark</code>, <code>?split=N</code> (1–8), <code>?style=step</code>, <code>?range=30d|90d|1y</code>. The <strong>Auto theme</strong> snippet uses <code>&lt;picture&gt;</code> with <code>prefers-color-scheme</code> so GitHub READMEs match the viewer's mode automatically.`
: `Snippets update as you change the controls above. Params: <code>?theme=dark</code>, <code>?style=step</code>, <code>?range=30d|90d|1y</code>. The <strong>Auto theme</strong> snippet uses <code>&lt;picture&gt;</code> with <code>prefers-color-scheme</code> so GitHub READMEs match the viewer's mode automatically.`;
return `<div class="chart-section">
<input type="radio" id="theme-light" name="chart-theme" checked />
<input type="radio" id="theme-dark" name="chart-theme" />
Expand Down Expand Up @@ -464,7 +485,16 @@ function chartBlock(
<dt>Markdown</dt>
<dd><div class="embed-row"><code data-embed-md>[![${altText} stars](${chartSvg})](${linkTarget})</code>${copyBtn('Markdown snippet')}</div></dd>
<dt>HTML</dt>
<dd><div class="embed-row"><code data-embed-html>&lt;a href="${linkTarget}"&gt;&lt;img src="${chartSvg}" alt="${altText} stars"&gt;&lt;/a&gt;</code>${copyBtn('HTML snippet')}</div></dd>
<dd><div class="embed-row"><pre><code data-embed-html>&lt;a href="${linkTarget}"&gt;
&lt;img src="${chartSvg}" alt="${altText} stars"&gt;
&lt;/a&gt;</code></pre>${copyBtn('HTML snippet')}</div></dd>
<dt>Auto theme <span title="Adapts to the reader's light/dark mode — recommended for GitHub READMEs" aria-label="recommended">👍</span></dt>
<dd><div class="embed-row"><pre><code data-embed-picture>&lt;a href="${linkTarget}"&gt;
&lt;picture&gt;
&lt;source media="(prefers-color-scheme: dark)" srcset="${chartSvg}?theme=dark"&gt;
&lt;img alt="${altText} stars" src="${chartSvg}?theme=light"&gt;
&lt;/picture&gt;
&lt;/a&gt;</code></pre>${copyBtn('Auto-theme HTML snippet')}</div></dd>
</dl>
<p class="muted" style="font-size:0.85em;margin-top:-.25rem">${paramsHint}</p>
</div>`;
Expand Down
Loading