2023-11-13 03:03:34 +01:00
|
|
|
---
|
|
|
|
|
|
|
|
import BaseLayout from '../layouts/base.astro';
|
2023-12-20 23:14:44 +01:00
|
|
|
import AboutFooter from '../components/AboutFooter.astro';
|
2023-11-13 03:03:34 +01:00
|
|
|
import * as config from '../config.yaml';
|
2023-12-20 23:14:44 +01:00
|
|
|
import events from '../events.json';
|
|
|
|
import articles from '../articles.json';
|
|
|
|
import talks from '../talks.json';
|
2023-11-24 10:56:28 +01:00
|
|
|
import { isRenderTemplateResult } from 'astro/runtime/server/render/astro/render-template.js';
|
2023-12-20 23:14:44 +01:00
|
|
|
import { isPast, format } from 'date-fns';
|
|
|
|
|
|
|
|
let eventsPast = 0
|
|
|
|
let eventsUpcoming = 0
|
|
|
|
for (const ev of events) {
|
|
|
|
let future = true
|
|
|
|
if (ev.date.match(/^\d{4}-\d{2}-\d{2}$/) && isPast(new Date(ev.date))) {
|
|
|
|
future = false
|
|
|
|
}
|
|
|
|
if (future) {
|
|
|
|
eventsUpcoming++
|
|
|
|
} else {
|
|
|
|
eventsPast++
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-11-13 03:03:34 +01:00
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
<BaseLayout title="Home Page" banner="true">
|
|
|
|
|
|
|
|
<div class="middle-pane-big">
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 w3pn-hp-grid gap-2 mt-2">
|
2023-12-20 23:14:44 +01:00
|
|
|
<div class="bg-events" data-url="/events">
|
|
|
|
<div class="title">Events</div>
|
|
|
|
<div class="numbers">
|
|
|
|
<div>
|
|
|
|
<div class="big">{eventsUpcoming}</div>
|
|
|
|
<div>Upcoming events</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div class="big">{ eventsPast}</div>
|
|
|
|
<div>Past events</div>
|
|
|
|
</div>
|
2023-11-13 03:03:34 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2023-12-20 23:14:44 +01:00
|
|
|
<div class="bg-talks" data-url="/talks">
|
|
|
|
<div class="title">Talks</div>
|
|
|
|
<div class="numbers">
|
|
|
|
<div>
|
|
|
|
<div class="big">?</div>
|
|
|
|
<div>Talks</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div class="big">?</div>
|
|
|
|
<div>Recordings</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div class="big">?</div>
|
|
|
|
<div>Speakers</div>
|
|
|
|
</div>
|
2023-11-13 03:03:34 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2023-12-20 23:14:44 +01:00
|
|
|
<div class="bg-projects" data-url="/projects">
|
|
|
|
<div class="title">Projects</div>
|
|
|
|
<div class="numbers">
|
|
|
|
<div>
|
|
|
|
<div class="semibig">Privacy explorer →</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div class="semibig">3 reserch projects →</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-11-13 03:03:34 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2023-12-20 23:14:44 +01:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="middle-pane-medium mt-10">
|
2023-11-13 03:03:34 +01:00
|
|
|
<div class="mt-10">
|
2023-12-20 23:14:44 +01:00
|
|
|
<h1>Our Projects</h1>
|
2023-11-13 03:03:34 +01:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="mt-16">
|
2023-12-20 23:14:44 +01:00
|
|
|
<h1>Featured Events</h1>
|
|
|
|
</div>
|
2023-11-13 03:03:34 +01:00
|
|
|
|
2023-12-20 23:14:44 +01:00
|
|
|
<div class="mt-16">
|
|
|
|
<h1>Latest Talks</h1>
|
|
|
|
</div>
|
2023-11-13 03:03:34 +01:00
|
|
|
|
2023-12-20 23:14:44 +01:00
|
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
|
|
{talks.slice(0,4).map((entry) => (
|
|
|
|
<div class="basegrid-entry aspect-video" style={{backgroundImage: `url("${entry.img}")`, backgroundSize: 'cover', backgroundPosition: 'center'}}>
|
|
|
|
<a href={entry.url} class="w-full h-full" title={entry.title}></a>
|
|
|
|
</div>
|
|
|
|
))}
|
2023-11-13 03:03:34 +01:00
|
|
|
</div>
|
2023-12-20 23:14:44 +01:00
|
|
|
|
|
|
|
<div class="mt-16">
|
|
|
|
<h1>Latest Articles</h1>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w3pn-articles grid md:grid-cols-2 gap-6">
|
|
|
|
{articles.slice(0,4).map((entry) => (
|
|
|
|
<div class="basegrid-entry aspect-video" style={{backgroundImage: `url("${entry.img}")`, backgroundSize: '100% 100%;'}}>
|
|
|
|
<div class="title">
|
|
|
|
<a href={entry.url}>{entry.title}</a>
|
|
|
|
<span class="date">{format(new Date(entry.date), 'MMMM do, yyyy')}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<AboutFooter />
|
2023-11-13 03:03:34 +01:00
|
|
|
</div>
|
2023-12-20 23:14:44 +01:00
|
|
|
<script>
|
|
|
|
document.querySelectorAll('.w3pn-hp-grid > div').forEach(el => {
|
|
|
|
el.addEventListener('click', () => {
|
|
|
|
window.location = el.getAttribute('data-url');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
document.querySelectorAll('.w3pn-articles > div').forEach(el => {
|
|
|
|
el.addEventListener('click', () => {
|
|
|
|
window.location = el.querySelector('a').getAttribute('href');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
2023-11-13 03:03:34 +01:00
|
|
|
</BaseLayout>
|