fix logic during build step 🐛😞

nfdi4plants · Oct 11, 2024 · 65b9e90 · 65b9e90
1 parent 1df2718
commit 65b9e90
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 77 deletions.
diff --git a/src/components/events/EventInfoList.tsx b/src/components/events/EventInfoList.tsx
@@ -1,10 +1,5 @@
-import type { CollectionEntry } from 'astro:content';
 import { InlineIcon } from '@iconify/react';
-import { type ReducedEvent } from '~/util/EventUtil';
-
-const formatterDate = new Intl.DateTimeFormat('de-DE', { timeZone: 'Europe/Berlin', year: "numeric", month: "2-digit", day: "2-digit"});
-// const formatterDate = new Intl.DateTimeFormat('en-US', { day: '2-digit', month: '2-digit', year: 'numeric' });
-const formatterTime = new Intl.DateTimeFormat('de-DE', { timeZone: 'Europe/Berlin', hour: '2-digit', minute: '2-digit' });
+import { type ReducedEvent, formatterDate, formatterTime } from '~/util/EventUtil';
 
 interface AdditionalListElements {
   __html: string;
@@ -34,15 +29,18 @@ export default function EventInfoList({event, additional}: Props) {
       {event.data.tutors && <li className="flex items-center gap-2">
         <InlineIcon icon="tabler:user" className="text-xl" aria-label="Tutors" />
         <span>
-          <b>With </b> {event.data.tutors.map((tutor, index) => <span dangerouslySetInnerHTML={{__html: index > 0 ? ", " + tutor : tutor}}></span>)}
+          <b>With </b> {event.data.tutors.map((tutor, index) => <span key={index} dangerouslySetInnerHTML={{__html: index > 0 ? ", " + tutor : tutor}}></span>)}
         </span>
       </li>}
       {/* location */}
       <li className="flex items-center gap-2">
         <InlineIcon icon="tabler:map-pin" className="text-xl" aria-label="Location" />
         <span>
-          <span dangerouslySetInnerHTML={{ __html: event.data.location.short}}></span> 
-          {event.data.location.url && <sup><a href={event.data.location.url}>More</a></sup>}
+          {
+            event.data.location.url 
+              ? <a href={event.data.location.url} dangerouslySetInnerHTML={{ __html: event.data.location.short}}></a>
+              : <span dangerouslySetInnerHTML={{ __html: event.data.location.short}}></span> 
+          }
         </span>
       </li>
       {/* general info: modus, category */}
@@ -60,11 +58,11 @@ export default function EventInfoList({event, additional}: Props) {
         </span>
       </li>
       {/* registration */}
-      {event.data.registration && event.data.registration.url &&
+      {event.data.registration && (event.data.registration.url || event.data.registration.deadline) &&
         <li className="flex items-center gap-2">
           <InlineIcon icon="tabler:clipboard-list" className="text-xl" aria-label="Registration" />
           <span>
-            {event.data.registration.url && <a href={event.data.registration.url}>Register</a>}
+            {event.data.registration.url && <a href={event.data.registration.url} className="underline">Register</a>}
             {event.data.registration.deadline && <span> until {formatterDate.format(event.data.registration.deadline)}</span>}
           </span>
         </li>

diff --git a/src/components/events/EventList.tsx b/src/components/events/EventList.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import type { CollectionEntry } from 'astro:content';
-import {sortByYear, groupByYear, reducePeriodicEvents } from '~/util/EventUtil.ts';
+import {sortByYear, groupByYear, reducePeriodicEvents, type ReducedEvent } from '~/util/EventUtil.ts';
 import EventInfoList from './EventInfoList.tsx';
 
 interface Props {
@@ -49,7 +49,7 @@ function ControlButtons({label, options, selectedOption, setOption}: ControlButt
   )
 }
 
-function EventCard (event: CollectionEntry<'events'>) {
+function EventCard (event: ReducedEvent) {
   return (
     <div className="shadow border p-3 lg:p-5 rounded lg:max-w-5xl xl:max-w-6xl" key={"event-" + event.slug}>
       <div className={"grid lg:grid-rows-1 gap-2 lg:gap-4 lg:grid-cols-2 " + (event.data.image ? 'lg:grid-cols-2' : '')}>
@@ -72,7 +72,7 @@ function EventCard (event: CollectionEntry<'events'>) {
 
 export default function EventList( {events: rawEvents}: Props ) {
   let now = new Date();
-  let events = reducePeriodicEvents(rawEvents);
+  let events: ReducedEvent[] = reducePeriodicEvents(rawEvents);
 
   const upcomingEvents = sortByYear(events.filter((event) => {
     return event.data.when.start >= now;
@@ -104,7 +104,7 @@ export default function EventList( {events: rawEvents}: Props ) {
     category === config.category ? setConfig({...config, category: null}) : setConfig({...config, category: category}) 
   }
 
-  const filterEvents = (event: CollectionEntry<'events'>) => {
+  const filterEvents = (event: ReducedEvent) => {
     if (config.mode && event.data.mode !== config.mode) return false;
     if (config.audience && !(event.data.audience as string[]).includes(config.audience)) return false;
     if (config.category && event.data.category !== config.category) return false;

diff --git a/src/components/events/NextEventBanner.tsx b/src/components/events/NextEventBanner.tsx
@@ -1,16 +1,15 @@
 import type { CollectionEntry } from 'astro:content';
-import { sortByYear } from '~/util/EventUtil';
 import { InlineIcon } from '@iconify/react/dist/iconify.js';
+import { reducePeriodicEvents, formatterDate } from '~/util/EventUtil';
 
 interface Props {
   events: CollectionEntry<'events'>[];
 }
 
-
 export default function UpcomingEventBanner({events}: Props) {
-  const sortedEvents = sortByYear(events, (event) => new Date(event.data.start));
+  const reducedEvents = reducePeriodicEvents(events);
   //only future events
-  const upcomingEvents = sortedEvents.filter((event) => event.data.start > new Date());
+  const upcomingEvents = reducedEvents.filter((event) => event.data.when.start > new Date());
   const nextEvent = upcomingEvents[upcomingEvents.length - 1];
   if (!nextEvent) {
     return null;
@@ -33,7 +32,7 @@ export default function UpcomingEventBanner({events}: Props) {
         </span>
       <a href={"/events/" + nextEvent.slug} className="hover:!underline font-medium">
         <span className='sm:hidden'>More</span>
-        <span className='hidden sm:inline'>{nextEvent.data.title} <span className='hidden md:inline'>~ {nextEvent.data.start.toDateString()}</span> </span>
+        <span className='hidden sm:inline'>{nextEvent.data.title} <span className='hidden md:inline'>~ {formatterDate.format(nextEvent.data.when.start)}</span> </span>
         <span> »</span>
       </a>
     </section>

diff --git a/src/content/config.js → src/content/config.ts b/src/content/config.js → src/content/config.ts
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
@@ -48,56 +48,56 @@ const nestedHeadings = buildNestedHeadings(headings);
 const noInPageNavigation = nestedHeadings.length === 0;
 ---
 
-<script define:vars={{hasContentBefore}}>
+<script is:inline define:vars={{hasContentBefore}}>
 
-  document.addEventListener("DOMContentLoaded", function () {
-      const contentContainerId = hasContentBefore ? 'md-layout-center' : 'md-content';
-      const marker = document.getElementById('nav-marker');
-      const mdContent = document.getElementById(contentContainerId);
-      const headers = mdContent?.querySelectorAll('h1, h2, h3, h4, h5, h6');  // Select all headers
-  
-      if (!headers) return;
-  
-      const OFFSET = 100;  // Offset for considering a header 'in view'
-  
-      function updateMarker(linkId) {
-  
-          const link = document.getElementById(linkId);
-          const container = document.getElementById("in-page-nav-container");
-          if (!link || !container || !marker) return;
-          const containerRect = container.getBoundingClientRect();
-          const rect = link.getBoundingClientRect();
-  
-          // Adjust the marker's position and size relative to the link
-          marker.style.top = (rect.top - containerRect.top + 4) + 'px';
-          marker.style.height = (rect.height + 8) + 'px';
-      }
-  
-      // Function to find the active header and move the marker accordingly
-      function handleScroll() {
-          let activeLinkId = '';
-          headers?.forEach(header => {
-              const rect = header.getBoundingClientRect();
-              const headerId = header.id;
-              const navLinkId = `${headerId}-nav`;
-              // If the header's top is in the viewport with some offset (50px from top)
-              if (rect.top <= OFFSET && rect.bottom >= OFFSET) {
-                  activeLinkId = navLinkId;
-              }
-          });
-  
-          if (activeLinkId) {
-              updateMarker(activeLinkId);
-          }
-      }
-  
-      // Initially set the marker to the first navigation link
-      updateMarker(`${headers[0].id}-nav`);
-  
-      // Listen for scroll events
-      window.addEventListener('scroll', handleScroll);
-  });
-  </script>
+document.addEventListener("DOMContentLoaded", function () {
+    const contentContainerId = hasContentBefore ? 'md-layout-center' : 'md-content';
+    const marker = document.getElementById('nav-marker');
+    const mdContent = document.getElementById(contentContainerId);
+    const headers = mdContent?.querySelectorAll('h1, h2, h3, h4, h5, h6');  // Select all headers
+
+    if (!headers) return;
+
+    const OFFSET = 100;  // Offset for considering a header 'in view'
+
+    function updateMarker(linkId) {
+
+        const link = document.getElementById(linkId);
+        const container = document.getElementById("in-page-nav-container");
+        if (!link || !container || !marker) return;
+        const containerRect = container.getBoundingClientRect();
+        const rect = link.getBoundingClientRect();
+
+        // Adjust the marker's position and size relative to the link
+        marker.style.top = (rect.top - containerRect.top + 4) + 'px';
+        marker.style.height = (rect.height + 8) + 'px';
+    }
+
+    // Function to find the active header and move the marker accordingly
+    function handleScroll() {
+        let activeLinkId = '';
+        headers?.forEach(header => {
+            const rect = header.getBoundingClientRect();
+            const headerId = header.id;
+            const navLinkId = `${headerId}-nav`;
+            // If the header's top is in the viewport with some offset (50px from top)
+            if (rect.top <= OFFSET && rect.bottom >= OFFSET) {
+                activeLinkId = navLinkId;
+            }
+        });
+
+        if (activeLinkId) {
+            updateMarker(activeLinkId);
+        }
+    }
+
+    // Initially set the marker to the first navigation link
+    updateMarker(`${headers[0].id}-nav`);
+
+    // Listen for scroll events
+    window.addEventListener('scroll', handleScroll);
+});
+</script>
 
 
 <Layout title={frontmatter.title}>

diff --git a/src/pages/community-and-partners.astro b/src/pages/community-and-partners.astro
@@ -10,7 +10,6 @@ import { parse } from 'csv-parse/sync';
 import * as topojson from "topojson-client";
 import Layout from "../layouts/Layout.astro";
 import { glob } from 'glob'
-import { Icon } from 'astro-icon/components'
 
 // ----------------------------------------------------- Domain model -----------------------------------------------------
 // type representing participants.csv

diff --git a/src/pages/events/[...slug].astro b/src/pages/events/[...slug].astro
@@ -4,7 +4,6 @@ import { getCollection } from 'astro:content';
 import { Image } from 'astro:assets';
 import SocialShare from '~/components/widgets/SocialShare.astro';
 import EventInfoList from '~/components/events/EventInfoList.tsx';
-import type { CollectionEntry } from 'astro:content';
 import {Icon} from 'astro-icon/components';
 import { reducePeriodicEvents, type ReducedEvent } from '~/util/EventUtil.ts';
 

diff --git a/src/util/EventUtil.ts b/src/util/EventUtil.ts
@@ -2,11 +2,9 @@ import type { CollectionEntry } from 'astro:content';
 
 type ExtractDateFn<T> = (item: T) => Date;
 
-export interface ParsedEvents {
-  start: Date;
-  end: Date;
-  periodic: boolean;
-}
+export const formatterDate = new Intl.DateTimeFormat('de-DE', { timeZone: 'Europe/Berlin', year: "numeric", month: "2-digit", day: "2-digit"});
+// const formatterDate = new Intl.DateTimeFormat('en-US', { day: '2-digit', month: '2-digit', year: 'numeric' });
+export const formatterTime = new Intl.DateTimeFormat('de-DE', { timeZone: 'Europe/Berlin', hour: '2-digit', minute: '2-digit' });
 
 // Extend the type by adding the `periodic` flag
 export type ReducedEvent = CollectionEntry<'events'> & {
@@ -41,7 +39,7 @@ export const reducePeriodicEvents = (events: CollectionEntry<'events'>[]): Reduc
             when: whenEntry as { start: Date; end: Date },
             periodic: true
           },
-          slug: event.slug + "/" + whenEntry.start.toISOString() as string, //generate one file per date
+          slug: event.slug + "/" + whenEntry.start.getTime() as string, //generate one file per date
         }));
     } else {
       return [{