From 79cb35634df11f41704a1e9308688727992dcaa2 Mon Sep 17 00:00:00 2001
From: Karsa <karsa@karsa.org>
Date: Mon, 8 May 2023 16:41:40 +0200
Subject: [PATCH] Adds version badges to hero + icon detail overlay

---
 .../theme/components/base/Badge.vue           |  4 +--
 .../theme/components/home/HomeHeroInfo.vue    | 32 +++++++++++++++++++
 .../components/icons/IconDetailOverlay.vue    |  6 ++--
 docs/.vitepress/theme/index.ts                |  2 ++
 docs/index.md                                 |  1 -
 5 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/home/HomeHeroInfo.vue

diff --git a/docs/.vitepress/theme/components/base/Badge.vue b/docs/.vitepress/theme/components/base/Badge.vue
index 3ff46072c..146309f53 100644
--- a/docs/.vitepress/theme/components/base/Badge.vue
+++ b/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);
diff --git a/docs/.vitepress/theme/components/home/HomeHeroInfo.vue b/docs/.vitepress/theme/components/home/HomeHeroInfo.vue
new file mode 100644
index 000000000..f55e45aa3
--- /dev/null
+++ b/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>
diff --git a/docs/.vitepress/theme/components/icons/IconDetailOverlay.vue b/docs/.vitepress/theme/components/icons/IconDetailOverlay.vue
index de230e481..d1402c0f0 100644
--- a/docs/.vitepress/theme/components/icons/IconDetailOverlay.vue
+++ b/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 {
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 9843d2c97..2ba120c93 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/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)
     })
diff --git a/docs/index.md b/docs/index.md
index ac47a3748..977cc3558 100644
--- a/docs/index.md
+++ b/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: |