Add link to jump from session to schedule.

Author: nikoshell

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,84 @@ const days = await getCollection("days");
     ))
   }
 </Layout>
+<script>
+window.addEventListener('load', function() {
+  function checkForAnchorAndHighlight() {
+    const currentAnchor = window.location.hash.substring(1);
+
+    if (!currentAnchor) return;
+
+    const targetElement = document.getElementById(currentAnchor);
+
+    const targetByName = targetElement || document.querySelector(`[name="${currentAnchor}"]`);
+
+    let targetH2;
+
+    if (targetByName && targetByName.tagName === 'H2') {
+      targetH2 = targetByName;
+    } else if (targetByName) {
+      const h2InTarget = targetByName.querySelector('h2');
+      if (h2InTarget) {
+        targetH2 = h2InTarget;
+      }
+    } else {
+      const allH2s = document.querySelectorAll('h2');
+      for (const h2 of allH2s) {
+        if (h2.id === currentAnchor || h2.getAttribute('name') === currentAnchor) {
+          targetH2 = h2;
+          break;
+        }
+      }
+    }
+
+    if (targetH2) {
+      const parentElement = targetH2.parentElement;
+
+      if (parentElement) {
+        const originalBorder = parentElement.style.border;
+        const originalBorderRadius = parentElement.style.borderRadius;
+
+        let blinkCount = 0;
+        const maxBlinks = 5;
+        const blinkDuration = 500; // milliseconds
+
+        function toggleBorder() {
+          if (blinkCount >= maxBlinks * 2) {
+            parentElement.style.border = originalBorder;
+            parentElement.style.back = originalBorder;
+            return;
+          }
+
+          if (blinkCount % 2 === 0) {
+            parentElement.style.border = '1px solid #ff9900';
+            parentElement.style.background = 'white';
+          } else {
+            parentElement.style.border = originalBorder;
+            parentElement.style.background = originalBorder;
+          }
+
+          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 on the schedule.</Button>
+
 
     <Prose full>
       <h2>Abstract</h2>