Merge pull request #14 from fastapi-startkit/use-lucid-icons

feat: lucid icons

Author: bedus-creation

.vitepress/theme/components/CoreModules.vue

@@ -1,3 +1,7 @@
+<script setup>
+import { Globe, Terminal, Activity, CircleCheck } from 'lucide-vue-next'
+</script>
+
 <template>
     <section class="py-32 bg-surface">
         <div class="max-w-7xl mx-auto px-10">
@@ -11,18 +15,18 @@
                 <div class="bg-white p-10 flex flex-col gap-8 border-r border-outline-variant hover:bg-brand-teal/[0.02] transition-colors group">
                     <div class="space-y-4">
                         <div class="w-10 h-10 bg-brand-teal/10 rounded flex items-center justify-center text-brand-teal group-hover:scale-110 transition-transform">
-                            <span class="material-symbols-outlined">api</span>
+                            <Globe :size="20" />
                         </div>
                         <h3 class="font-headline-md text-headline-md font-semibold text-on-surface tracking-[-0.01em]">Asynchronous Core</h3>
                         <p class="text-body-sm font-body-sm text-on-surface-variant">Fully async stack built on FastAPI, Starlette, Pydantic, and Masonite ORM — providing the fastest possible execution path for Python web applications.</p>
                     </div>
                     <div class="mt-auto space-y-3">
                         <div class="flex items-center gap-3 py-2 border-t border-outline-variant/50">
-                            <span class="text-brand-teal material-symbols-outlined text-sm">check_circle</span>
+                            <CircleCheck :size="16" class="text-brand-teal" />
                             <span class="text-label-sm font-label-sm text-on-surface">Automatic OpenAPI Docs</span>
                         </div>
                         <div class="flex items-center gap-3 py-2 border-t border-outline-variant/50">
-                            <span class="text-brand-teal material-symbols-outlined text-sm">check_circle</span>
+                            <CircleCheck :size="16" class="text-brand-teal" />
                             <span class="text-label-sm font-label-sm text-on-surface">Strict Typing Engine</span>
                         </div>
                     </div>
@@ -32,7 +36,7 @@
                 <div class="bg-white p-10 flex flex-col gap-8 border-r border-outline-variant hover:bg-brand-teal/[0.02] transition-colors group">
                     <div class="space-y-4">
                         <div class="w-10 h-10 bg-brand-teal/10 rounded flex items-center justify-center text-brand-teal group-hover:scale-110 transition-transform">
-                            <span class="material-symbols-outlined">terminal</span>
+                            <Terminal :size="20" />
                         </div>
                         <h3 class="font-headline-md text-headline-md font-semibold text-on-surface tracking-[-0.01em]">Artisan CLI</h3>
                         <p class="text-body-sm font-body-sm text-on-surface-variant">Powerful artisan commands for scaffolding models, running migrations, seeding databases, and managing your application — all from the terminal.</p>
@@ -51,7 +55,7 @@
                 <div class="bg-white p-10 flex flex-col gap-8 hover:bg-brand-teal/[0.02] transition-colors group">
                     <div class="space-y-4">
                         <div class="w-10 h-10 bg-brand-teal/10 rounded flex items-center justify-center text-brand-teal group-hover:scale-110 transition-transform">
-                            <span class="material-symbols-outlined">monitoring</span>
+                            <Activity :size="20" />
                         </div>
                         <h3 class="font-headline-md text-headline-md font-semibold text-on-surface tracking-[-0.01em]">Observability Stack</h3>
                         <p class="text-body-sm font-body-sm text-on-surface-variant">Native integration with Prometheus, Grafana, and OpenTelemetry for deep inspection of application state.</p>

.vitepress/theme/components/HeroSection.vue

@@ -1,5 +1,6 @@
 <script setup>
     import { computed, onMounted, onUnmounted, ref } from "vue"
+    import { Terminal, FileText, Copy } from "lucide-vue-next"
 
     // ── Raw Python snippet imports ──────────────────────────────────────────────
     import applicationRaw from "../snippets/application.py?raw"
@@ -78,7 +79,7 @@
     const currentTabData = computed(() => tabData[activeCategory.value])
 
     const currentCode = computed(() => {
-        if (!highlighterReady.value) return ""
+        if (!highlighterReady.value) return escapeHtml(currentTabData.value.raw[activeFileIndex.value])
         const h = highlighted.value[activeCategory.value]
         if (h) return h[activeFileIndex.value] ?? escapeHtml(currentTabData.value.raw[activeFileIndex.value])
         return escapeHtml(currentTabData.value.raw[activeFileIndex.value])
@@ -109,6 +110,20 @@
             isTransitioning.value = false
         }, 150)
     }
