add farcaster

_content/meta.json

@@ -17,23 +17,21 @@
       "network": "Blog",
       "url": "https://kremalicious.com"
     },
+    {
+      "network": "GitHub",
+      "url": "https://github.com/kremalicious"
+    },
     {
       "network": "Mastodon",
-      "username": "@krema@mas.to",
       "url": "https://mas.to/@krema"
     },
     {
-      "network": "GitHub",
-      "username": "kremalicious",
-      "url": "https://github.com/kremalicious"
+      "network": "Farcaster",
+      "url": "https://warpcast.com/@krema.eth"
     }
   ],
   "gpg": "/gpg.txt",
   "addressbook": "/matthias-kretschmann.vcf",
   "bugs": "https://github.com/kremalicious/portfolio/issues/new",
-  "allowedHosts": [
-    "matthiaskretschmann.com",
-    "beta.matthiaskretschmann.com",
-    "localhost"
-  ]
+  "allowedHosts": ["matthiaskretschmann.com", "localhost"]
 }

src/components/Icon/index.tsx

@@ -16,10 +16,15 @@ import {
   Star,
   Sun
 } from 'lucide-react'
+import Farcaster from '@/images/farcaster.svg'
 import Mastodon from '@/images/mastodon.svg'
 import styles from './index.module.css'
 
-export default function Icon({ name, ...props }: { name: string }) {
+type Props = React.SVGAttributes<{
+  name: string
+}>
+
+export default function Icon({ name, className, ...props }: Props) {
   const components = {
     Email: Mail,
     Link: Compass,
@@ -41,12 +46,13 @@ export default function Icon({ name, ...props }: { name: string }) {
     Mastodon,
     ChevronDown,
     Check,
-    Contrast
+    Contrast,
+    Farcaster
   }
 
   const IconMapped = components[name as keyof typeof components]
 
   return IconMapped ? (
-    <IconMapped className={`${styles.icon} ${styles[name]}`} {...props} />
+    <IconMapped className={`${styles.icon} ${className || ''}`} {...props} />
   ) : null
 }

src/components/Networks/NetworkLink.tsx

@@ -18,7 +18,7 @@ export const NetworkLink = ({ name, url }: { name: string; url: string }) => {
         href={url}
         rel="me"
       >
-        <Icon name={name} />
+        <Icon name={name} className={styles[name.toLowerCase()]} />
         <span className={styles.title}>{name}</span>
       </m.a>
     </LazyMotion>

src/components/Networks/index.module.css

@@ -56,3 +56,7 @@
   height: var(--font-size-base);
   opacity: 0.8;
 }
+
+.farcaster {
+  stroke-width: 0.1275rem;
+}

src/images/farcaster.svg

@@ -0,0 +1,12 @@
+<svg
+  width="32px"
+  height="29px"
+  viewBox="0 0 32 29"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <path
+    d="M5.478,0 L26.068,0 L26.068,4.095 L31.923,4.095 L30.696,8.191 L29.657,8.191 L29.657,24.761 C30.178,24.761 30.601,25.177 30.601,25.691 L30.601,26.808 L30.79,26.808 C31.312,26.808 31.735,27.225 31.735,27.739 L31.735,28.856 L21.156,28.856 L21.156,27.739 C21.156,27.225 21.579,26.808 22.101,26.808 L22.29,26.808 L22.29,25.691 C22.29,25.244 22.61,24.871 23.036,24.781 L23.016,15.638 C22.682,11.985 19.567,9.122 15.773,9.122 C11.979,9.122 8.864,11.985 8.53,15.638 L8.51,24.773 C9.014,24.847 9.634,25.23 9.634,25.691 L9.634,26.808 L9.823,26.808 C10.344,26.808 10.767,27.225 10.767,27.739 L10.767,28.856 L0.189,28.856 L0.189,27.739 C0.189,27.225 0.612,26.808 1.133,26.808 L1.322,26.808 L1.322,25.691 C1.322,25.177 1.745,24.761 2.267,24.761 L2.267,8.191 L1.228,8.191 L0,4.095 L5.478,4.095 L5.478,0 Z"
+  ></path>
+</svg>