Merge pull request #115 from deariary/fix/card-link

feat: wrap card embed in link to report repository

Author: unhappychoice

README.md

@@ -104,11 +104,13 @@ Embed an animated news ticker in your GitHub Profile README. AI-generated headli
 Generated automatically as part of the `render` command. Add this to your profile README:
 
 ```html
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://{username}.github.io/{repo}/card-dark.svg" />
-  <source media="(prefers-color-scheme: light)" srcset="https://{username}.github.io/{repo}/card.svg" />
-  <img alt="Weekly Report" src="https://{username}.github.io/{repo}/card.svg" />
-</picture>
+<a href="https://github.com/{username}/{repo}">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://{username}.github.io/{repo}/card-dark.svg" />
+    <source media="(prefers-color-scheme: light)" srcset="https://{username}.github.io/{repo}/card.svg" />
+    <img alt="Weekly Report" src="https://{username}.github.io/{repo}/card.svg" />
+  </picture>
+</a>
 ```
 
 ## Features

src/cli/commands/render.ts

@@ -194,12 +194,15 @@ const run = async (options: RenderOptions): Promise<void> => {
 
   // Write index page with titles from each week's LLM data
   const entries = await buildReportEntries(options.dataDir, allPaths);
+  const ghRepo = env("GITHUB_REPOSITORY");
+  const repoUrl = ghRepo ? `https://github.com/${ghRepo}` : undefined;
   const indexHtml = renderIndexPage(
     entries,
     { username: githubData.username, avatarUrl: githubData.avatarUrl, profile: githubData.profile },
     options.language,
     options.siteTitle,
     base,
+    repoUrl,
     options.theme,
   );
   const indexPath = join(options.outputDir, "index.html");

src/cli/commands/setup/workflows.ts

@@ -192,6 +192,20 @@ Weekly GitHub activity reports for [@${opts.username}](https://github.com/${opts
 
 ${opts.pagesUrl}
 
+## Profile Card
+
+Add this to your [GitHub Profile README](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme):
+
+\`\`\`html
+<a href="https://github.com/${opts.repo}">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="${opts.pagesUrl}/card-dark.svg" />
+    <source media="(prefers-color-scheme: light)" srcset="${opts.pagesUrl}/card.svg" />
+    <img alt="Weekly Report" src="${opts.pagesUrl}/card.svg" />
+  </picture>
+</a>
+\`\`\`
+
 ## How It Works
 
 1. **Daily** (automatic): A scheduled workflow collects your GitHub events at midnight (${opts.timezone}).

src/deployer/index-page.ts

@@ -58,6 +58,7 @@ export const renderIndexPage = (
   language: Language = "en",
   siteTitle?: string,
   baseUrl?: string,
+  repoUrl?: string,
   themeName: Theme = "brutalist",
 ): string => {
   const locale = getLocale(language);
@@ -83,6 +84,7 @@ export const renderIndexPage = (
     description,
     ogImageUrl,
     baseUrl,
+    repoUrl,
     lang: language,
     weeklyReports: locale.weeklyReports,
     poweredBy: locale.poweredBy,

src/renderer/themes/brutalist/templates/index-page.hbs

@@ -99,11 +99,13 @@
 {{#if baseUrl}}
 <div class="embed-section">
   <div class="embed-label">Embed in your GitHub README</div>
-  <pre class="embed-snippet"><code>&lt;picture&gt;
-  &lt;source media="(prefers-color-scheme: dark)" srcset="{{baseUrl}}/card-dark.svg" /&gt;
-  &lt;source media="(prefers-color-scheme: light)" srcset="{{baseUrl}}/card.svg" /&gt;
-  &lt;img alt="Weekly Report" src="{{baseUrl}}/card.svg" /&gt;
-&lt;/picture&gt;</code></pre>
+  <pre class="embed-snippet"><code>&lt;a href="{{#if repoUrl}}{{repoUrl}}{{else}}https://github.com/{username}/{repo}{{/if}}"&gt;
+  &lt;picture&gt;
+    &lt;source media="(prefers-color-scheme: dark)" srcset="{{baseUrl}}/card-dark.svg" /&gt;
+    &lt;source media="(prefers-color-scheme: light)" srcset="{{baseUrl}}/card.svg" /&gt;
+    &lt;img alt="Weekly Report" src="{{baseUrl}}/card.svg" /&gt;
+  &lt;/picture&gt;
+&lt;/a&gt;</code></pre>
 </div>
 {{/if}}
 

src/renderer/themes/editorial/templates/index-page.hbs

@@ -64,11 +64,13 @@
 {{#if baseUrl}}
 <div class="embed-section">
   <div class="embed-label">Embed in your GitHub README</div>
-  <pre class="embed-snippet"><code>&lt;picture&gt;
-  &lt;source media="(prefers-color-scheme: dark)" srcset="{{baseUrl}}/card-dark.svg" /&gt;
-  &lt;source media="(prefers-color-scheme: light)" srcset="{{baseUrl}}/card.svg" /&gt;
-  &lt;img alt="Weekly Report" src="{{baseUrl}}/card.svg" /&gt;
-&lt;/picture&gt;</code></pre>
+  <pre class="embed-snippet"><code>&lt;a href="{{#if repoUrl}}{{repoUrl}}{{else}}https://github.com/{username}/{repo}{{/if}}"&gt;
+  &lt;picture&gt;
+    &lt;source media="(prefers-color-scheme: dark)" srcset="{{baseUrl}}/card-dark.svg" /&gt;
+    &lt;source media="(prefers-color-scheme: light)" srcset="{{baseUrl}}/card.svg" /&gt;
+    &lt;img alt="Weekly Report" src="{{baseUrl}}/card.svg" /&gt;
+  &lt;/picture&gt;
+&lt;/a&gt;</code></pre>
 </div>
 {{/if}}
 

src/renderer/themes/minimal/templates/index-page.hbs

@@ -64,11 +64,13 @@
 {{#if baseUrl}}
 <div class="embed-section">
   <div class="embed-label">Embed in your GitHub README</div>
-  <pre class="embed-snippet"><code>&lt;picture&gt;
-  &lt;source media="(prefers-color-scheme: dark)" srcset="{{baseUrl}}/card-dark.svg" /&gt;
-  &lt;source media="(prefers-color-scheme: light)" srcset="{{baseUrl}}/card.svg" /&gt;
-  &lt;img alt="Weekly Report" src="{{baseUrl}}/card.svg" /&gt;
-&lt;/picture&gt;</code></pre>
+  <pre class="embed-snippet"><code>&lt;a href="{{#if repoUrl}}{{repoUrl}}{{else}}https://github.com/{username}/{repo}{{/if}}"&gt;
+  &lt;picture&gt;
+    &lt;source media="(prefers-color-scheme: dark)" srcset="{{baseUrl}}/card-dark.svg" /&gt;
+    &lt;source media="(prefers-color-scheme: light)" srcset="{{baseUrl}}/card.svg" /&gt;
+    &lt;img alt="Weekly Report" src="{{baseUrl}}/card.svg" /&gt;
+  &lt;/picture&gt;
+&lt;/a&gt;</code></pre>
 </div>
 {{/if}}