web/src/pages/index.astro

132 lines
3.7 KiB
Text
Raw Normal View History

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';
2024-01-25 21:51:47 +01:00
import core from '../core.json';
2023-12-20 23:14:44 +01:00
import articles from '../articles.json';
import talks from '../talks.json';
2024-01-25 18:44:10 +01:00
import explorer from '../explorer.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';
2024-01-25 21:51:47 +01:00
const events = core.events;
2023-12-20 23:14:44 +01:00
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
---
2024-01-25 18:44:10 +01:00
<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.">
2023-11-13 03:03:34 +01:00
<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>
2024-01-25 18:44:10 +01:00
<div class="bg-projects" data-url="https://explorer.web3privacy.info">
<div class="title">Explorer</div>
2023-12-20 23:14:44 +01:00
<div class="numbers">
<div>
2024-01-25 18:44:10 +01:00
<div class="big">{explorer.projects}</div>
<div>Projects</div>
2023-12-20 23:14:44 +01:00
</div>
2024-01-25 18:49:03 +01:00
<div>
<div class="big">{explorer.contributors}</div>
<div>Contributors</div>
</div>
2023-12-20 23:14:44 +01:00
</div>
2023-11-13 03:03:34 +01:00
</div>
2024-01-25 21:51:47 +01:00
<div class="bg-talks" data-url="/research">
<div class="title">Research</div>
<div class="numbers">
<div>
<div class="big">{core.projects.filter(x => x.type && x.type === "research").length} research projects →</div>
</div>
</div>
</div>
2023-11-13 03:03:34 +01:00
</div>
2023-12-20 23:14:44 +01:00
</div>
<div class="middle-pane-medium mt-10">
2024-01-25 18:44:10 +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>
2024-01-25 18:44:10 +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>
2024-01-26 03:43:17 +01:00
<div class="mt-8">
<a href={core.links.mirror} class="button inverted"><button>More articles on Mirror</button></a>
</div>
2024-01-25 18:44:10 +01:00
<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>
2024-01-26 03:43:17 +01:00
<div class="mt-8">
<a href={core.links.youtube} class="button inverted"><button>More talks on YouTube</button></a>
</div>
2023-12-20 23:14:44 +01:00
<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>