Merge pull request #112 from deariary/docs/card-readme-fix

unhappychoice · web-flow · commit 5c7cc63e801d · 2026-04-07T10:47:36.000+09:00
fix: use GitHub Pages URL for card SVG animation in README
diff --git a/README.md b/README.md
@@ -96,9 +96,9 @@ with:
 Embed an animated news ticker in your GitHub Profile README. AI-generated headlines scroll with dramatic labels.
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="examples/card-dark.svg" />
-  <source media="(prefers-color-scheme: light)" srcset="examples/card.svg" />
-  <img alt="Weekly News Ticker" src="examples/card.svg" />
+  <source media="(prefers-color-scheme: dark)" srcset="https://deariary.github.io/github-weekly-reporter/screenshots/card-dark.svg" />
+  <source media="(prefers-color-scheme: light)" srcset="https://deariary.github.io/github-weekly-reporter/screenshots/card.svg" />
+  <img alt="Weekly News Ticker" src="https://deariary.github.io/github-weekly-reporter/screenshots/card.svg" />
 </picture>
 
 Generated automatically as part of the `render` command. Add this to your profile README:
diff --git a/scripts/generate-preview-index.js b/scripts/generate-preview-index.js
@@ -245,7 +245,7 @@ const html = `<!DOCTYPE html>
   <h2>Profile Card</h2>
   <p class="lead">Embed an animated news ticker in your GitHub Profile README. AI writes the headlines.</p>
   <div style="border:1px solid #222;border-radius:6px;overflow:hidden;margin-bottom:1rem;">
-    <img src="examples/card-dark.svg" alt="Weekly News Ticker" style="width:100%;display:block;" />
+    <img src="screenshots/card-dark.svg" alt="Weekly News Ticker" style="width:100%;display:block;" />
   </div>
   <p class="qs-note" style="margin-top:0.5rem;">
     Generated automatically with each weekly report. Headlines use dramatic, tongue-in-cheek labels like a TV news broadcast.
diff --git a/scripts/generate-preview.sh b/scripts/generate-preview.sh
@@ -36,9 +36,8 @@ done
 # Copy theme screenshots for LP
 cp -r scripts/screenshots "$OUT_DIR/screenshots"
 
-# Copy example card SVGs for LP
-mkdir -p "$OUT_DIR/examples"
-cp examples/card.svg examples/card-dark.svg "$OUT_DIR/examples/"
+# Copy card SVGs for LP and README
+cp scripts/screenshots/card.svg scripts/screenshots/card-dark.svg "$OUT_DIR/screenshots/"
 
 # Generate top-level index
 node scripts/generate-preview-index.js "$OUT_DIR" "$BASE_URL" "$THEMES" "$LANGS"
diff --git a/scripts/screenshots/card-dark.svg b/scripts/screenshots/card-dark.svg
diff --git a/scripts/screenshots/card.svg b/scripts/screenshots/card.svg
diff --git a/src/renderer/card.ts b/src/renderer/card.ts
@@ -126,7 +126,7 @@ const buildSVG = (data: CardData, colors: CardColors): string => {
       100% { transform: translateX(-${totalWidth.toFixed(0)}px); }
     }`;
 
-  const font = '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif';
+  const font = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif";
   const topH = HEIGHT - TICKER_H;
   const midY = topH / 2 + 4;
 