+
+    // ── Synchronized horizontal scroll (file tabs ↔ code body) ─────────────────
+    const fileTabsRef = ref(null)
+    const codeBodyRef = ref(null)
+
+    function onCodeScroll() {
+        if (fileTabsRef.value && codeBodyRef.value)
+            fileTabsRef.value.scrollLeft = codeBodyRef.value.scrollLeft
+    }
+
+    function onTabsScroll() {
+        if (fileTabsRef.value && codeBodyRef.value)
+            codeBodyRef.value.scrollLeft = fileTabsRef.value.scrollLeft
+    }
 </script>
 
 <template>
@@ -149,7 +164,7 @@
                 <div class="flex flex-col sm:flex-row gap-4">
                     <a href="/docs/getting-started" class="bg-brand-teal text-white px-8 py-4 rounded font-label-md font-bold flex items-center justify-center gap-2 transition-all hover:brightness-110 shadow-lg shadow-brand-teal/20 active:scale-[0.98]">
                         Initialize Project
-                        <span class="material-symbols-outlined text-[18px]">terminal</span>
+                        <Terminal :size="18" />
                     </a>
                 </div>
 
@@ -192,34 +207,34 @@
 
                         <!-- Chrome bar -->
                         <div class="flex items-center justify-between px-4 py-3 bg-editor-chrome border-b border-brand-teal/10">
-                            <div class="flex items-center gap-6">
+                            <div class="flex items-center gap-6 min-w-0 flex-1 overflow-hidden">
                                 <!-- Traffic lights -->
-                                <div class="flex gap-1.5">
+                                <div class="flex gap-1.5 shrink-0">
                                     <div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
                                     <div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
                                     <div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
                                 </div>
                                 <!-- File tabs -->
-                                <div class="flex gap-4">
+                                <div ref="fileTabsRef" class="flex gap-4 overflow-x-auto scrollbar-none min-w-0 flex-1" @scroll="onTabsScroll">
                                     <button
                                         v-for="(file, idx) in currentTabData.files"
                                         :key="file"
-                                        class="px-3 py-1 flex items-center gap-2 rounded transition-all"
+                                        class="px-3 py-1 flex items-center gap-2 rounded transition-all shrink-0"
                                         :class="activeFileIndex === idx ? 'bg-brand-teal/10 border-b-2 border-brand-teal' : 'opacity-50 hover:opacity-75'"
                                         @click="switchFile(idx)"
                                     >
-                                        <span class="material-symbols-outlined text-xs" :class="activeFileIndex === idx ? 'text-brand-teal' : 'text-outline-variant'">description</span>
+                                        <FileText :size="12" :class="activeFileIndex === idx ? 'text-brand-teal' : 'text-outline-variant'" />
                                         <span class="text-xs font-mono tracking-tight" :class="activeFileIndex === idx ? 'text-white' : 'text-outline-variant'">{{ file }}</span>
                                     </button>
                                 </div>
                             </div>
-                            <span class="material-symbols-outlined text-outline-variant text-sm hover:text-brand-teal cursor-pointer transition-colors">content_copy</span>
+                            <Copy :size="14" class="text-outline-variant hover:text-brand-teal cursor-pointer transition-colors" />
                         </div>
 
                         <!-- Code body -->
-                        <div class="p-6 md:p-8 font-mono text-[13px] leading-relaxed h-[410px] overflow-y-auto overflow-x-hidden">
+                        <div ref="codeBodyRef" class="p-6 md:p-8 font-mono text-[13px] leading-relaxed h-[410px] overflow-y-auto overflow-x-auto" @scroll="onCodeScroll">
               <pre
-                  class="text-white transition-all duration-200 m-0 p-0 bg-transparent"
+                  class="text-white transition-all duration-200 m-0 p-0 bg-transparent whitespace-pre"
                   :class="{ 'opacity-0 translate-y-1': isTransitioning }"
               ><code v-html="currentCode" class="bg-transparent"></code></pre>
                         </div>

.vitepress/theme/components/PerformanceBenchmarks.vue

@@ -1,3 +1,7 @@
+<script setup>
+import { Gauge, Shield, ArrowRight } from 'lucide-vue-next'
+</script>
+
 <template>
     <section class="relative bg-inverse-surface text-white py-32 overflow-hidden">
         <!-- Background effects -->
@@ -25,7 +29,7 @@
                     <ul class="space-y-8">
                         <li class="flex items-start gap-6 group/item">
                             <div class="mt-1 w-10 h-10 rounded bg-brand-teal/10 border border-brand-teal/20 flex items-center justify-center shrink-0 group-hover/item:bg-brand-teal/30 transition-colors">
-                                <span class="material-symbols-outlined text-brand-teal">speed</span>
+                                <Gauge :size="20" class="text-brand-teal" />
                             </div>
                             <div class="space-y-1">
                                 <h4 class="font-headline-md text-headline-md font-semibold text-white tracking-[-0.01em]">Zero-copy Processing</h4>
