feat: display hidden iconset (#384)

scripts/prepare.ts

@@ -27,8 +27,11 @@ async function prepareJSON() {
 
   const collections = Object
     .entries(raw)
-    .map(([id, v]) => ({ ...(v as any), id }))
-    .filter(v => v.hidden !== true)
+    .map(([id, v]) => ({
+      ...(v as any),
+      id,
+      category: (v as any).hidden ? 'Deprecated / Unavailable' : (v as any).category,
+    }))
 
   const collectionsMeta = []
 

src/components/CollectionEntry.vue

@@ -13,14 +13,18 @@ defineProps<{
     :key="collection.id"
     p3 relative
     border="~ base"
+    :class="{ 'border-dashed': collection.hidden }"
     class="grid grid-cols-[1fr_90px] gap2 items-center color-base transition-all translate-z-0 group"
     hover="text-primary !border-primary shadow"
     :to="`/collection/${collection.id}`"
   >
     <div ml2>
-      <div class="flex-auto text-lg leading-1em my1">
+      <div class="flex-auto text-lg leading-1em my1" :class="{ 'line-through group-hover:no-underline': collection.hidden }">
         {{ collection.name }}
-        <span v-if="isFavoritedCollection(collection.id)" m="l--0.5" op80 text-xs inline-block align-top i-carbon-star-filled />
+        <span inline-flex align-top flex="items-center gap-0.5" m="l--0.5">
+          <div v-if="isFavoritedCollection(collection.id)" op80 text-xs i-carbon-star-filled />
+          <div v-if="collection.hidden" op80 text-xs text-orange i-carbon:information-disabled />
+        </span>
       </div>
       <div flex="~ col auto" opacity-50 text-xs>
         <span>{{ collection.author?.name }}</span>
@@ -46,6 +50,7 @@ defineProps<{
       <button
         border="~ primary" p2 bg-base
         :title="isFavoritedCollection(collection.id) ? 'Remove from favorites' : 'Add to favorites'"
+        :class="{ 'border-dashed': collection.hidden }"
         @click.prevent="toggleFavoriteCollection(collection.id)"
       >
         <div v-if="isFavoritedCollection(collection.id)" i-carbon-star-filled />
@@ -55,6 +60,7 @@ defineProps<{
         v-if="type === 'recent'"
         border="~ primary" p2 bg-base ml--1px
         :title="type === 'recent' ? 'Remove from recent' : type === 'favorite' || isFavoritedCollection(collection.id) ? 'Remove from favorites' : 'Add to favorites'"
+        :class="{ 'border-dashed': collection.hidden }"
         @click.prevent="removeRecentCollection(collection.id)"
       >
         <div i-carbon-delete />

src/components/Drawer.vue

@@ -67,6 +67,7 @@ const collections = computed(() => {
       >
         <div class="text-base leading-tight">
           {{ collection.name }}
+          <span v-if="collection.hidden" m="l--0.5" op80 text-xs text-orange inline-block align-top i-carbon:information-disabled />
         </div>
         <div class="text-xs block opacity-50 mt-1">
           {{

src/components/IconSet.vue

@@ -193,26 +193,30 @@ useEventListener(categoriesContainer, 'wheel', (e: WheelEvent) => {
             <div class="flex-auto px-2">
               <NavPlaceholder class="md:hidden" />
 
-              <div class="text-gray-900 text-xl flex select-none dark:text-gray-200">
-                <div class="whitespace-no-wrap overflow-hidden">
+              <div class="text-gray-900 text-xl flex items-center select-none dark:text-gray-200">
+                <div class="whitespace-no-wrap of-hidden">
                   {{ collection.name }}
                 </div>
-                <a
-                  v-if="url"
-                  class="ml-1 mt-1 text-base opacity-25 hover:opacity-100"
-                  :href="url"
-                  target="_blank"
-                >
-                  <Icon icon="la:external-link-square-alt-solid" />
-                </a>
-                <a
-                  v-if="npm"
-                  class="ml-1 mt-1 text-base opacity-25 hover:opacity-100"
-                  :href="npm"
-                  target="_blank"
-                >
-                  <Icon icon="la:npm" />
-                </a>
+                <!-- Information icons -->
+                <div ml-1 flex="~ items-center gap-1">
+                  <div v-if="collection.hidden" i-carbon:information-disabled text="orange sm" title="The icon set was deprecated and is no longer available" />
+                  <a
+                    v-if="url"
+                    class="flex items-center text-base opacity-25 hover:opacity-100"
+                    :href="url"
+                    target="_blank"
+                  >
+                    <Icon icon="la:external-link-square-alt-solid" />
+                  </a>
+                  <a
+                    v-if="npm"
+                    class="flex items-center text-base opacity-25 hover:opacity-100"
+                    :href="npm"
+                    target="_blank"
+                  >
+                    <Icon icon="la:npm" />
+                  </a>
+                </div>
                 <div class="flex-auto" />
               </div>
               <div class="text-xs block opacity-50">

src/data/index.ts

@@ -30,6 +30,10 @@ export interface CollectionInfo {
   palette?: string
   total?: number
   prepacked?: IconifyJSON
+  /**
+   * The icon set was deprecated and is no longer available
+   */
+  hidden?: boolean
 }
 
 export interface CollectionMeta extends CollectionInfo {
@@ -43,6 +47,7 @@ const installed = ref<string[]>([])
 
 export const collections = infoJSON.map(c => Object.freeze(c as any as CollectionInfo))
 export const enabledCollections = computed(() => collections.filter(c => !isExcludedCollection(c)))
+
 export const categories = Array.from(new Set(collections.map(i => i.category).filter(notNullish)))
 
 export const isSearchOpen = ref(false)

src/pages/index.vue

@@ -5,6 +5,7 @@ import { categories, categorySearch, favoritedCollections, filteredCollections,
 const searchbar = ref<{ input: HTMLElement }>()
 
 const categorized = ref(getIconList(categorySearch.value))
+const availableCategories = computed(() => categorized.value.filter(c => c.collections.length > 0))
 
 let categorizeDebounceTimer: NodeJS.Timeout | null = null
 
@@ -55,7 +56,8 @@ onKeyStroke('/', (e) => {
 })
 onMounted(() => searchbar.value?.input.focus())
 
-const isMacOS = navigator.platform.toUpperCase().includes('MAC')
+const platform = (navigator as any).userAgentData?.platform || navigator.platform || ''
+const isMacOS = platform.toUpperCase().includes('MAC')
 
 function onKeydown(e: KeyboardEvent) {
   if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
@@ -93,11 +95,11 @@ function onKeydown(e: KeyboardEvent) {
         </RouterLink>
       </div>
 
-      <div of-y-auto>
+      <div of-y-auto relative space-y-6>
         <!-- Category listing -->
-        <template v-for="c of categorized" :key="c.name">
-          <div v-if="(c.collections).length" px4>
-            <div px-2 op50 mt6 text-lg>
+        <template v-for="c of availableCategories" :key="c.name">
+          <div px4>
+            <div px-2 text-op-50 text-lg sticky top-0 bg-base z-1>
               {{ c.name }}
             </div>
             <CollectionEntries
@@ -109,12 +111,13 @@ function onKeydown(e: KeyboardEvent) {
         </template>
 
         <div
-          v-if="categorized.every(c => !c.collections.length)"
+          v-if="availableCategories.length === 0"
           class="flex flex-col flex-grow w-full py-6 justify-center items-center"
         >
           <Icon icon="ph:x-circle-bold" class="text-4xl mb-2 opacity-20" />
           <span class="text-lg opacity-60">There is no result corresponding to your search query.</span>
         </div>
+
         <Footer />
       </div>
     </div>

src/store/localstorage.ts

@@ -24,6 +24,7 @@ export const selectedPackageManager = useStorage<string>('icones-package-manager
 export const excludedCollectionIds = useStorage<string[]>('icones-excluded-collections', [])
 export const excludedCategories = useStorage<string[]>('icones-excluded-categories', [
   'Archive / Unmaintained',
+  'Deprecated / Unavailable',
 ])
 
 export function getTransformedId(icon: string) {

unocss.config.ts

@@ -2,7 +2,7 @@ import { defineConfig, presetAttributify, presetIcons, presetWind3, transformerD
 
 export default defineConfig({
   shortcuts: {
-    'border-base': 'border-hex-888/15',
+    'border-base': 'border-hex-888/25',
     'border-dark-only': 'border-transparent dark:border-dark-100',
     'bg-base': 'bg-white dark:bg-[#181818]',
     'color-base': 'text-gray-900 dark:text-gray-300',