chore(website/resources): add descriptions to fonts

apps/icon-pack-builder/src/provider.ts

@@ -13,5 +13,6 @@ export interface IconPackData {
     meta: {
         version: string;
         website: string;
+        description: string;
     }
 }

apps/icon-pack-builder/src/providers/boxicons3.ts

@@ -40,7 +40,10 @@ export default function buildIcons(pack: "basic" | "brands"): IconPackData {
         },
         meta: {
             version: "3.0.0",
-            website: "https://boxicons.com/"
+            website: "https://boxicons.com/",
+            description: pack === "basic"
+                ? "The Basic set of icons from Boxicons v3. This is an upgrade from Trilium's built-in icon pack (Boxicons v2)."
+                : "The brand set of icons from Boxicons v3."
         }
     };
 }

apps/icon-pack-builder/src/providers/mdi.ts

@@ -25,7 +25,8 @@ export default function buildIcons(): IconPackData {
         },
         meta: {
             version: packageJson.version,
-            website: "https://pictogrammers.com/library/mdi/"
+            website: "https://pictogrammers.com/library/mdi/",
+            description: "The community Material Design Icons pack (@mdi/font). Not to be confused with Google's own Material Design Icons."
         }
     };
 }

apps/icon-pack-builder/src/providers/phosphor.ts

@@ -46,7 +46,10 @@ export default function buildIcons(packName: "regular" | "fill"): IconPackData {
         },
         meta: {
             version: packageJson.version,
-            website: "https://phosphoricons.com/"
+            website: "https://phosphoricons.com/",
+            description: packName === "regular"
+                ? "The regular weight version of Phosphor Icons."
+                : "The filled version of Phosphor Icons."
         }
     };
 }

apps/website/public/resources/icon-packs/Boxicons 3 (Basic).json

@@ -2,5 +2,6 @@
   "name": "Boxicons 3 (Basic)",
   "file": "Boxicons 3 (Basic).zip",
   "version": "3.0.0",
-  "website": "https://boxicons.com/"
+  "website": "https://boxicons.com/",
+  "description": "The Basic set of icons from Boxicons v3. This is an upgrade from Trilium's built-in icon pack (Boxicons v2)."
 }

apps/website/public/resources/icon-packs/Boxicons 3 (Brands).json

@@ -2,5 +2,6 @@
   "name": "Boxicons 3 (Brands)",
   "file": "Boxicons 3 (Brands).zip",
   "version": "3.0.0",
-  "website": "https://boxicons.com/"
+  "website": "https://boxicons.com/",
+  "description": "The brand set of icons from Boxicons v3."
 }

apps/website/public/resources/icon-packs/Material Design Icons.json

@@ -2,5 +2,6 @@
   "name": "Material Design Icons",
   "file": "Material Design Icons.zip",
   "version": "7.4.47",
-  "website": "https://pictogrammers.com/library/mdi/"
+  "website": "https://pictogrammers.com/library/mdi/",
+  "description": "The community Material Design Icons pack (@mdi/font). Not to be confused with Google's own Material Design Icons."
 }

apps/website/public/resources/icon-packs/Phosphor Icons (Fill).json

@@ -2,5 +2,6 @@
   "name": "Phosphor Icons (Fill)",
   "file": "Phosphor Icons (Fill).zip",
   "version": "2.1.2",
-  "website": "https://phosphoricons.com/"
+  "website": "https://phosphoricons.com/",
+  "description": "The filled version of Phosphor Icons."
 }

apps/website/public/resources/icon-packs/Phosphor Icons (Regular).json

@@ -2,5 +2,6 @@
   "name": "Phosphor Icons (Regular)",
   "file": "Phosphor Icons (Regular).zip",
   "version": "2.1.2",
-  "website": "https://phosphoricons.com/"
+  "website": "https://phosphoricons.com/",
+  "description": "The regular weight version of Phosphor Icons."
 }

apps/website/src/pages/Resources/Resources.css

@@ -1,9 +1,24 @@
 .icon-packs .card-content {
+    .card-content-inner {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+    }
+
+    .description {
+        font-size: 0.8em;
+        margin: 0;
+        flex-grow: 1;
+        height: 100%;
+    }
+
     footer {
         padding: 0;
         border: 0;
         display: flex;
         align-items: center;
+        margin-top: 1em;
         justify-content: space-between;
+        flex-grow: 1;
     }
 }

apps/website/src/pages/Resources/Resources.tsx

@@ -34,6 +34,7 @@ export default function Resources() {
                         key={meta.name}
                         title={<>{meta.name} <small>{meta.version}</small></>}
                     >
+                        <p className="description">{meta.description}</p>
                         <footer>
                             <Button href={`/resources/icon-packs/${meta.file}`} download text="Download" />
                             <Link href={meta.website} openExternally>Website</Link>