Add call for iconNodes

docs/.vitepress/theme/components/icons/IconsOverview.data.ts

@@ -0,0 +1,21 @@
+import { getAllData } from '../../../lib/icons';
+import { getAllCategoryFiles, mapCategoryIconCount } from '../../../lib/categories';
+import iconsMetaData from '../../../data/iconMetaData';
+import { fetchAllReleases } from '../../../../scripts/writeReleaseMetadata.mts';
+import { satisfies } from 'semver';
+
+export default {
+  async load() {
+    const versions = await fetchAllReleases();
+
+    const mappedVersions = versions
+      .map((tag) => tag.replace('v', ''))
+      .reverse()
+
+    mappedVersions.length = 100
+
+    return {
+      versions: mappedVersions,
+    };
+  },
+};

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

@@ -11,12 +11,13 @@ import useSearchShortcut from '../../utils/useSearchShortcut';
 import StickyBar from './StickyBar.vue';
 import useFetchTags from '../../composables/useFetchTags';
 import useFetchCategories from '../../composables/useFetchCategories';
-import useFetchReleaseInfo from '../../composables/useFetchReleaseInfo';
+import useFetchVersionIcons from '../../composables/useFetchVersionIcons';
 import chunkArray from '../../utils/chunkArray';
 import CarbonAdOverlay from './CarbonAdOverlay.vue';
 import VersionSelect from './VersionSelect.vue';
 import { sort, satisfies } from 'semver';
 import useSearchPlaceholder from '../../utils/useSearchPlaceholder.ts';
+import { data as versionData } from './IconsOverview.data';
 
 const ICON_SIZE = 56;
 const ICON_GRID_GAP = 8;
@@ -35,11 +36,15 @@ const props = defineProps<{
 }>();
 
 const activeIconName = ref(null);
-const selectedVersion = ref('Latest version');
+const selectedVersion = ref();
 
 const { execute: fetchTags, data: tags } = useFetchTags();
 const { execute: fetchCategories, data: categories } = useFetchCategories();
-const { execute: fetchReleaseInfo, data: releaseInfo } = useFetchReleaseInfo();
+const { execute: fetchVersionIcons, data: versionIcons } = useFetchVersionIcons(selectedVersion);
+
+watch(selectedVersion, () => {
+  fetchVersionIcons();
+});
 
 const overviewEl = ref<HTMLElement | null>(null);
 const { width: containerWidth } = useElementSize(overviewEl);
@@ -64,28 +69,16 @@ const mappedIcons = computed(() => {
     });
   }
 
-  if (selectedVersion.value === 'Latest version' || releaseInfo.value == null) {
+  if (selectedVersion.value == null || versionIcons.value == null) {
     console.log('no release info');
 
     return icons;
   }
 
-  return icons.filter((icon) => {
-    return satisfies(releaseInfo.value[icon.name], `<=${selectedVersion.value}`);
-  });
-});
-
-const versions = computed(() => {
-  if (releaseInfo.value == null) {
-    return [];
-  }
-  const allVersions = Array.from<string>(
-    new Set(Object.values<string>(releaseInfo.value)).values(),
-  );
-
-  return sort(allVersions, {
-    loose: true,
-  }).reverse();
+  return Object.values(versionIcons.value).filter(([name, iconNode]) => ({
+    name,
+    iconNode,
+  }));
 });
 
 const { searchInput, searchQuery, searchQueryDebounced } = useSearchInput();
@@ -135,11 +128,11 @@ function onFocusSearchInput() {
   }
 }
 
-function onFocusVersionSelect() {
-  if (releaseInfo.value == null) {
-    fetchReleaseInfo();
-  }
-}
+// function onFocusVersionSelect() {
+//   if (releaseInfo.value == null) {
+//     fetchReleaseInfo();
+//   }
+// }
 
 const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
 
@@ -172,8 +165,7 @@ function handleCloseDrawer() {
       />
       <VersionSelect
         v-model="selectedVersion"
-        :versions="versions"
-        @focus="onFocusVersionSelect"
+        :versions="versionData.versions"
       />
     </StickyBar>
     <NoResults

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

@@ -1,38 +1,38 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed } from 'vue';
 import {
   Combobox,
   ComboboxInput,
   ComboboxButton,
   ComboboxOptions,
   ComboboxOption,
-} from '@headlessui/vue'
+} from '@headlessui/vue';
 
