pub.solar/_includes/HakkenDates.tsx

94 lines
2.6 KiB
TypeScript
Raw Normal View History

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, language, className = '', }) => {
const strings = data.strings;
const dates = data.dates;
const t = (o) => o?.[language.slug] || '';
return <section
id={`dates-list-${language.slug}`}
className={`ps-hakken-dates ${className}`}
>
<h3>{t(strings.comingDates)}</h3>
<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">
<h4
id={date.id}
className="ps-hakken-dates--title"
>
{date.name} [{date.theme}]
<a
href={`#${date.id}`}
className="ps-hakken-dates--permalink"
>#</a>
</h4>
<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>
</section>;
};