feat: make links in event descriptions clickable

Author: gigamonster256

components/events-section.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Linkify from 'linkify-react';
 import { useCallback, useEffect, useState } from 'react';
 
 import { MainSection } from '@/components/sections';
@@ -86,6 +87,18 @@ export function EventsSection() {
     return eventDate <= oneWeekFromNow;
   };
 
+  const linkifyOptions = {
+    target: '_blank',
+    rel: 'noopener noreferrer',
+    format: (value: string, type: string) => {
+      if (type === 'url') {
+        return value.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '');
+      }
+      return value;
+    },
+    className: 'text-primary hover:text-primary/80 underline',
+  };
+
   const Header = () => {
     return (
       <div className="text-center mb-12">
@@ -163,7 +176,9 @@ export function EventsSection() {
                 </div>
                 <CardTitle className="text-lg">{event.title}</CardTitle>
                 <CardDescription className={'' /* no line-clamp */}>
-                  {event.description}
+                  <Linkify options={linkifyOptions}>
+                    {event.description}
+                  </Linkify>
                 </CardDescription>
               </CardHeader>
               <div className="flex-grow" />

package-lock.json

@@ -20,6 +20,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
+    "linkify-react": "^4.3.2",
     "next": "16.0.10",
     "next-sitemap": "^4.2.3",
     "node-ical": "^0.22.0",

package.json

@@ -8,7 +8,7 @@ buildNpmPackage {
 
   src = ./.;
   # needs to be updated everytime you update npm dependencies
-  npmDepsHash = "sha256-AiivLghXPixVPBe4rjngpDppcOz8tamOqAmTiF+zegM=";
+  npmDepsHash = "sha256-MRBC45iq5A4H2kx13qq/bSo+x9Pu2B98y5cpWlSq+5Y=";
 
   # install fonts
   preBuild = ''