mirror of
https://github.com/web3privacy/web
synced 2024-10-15 18:26:27 +02:00
Made the changes to index.astro, added the events masonry.
This commit is contained in:
NoobDeveloper412
parent
2da15b7260
commit
c79e185acc
12 changed files with 217 additions and 134 deletions
BIN
public/events/masonry/1.webp
Normal file
BIN
public/events/masonry/1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/events/masonry/2.webp
Normal file
BIN
public/events/masonry/2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
public/events/masonry/3.webp
Normal file
BIN
public/events/masonry/3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
public/events/masonry/4.webp
Normal file
BIN
public/events/masonry/4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
BIN
public/events/masonry/5.webp
Normal file
BIN
public/events/masonry/5.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
public/events/masonry/6.webp
Normal file
BIN
public/events/masonry/6.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
public/events/masonry/7.webp
Normal file
BIN
public/events/masonry/7.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/events/masonry/8.webp
Normal file
BIN
public/events/masonry/8.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/events/masonry/9.webp
Normal file
BIN
public/events/masonry/9.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/hp-bg-redesign.webp
Normal file
BIN
public/hp-bg-redesign.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
29
src/components/EventMasonry.astro
Normal file
29
src/components/EventMasonry.astro
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
---
|
||||||
|
const {
|
||||||
|
images = [
|
||||||
|
"/events/masonry/1.webp",
|
||||||
|
"/events/masonry/2.webp",
|
||||||
|
"/events/masonry/3.webp",
|
||||||
|
"/events/masonry/4.webp",
|
||||||
|
"/events/masonry/5.webp",
|
||||||
|
"/events/masonry/6.webp",
|
||||||
|
"/events/masonry/7.webp",
|
||||||
|
"/events/masonry/8.webp",
|
||||||
|
"/events/masonry/9.webp",
|
||||||
|
],
|
||||||
|
} = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="flex flex-wrap gap-[3px]">
|
||||||
|
{
|
||||||
|
images.map((image, index) => (
|
||||||
|
<div class="flex-auto overflow-hidden">
|
||||||
|
<img
|
||||||
|
class="object-cover w-full lg:max-h-[120px] xl:max-h-[223px]"
|
||||||
|
src={image}
|
||||||
|
alt={`Image ${index + 1}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
@ -1,159 +1,213 @@
|
||||||
---
|
---
|
||||||
|
import BaseLayout from "../layouts/base.astro";
|
||||||
import BaseLayout from '../layouts/base.astro';
|
import AboutFooter from "../components/AboutFooter.astro";
|
||||||
import AboutFooter from '../components/AboutFooter.astro';
|
import core from "../core.json";
|
||||||
import core from '../core.json';
|
import articles from "../articles.json";
|
||||||
import articles from '../articles.json';
|
import talks from "../talks.json";
|
||||||
import talks from '../talks.json';
|
import dbRepo from "../db-repo.json";
|
||||||
import explorer from '../explorer.json';
|
import { format } from "date-fns";
|
||||||
import dbRepo from '../db-repo.json';
|
import EventItem from "../components/EventItem.astro";
|
||||||
import { format } from 'date-fns';
|
import { isFutureDate } from "../lib/date";
|
||||||
import EventItem from '../components/EventItem.astro';
|
import EventMasonry from "../components/EventMasonry.astro";
|
||||||
import { isFutureDate } from '../lib/date';
|
|
||||||
|
|
||||||
const events = core.events;
|
const events = core.events;
|
||||||
|
|
||||||
const upcomingEvents = []
|
const upcomingEvents = [];
|
||||||
let eventsPast = 0
|
let eventsPast = 0;
|
||||||
let eventsUpcoming = 0
|
let eventsUpcoming = 0;
|
||||||
for (const ev of events) {
|
for (const ev of events) {
|
||||||
let future = isFutureDate(ev.date)
|
let future = isFutureDate(ev.date);
|
||||||
if (future) {
|
if (future) {
|
||||||
upcomingEvents.push(ev)
|
upcomingEvents.push(ev);
|
||||||
eventsUpcoming++
|
eventsUpcoming++;
|
||||||
} else {
|
} else {
|
||||||
eventsPast++
|
eventsPast++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const featuredEvents = []
|
const featuredEvents = [];
|
||||||
for (const e of upcomingEvents) {
|
for (const e of upcomingEvents) {
|
||||||
if (featuredEvents.length > 2) {
|
if (featuredEvents.length > 2) {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if (['summit', 'meetup', 'online-summit'].includes(e.type) &&
|
if (
|
||||||
e.links?.rsvp && !featuredEvents.find(ex => ex.type === e.type)) {
|
["summit", "meetup", "online-summit"].includes(e.type) &&
|
||||||
featuredEvents.push(e)
|
e.links?.rsvp &&
|
||||||
}
|
!featuredEvents.find((ex) => ex.type === e.type)
|
||||||
|
) {
|
||||||
|
featuredEvents.push(e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout banner="true" description="Advocates worldwide are uniting to make privacy fundamental pillar of the Web3 industry, transforming it into a cultural movement that champions freedom and decentralization.">
|
<BaseLayout
|
||||||
|
banner="true"
|
||||||
|
description="Advocates worldwide are uniting to make privacy fundamental pillar of the Web3 industry, transforming it into a cultural movement that champions freedom and decentralization."
|
||||||
|
>
|
||||||
|
<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-big">
|
<div class="middle-pane-medium mt-10">
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 w3pn-hp-grid gap-2 mt-2">
|
<!--div class="mt-10">
|
||||||
<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>
|
<h1>Our Projects</h1>
|
||||||
</div-->
|
</div-->
|
||||||
|
|
||||||
<div class="mt-16">
|
<div class="mt-16">
|
||||||
<h1>Featured Upcoming Events</h1>
|
<h1>Featured Events</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-6">
|
<div class="text-left">
|
||||||
{featuredEvents.map((event) => (
|
Our gatherings aim to build understanding and solidarity among diverse
|
||||||
<EventItem item={event} />
|
interest groups, cultures, states, chains, ecosystems, and backgrounds. We
|
||||||
))}
|
bring together Web3 and non-tech individuals, builders, researchers,
|
||||||
</div>
|
philosophers, lawyers, policymakers, hacktivists, key players, local
|
||||||
|
communities, and the general public. Formats: Meetups, Summits,
|
||||||
|
Congresses, Hackathons, Camp fires
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="mt-6">
|
<div class="my-10">
|
||||||
<a href="/events" class="button inverted"><button>Show all events</button></a>
|
<EventMasonry />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-16">
|
<div class="middle-pane-medium">
|
||||||
<h1>Latest Articles</h1>
|
<div class="mb-6">
|
||||||
</div>
|
{featuredEvents.map((event) => <EventItem item={event} />)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="w3pn-articles grid md:grid-cols-2 gap-6">
|
<div class="mt-6">
|
||||||
{articles.slice(0,4).map((entry) => (
|
<a href="/events" class="button inverted"
|
||||||
<div class="basegrid-entry aspect-video" style={{backgroundImage: `url("${entry.img}")`, backgroundSize: '100% 100%;'}}>
|
><button>Show all events</button></a
|
||||||
<div class="title">
|
>
|
||||||
<a href={entry.url}>{entry.title}</a>
|
</div>
|
||||||
<span class="date">{format(new Date(entry.date), 'MMMM do, yyyy')}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-8">
|
<div class="mt-16">
|
||||||
<a href={core.links.mirror} class="button inverted"><button>More articles on Mirror</button></a>
|
<h1>Latest Articles</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-16">
|
<div class="w3pn-articles grid md:grid-cols-2 gap-6">
|
||||||
<h1>Latest Talks</h1>
|
{
|
||||||
</div>
|
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="grid md:grid-cols-2 gap-6">
|
<div class="mt-8">
|
||||||
{talks.slice(0,4).map((entry) => (
|
<a href={core.links.mirror} class="button inverted"
|
||||||
<div class="basegrid-entry aspect-video" style={{backgroundImage: `url("${entry.img}")`, backgroundSize: 'cover', backgroundPosition: 'center'}}>
|
><button>More articles on Mirror</button></a
|
||||||
<a href={entry.url} class="w-full h-full" title={entry.title}></a>
|
>
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-8">
|
<div class="mt-16">
|
||||||
<a href={core.links.youtube} class="button inverted"><button>More talks on YouTube</button></a>
|
<h1>Latest Talks</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<AboutFooter />
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
</div>
|
{
|
||||||
<script is:inline>
|
talks.slice(0, 4).map((entry) => (
|
||||||
document.querySelectorAll('.w3pn-hp-grid > div').forEach(el => {
|
<div
|
||||||
el.addEventListener('click', () => {
|
class="basegrid-entry aspect-video"
|
||||||
window.location = el.getAttribute('data-url');
|
style={{
|
||||||
});
|
backgroundImage: `url("${entry.img}")`,
|
||||||
});
|
backgroundSize: "cover",
|
||||||
document.querySelectorAll('.w3pn-articles > div').forEach(el => {
|
backgroundPosition: "center",
|
||||||
el.addEventListener('click', () => {
|
}}
|
||||||
window.location = el.querySelector('a').getAttribute('href');
|
>
|
||||||
});
|
<a href={entry.url} class="w-full h-full" title={entry.title} />
|
||||||
});
|
</div>
|
||||||
</script>
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8">
|
||||||
|
<a href={core.links.youtube} class="button inverted"
|
||||||
|
><button>More talks on YouTube</button></a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<AboutFooter />
|
||||||
|
<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>
|
</BaseLayout>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue