Add link to jump from session to schedule. (#1239)

Link on session page

![image](https://github.com/user-attachments/assets/a4902e9a-7f63-47c2-a0a3-abf1e534903e)

Jump and highlight the session

![image](https://github.com/user-attachments/assets/cfcb816b-fbbf-452f-9c34-dc5c7e27d6bc)

---------

Co-authored-by: Ege Akman <[email protected]>
Co-authored-by: Mia Bajić <[email protected]>

Author: 3 people

src/components/schedule/session.astro

@@ -1,6 +1,7 @@
 ---
 import Speakers from "./speakers.astro";
 import { slugify } from "@utils/content";
+import Headline from "@ui/Headline.astro";
 
 export interface props {
   style: any;
@@ -69,7 +70,7 @@ const hasFooter = true;
   </div>
   -->
 
-  <h2>{session.title}</h2>
+  <h2 id=`session-${session.slug}`>{session.title}</h2>
 
   {
     hasFooter && (

src/pages/schedule.astro

@@ -27,3 +27,64 @@ const days = await getCollection("days");
     ))
   }
 </Layout>
+<script>
+window.addEventListener('load', function() {
+  function checkForAnchorAndHighlight() {
+    const currentAnchor = window.location.hash.substring(1);
+
+    if (!currentAnchor) return;
+
+    const allMatching = document.querySelectorAll(`h2#${currentAnchor}`);
+    const targetH2 = allMatching[allMatching.length - 1];
+
+    if (targetH2) {
+      const parentElement: any = targetH2.parentElement;
+
+      if (parentElement) {
+        const originalBorder = parentElement.style.border;
+        const originalBackground = parentElement.style.background;
+
+        let blinkCount = 0;
+        const maxBlinks = 5;
+        const blinkDuration = 500; // milliseconds
+
+        function toggleBorder() {
+          if (blinkCount >= maxBlinks * 2) {
+            parentElement.style.border = originalBorder;
+            parentElement.style.background = originalBackground;
+            return;
+          }
+
+          if (blinkCount % 2 === 0) {
+            parentElement.style.border = '1px solid #ff9900';
+            parentElement.style.background = 'white';
+          } else {
+            parentElement.style.border = originalBorder;
+            parentElement.style.background = originalBackground;
+          }
+
+          blinkCount++;
+          setTimeout(toggleBorder, blinkDuration);
+        }
+
+        toggleBorder();
+
+        setTimeout(function() {
+          const scrollOffset = 200;
+          const elementPosition = parentElement.getBoundingClientRect().top;
+          const offsetPosition = elementPosition + window.pageYOffset - scrollOffset;
+
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: 'smooth'
+          });
+        }, 500);
+      }
+    }
+  }
+
+  checkForAnchorAndHighlight();
+
+  window.addEventListener('hashchange', checkForAnchorAndHighlight);
+});
+</script>

src/pages/session/[slug].astro

@@ -8,6 +8,7 @@ import { YouTube } from "@astro-community/astro-embed-youtube";
 import { Picture } from "astro:assets";
 import Markdown from "@ui/Markdown.astro";
 import Section from "@ui/Section.astro";
+import Button from "@ui/Button.astro";
 
 export async function getStaticPaths() {
   const sessions = await getCollection("sessions");
@@ -100,6 +101,8 @@ const nextSessionsOrdered = sameRoomNextSession
       <dt class="font-bold">Duration:</dt>
       <dd>{entry.data.duration} minutes</dd>
     </dl>
+    <Button class="mb-10" url=`/schedule/#session-${entry.id}`>View in the schedule</Button>
+
 
     <Prose full>
       <h2>Abstract</h2>