Merge pull request #4 from louisescher/simple-icons

Add simple icons, empty search field placeholder

Author: louisescher

CHANGELOG.md

@@ -0,0 +1,5 @@
+# v1.0.1 (Jan. 03, 2025)
+
+- Added a "No results found" text when pagefind doesn't find any results
+- Added [simple icons](https://simpleicons.org) since Lucide is phasing out brand icons
+- Fixed a bug where the (development-only) mock-endpoint for pagefind would error out due to an invalid mime-type

package.json

@@ -1,7 +1,7 @@
 {
   "name": "spectre",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
@@ -15,8 +15,9 @@
     "@astrojs/node": "^9.0.0",
     "@astrojs/sitemap": "^3.2.1",
     "@iconify-json/lucide": "^1.2.20",
+    "@iconify-json/simple-icons": "^1.2.18",
     "@iconify/utils": "^2.2.1",
-    "astro": "^5.1.1",
+    "astro": "^5.1.2",
     "astro-expressive-code": "^0.38.3",
     "sharp": "^0.33.5"
   },

pnpm-lock.yaml

@@ -1,24 +1,47 @@
 ---
-import { icons } from '@iconify-json/lucide';
-import type { icons as iconsJson } from '@iconify-json/lucide/icons.json';
+import { icons as lucideIconsJSON } from '@iconify-json/lucide';
+import { icons as simpleIconsJSON } from '@iconify-json/simple-icons';
+import type { icons as lucideIcons } from '@iconify-json/lucide/icons.json';
+import type { icons as simpleIcons } from '@iconify-json/simple-icons/icons.json';
 import { getIconData, iconToSVG, replaceIDs } from '@iconify/utils';
+import { AstroError } from 'astro/errors';
 import type { HTMLAttributes } from 'astro/types';
 
 interface SVGAttributes extends HTMLAttributes<'svg'> {
 	// biome-ignore lint/suspicious/noExplicitAny: Allow any string index
 	[key: string]: any;
 }
 
-interface Props extends HTMLAttributes<'svg'> {
-	name: keyof typeof iconsJson;
+interface LucideProps extends HTMLAttributes<'svg'> {
+	type: 'lucide';
+	name: keyof typeof lucideIcons;
 }
 
-const { name, ...props } = Astro.props;
+interface SimpleIconsProps extends HTMLAttributes<'svg'> {
+	type: 'simple-icons';
+	name: keyof typeof simpleIcons;
+}
+
+type Props = LucideProps | SimpleIconsProps;
+
+const { type, name, ...props } = Astro.props;
 const attributes = props as SVGAttributes;
-const iconData = getIconData(icons, name);
+
+if (type !== 'lucide' && type !== 'simple-icons') {
+	throw new AstroError(`Invalid icon type "${type}"`);
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: Needed type not exported
+let iconData: any;
+
+if (type === 'lucide') {
+	iconData = getIconData(lucideIconsJSON, name);
+} else {
+	iconData = getIconData(simpleIconsJSON, name);
+}
 
 if (!iconData) {
-	throw new Error(`Icon "${name}" is missing`);
+	throw new AstroError(`Icon "${name}" is missing`);
 }
 
 const renderData = iconToSVG(iconData, {

src/components/Icon.astro

@@ -20,8 +20,8 @@ const path = Astro.url.pathname;
     </li>
   </ul>
   <button class="mobile-nav-toggle">
-    <Icon name="menu" width={24} height={24} class="menu-closed" />
-    <Icon name="x" width={24} height={24} class="menu-open" />
+    <Icon type="lucide" name="menu" width={24} height={24} class="menu-closed" />
+    <Icon type="lucide" name="x" width={24} height={24} class="menu-open" />
   </button>
 </nav>
 <script is:inline>
@@ -120,7 +120,11 @@ const path = Astro.url.pathname;
       `;
     }
 
-    results.classList.toggle('active', search.results.length > 0);
+    if (search.results.length === 0 && e.target.value.length > 0) {
+      results.innerHTML = '<p style="margin-top: 0;">No results found</p>';
+    }
+
+    results.classList.add('active');
   });
 
   navToggle?.addEventListener('click', () => {

src/components/Navbar.astro

@@ -1,16 +1,27 @@
 import { file, glob } from "astro/loaders";
 import { defineCollection, z, reference } from "astro:content";
-import type { icons as iconsJson } from '@iconify-json/lucide/icons.json';
+import type { icons as lucideIcons } from '@iconify-json/lucide/icons.json';
+import type { icons as simpleIcons } from '@iconify-json/simple-icons/icons.json';
 
 const other = defineCollection({
   loader: glob({ base: "src/content/other", pattern: "**/*.{md,mdx}" }),
 });
 
+const lucideIconSchema = z.object({
+  type: z.literal("lucide"),
+  name: z.custom<keyof typeof lucideIcons>(),
+});
+
+const simpleIconSchema = z.object({
+  type: z.literal("simple-icons"),
+  name: z.custom<keyof typeof simpleIcons>(),
+});
+
 const quickInfo = defineCollection({
   loader: file("src/content/info.json"),
   schema: z.object({
     id: z.number(),
-    icon: z.custom<keyof typeof iconsJson>(),
+    icon: z.union([lucideIconSchema, simpleIconSchema]),
     text: z.string(),
   })
 });
@@ -19,7 +30,7 @@ const socials = defineCollection({
   loader: file("src/content/socials.json"),
   schema: z.object({
     id: z.number(),
-    icon: z.custom<keyof typeof iconsJson>(),
+    icon: z.union([lucideIconSchema, simpleIconSchema]),
     text: z.string(),
     link: z.string().url(),
   })
@@ -69,7 +80,7 @@ const projects = defineCollection({
     info: z.array(
       z.object({
         text: z.string(),
-        icon: z.custom<keyof typeof iconsJson>(),
+        icon: z.union([lucideIconSchema, simpleIconSchema]),
         link: z.string().url().optional(),
       })
     )

src/content.config.ts

@@ -1,12 +1,19 @@
 [
   {
     "id": 1,
-    "icon": "cake",
+    "icon": {
+      "type": "lucide",
+      "name": "cake"
+    },
     "text": "1 year old"
   },
   {
     "id": 2,
-    "icon": "earth",
+    "icon": {
+      "type": "lucide",
+      "name": "earth"
+    },
+    "type": "lucide",
     "text": "Made in Germany"
   }
 ]

src/content/info.json

@@ -146,12 +146,15 @@ The `info.json` file contains the quick info you can see below your profile pict
 ```jsonc title="info.json"
 {
   "id": 1, // The ID. Has to be unique for Astro's content collections to work.
-  "icon": "cake", // The icon to display next to the text.
+  "icon": {
+    "type": "lucide", // The icon lib, either "lucide" or "simple-icons".
+    "name": "cake" // The name of the icon.
+  },
   "text": "1 year old" // The text to display.
 }
 ```
 
-The icons come from [Lucide](https://lucide.dev), so pick one you like and place it's name there!
+Spectre supports both [Lucide](https://lucide.dev) and [Simple Icons](https://simpleicons.org).
 
 ### Socials
 
@@ -160,7 +163,10 @@ The `socials.json` file is similar to the `info.json` file in terms of structure
 ```jsonc title="socials.json"
 {
   "id": 1, // The ID, has to be unique.
-  "icon": "github", // The icon to display next to the link.
+  "icon": {
+    "type": "lucide", // The icon lib, either "lucide" or "simple-icons".
+    "name": "github" // The name of the icon.
+  },
   "text": "GitHub", // The text in the link
   "link": "https://github.com/louisescher/spectre" // The actual destination of the link
 }
@@ -224,9 +230,11 @@ date: 12-29-2024 # Date of publication
 description: Spectre is a terminal-inspired theme for Astro, built using Astro and TypeScript. # Description of the project
 image: ../assets/spectre.png # The image to be used as the OG image, referenced with a relative path
 info: # A TOML-like list of information about the project
-  - icon: github # Icon for this info
-    text: GitHub # Text for this info
+  - text: GitHub # Text for this info
     link: https://github.com/louisescher/spectre # Optional if you want to link to somewhere
+    icon:
+      type: lucide # Icon library, either "lucide" or "simple-icons"
+      name: github # The name of the icon
 ---
 ```
 

src/content/posts/getting-started.mdx

@@ -4,9 +4,11 @@ date: 12-29-2024
 description: Spectre is a terminal-inspired theme for Astro, built using Astro and TypeScript.
 image: ../assets/spectre.png
 info:
-  - icon: github
-    text: GitHub
+  - text: GitHub
     link: https://github.com/louisescher/spectre
+    icon:
+      type: lucide
+      name: github
 ---
 
 Spectre is a terminal-inspired theme for Astro, built using Astro and TypeScript. 

src/content/projects/spectre.mdx

@@ -1,7 +1,10 @@
 [
   {
     "id": 1,
-    "icon": "github",
+    "icon": {
+      "type": "lucide",
+      "name": "github"
+    },
     "text": "GitHub",
     "link": "https://github.com/louisescher/spectre"
   }