chore: some refactoring and added phosphor icons

package.json

@@ -20,6 +20,7 @@
         "@fontsource/source-code-pro": "^5.0.16",
         "@fontsource/source-sans-pro": "^5.0.8",
         "@fontsource/space-mono": "^5.0.20",
+        "@phosphor-icons/core": "^2.1.1",
         "@preact/signals": "^1.3.0",
         "@types/jsdom": "^21.1.7",
         "astro": "^4.15.11",

src/client/ComboBox.tsx

@@ -1,6 +1,7 @@
 import { type ComponentChildren } from 'preact'
 import { useState, useRef, useEffect } from 'preact/hooks'
 import { clsx, isMobile } from './lib/util'
+import { PhosphorIcon } from './Icon'
 
 export const ComboBox = ({
     value,
@@ -40,7 +41,8 @@ export const ComboBox = ({
         >
             <div class="selected" onClick={() => setOpen(!open)}>
                 <div class="content">{children[value]}</div>
-                <span class="material-symbols-outlined">expand_more</span>
+                {/* <span class="material-symbols-outlined">expand_more</span> */}
+                <PhosphorIcon name="caret-down" />
             </div>
             {open && (
                 <div

src/client/Icon.tsx

@@ -0,0 +1,21 @@
+const icons = Object.fromEntries(
+    Object.entries(
+        import.meta.glob<{ default: ImageMetadata }>(`node_modules/@phosphor-icons/core/assets/light/*.svg`, {
+            eager: true,
+        })
+    ).map(([path, module]) => [path.split('/').pop()!.split('.')[0].replace('-light', ''), module])
+)
+
+type Props = {
+    name: string
+}
+
+export const PhosphorIcon = ({ name }: Props) => {
+    const icon = icons[name]
+
+    if (!icon) {
+        throw new Error(`Icon "${name}" not found`)
+    }
+
+    return <img class="phosphor-icon" src={icon.default.src} alt={name} />
+}

src/client/UtentiPage.tsx

@@ -3,6 +3,7 @@ import Fuse from 'fuse.js'
 import { useEffect } from 'preact/hooks'
 import { ShowMore } from './Paginate'
 import { ComboBox } from './ComboBox'
+import { PhosphorIcon } from './Icon'
 
 type User = {
     uid: string
@@ -11,15 +12,15 @@ type User = {
 
 const FILTERS = {
     utenti: {
-        icon: 'person',
+        icon: 'user',
         label: 'Utenti',
     },
     macchinisti: {
-        icon: 'construction',
+        icon: 'wrench',
         label: 'Macchinisti',
     },
     rappstud: {
-        icon: 'account_balance',
+        icon: 'bank',
         label: 'Rappresentanti',
     },
 }
@@ -105,7 +106,9 @@ export const UtentiPage = () => {
                         Object.entries(FILTERS).map(([k, v]) => [
                             k,
                             <>
-                                <span class="material-symbols-outlined">{v.icon}</span> {v.label}
+                                {/* <span class="material-symbols-outlined">{v.icon}</span> {v.label} */}
+                                <PhosphorIcon name={v.icon} />
+                                {v.label}
                             </>,
                         ])
                     )}
@@ -117,7 +120,8 @@ export const UtentiPage = () => {
                         onInput={e => ($searchText.value = e.currentTarget.value)}
                         value={$searchText.value}
                     />
-                    <span class="material-symbols-outlined">search</span>
+                    {/* <span class="material-symbols-outlined">search</span> */}
+                    <PhosphorIcon name="magnifying-glass" />
                 </div>
             </div>
             <div class="search-results">
@@ -126,13 +130,22 @@ export const UtentiPage = () => {
                         {poissonUser => (
                             <div class="search-result">
                                 <div class="icon">
-                                    <span class="material-symbols-outlined">
+                                    {/* <span class="material-symbols-outlined">
                                         {RAPPSTUD.includes(poissonUser.uid)
                                             ? 'account_balance'
                                             : MACCHINISTI.includes(poissonUser.uid)
                                             ? 'construction'
                                             : 'person'}
-                                    </span>
+                                    </span> */}
+                                    <PhosphorIcon
+                                        name={
+                                            RAPPSTUD.includes(poissonUser.uid)
+                                                ? 'bank'
+                                                : MACCHINISTI.includes(poissonUser.uid)
+                                                ? 'wrench'
+                                                : 'user'
+                                        }
+                                    />
                                 </div>
                                 <div class="text">{poissonUser.gecos}</div>
                                 <div class="right">
@@ -140,7 +153,8 @@ export const UtentiPage = () => {
                                         href={`https://poisson.phc.dm.unipi.it/~${poissonUser.uid}`}
                                         target="_blank"
                                     >
-                                        <span class="material-symbols-outlined">open_in_new</span>
+                                        {/* <span class="material-symbols-outlined">open_in_new</span> */}
+                                        <PhosphorIcon name="arrow-square-out" />
                                     </a>
                                 </div>
                             </div>

src/components/Bubble.astro

@@ -1,14 +1,11 @@
 ---
-import iconGithub from 'lucide-static/icons/github.svg'
+import PhosphorIcon from './PhosphorIcon.astro'
-import iconLinkedin from 'lucide-static/icons/linkedin.svg'
-import iconGlobe from 'lucide-static/icons/globe.svg'
-import iconMail from 'lucide-static/icons/mail.svg'
 
-const ICONS_MAP = {
+const ICONS_MAP: Record<string, string> = {
-    github: iconGithub,
+    github: 'github-logo',
-    linkedin: iconLinkedin,
+    linkedin: 'linkedin-logo',
-    website: iconGlobe,
+    website: 'globe',
-    mail: iconMail,
+    mail: 'mailbox',
 }
 
 type Props = {
@@ -38,8 +35,7 @@ const { image, fullName, entranceDate, exitDate, description, social } = Astro.p
             <div class="social">
                 {Object.entries(social).map(([key, value]) => (
                     <a href={value} target="_blank" rel="noopener noreferrer">
-                        {/* @ts-ignore */}
+                        <PhosphorIcon name={ICONS_MAP[key] ?? 'question-mark'} />
-                        <img src={ICONS_MAP[key].src} alt={key} />
                     </a>
                 ))}
             </div>

src/components/PhosphorIcon.astro

@@ -0,0 +1,21 @@
+---
+import { Image } from 'astro:assets'
+
+type Props = {
+    name: string
+}
+
+const { name } = Astro.props
+
+const icons = Object.fromEntries(
+    Object.entries(
+        import.meta.glob<{ default: ImageMetadata }>(`node_modules/@phosphor-icons/core/assets/light/*.svg`)
+    ).map(([path, module]) => [path.split('/').pop()!.split('.')[0].replace('-light', ''), module])
+)
+
+if (!icons[name]) {
+    throw new Error(`Icon "${name}" not found`)
+}
+---
+
+<Image class="phosphor-icon" src={icons[name]()} alt={name} />

src/data/macchinisti.yaml

@@ -1,3 +1,5 @@
+# the schema of this file in "@/files.d.ts"
+
 - fullName: Antonio De Lucreziis
   entranceDate: 2019
   description: |

src/pages/macchinisti.astro

@@ -8,27 +8,21 @@ import macchinisti from '@/data/macchinisti.yaml'
 macchinisti.sort((a, b) => b.entranceDate - a.entranceDate)
 
 // Import all images from assets folder
-const images: Record<string, ImageMetadata> = Object.fromEntries(
+const images = Object.fromEntries(
-    await Promise.all(
+    Object.entries(
-        Object.entries(import.meta.glob('@/assets/macchinisti/*')).map(async ([path, module]) => [
+        import.meta.glob<{ default: ImageMetadata }>('@/assets/macchinisti/*', {
-            path.split('/').pop()!.split('.')[0],
+            eager: true,
-            // @ts-ignore
+        })
-            (await module()).default,
+    ).map(([path, module]) => [path.split('/').pop()!.split('.')[0], module])
-        ])
-    )
 )
 
-console.log(macchinisti)
-console.log(images)
-
 const currentMacchinisti = macchinisti.filter(macchinista => !macchinista.exitDate)
 const pastMacchinisti = macchinisti.filter(macchinista => macchinista.exitDate)
 
-const getMacchinistaPicture = (fullName: string): ImageMetadata => {
+const getMacchinistaPicture = (fullName: string) => {
     const macchinistaId = fullName.toLowerCase().replace(/\s+/g, '-')
-    console.log(macchinistaId)
+    const { default: image } = images[macchinistaId] ?? images['fallback']
-
+    return image
-    return images[macchinistaId] ?? images['fallback']
 }
 ---
 

src/styles/components.scss

@@ -8,6 +8,16 @@
     // Components - for complex parts of the UI like search bars or compound buttons
     //
 
+    .phosphor-icon {
+        box-sizing: content-box;
+
+        width: 22px;
+        height: 22px;
+
+        display: grid;
+        place-content: center;
+    }
+
     .material-symbols-outlined {
         font-family: 'Material Symbols Outlined Variable';
         font-weight: normal;
@@ -63,7 +73,8 @@
             padding-left: 0.35rem;
         }
 
-        .material-symbols-outlined {
+        .material-symbols-outlined,
+        .phosphor-icon {
             padding: 0 0.5rem;
         }
     }
@@ -699,7 +710,8 @@
 
         background: var(--filter-bg-color, #ddd);
 
-        .material-symbols-outlined {
+        .material-symbols-outlined,
+        .phosphor-icon {
             padding: 0 0.35rem;
         }
 
@@ -834,7 +846,7 @@
             text-align: center;
             justify-items: center;
             align-content: start;
-            width: 25ch;
+            width: 28ch;
 
             .date {
                 display: grid;
@@ -851,6 +863,11 @@
                 grid-auto-flow: column;
                 gap: 0.5rem;
                 justify-content: center;
+
+                .phosphor-icon {
+                    width: 28px;
+                    height: 28px;
+                }
             }
 
             > img {

src/styles/pages.scss

@@ -647,7 +647,7 @@
             align-items: center;
 
             padding: 6rem;
-            gap: 4rem;
+            gap: 6rem;
         }
     }