@@ -34,7 +38,7 @@
                         </li>
                         <li class="flex items-start gap-6 group/item">
                             <div class="mt-1 w-10 h-10 rounded bg-brand-teal/10 border border-brand-teal/20 flex items-center justify-center shrink-0 group-hover/item:bg-brand-teal/30 transition-colors">
-                                <span class="material-symbols-outlined text-brand-teal">shield</span>
+                                <Shield :size="20" class="text-brand-teal" />
                             </div>
                             <div class="space-y-1">
                                 <h4 class="font-headline-md text-headline-md font-semibold text-white tracking-[-0.01em]">Encrypted Pipelines</h4>
@@ -94,7 +98,7 @@
                         <div class="mt-14 pt-8 border-t border-white/10">
                             <button class="w-full text-brand-teal font-label-sm text-[10px] uppercase tracking-[0.2em] hover:text-white transition-colors flex items-center justify-center gap-2 group/btn">
                                 View Technical Methodology
-                                <span class="material-symbols-outlined text-sm group-hover/btn:translate-x-1 transition-transform">arrow_forward</span>
+                                <ArrowRight :size="14" class="group-hover/btn:translate-x-1 transition-transform" />
                             </button>
                         </div>
                     </div>

.vitepress/theme/components/SiteFooter.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { Terminal } from 'lucide-vue-next'
     const startYear = 2026
     const currentYear = new Date().getFullYear()
     const copyrightYear = currentYear > startYear ? `${startYear}–${currentYear}` : `${startYear}`
@@ -9,7 +10,7 @@
         <div class="grid grid-cols-1 md:grid-cols-4 gap-6 w-full max-w-[1280px] mx-auto py-12 px-10">
             <div class="space-y-4">
                 <div class="font-label-md text-label-md font-bold text-brand-teal flex items-center gap-2">
-                    <span class="material-symbols-outlined text-brand-teal">terminal</span>
+                    <Terminal :size="18" class="text-brand-teal" />
                     Fastapi Starkit
                 </div>
                 <p class="text-body-sm font-body-sm text-on-surface-variant">

.vitepress/theme/components/SiteHeader.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useData } from 'vitepress'
 import { computed } from 'vue'
+import { Zap, Search } from 'lucide-vue-next'
 
 const { page } = useData()
 const currentPath = computed(() => page.value.relativePath)
@@ -24,7 +25,7 @@ function openSearch() {
       <!-- Left: Logo + desktop nav links -->
       <div class="flex items-center gap-8 md:gap-12">
         <a href="/" class="font-headline-md font-bold text-brand-teal tracking-tight flex items-center gap-2 hover:opacity-90 transition-opacity shrink-0">
-          <span class="material-symbols-outlined">bolt</span>
+          <Zap :size="20" />
           <span class="hidden sm:inline">FastAPI Startkit</span>
         </a>
 
@@ -47,7 +48,7 @@ function openSearch() {
           @click="openSearch"
         >
           <span class="text-on-surface-variant text-label-md font-label-md flex items-center gap-2">
-            <span class="material-symbols-outlined" style="font-size:16px">search</span>
+            <Search :size="16" />
             Search docs...
           </span>
           <span class="ml-4 text-[10px] text-outline font-label-sm border border-outline-variant px-1.5 py-0.5 rounded bg-white">⌘K</span>
@@ -59,7 +60,7 @@ function openSearch() {
           @click="openSearch"
           aria-label="Search"
         >
-          <span class="material-symbols-outlined text-on-surface-variant" style="font-size:18px">search</span>
+          <Search :size="18" class="text-on-surface-variant" />
         </button>
 
         <!-- Docs link — mobile/tablet only (< md) -->

.vitepress/theme/custom.css

@@ -1,5 +1,5 @@
 /* Google Fonts — must precede all other statements */
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');
 
 @import "tailwindcss";
 
@@ -89,13 +89,6 @@
     --text-label-sm--font-weight: 500;
 }
 
-/* ===== Material Symbols ===== */
-.material-symbols-outlined {
-    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-    display: inline-block;
-    vertical-align: middle;
-    line-height: 1;
-}
 
 /* ===== Utility Classes ===== */
 .code-shadow {
@@ -186,6 +179,14 @@ h1, h2, h3, h4 {
     font-family: 'Geist', sans-serif;
 }
 
+/* ===== Hide scrollbar utility ===== */
+.scrollbar-none {
+    scrollbar-width: none;
+}
+.scrollbar-none::-webkit-scrollbar {
+    display: none;
+}
+
 /* ===== Syntax Highlighting for Code Editor ===== */
 .code-keyword {
     color: #ff7b72;