Add MIT License and GitHub repository link with star counter

- Add MIT License (Copyright 2025 Piotr Migdal, Quesma)
- Add GitHub repository link in header with official GitHub icon
- Implement dynamic star counter using GitHub API
- Extract SVG icons to separate icons.ts file for better organization
- Add proper TypeScript types for GitHub API response

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

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

Author: stared

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Piotr Migdal, Quesma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/App.vue

@@ -8,13 +8,28 @@ import WebRStatus from './components/WebRStatus.vue'
 import LibrarySelector from './components/LibrarySelector.vue'
 import { useWebR } from './composables/useWebR'
 import { examples } from './data/examples'
+import { icons } from './data/icons'
 import type { RExample, CsvData } from './types'
 
+// Constants
+const GITHUB_REPO_OWNER = 'QuesmaOrg'
+const GITHUB_REPO_NAME = 'demo-webr-ggplot'
+const GITHUB_API_URL = `https://api.github.com/repos/${GITHUB_REPO_OWNER}/${GITHUB_REPO_NAME}`
+
+// Types
+interface GitHubRepo {
+  stargazers_count: number
+  [key: string]: unknown
+}
+
 // Start with the first example (getting-started)
 const code = ref(examples[0].code)
 const lastExecutedCode = ref('')
 const hasChanges = computed(() => code.value !== lastExecutedCode.value)
 
+// GitHub stars
+const githubStars = ref<number | null>(null)
+
 const {
   isReady,
   isLoading,
@@ -63,20 +78,56 @@ const handleExampleSelect = async (example: RExample) => {
   }
 }
 
+// Fetch GitHub stars
+const fetchGitHubStars = async () => {
+  try {
+    const response = await fetch(GITHUB_API_URL)
+    if (response.ok) {
+      const data = await response.json() as GitHubRepo
+      githubStars.value = data.stargazers_count
+    }
+  } catch (error) {
+    console.error('Failed to fetch GitHub stars:', error)
+  }
+}
+
 onMounted(() => {
   void initializeWebR(code.value)
   // Set initial executed code after auto-execution
   setTimeout(() => {
     lastExecutedCode.value = code.value
   }, 100)
+  // Fetch GitHub stars
+  void fetchGitHubStars()
 })
 </script>
 
 <template>
   <div id="app">
     <header class="header">
-      <h1 class="title">WebR ggplot2 & dplyr Demo</h1>
-      <p class="subtitle">Interactive R data visualization and manipulation in the browser</p>
+      <div class="header-content">
+        <div>
+          <h1 class="title">WebR ggplot2 & dplyr Demo</h1>
+          <p class="subtitle">Interactive R data visualization and manipulation in the browser</p>
+        </div>
+        <a
+          href="https://github.com/QuesmaOrg/demo-webr-ggplot"
+          target="_blank" 
+          rel="noopener noreferrer" 
+          class="github-link"
+          aria-label="View on GitHub">
+          <svg class="github-icon" :viewBox="icons.github.viewBox" width="16" height="16">
+            <path fill="currentColor" :d="icons.github.path" />
+          </svg>
+          <span class="github-text">View on GitHub</span>
+          <span v-if="githubStars !== null" class="github-stars">
+            <svg :viewBox="icons.star.viewBox" width="14" height="14" class="star-icon">
+              <path fill="currentColor" :d="icons.star.path" />
+            </svg>
+            {{ githubStars }}
+          </span>
+        </a>
+      </div>
     </header>
 
     <main class="main">
@@ -177,12 +228,19 @@ onMounted(() => {
 .header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
-  padding: 1.5rem 0;
-  text-align: center;
+  padding: 1.5rem 2rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   flex-shrink: 0;
 }
 
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
 .title {
   margin: 0;
   font-size: 2rem;
@@ -197,6 +255,52 @@ onMounted(() => {
   font-weight: 300;
 }
 
+.github-link {
+  color: white;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.github-link:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.github-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.github-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.github-stars {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  padding-left: 0.75rem;
+  border-left: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.star-icon {
+  width: 14px;
+  height: 14px;
+  color: #fbbf24;
+}
+
 
 .main {
   flex: 1;

src/data/icons.ts

@@ -0,0 +1,10 @@
+export const icons = {
+  github: {
+    viewBox: '0 0 16 16',
+    path: 'M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8',
+  },
+  star: {
+    viewBox: '0 0 16 16',
+    path: 'M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z',
+  },
+} as const