Site improvements and update site dependencies (#1805)

* try to speed up build times

* Update deps

* Update site deps and fix search issue

* Small improvements

* fix imports

* Remove unused var

CONTRIBUTING.md

@@ -72,8 +72,8 @@ pnpm install # Install dependencies, including the workspace packages
 
 To distribute different packages we use PNPM workspaces. Before you start make sure you are familiar with this concept. The concept of working in workspaces is created by Yarn, they have a well written introduction: [yarn workspaces](https://classic.yarnpkg.com/lang/enhttps://lucide.dev/docs/workspaces).
 
-The configured directory for workspaces is the [packages](./packages) directory, located in the root directory. There you will find all the current packages from lucide.
-There are more workspaces defined, see [`pnpm-workspace.yaml`](./pnpm-workspace.yaml).
+The configured directory for workspaces is the [packages](https://github.com/lucide-icons/lucide/tree/main/packages) directory, located in the root directory. There you will find all the current packages from lucide.
+There are more workspaces defined, see [`pnpm-workspace.yaml`](https://github.com/lucide-icons/lucide/blob/main/pnpm-workspace.yaml).
 
 > Note: One package is not managed by pnpm:  **lucide-flutter**, this package is written in Dart and used pub for publishing.
 
@@ -153,7 +153,7 @@ lucide
 
 ### Docs
 
-The lucide.dev website is using [vitepress](https://vitepress.dev/) to generate the static website. The markdown files are located in the docs directory. 
+The lucide.dev website is using [vitepress](https://vitepress.dev/) to generate the static website. The markdown files are located in the docs directory.
 
 ### Guides
 

docs/.vitepress/sidebar.ts

@@ -74,10 +74,6 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
         },
         {
           text: 'Lucide Vue',
-          link: '/guide/packages/lucide-vue'
-        },
-        {
-          text: 'Lucide Vue Next (Vue 3)',
           link: '/guide/packages/lucide-vue-next'
         },
         {
@@ -100,10 +96,6 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
           text: 'Lucide Static',
           link: '/guide/packages/lucide-static'
         },
-        {
-          text: 'Lucide Flutter',
-          link: '/guide/packages/lucide-flutter'
-        },
       ]
     },
     {

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

@@ -9,8 +9,6 @@ const props = defineProps<{
 }>()
 
 const component = computed(() => props.href ? 'a' : 'div')
-
-
 </script>
 
 <template>
@@ -25,7 +23,7 @@ const component = computed(() => props.href ? 'a' : 'div')
 </template>
 
 <style>
-.badge, a.badge {
+.badge, a.badge, .vp-doc a.badge {
   display: block;
   border: 1px solid transparent;
   text-align: center;
@@ -60,4 +58,6 @@ const component = computed(() => props.href ? 'a' : 'div')
   /* color: var(--vp-button-alt-active-text);
   background-color: var(--vp-button-alt-active-bg); */
 }
+
+
 </style>

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

@@ -94,8 +94,7 @@ const ChevronUp = createLucideIcon('ChevronUp', chevronUp)
 .menu {
   position: relative;
 }
-.menu-items {
-  --menu-offset: 44px;
+ul.menu-items {
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -103,7 +102,7 @@ const ChevronUp = createLucideIcon('ChevronUp', chevronUp)
   padding: 12px;
   min-width: 128px;
   border: 1px solid var(--vp-c-divider);
-  background-color: var(--vp-c-bg);
+  background-color: var(--vp-c-bg-elv);
   box-shadow: var(--vp-shadow-3);
   transition: background-color 0.5s;
   max-height: calc(100vh - var(--vp-nav-height));
@@ -124,11 +123,12 @@ const ChevronUp = createLucideIcon('ChevronUp', chevronUp)
   color: var(--vp-c-text-1);
   white-space: nowrap;
   transition: background-color .25s,color .25s;
+  list-style: none;
 }
 
 .menu-item:hover {
   color: var(--vp-c-brand);
-  background-color: var(--vp-c-bg-elv-mute);
+  background-color: var(--vp-c-default-soft);
 }
 
 .menu-item:active {
@@ -170,11 +170,11 @@ const ChevronUp = createLucideIcon('ChevronUp', chevronUp)
 }
 
 .menu-items.bottom {
-  top: var(--menu-offset);
+  top: 32px;
 }
 
 .menu-items.top {
-  bottom: var(--menu-offset);
+  bottom: 48px;
 }
 
 .arrow-up-button.top::before {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineProps, onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 const props = defineProps<{
   groups: string[] | undefined,
   groupName: string,

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

@@ -17,7 +17,7 @@ const SearchIcon = createLucideIcon('search', search)
   background: var(--vp-c-bg-soft);
   border-radius: 8px;
   color: var(--vp-c-text-2);
-  padding: 12px 16px;
+  padding: 11px 16px;
   height: auto;
   font-size: 14px;
   /* box-shadow: var(--vp-shadow-4), var(--vp-shadow-2); */

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
 import { useCategoryView } from '../../composables/useCategoryView';
 
 interface Header {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { startCase, camelCase } from 'lodash-es'
 import ButtonMenu from '../base/ButtonMenu.vue'
 import { useIconStyleContext } from '../../composables/useIconStyle';

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { IconEntity } from '../../types'
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
 import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
 import IconButton from '../base/IconButton.vue';
 import IconContributors from './IconContributors.vue';

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

@@ -19,7 +19,12 @@ function setActiveIcon(name: string) {
 
 <template>
   <div class="icons">
-    <div class="icon" v-for="icon in icons" :key="icon.name">
+    <div
+      class="icon"
+      v-for="icon in icons"
+      v-memo="[icon.name]"
+      :key="icon.name"
+    >
       <IconItem
         v-bind="icon"
         @setActiveIcon="setActiveIcon(icon.name)"

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
 import { useMediaQuery } from '@vueuse/core';
 import { useRouter } from 'vitepress';
@@ -27,7 +28,10 @@ const showOverlay = useMediaQuery('(min-width: 860px)');
 const { animate, confetti, confettiText } = useConfetti()
 
 
-const icon = createLucideIcon(props.name, props.iconNode)
+const icon = computed(() => {
+  if (!props.name || !props.iconNode) return null
+  return createLucideIcon(props.name, props.iconNode)
+})
 
 async function navigateToIcon(event) {
 

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

@@ -6,7 +6,6 @@ import InputSearch from '../base/InputSearch.vue';
 import useSearchInput from '../../composables/useSearchInput';
 import StickyBar from './StickyBar.vue';
 import IconsCategory from './IconsCategory.vue';
-import { useFetch } from '@vueuse/core';
 import useFetchTags from '../../composables/useFetchTags';
 import useFetchCategories from '../../composables/useFetchCategories';
 

docs/.vitepress/theme/composables/useSearchInput.ts

@@ -3,12 +3,8 @@ import { nextTick, onMounted, ref, watch } from 'vue';
 
 const useSearchInput = () => {
   const searchInput = ref();
-  const searchQuery = ref(
-    typeof window === 'undefined'
-      ? ''
-      : new URLSearchParams(window.location.search).get('search') || ''
-  );
-  const searchQueryDebounced = useDebounce(searchQuery, 250);
+  const searchQuery = ref<string>('');
+  const searchQueryDebounced = useDebounce<string>(searchQuery, 200);
 
   watch(searchQueryDebounced, (searchString) => {
     const newUrl = new URL(window.location.href);
@@ -26,6 +22,11 @@ const useSearchInput = () => {
 
   onMounted(() => {
     const searchParams = new URLSearchParams(window.location.search);
+
+    if (searchParams.has('search')) {
+      searchQuery.value = searchParams.get('search');
+    }
+
     if (searchParams.has('focus')) {
       searchInput.value.focus();
     }

docs/guide/packages/lucide-react.md

@@ -109,7 +109,8 @@ Example with React suspense:
 
 ```tsx
 import React, { lazy, Suspense } from 'react';
-import { dynamicIconImports, LucideProps } from 'lucide-react';
+import { LucideProps } from 'lucide-react';
+import dynamicIconImports from 'lucide-react/dynamicIconImports';
 
 const fallback = <div style={{ background: '#ddd', width: 24, height: 24 }}/>
 

docs/license.md

@@ -1,5 +1,6 @@
 ---
 aside: false
+editLink: false
 ---
 
 # Lucide License

docs/nitro.config.ts

@@ -2,7 +2,7 @@ import copy from 'rollup-plugin-copy';
 import replace from '@rollup/plugin-replace';
 
 export default defineNitroConfig({
-  preset: 'vercel-edge',
+  preset: 'vercel_edge',
   srcDir: '.vitepress',
   routeRules: {
     '/api/**': { cors: false },

docs/package.json

@@ -5,9 +5,9 @@
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "docs:dev": "pnpm prebuild && pnpm prepare && vitepress dev",
-    "docs:build": "pnpm prebuild && pnpm prepare && vitepress build",
-    "docs:preview": "pnpm prebuild && pnpm prepare && vitepress preview",
+    "docs:dev": "pnpm run /^prebuild:.*/ && vitepress dev",
+    "docs:build": "pnpm run /^prebuild:.*/ && vitepress build",
+    "docs:preview": "vitepress preview",
     "build:docs": "vitepress build",
     "prebuild:iconNodes": "node ../scripts/writeIconNodes.mjs",
     "prebuild:metaJson": "node ../scripts/writeIconMetaIndex.mjs",
@@ -16,10 +16,9 @@
     "prebuild:iconDetails": "node ../scripts/writeIconDetails.mjs",
     "postbuild:vercelJson": "node ../scripts/writeVercelOutput.mjs",
     "dev": "npx nitropack dev",
-    "prepare": "npx nitropack prepare",
+    "prebuild:api": "npx nitropack prepare",
     "build:api": "npx nitropack build",
-    "prebuild": "pnpm prebuild:iconNodes && pnpm prebuild:metaJson && pnpm prebuild:releaseJson && pnpm prebuild:relatedIcons && pnpm prebuild:iconDetails",
-    "build": "pnpm prebuild && pnpm build:api && pnpm build:docs && pnpm postbuild:vercelJson",
+    "build": "pnpm run /^prebuild:.*/ && pnpm run /^build:.*/ && pnpm postbuild:vercelJson",
     "preview": "node .output/server/index.mjs"
   },
   "author": "Eric Fennis",
@@ -28,17 +27,17 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@types/semver": "^7.5.3",
     "h3": "^1.8.0",
-    "nitropack": "npm:nitropack-edge@latest",
+    "nitropack": "2.8.1",
     "node-fetch": "2",
     "rollup-plugin-copy": "^3.4.0",
-    "vitepress": "1.0.0-rc.30"
+    "vitepress": "1.0.0-rc.36"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.0.1",
-    "@headlessui/vue": "^1.7.13",
+    "@floating-ui/vue": "^1.0.3",
+    "@headlessui/vue": "^1.7.17",
     "@resvg/resvg-wasm": "^2.4.1",
-    "@vueuse/components": "^10.1.0",
-    "@vueuse/core": "^10.1.0",
+    "@vueuse/components": "^10.7.2",
+    "@vueuse/core": "^10.7.2",
     "element-to-path": "^1.2.1",
     "fuse.js": "^6.5.3",
     "js-yaml": "^4.1.0",
@@ -49,13 +48,13 @@
     "lucide-vue-next": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sandpack-vue3": "^3.1.6",
+    "sandpack-vue3": "^3.1.9",
     "semver": "^7.5.2",
     "shikiji": "^0.7.4",
     "simple-git": "^3.18.0",
     "sitemap": "^7.1.1",
     "svg-pathdata": "^6.0.3",
     "svgson": "^5.2.1",
-    "vue": "^3.2.47"
+    "vue": "^3.4.13"
   }
 }