pub.solar/_includes/HakkenDates.tsx

import { md, mdi } from '../filters.ts';

const days = {
  'friday': 0,
  'saturday': 1,
  'sunday': 2,
};

const day = 24 * 60 * 60 * 1000;
const week = 7 * day;
const endOfWeekend = 2 * day;

const getStartAndEnd = (date) => {
  const [ version, year ] = date.name.split(' ');
  const startingMonth = {
    Winter: 1,
    Spring: 4,
    Summer: 7,
    Autumn: 10,
  }[version];

  // We start searching on the 20th of that specific month
  const d = new Date();
  d.setFullYear(parseInt(year, 10));
  d.setMonth(startingMonth - 1);
  d.setDate(20);

  for (let i = 0; i < 14; i++) {
    const dateToTry = new Date(d.valueOf() + (i * day));
    if (dateToTry.getDay() !== 5) {
      continue;
    }

    const oneWeekLater = new Date(dateToTry.valueOf() + week);
    if (dateToTry.getMonth() === oneWeekLater.getMonth()) {
      continue;
    }

    return {
      start: dateToTry,
      end: new Date(dateToTry.valueOf() + endOfWeekend),
    };
  }
};

export default ({ data, lang, className }) => {
  const strings = data.strings;
  const dates = data.dates;
  const t = (o) => o?.[lang] || '';

  return <div
    id={`dates-list-${lang}`}
    className={`ps-hakken-dates ${className}`}
  >
    <p>{t(strings.comingDates)}</p>
    <ul className="ps-hakken-dates--list">
      {dates.map((date, i) => {
        const { start, end } = getStartAndEnd(date);
        const showStartMonth = start.getMonth() !== end.getMonth();
        const untilString = [
          t(strings.friday),
          start.getDate() + '.',
          showStartMonth ? t(strings.months[start.getMonth()]) : null,
          t(strings.until),
          t(strings.sunday),
          end.getDate() + '.',
          t(strings.months[end.getMonth()]),
        ].filter(n => n !== null).join(' ');

        return <li key={i} className="ps-hakken-dates--item">
          <h3>{date.name} [{date.theme}]</h3>
          <div className="ps-hakken-dates--meta">
            <p className="ps-hakken-dates--times">{t(strings.when)}: {untilString}.</p>
            <p className="ps-hakken-dates--location">
              {t(strings.where)}:{' '}
              <span dangerouslySetInnerHTML={{ __html: mdi(t(date.location))}}></span>
            </p>
          </div>
          <div dangerouslySetInnerHTML={{ __html: md(t(date.description)) }}></div>
        </li>;
      })}
    </ul>
  </div>;
};