web/src/pages/index.astro

---

import BaseLayout from '../layouts/base.astro';
import AboutFooter from '../components/AboutFooter.astro';
import core from '../core.json';
import articles from '../articles.json';
import talks from '../talks.json';
import explorer from '../explorer.json';
import dbRepo from '../db-repo.json';
import { isPast, format } from 'date-fns';
import EventItem from '../components/EventItem.astro';

const events = core.events;

const upcomingEvents = []
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) {
		upcomingEvents.push(ev)
		eventsUpcoming++
	} else {
		eventsPast++
	}
}

const featuredEvents = []
for (const e of upcomingEvents) {
	if (featuredEvents.length > 2) {
		break;
	}
	if (['summit', 'meetup', 'online-summit'].includes(e.type) &&
			e.links?.rsvp && !featuredEvents.find(ex => ex.type === e.type))  {
		featuredEvents.push(e)
	}
}

---

<BaseLayout banner="true" description="Privacy advocates worldwide are coming together to discuss how to mainstream privacy within the Web3 industry. So it will become a cultural phenomenon embodying both decentralisation & anti-surveillance capitalism practices.">

	<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">
			<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>
				</div>
			</div>
			<div class="bg-projects relative" data-url="https://github.com/web3privacy/web3privacy/blob/main/README.md#contents">
				<div class="title">
					<div class="flex items-center">
						<div class="icon github small mr-1.5 inline-block"></div>
						<div class="text-white mt-1 ml-1.5"><a href="https://github.com/web3privacy/web3privacy/blob/main/README.md#contents">Web3 Privacy Database</a></div>
					</div>
				</div>
				<!-- Place this tag where you want the button to render. -->
				<div class="flex items-center absolute top-4 right-4 text-white opacity-30"><div class="icon star small mr-1.5"></div> {dbRepo.stars}</div>
				<div class="numbers">
					<div>
						<div class="big">{dbRepo.count}</div>
						<div>Projects</div>
					</div>
					<div>
						<div class="big">{dbRepo.contributors}</div>
						<div>Contributors</div>
					</div>
				</div>
			</div>
			<div class="bg-talks" data-url="/research">
				<div class="title">Research</div>
				<div class="numbers">
					<div>
						<div class="big">{core.research.length} research projects →</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="middle-pane-medium mt-10">
		<!--div class="mt-10">
			<h1>Our Projects</h1>
		</div-->

		<div class="mt-16">
			<h1>Featured Upcoming Events</h1>
		</div>

		<div class="mb-6">
			{featuredEvents.map((event) => (
				<EventItem item={event} />
			))}
		</div>

		<div class="mt-6">
			<a href="/events" class="button inverted"><button>Show all events</button></a>
		</div>

		<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>

		<div class="mt-8">
			<a href={core.links.mirror} class="button inverted"><button>More articles on Mirror</button></a>
		</div>

		<div class="mt-16">
			<h1>Latest Talks</h1>
		</div>

		<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>
			))}
		</div>

		<div class="mt-8">
			<a href={core.links.youtube} class="button inverted"><button>More talks on YouTube</button></a>
		</div>

		<AboutFooter />
	</div>
	<script is:inline>
		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>
</BaseLayout>