added highlighting on timeline from direct links

src/components/timeline/Entry.js

@@ -23,6 +23,7 @@ import {
 import { InView } from "react-intersection-observer";
 import Link from "next/link";
 import TimelineEntryContent from "./TimelineEntryContent";
+import { useSearchParams } from "next/navigation";
 
 export default function Entry({
   entry,
@@ -40,7 +41,9 @@ export default function Entry({
 }) {
   const ref = useRef();
   const router = useRouter();
+  const searchParams = useSearchParams();
   const isBrowserRendering = useIsBrowserRendering();
+  const ishighlighted = entry.readableId === searchParams.get("id");
 
   const [showCopiedPopup, setShowCopiedPopup] = useState(false);
   const [showLightbox, setShowLightbox] = useState(false);
@@ -431,11 +434,17 @@ export default function Entry({
       className={`timeline-entry ${className}`}
       ref={shouldScrollToElement ? ref : null}
     >
-      <div className={`timeline-icon ${entry.color || "purple"}`}>
+      <div
+        className={`timeline-icon ${
+          (ishighlighted && "yellow") || entry.color || "purple"
+        }`}
+      >
         {renderIcon()}
       </div>
 
-      <div className="timeline-description">
+      <div
+        className={clsx("timeline-description", { highlight: ishighlighted })}
+      >
         <div className="entry-wrapper">
           {renderTimestampAndLinkIcons()}
           <h2>

src/styles/_tokens.sass

@@ -7,7 +7,7 @@ $md-breakpoint: 900
 $sm-breakpoint: 768
 $xs-breakpoint: 414
 
-$icon-colors: ("green": #59bf51, "red": #bf413e, "grey":#999999, "purple": #5948a4)
+$icon-colors: ("green": #59bf51, "red": #bf413e, "grey":#999999, "purple": #5948a4, "yellow": #FFC000)
 
 $accent: #5948a4
 // Color tokens beginning with "dark-" are used in dark mode.
@@ -60,6 +60,8 @@ $dark-filter-text: $dark-main-color
 /* Other colors ---------------------------------*/
 $timeline-line-color: #cccccc
 $timeline-icon-color: #ffffff
+$timeline-highlight-color: #ffc000
 
 $dark-timeline-line-color: #444444
 $dark-timeline-icon-color: #cccccc
+$dark-timeline-highlight-color: #ffa000

src/styles/main.sass

@@ -232,6 +232,9 @@ article.timeline
   pointer-events: auto
   border: 1px solid $timeline-line-color
 
+  &.highlight
+    border: 3px solid $timeline-highlight-color
+
   &::after
     background-color: $card-background
     border-color: $timeline-line-color
@@ -975,6 +978,9 @@ table
   .timeline-description
     background-color: $dark-card-background
     border-color: $dark-timeline-line-color
+
+    &.highlight
+      border: 3px solid $dark-timeline-highlight-color
 
     h2
       button .permalink-popup