feat(website): add Star on GitHub CTAs and replace @lucide/astro with inline SVGs

steviee · claude · steviee · commit 8a9364182563 · 2026-05-01T13:34:36.000+02:00
- Add "Star on GitHub" button in header (visible on desktop)
- Add Star CTA banner in footer with prompt to star the repo
- Replace all @lucide/astro icons with inline SVGs to fix build issues
- Remove @lucide/astro and lucide-astro dependencies

Co-Authored-By: Claude Opus 4.7 &lt;noreply@anthropic.com&gt;
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -13,13 +13,11 @@
   },
   "dependencies": {
     "@astrojs/react": "^5.0.4",
-    "@lucide/astro": "^1.14.0",
     "@tailwindcss/vite": "^4.2.4",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "astro": "^6.2.1",
     "geist": "^1.7.0",
-    "lucide-astro": "^0.556.0",
     "lucide-react": "^1.14.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
diff --git a/website/src/components/AgentWorkflow.astro b/website/src/components/AgentWorkflow.astro
@@ -1,6 +1,4 @@
 ---
-import { Code2 } from '@lucide/astro';
-
 const steps = [
   {
     cmd: 'issues next',
@@ -71,7 +69,11 @@ const steps = [
     <div class="max-w-[800px] mx-auto mt-16">
       <div class="rounded-xl bg-[#0c0c0c] border border-[#1f1f1f] overflow-hidden">
         <div class="flex items-center gap-2 px-4 py-3 border-b border-[#1f1f1f]">
-          <Code2 size={14} class="text-[#525252] w-[14px] h-[14px]" />
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m18 16 4-4-4-4" />
+            <path d="m6 8-4 4 4 4" />
+            <path d="m14.5 4-5 16" />
+          </svg>
           <span class="font-mono text-xs text-[#525252]">.issues/.agent.md</span>
         </div>
         <div class="p-5 font-mono text-sm leading-relaxed">
diff --git a/website/src/components/FeatureGrid.astro b/website/src/components/FeatureGrid.astro
@@ -1,36 +1,34 @@
 ---
-import { Database, Bot, GitFork, GitCommit, Layout, Terminal } from '@lucide/astro';
-
 const features = [
   {
-    icon: Database,
     title: 'Zero Infrastructure',
     description: 'One Go binary. No Docker, no server, no database. Install, run `issues init`, done.',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>',
   },
   {
-    icon: Bot,
     title: 'AI-Native Workflow',
     description: '`issues next`, `claim`, `done`. `.agent.md` gives agents full context. JSON output for automation.',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>',
   },
   {
-    icon: GitFork,
     title: 'Bidirectional Relations',
     description: '`blocks`, `depends-on`, `related-to`, `duplicates`. Both sides sync automatically.',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M6 9v3a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V9"/><path d="M12 15V9"/></svg>',
   },
   {
-    icon: GitCommit,
     title: 'Auto-Staged',
     description: 'Every change is automatically `git add`-ed. Your issue state travels with the commit.',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><line x1="3" y1="12" x2="9" y2="12"/><line x1="15" y1="12" x2="21" y2="12"/></svg>',
   },
   {
-    icon: Layout,
     title: 'Kanban Board',
     description: 'Interactive TUI with Bubble Tea. `issues board` opens a full Kanban board in your terminal.',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>',
   },
   {
-    icon: Terminal,
     title: 'Human & Machine',
     description: '`--format table` for humans, `--format json` for scripts, `--format ids` for pipes.',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>',
   },
 ];
 ---
@@ -53,9 +51,7 @@ const features = [
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       {features.map((feature) => (
         <div class="group rounded-xl bg-[#141414] border border-[#262626] p-6 hover:border-[#525252] transition-colors">
-          <div class="mb-4">
-            <feature.icon size={24} className="text-[#22c55e]" />
-          </div>
+          <div class="mb-4 text-[#22c55e]" set:html={feature.icon} />
           <h3 class="text-lg font-semibold text-[#f5f5f5] mb-2">{feature.title}</h3>
           <p class="text-sm text-[#a3a3a3] leading-relaxed">{feature.description}</p>
         </div>
diff --git a/website/src/components/Footer.astro b/website/src/components/Footer.astro
@@ -2,7 +2,37 @@
 ---
 
 <footer class="border-t border-[#262626]">
-  <div class="max-w-[1200px] mx-auto px-6 md:px-8 lg:px-12 py-8">
+  <!-- Star CTA -->
+  <div class="max-w-[1200px] mx-auto px-6 md:px-8 lg:px-12 py-12">
+    <div class="flex flex-col sm:flex-row items-center justify-between gap-4 rounded-xl bg-[#141414] border border-[#262626] p-6">
+      <div class="flex items-center gap-3">
+        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-[#0c0c0c] border border-[#1f1f1f]">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+          </svg>
+        </div>
+        <div>
+          <div class="text-[#f5f5f5] font-semibold">Find git-issues useful?</div>
+          <div class="text-sm text-[#a3a3a3]">Star the repo on GitHub — it helps a lot.</div>
+        </div>
+      </div>
+      <a
+        href="https://github.com/steviee/git-issues"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-flex items-center gap-2 h-10 px-5 rounded-full bg-[#0c0c0c] border border-[#1f1f1f] text-[#f5f5f5] text-sm font-medium hover:border-[#525252] hover:bg-[#1f1f1f] transition-colors"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+          <path d="M9 18c-4.51 2-5-2-7-2" />
+        </svg>
+        <span>Star on GitHub</span>
+      </a>
+    </div>
+  </div>
+
+  <!-- Footer links -->
+  <div class="max-w-[1200px] mx-auto px-6 md:px-8 lg:px-12 py-8 border-t border-[#262626]">
     <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
       <!-- Left: Links -->
       <div class="flex items-center gap-4 text-sm text-[#525252]">
diff --git a/website/src/components/Header.astro b/website/src/components/Header.astro
@@ -1,6 +1,5 @@
 ---
 import ThemeToggle from './ThemeToggle.tsx';
-import { BookOpen } from '@lucide/astro';
 ---
 
 <header class="fixed top-0 left-0 right-0 z-50 h-16 flex items-center border-b border-transparent transition-all duration-300"
@@ -19,7 +18,19 @@ import { BookOpen } from '@lucide/astro';
         href="https://github.com/steviee/git-issues"
         target="_blank"
         rel="noopener noreferrer"
-        class="p-2 rounded-md text-[#a3a3a3] hover:text-[#f5f5f5] hover:bg-[#1f1f1f] transition-colors"
+        class="hidden sm:inline-flex items-center gap-1.5 h-8 px-3 rounded-full border border-[#262626] text-[#a3a3a3] text-xs font-medium hover:border-[#525252] hover:text-[#f5f5f5] transition-colors"
+        aria-label="Star on GitHub"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+        </svg>
+        <span>Star</span>
+      </a>
+      <a
+        href="https://github.com/steviee/git-issues"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="sm:hidden p-2 rounded-md text-[#a3a3a3] hover:text-[#f5f5f5] hover:bg-[#1f1f1f] transition-colors"
         aria-label="GitHub"
       >
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -34,7 +45,10 @@ import { BookOpen } from '@lucide/astro';
         class="p-2 rounded-md text-[#a3a3a3] hover:text-[#f5f5f5] hover:bg-[#1f1f1f] transition-colors"
         aria-label="Docs"
       >
-        <BookOpen size={18} class="w-[18px] h-[18px]" />
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+          <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+        </svg>
       </a>
       <ThemeToggle client:load />
     </div>
diff --git a/website/src/components/NeverOutOfSync.astro b/website/src/components/NeverOutOfSync.astro
@@ -1,5 +1,4 @@
 ---
-import { GitCommit, History, CheckCircle2 } from '@lucide/astro';
 ---
 
 <section id="sync" class="py-32 px-6 md:px-8 lg:px-12">
@@ -27,23 +26,32 @@ import { GitCommit, History, CheckCircle2 } from '@lucide/astro';
 
         <div class="flex flex-col gap-4 mt-2">
           <div class="flex items-start gap-3">
-            <CheckCircle2 size={20} class="text-[#22c55e] mt-0.5 shrink-0" />
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-0.5 shrink-0">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+              <polyline points="22 4 12 14.01 9 11.01" />
+            </svg>
             <div>
               <h4 class="font-semibold text-[#f5f5f5]">Branch-aware</h4>
               <p class="text-sm text-[#a3a3a3]">Issues follow branches. A feature branch has its own issues.</p>
             </div>
           </div>
 
           <div class="flex items-start gap-3">
-            <CheckCircle2 size={20} class="text-[#22c55e] mt-0.5 shrink-0" />
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-0.5 shrink-0">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+              <polyline points="22 4 12 14.01 9 11.01" />
+            </svg>
             <div>
               <h4 class="font-semibold text-[#f5f5f5]">Bisect-friendly</h4>
               <p class="text-sm text-[#a3a3a3]"><code>git bisect</code> shows the issue state at every commit in history.</p>
             </div>
           </div>
 
           <div class="flex items-start gap-3">
-            <CheckCircle2 size={20} class="text-[#22c55e] mt-0.5 shrink-0" />
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-0.5 shrink-0">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+              <polyline points="22 4 12 14.01 9 11.01" />
+            </svg>
             <div>
               <h4 class="font-semibold text-[#f5f5f5]">History is truth</h4>
               <p class="text-sm text-[#a3a3a3]"><code>git log .issues/</code> shows exactly when and why things changed.</p>
@@ -56,7 +64,11 @@ import { GitCommit, History, CheckCircle2 } from '@lucide/astro';
       <div class="flex flex-col gap-4">
         <div class="rounded-xl bg-[#0c0c0c] border border-[#1f1f1f] p-5 font-mono text-sm">
           <div class="flex items-center gap-2 text-[#525252] mb-3 pb-3 border-b border-[#1f1f1f]">
-            <GitCommit size={14} class="w-[14px] h-[14px]" />
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="3" />
+              <line x1="3" y1="12" x2="9" y2="12" />
+              <line x1="15" y1="12" x2="21" y2="12" />
+            </svg>
             <span>git log --oneline</span>
           </div>
           <div class="space-y-2">
@@ -90,7 +102,11 @@ import { GitCommit, History, CheckCircle2 } from '@lucide/astro';
 
         <div class="rounded-xl bg-[#0c0c0c] border border-[#1f1f1f] p-5 font-mono text-sm">
           <div class="flex items-center gap-2 text-[#525252] mb-3 pb-3 border-b border-[#1f1f1f]">
-            <History size={14} class="w-[14px] h-[14px]" />
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 3v5h5" />
+              <path d="M3.05 13A9 9 0 1 0 6 5.3L3 8" />
+              <path d="M12 7v5l4 2" />
+            </svg>
             <span>git show a1b2c3d:.issues/0001-fix-login-bug.md</span>
           </div>
           <div class="text-[#525252] mb-2">---</div>
diff --git a/website/src/components/PlansChange.astro b/website/src/components/PlansChange.astro
@@ -1,5 +1,4 @@
 ---
-import { FileText, CheckCircle2 } from '@lucide/astro';
 ---
 
 <section id="plans" class="py-32 px-6 md:px-8 lg:px-12 border-t border-[#262626]">
@@ -11,7 +10,10 @@ import { FileText, CheckCircle2 } from '@lucide/astro';
           style="box-shadow: 0 0 60px rgba(34, 197, 94, 0.05);"
         >
           <div class="flex items-center gap-2 text-[#525252] mb-3 pb-3 border-b border-[#1f1f1f]">
-            <FileText size={14} class="w-[14px] h-[14px]" />
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+              <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+            </svg>
             <span>.issues/0001-fix-login-bug.md</span>
           </div>
           <div class="text-[#525252] mb-2">---</div>
@@ -56,23 +58,32 @@ import { FileText, CheckCircle2 } from '@lucide/astro';
 
         <div class="flex flex-col gap-4 mt-2">
           <div class="flex items-start gap-3">
-            <CheckCircle2 size={20} class="text-[#22c55e] mt-0.5 shrink-0" />
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-0.5 shrink-0">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+              <polyline points="22 4 12 14.01 9 11.01" />
+            </svg>
             <div>
               <h4 class="font-semibold text-[#f5f5f5]">Plain text</h4>
               <p class="text-sm text-[#a3a3a3]">YAML + Markdown. Every editor, every agent, every human can read it.</p>
             </div>
           </div>
 
           <div class="flex items-start gap-3">
-            <CheckCircle2 size={20} class="text-[#22c55e] mt-0.5 shrink-0" />
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-0.5 shrink-0">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+              <polyline points="22 4 12 14.01 9 11.01" />
+            </svg>
             <div>
               <h4 class="font-semibold text-[#f5f5f5]">No lock-in</h4>
               <p class="text-sm text-[#a3a3a3]">Want to leave? Delete <code>issues</code>, keep the <code>.md</code> files. Done.</p>
             </div>
           </div>
 
           <div class="flex items-start gap-3">
-            <CheckCircle2 size={20} class="text-[#22c55e] mt-0.5 shrink-0" />
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-0.5 shrink-0">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+              <polyline points="22 4 12 14.01 9 11.01" />
+            </svg>
             <div>
               <h4 class="font-semibold text-[#f5f5f5]">Offline first</h4>
               <p class="text-sm text-[#a3a3a3]">No network needed. Edit issues on a plane, in a tunnel, anywhere.</p>
