Adds version badges to hero + icon detail overlay

docs/.vitepress/theme/components/base/Badge.vue

@@ -41,14 +41,14 @@ const component = computed(() => props.href ? 'a' : 'div')
   font-size: 16px;
 }
 
-.badge:hover, a.badge:hover  {
+.badge[href]:hover, a.badge:hover  {
   border-color: var(--vp-button-alt-hover-border);
   color: var(--vp-button-alt-hover-text);
   background-color: var(--vp-button-alt-hover-bg);
   text-decoration: none;
 }
 
-.badge:active {
+.badge[href]:active {
   border-color: var(--vp-button-alt-active-border);
   color: var(--vp-button-alt-active-text);
   background-color: var(--vp-button-alt-active-bg);

docs/.vitepress/theme/components/home/HomeHeroInfo.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import Badge from '../base/Badge.vue';
+import lucidePackage from '../../../../../packages/lucide/package.json';
+const currentVersion = lucidePackage.version;
+</script>
+<template>
+  <div class="hero-badge">
+    <Badge>v{{ currentVersion }}</Badge>
+  </div>
+  <h1>
+    <span class="name">Beautiful &</span><br>
+    <span class="text">consistent icons</span>
+  </h1>
+  <p class="tagline">Made by the community.</p>
+</template>
+
+<style scoped>
+h1 {
+  line-height: 64px;
+  font-size: 56px;
+  max-width: 576px;
+  font-weight: 700;
+  white-space: pre-wrap;
+}
+.name {
+  color: var(--vp-c-brand);
+}
+.badge {
+  display: inline-block;
+  margin-bottom: 16px;
+}
+</style>

docs/.vitepress/theme/components/icons/IconDetailOverlay.vue

@@ -7,6 +7,7 @@
   import { x, expand } from '../../../data/iconNodes'
   import { useRouter } from 'vitepress';
   import IconInfo from './IconInfo.vue';
+  import Badge from '../base/Badge.vue';
 
   const props = defineProps<{
     icon: IconEntity
@@ -35,9 +36,7 @@
     <div class="overlay-container" v-if="props.icon">
       <div class="overlay-panel">
         <nav class="overlay-menu">
-          <IconButton  @click="go(`/icons/${icon.name}`)">
-            <component :is="Expand" />
-          </IconButton>
+          <Badge>v{{ icon.createdRelease.version }}</Badge>
           <IconButton  @click="onClose">
             <component :is="CloseIcon" />
           </IconButton>
@@ -118,6 +117,7 @@
   right: 24px;
   display: flex;
   gap: 8px;
+  align-items: center;
 }
 
 .drawer-enter-active {

docs/.vitepress/theme/index.ts

@@ -4,6 +4,7 @@ import './style.css'
 import { Theme } from 'vitepress'
 import IconsSidebarNavAfter from './layouts/IconsSidebarNavAfter.vue'
 import HomeHeroIconsCard from './components/home/HomeHeroIconsCard.vue'
+import HomeHeroInfo from "./components/home/HomeHeroInfo.vue";
 import { ICON_STYLE_CONTEXT, iconStyleContext } from './composables/useIconStyle'
 import { CATEGORY_VIEW_CONTEXT, categoryViewContext } from './composables/useCategoryView'
 
@@ -11,6 +12,7 @@ const theme: Partial<Theme> = {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
+      'home-hero-info': () => h(HomeHeroInfo),
       'sidebar-nav-after': () => h(IconsSidebarNavAfter),
       'home-hero-image': () => h(HomeHeroIconsCard)
     })

docs/index.md

@@ -21,7 +21,6 @@ hero:
       link: https://github.com/lucide-icons/lucide
 
 features:
-
   - title: Lightweight & Scalable
     details: Icons are lightweight, highly optimized scalable vector graphics (SVG).
     icon: |