-import { chevronsUpDown, check }  from '../../../data/iconNodes'
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import { chevronsUpDown, check } from '../../../data/iconNodes';
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
 
-const model = defineModel<string>()
+const model = defineModel<string | undefined>();
 const props = defineProps<{
-  versions: string[]
-}>()
+  versions: string[];
+}>();
 
-let query = ref('')
+let query = ref('');
 
 let filteredVersions = computed(() =>
   query.value === ''
-    ? ['Latest version', ...props.versions]
+    ? [...props.versions]
     : props.versions.filter((version) =>
         version
           .toLowerCase()
           .replace(/\s+/g, '')
-          .includes(query.value.toLowerCase().replace(/\s+/g, ''))
-      )
-)
+          .includes(query.value.toLowerCase().replace(/\s+/g, '')),
+      ),
+);
 
-const emit = defineEmits(['focus'])
+const emit = defineEmits(['focus']);
 
-const ChevronUpDown = createLucideIcon('ChevronUpDown', chevronsUpDown)
-const Check = createLucideIcon('Check', check)
+const ChevronUpDown = createLucideIcon('ChevronUpDown', chevronsUpDown);
+const Check = createLucideIcon('Check', check);
 </script>
 
 <template>
@@ -46,11 +46,13 @@ const Check = createLucideIcon('Check', check)
           @focus="emit('focus')"
         />
         <ComboboxButton class="combobox-button">
-          <ChevronUpDown class="icon-chevron" aria-hidden="true" />
+          <ChevronUpDown
+            class="icon-chevron"
+            aria-hidden="true"
+          />
         </ComboboxButton>
       </div>
 
-
       <ComboboxOptions class="combobox-options">
         <div
           v-if="versions.length === 0 && query !== ''"
@@ -68,20 +70,23 @@ const Check = createLucideIcon('Check', check)
         >
           <li
             class="combobox-option"
-            :class="{ 'active': active }"
+            :class="{ active: active }"
           >
             <span
               class="combobox-option-text"
-              :class="{ 'selected': selected }"
+              :class="{ selected: selected }"
             >
               {{ version }}
             </span>
             <span
               v-if="selected"
               class="combobox-option-icon"
-              :class="{ 'active': active }"
+              :class="{ active: active }"
             >
-              <Check class="icon-check" aria-hidden="true" />
+              <Check
+                class="icon-check"
+                aria-hidden="true"
+              />
             </span>
           </li>
         </ComboboxOption>
@@ -113,10 +118,11 @@ const Check = createLucideIcon('Check', check)
   line-height: 1.25rem;
   color: var(--vp-c-text-1);
   border: 1px solid transparent;
-  transition: border-color .15s ease-in-out;
+  transition: border-color 0.15s ease-in-out;
 }
 
-.combobox-input:hover, .combobox-input:focus {
+.combobox-input:hover,
+.combobox-input:focus {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-bg-alt);
 }
@@ -129,7 +135,7 @@ const Check = createLucideIcon('Check', check)
   display: flex;
   align-items: center;
   padding-right: 0.5rem;
