From 5615d9107c244338101c1c6713edcbe5b01452b9 Mon Sep 17 00:00:00 2001 From: Eason WaveKat Date: Sat, 16 May 2026 11:23:24 +1200 Subject: [PATCH 1/5] feat: add auto-theme picture snippet to star-tracker Co-Authored-By: Claude Opus 4.7 (1M context) --- tools/star-tracker/src/pages.ts | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/tools/star-tracker/src/pages.ts b/tools/star-tracker/src/pages.ts index bb0fc1a..df5bbf1 100644 --- a/tools/star-tracker/src/pages.ts +++ b/tools/star-tracker/src/pages.ts @@ -246,11 +246,20 @@ ${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 = '' + slug + ' stars'; + if (picture) picture.textContent = '' + slug + ' stars'; } 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 () { @@ -424,8 +433,8 @@ function chartBlock( ` : ''; const paramsHint = showSplit - ? `Snippets update as you change the controls above. Params: ?theme=dark, ?split=N (1–8), ?style=step, ?range=30d|90d|1y.` - : `Snippets update as you change the controls above. Params: ?theme=dark, ?style=step, ?range=30d|90d|1y.`; + ? `Snippets update as you change the controls above. Params: ?theme=dark, ?split=N (1–8), ?style=step, ?range=30d|90d|1y. The Auto theme snippet uses <picture> with prefers-color-scheme so GitHub READMEs match the viewer's mode automatically.` + : `Snippets update as you change the controls above. Params: ?theme=dark, ?style=step, ?range=30d|90d|1y. The Auto theme snippet uses <picture> with prefers-color-scheme so GitHub READMEs match the viewer's mode automatically.`; return `
@@ -465,6 +474,8 @@ function chartBlock(
[![${altText} stars](${chartSvg})](${linkTarget})${copyBtn('Markdown snippet')}
HTML
<a href="${linkTarget}"><img src="${chartSvg}" alt="${altText} stars"></a>${copyBtn('HTML snippet')}
+
Auto theme
+
<a href="${linkTarget}"><picture><source media="(prefers-color-scheme: dark)" srcset="${chartSvg}?theme=dark"><img alt="${altText} stars" src="${chartSvg}?theme=light"></picture></a>${copyBtn('Auto-theme HTML snippet')}

${paramsHint}

`; From a40d455f59c6d431825607d6558245a482f07d99 Mon Sep 17 00:00:00 2001 From: Eason WaveKat Date: Sat, 16 May 2026 11:29:51 +1200 Subject: [PATCH 2/5] style: format HTML and auto-theme embed snippets on multiple lines Co-Authored-By: Claude Opus 4.7 (1M context) --- tools/star-tracker/src/pages.ts | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/tools/star-tracker/src/pages.ts b/tools/star-tracker/src/pages.ts index df5bbf1..9583b47 100644 --- a/tools/star-tracker/src/pages.ts +++ b/tools/star-tracker/src/pages.ts @@ -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; } @@ -258,8 +261,17 @@ ${body} 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 = '' + slug + ' stars'; - if (picture) picture.textContent = '' + slug + ' stars'; + if (html) html.textContent = + '\n' + + ' ' + slug + ' stars\n' + + ''; + if (picture) picture.textContent = + '\n' + + ' \n' + + ' \n' + + ' ' + slug + ' stars\n' + + ' \n' + + ''; } 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 () { @@ -473,9 +485,16 @@ function chartBlock(
Markdown
[![${altText} stars](${chartSvg})](${linkTarget})${copyBtn('Markdown snippet')}
HTML
-
<a href="${linkTarget}"><img src="${chartSvg}" alt="${altText} stars"></a>${copyBtn('HTML snippet')}
+ 
<a href="${linkTarget}">
+  <img src="${chartSvg}" alt="${altText} stars">
+</a>
${copyBtn('HTML snippet')}
Auto theme
-
<a href="${linkTarget}"><picture><source media="(prefers-color-scheme: dark)" srcset="${chartSvg}?theme=dark"><img alt="${altText} stars" src="${chartSvg}?theme=light"></picture></a>${copyBtn('Auto-theme HTML snippet')}
+ 
<a href="${linkTarget}">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="${chartSvg}?theme=dark">
+    <img alt="${altText} stars" src="${chartSvg}?theme=light">
+  </picture>
+</a>
${copyBtn('Auto-theme HTML snippet')}

${paramsHint}

`; From 2199e572892f1e36744516aae911d82555475199 Mon Sep 17 00:00:00 2001 From: Eason WaveKat Date: Sat, 16 May 2026 11:32:20 +1200 Subject: [PATCH 3/5] feat: mark auto-theme snippet as recommended Co-Authored-By: Claude Opus 4.7 (1M context) --- tools/star-tracker/src/pages.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/tools/star-tracker/src/pages.ts b/tools/star-tracker/src/pages.ts index 9583b47..459c4be 100644 --- a/tools/star-tracker/src/pages.ts +++ b/tools/star-tracker/src/pages.ts @@ -57,6 +57,9 @@ function shell(title: string, user: User | null, body: string): string { .btn-github { display: inline-block; padding: 10px 18px; background: #24292f; color: white; border-radius: 4px; text-decoration: none; } dl.embed { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; align-items: start; margin: .75rem 0; } dl.embed dt { color: #64748b; font-size: 0.85em; padding-top: 4px; } + dl.embed-snippets { grid-template-columns: 150px 1fr; } + dl.embed-snippets dt { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; } + dl.embed-snippets dt .badge { font-size: 0.7em; padding: 1px 5px; } dl.embed dd { margin: 0; } dl.embed code { display: inline-block; max-width: 100%; } .embed-row { display: flex; align-items: flex-start; gap: 6px; } @@ -481,14 +484,14 @@ function chartBlock( ${label} star history (light) ${label} star history (dark) -
+
Markdown
[![${altText} stars](${chartSvg})](${linkTarget})${copyBtn('Markdown snippet')}
HTML
<a href="${linkTarget}">
   <img src="${chartSvg}" alt="${altText} stars">
 </a>
${copyBtn('HTML snippet')}
-
Auto theme
+
Auto theme recommended
<a href="${linkTarget}">
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="${chartSvg}?theme=dark">

From 3da57daa81141fdef49355d76b1c6c5804afe1e4 Mon Sep 17 00:00:00 2001
From: Eason WaveKat 
Date: Sat, 16 May 2026 11:33:02 +1200
Subject: [PATCH 4/5] style: use thumbs-up emoji for recommended snippet badge

Co-Authored-By: Claude Opus 4.7 (1M context) 
---
 tools/star-tracker/src/pages.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/tools/star-tracker/src/pages.ts b/tools/star-tracker/src/pages.ts
index 459c4be..713917a 100644
--- a/tools/star-tracker/src/pages.ts
+++ b/tools/star-tracker/src/pages.ts
@@ -57,9 +57,7 @@ function shell(title: string, user: User | null, body: string): string {
   .btn-github { display: inline-block; padding: 10px 18px; background: #24292f; color: white; border-radius: 4px; text-decoration: none; }
   dl.embed { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; align-items: start; margin: .75rem 0; }
   dl.embed dt { color: #64748b; font-size: 0.85em; padding-top: 4px; }
-  dl.embed-snippets { grid-template-columns: 150px 1fr; }
-  dl.embed-snippets dt { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
-  dl.embed-snippets dt .badge { font-size: 0.7em; padding: 1px 5px; }
+  dl.embed-snippets dt .badge { font-size: 0.85em; padding: 1px 4px; line-height: 1; }
   dl.embed dd { margin: 0; }
   dl.embed code { display: inline-block; max-width: 100%; }
   .embed-row { display: flex; align-items: flex-start; gap: 6px; }
@@ -491,7 +489,7 @@ function chartBlock(
     
<a href="${linkTarget}">
   <img src="${chartSvg}" alt="${altText} stars">
 </a>
${copyBtn('HTML snippet')}

-    
Auto theme recommended

+    
Auto theme 👍

     
<a href="${linkTarget}">
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="${chartSvg}?theme=dark">

From afbc8ea6f62d5e3cb83ff69decb9d338ba23ed4a Mon Sep 17 00:00:00 2001
From: Eason WaveKat 
Date: Sat, 16 May 2026 11:34:09 +1200
Subject: [PATCH 5/5] =?UTF-8?q?style:=20drop=20chip=20styling=20=E2=80=94?=
 =?UTF-8?q?=20bare=20=F0=9F=91=8D=20next=20to=20auto=20theme=20label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) 
---
 tools/star-tracker/src/pages.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/tools/star-tracker/src/pages.ts b/tools/star-tracker/src/pages.ts
index 713917a..3f4bc7b 100644
--- a/tools/star-tracker/src/pages.ts
+++ b/tools/star-tracker/src/pages.ts
@@ -57,7 +57,6 @@ function shell(title: string, user: User | null, body: string): string {
   .btn-github { display: inline-block; padding: 10px 18px; background: #24292f; color: white; border-radius: 4px; text-decoration: none; }
   dl.embed { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; align-items: start; margin: .75rem 0; }
   dl.embed dt { color: #64748b; font-size: 0.85em; padding-top: 4px; }
-  dl.embed-snippets dt .badge { font-size: 0.85em; padding: 1px 4px; line-height: 1; }
   dl.embed dd { margin: 0; }
   dl.embed code { display: inline-block; max-width: 100%; }
   .embed-row { display: flex; align-items: flex-start; gap: 6px; }
@@ -482,14 +481,14 @@ function chartBlock(
     ${label} star history (light)
     ${label} star history (dark)
   

-  

+  

     
Markdown

     
[![${altText} stars](${chartSvg})](${linkTarget})${copyBtn('Markdown snippet')}

     
HTML

     
<a href="${linkTarget}">
   <img src="${chartSvg}" alt="${altText} stars">
 </a>
${copyBtn('HTML snippet')}

-    
Auto theme 👍

+    
Auto theme 👍

     
<a href="${linkTarget}">
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="${chartSvg}?theme=dark">