feat: add data attributes for show/hide options

- Add data-show-thumbnail, data-show-header, data-show-footer attributes
- Update index.html code snippets with new options
- Update README with data attributes documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: iamjr15

assets/js/gh.js

@@ -58,7 +58,10 @@ <h2>// INTEGRATION</h2>
 <span class="code-tag">&lt;/style&gt;</span>
 
 <span class="code-tag">&lt;!-- 2. Create the container --&gt;</span>
-<span class="code-tag">&lt;div</span> <span class="code-attr">id</span>=<span class="code-string">"gh"</span> <span class="code-attr">data-login</span>=<span class="code-string">"<span class="dynamic-username">iamjr15</span>"</span><span class="code-tag">&gt;&lt;/div&gt;</span>
+<span class="code-tag">&lt;div</span> <span class="code-attr">id</span>=<span class="code-string">"gh"</span>
+     <span class="code-attr">data-login</span>=<span class="code-string">"<span class="dynamic-username">iamjr15</span>"</span>
+     <span class="code-attr">data-show-thumbnail</span>=<span class="code-string">"true"</span><span class="code-tag">&gt;&lt;/div&gt;</span>
+<span class="code-tag">&lt;!-- Optional: data-show-thumbnail="false" to hide GitHub logo --&gt;</span>
 
 <span class="code-tag">&lt;!-- 3. Include the script --&gt;</span>
 <span class="code-tag">&lt;script</span> <span class="code-attr">src</span>=<span class="code-string">"https://github-contribution-graph.netlify.app/assets/js/gh.js"</span><span class="code-tag">&gt;&lt;/script&gt;</span></code></pre>
@@ -99,7 +102,9 @@ <h2>// INTEGRATION</h2>
           --gh-border-card-color: #333333;</span>
         }
       `}<span class="code-tag">&lt;/style&gt;</span>
-      <span class="code-tag">&lt;div</span> <span class="code-attr">id</span>=<span class="code-string">"gh"</span> <span class="code-attr">data-login</span>=<span class="code-string">"<span class="dynamic-username">iamjr15</span>"</span> /<span class="code-tag">&gt;</span>
+      <span class="code-tag">&lt;div</span> <span class="code-attr">id</span>=<span class="code-string">"gh"</span>
+           <span class="code-attr">data-login</span>=<span class="code-string">"<span class="dynamic-username">iamjr15</span>"</span>
+           <span class="code-attr">data-show-thumbnail</span>=<span class="code-string">"true"</span> /<span class="code-tag">&gt;</span>
     <span class="code-tag">&lt;/&gt;</span>
   );
 };</code></pre>
@@ -111,7 +116,9 @@ <h2>// INTEGRATION</h2>
                         <button class="copy-btn" data-target="snippet-vue">COPY</button>
                     </div>
                     <pre><code id="snippet-vue"><span class="code-tag">&lt;template&gt;</span>
-  <span class="code-tag">&lt;div</span> <span class="code-attr">id</span>=<span class="code-string">"gh"</span> <span class="code-attr">:data-login</span>=<span class="code-string">"username"</span><span class="code-tag">&gt;&lt;/div&gt;</span>
+  <span class="code-tag">&lt;div</span> <span class="code-attr">id</span>=<span class="code-string">"gh"</span>
+       <span class="code-attr">:data-login</span>=<span class="code-string">"username"</span>
+       <span class="code-attr">data-show-thumbnail</span>=<span class="code-string">"true"</span><span class="code-tag">&gt;&lt;/div&gt;</span>
 <span class="code-tag">&lt;/template&gt;</span>
 
 <span class="code-tag">&lt;script setup&gt;</span>

index.html

@@ -50,10 +50,23 @@ widget.render();
 
 ```html
 <link rel="stylesheet" href="https://unpkg.com/github-contribution-graph/dist/gh.css">
-<div id="gh" data-login="octocat"></div>
+<div id="gh"
+     data-login="octocat"
+     data-show-thumbnail="true"
+     data-show-header="true"
+     data-show-footer="true"></div>
 <script src="https://unpkg.com/github-contribution-graph/dist/browser.global.js"></script>
 ```
 
+#### Data Attributes
+
+| Attribute | Default | Description |
+|-----------|---------|-------------|
+| `data-login` | required | GitHub username |
+| `data-show-thumbnail` | `"true"` | Show/hide GitHub logo below graph |
+| `data-show-header` | `"true"` | Show/hide contribution count header |
+| `data-show-footer` | `"true"` | Show/hide legend footer |
+
 ## React API
 
 ### GitHubContributionGraph

packages/github-contribution-graph/README.md

@@ -30,9 +30,17 @@ export function autoInit(): void {
   const username = container.dataset.login;
   if (!username) return;
 
+  // Parse data attributes for options
+  const showThumbnail = container.dataset.showThumbnail !== 'false';
+  const showHeader = container.dataset.showHeader !== 'false';
+  const showFooter = container.dataset.showFooter !== 'false';
+
   const widget = new GitHubContributionWidget({
     username,
     container,
+    showThumbnail,
+    showHeader,
+    showFooter,
   });
 
   widget.render();