-  z-index: 10;;
+  z-index: 10;
 }
 
 .icon-chevron {
@@ -173,7 +179,9 @@ const Check = createLucideIcon('Check', check)
   font-size: 14px;
   font-weight: 500;
   white-space: nowrap;
-  transition: background-color .25s,color .25s;
+  transition:
+    background-color 0.25s,
+    color 0.25s;
 }
 
 .combobox-option.active {

docs/.vitepress/theme/composables/useFetchReleaseInfo.ts

@@ -1,12 +0,0 @@
-import { useFetch } from '@vueuse/core';
-
-const useFetchTags = () =>
-  useFetch<Record<string, string>>(
-    `${import.meta.env.DEV ? 'http://localhost:3000' : ''}/api/release-info`,
-    {
-      immediate:
-        typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('version'),
-    },
-  ).json();
-
-export default useFetchTags;

docs/.vitepress/theme/composables/useFetchVersionIcons.ts

@@ -0,0 +1,17 @@
+import { useFetch } from '@vueuse/core';
+import { computed, Ref } from 'vue';
+
+const useFetchVersionIcons = (version: Ref<string | undefined>) =>{
+  const fetchUrl = computed(() => {
+    if(version.value == null ) return ''
+    return `https://unpkg.com/lucide-static@${version.value}/icon-nodes.json`
+  })
+  return useFetch<Record<string, string>>(
+    fetchUrl,
+    {
+      refetch: true
+    }
+  ).json();
+}
+
+export default useFetchVersionIcons;

docs/package.json

@@ -9,14 +9,14 @@
     "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",
-    "prebuild:releaseJson": "node ./scripts/writeReleaseMetadata.mjs",
-    "prebuild:categoriesJson": "node ./scripts/writeCategoriesMetadata.mjs",
-    "prebuild:relatedIcons": "node ./scripts/writeIconRelatedIcons.mjs",
-    "prebuild:iconDetails": "node ./scripts/writeIconDetails.mjs",
-    "prebuild:brandStopwords": "node ./scripts/writeBrandStopwords.mjs",
-    "postbuild:vercelJson": "node ./scripts/writeVercelOutput.mjs",
+    "prebuild:iconNodes": "node ./scripts/writeIconNodes.mts",
+    "prebuild:metaJson": "node ./scripts/writeIconMetaIndex.mts",
+    "prebuild:releaseJson": "node ./scripts/writeReleaseMetadata.mts",
+    "prebuild:categoriesJson": "node ./scripts/writeCategoriesMetadata.mts",
+    "prebuild:relatedIcons": "node ./scripts/writeIconRelatedIcons.mts",
+    "prebuild:iconDetails": "node ./scripts/writeIconDetails.mts",
+    "prebuild:brandStopwords": "node ./scripts/writeBrandStopwords.mts",
+    "postbuild:vercelJson": "node ./scripts/writeVercelOutput.mts",
     "dev": "npx nitropack dev",
     "prebuild:api": "npx nitropack prepare",
     "build:api": "npx nitropack build",

docs/scripts/writeIconRelatedIcons.mts

@@ -42,7 +42,7 @@ const getRelatedIcons = (currentIcon, icons) => {
 };
 
 const iconsMetaDataPromises = svgFiles.map(async (iconName) => {
-  const metaDataFileContent = await fs.promises.readFile(`../icons/${iconName}`);
+  const metaDataFileContent = await fs.promises.readFile(`../icons/${iconName}`, 'utf-8');
   const metaData = JSON.parse(metaDataFileContent);
 
   const name = iconName.replace('.json', '');

docs/scripts/writeReleaseMetadata.mts

@@ -29,7 +29,7 @@ if (!fs.existsSync(releaseMetaDataDirectory)) {
   fs.mkdirSync(releaseMetaDataDirectory);
 }
 
-const fetchAllReleases = async () => {
+export const fetchAllReleases = async () => {
   await git.fetch('https://github.com/lucide-icons/lucide.git', '--tags');
 
   return Promise.all(
@@ -73,7 +73,7 @@ const comparisonsPromises = tags.map(async (tag, index) => {
 const comparisons = await Promise.all(comparisonsPromises);
 const newReleaseMetaData = {};
 
-comparisons.forEach(({ tag, iconFiles, date } = {}) => {
+comparisons.forEach(({ tag, iconFiles, date } = {} as typeof comparisons[number]) => {
   if (tag == null) return;
 
   iconFiles.forEach(({ status, file, renamedFile }) => {

docs/scripts/writeVercelOutput.mts

@@ -11,7 +11,7 @@ const iconMetaData = await getIconMetaData(path.resolve(scriptDir, '../../icons'
 const iconAliasesRedirectRoutes = Object.entries(iconMetaData)
   .filter(([, { aliases }]) => aliases?.length)
   .map(([iconName, { aliases }]) => {
-    const aliasRouteMatches = aliases.map((alias) => alias.name).join('|');
+    const aliasRouteMatches = aliases.map((alias) => typeof alias === 'string' ? alias : alias.name).join('|');
 
     return {
       src: `/icons/${aliasRouteMatches}`,