web3privacy/w3ps1
1
0
Fork 0
mirror of https://github.com/web3privacy/w3ps1.git synced 2024-10-15 16:26:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

Reformat

Browse source
This commit is contained in:
tree🌴 2023-02-23 14:29:23 +01:00
parent 012de9d209
commit 26fee8006e
9 changed files with 245 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -7,6 +7,7 @@ Website and data repository for the Web3Privacy Summit #1 that will take place i
- Twitter: [@web3privacy](http://twitter.com/web3privacy)
JSON data about `w3ps1`:
- source: ([src/lib/config.yaml](src/lib/config.yaml))
- build: [prague.web3privacy.info/config.json](https://prague.web3privacy.info/config.json)

8
src/app.css
View file

@ -59,7 +59,8 @@
.table-custom th {
@apply text-mild;
}
.table-custom tbody tr:hover td, .table-custom tbody tr:hover td span {
.table-custom tbody tr:hover td,
.table-custom tbody tr:hover td span {
@apply bg-white text-black;
}
.table-custom tbody tr:hover td .description {
@ -82,7 +83,10 @@
.person-item:hover img {
@apply grayscale-0 invert-0 blur-none;
}
.person-item:hover .text-mild, .person-item:hover .text-supermild, .topic-item:hover .text-mild, .topic-item:hover .text-supermild {
.person-item:hover .text-mild,
.person-item:hover .text-supermild,
.topic-item:hover .text-mild,
.topic-item:hover .text-supermild {
@apply text-black;
}
}

6
src/app.html
View file

@ -9,6 +9,10 @@
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
<script defer data-domain="prague.web3privacy.info" src="https://x.gwei.cz/js/script.js"></script>
<script
defer
data-domain="prague.web3privacy.info"
src="https://x.gwei.cz/js/script.js"
></script>
</body>
</html>

12
src/lib/components/PeopleList.svelte
View file

@ -15,19 +15,25 @@
function animateSpeaker(el) {
for (const e of el.target.getElementsByClassName('animate-speaker')) {
animateText({ target: e })
animateText({ target: e });
}
}
</script>
{#each items.map(getPerson) as item}
<div class="hover:bg-white hover:text-black p-2 {size === 'small' ? 'w-2/3 sm:w-48' : 'w-2/3 sm:w-64'} person-item" on:mouseenter={animateSpeaker}>
<div
class="hover:bg-white hover:text-black p-2 {size === 'small'
? 'w-2/3 sm:w-48'
: 'w-2/3 sm:w-64'} person-item"
on:mouseenter={animateSpeaker}
>
<div>
<img src="/people/{item.img}" class="grayscale invert aspect-square object-cover w-full" />
</div>
<div class="mt-4 speaker-name animate-speaker text-xl">{item.name.toUpperCase()}</div>
<div class="text-lg text-mild">
<a href={twitterLink(item.twitter)} class="hover:underline animate-speaker">@{item.twitter}</a>
<a href={twitterLink(item.twitter)} class="hover:underline animate-speaker">@{item.twitter}</a
>
</div>
{#if item.caption}
<div class="mt-2 text-base text-supermild"><SvelteMarkdown source={item.caption} /></div>

26
src/lib/config.yaml
View file

@ -1,16 +1,16 @@
title: Web3Privacy Prague 2023
shortname: "Web3Privacy Summit #1"
shortname: 'Web3Privacy Summit #1'
date: 5. June 2023
venue: X10, Prague
domain: prague.web3privacy.info
image: "/web3privacy.png"
logo: "/web3privacy-cropped.jpg"
image: '/web3privacy.png'
logo: '/web3privacy-cropped.jpg'
twitter: web3privacy
parent: Web3Privacy Now
venueMapUrl: https://goo.gl/maps/VCSC7wcNueEKgt996
parentUrl: https://web3privacy.info
desc: June 5, 2023 - A lunarpunk conference focused on privacy in the Web3 industry as a complement to the Web3Privacy Now research.
authors: "💛 Collaboration of [Web3Privacy Now](https://web3privacy.info) & [ETHBrno](https://ethbrno.cz) team"
authors: '💛 Collaboration of [Web3Privacy Now](https://web3privacy.info) & [ETHBrno](https://ethbrno.cz) team'
license: This web is built with [SvelteKit](https://kit.svelte.dev/) and is [open-source](https://github.com/web3privacy/w3ps1) under CC0 license
slogan: Diving into the culture of the Web3 privacy industry
aggregator: Prague Blockchain Week 2023
@ -37,15 +37,15 @@ themes:
desc: We need resilient privacy-preserving, p2p communication layers for Web3, that allows free and uncensored human-to-human, machine-to-machine or hybrid communication.
- title: Lunarpunk vs Solarpunk
desc: For solarpunk to succeed it must integrate the lunarpunk unconscious. The only hope for solarpunk is to [go dark](https://www.egirlcapital.com/writings/107533289). Do you agree?
- title: "R&D: ZK, MPC, THE"
- title: 'R&D: ZK, MPC, THE'
desc: There are many different cryptography technics for privacy preservation. How to balance them all & avoid 1-tool chokepoint?
- title: Privacy readiness levels
desc: Introduction of the privacy scoring mechanism to help non-tech people understand security level of the solution
- title: Privacy wars
desc: Why are privacy-blockchain socials so toxic? How could we stop hating each other & work together
- title: Privacy workforce
- title: "Privacy activism"
desc: "Mapping down tools to protect privacy industry: from builders like Alexey Pertsev to projects."
- title: 'Privacy activism'
desc: 'Mapping down tools to protect privacy industry: from builders like Alexey Pertsev to projects.'
- title: Network states (with a privacy focus)
desc: Time ot imagine the network state-as-a-grassroots movement for privacy, freedom & better future.
- title: Veksl
@ -62,18 +62,18 @@ tickets:
- Food and drinks included
- Web3Privacy t-shirt
- Networking drinks with speakers & attendees
- "#Lunarpunk party"
- '#Lunarpunk party'
hint: |
[Apply for a discount →](https://attend.web3privacy.info)<br />(as independent developer, student, privacy advocate, open-source contributor..)
- title: "#Lunarpunk Party"
- title: '#Lunarpunk Party'
price: €15
includes:
- 8pm - morning
- Prague rave from top DJs
- VJs and projections
- "\"Privacy experience\""
- '"Privacy experience"'
- Networking with attendees, speakers & sponsors
note: "*Party access is included in the All-day Pass"
note: '*Party access is included in the All-day Pass'
faq:
- title: What is Web3Privacy Now?
text: |
@ -94,7 +94,7 @@ faq:
- title: Will the talks be livestreamed and/or recorded?
text: Yes, we're planning both. A livestream of the conference and recordings of the talks and panels will be publicly available after the conference.
- title: I have another question, where can I contact you?
text: "You can contact the organizing team or the community around the event in our public Signal group: [chat.web3privacy.info](https://chat.web3privacy.info/)"
text: 'You can contact the organizing team or the community around the event in our public Signal group: [chat.web3privacy.info](https://chat.web3privacy.info/)'
people:
- id: mykola
name: Mykola Siusko
@ -181,7 +181,7 @@ program:
title: Networking & Drinks
type: other
- time: 20:00 - 4:00
title: "#Lunarpunk party"
title: '#Lunarpunk party'
desc: Enjoy our afterparty in Lunarpunk style with quality Prague rave DJs, which will take place in the same venue until the morning (4am).
second:
- time: 09:35 - 10:55

48
src/lib/helpers.js
View file

@ -1,5 +1,4 @@
import removeMd from 'remove-markdown'
import removeMd from 'remove-markdown';
export function rand(length) {
let result = '';
@ -15,39 +14,52 @@ export function rand(length) {
export function animateText(ev, interval = 50) {
if (!ev.target.getAttribute('data-text')) {
ev.target.setAttribute('data-text', ev.target.innerHTML)
ev.target.setAttribute('data-text', ev.target.innerHTML);
}
if (ev.target.getAttribute('data-animate') === "1") {
if (ev.target.getAttribute('data-animate') === '1') {
return;
}
ev.target.setAttribute('data-animate', "1")
const orig = removeMd(ev.target.getAttribute('data-text')).replace('&amp;', '&')
const steps = orig.length
ev.target.setAttribute('data-animate', '1');
const orig = removeMd(ev.target.getAttribute('data-text')).replace('&amp;', '&');
const steps = orig.length;
const genRand = (pos = 0, len = null) => orig.substring(pos, len).split(' ').map(x => rand(x.length)).join(' ')
const random = genRand(0, orig.length)
const genRand = (pos = 0, len = null) =>
orig
.substring(pos, len)
.split(' ')
.map((x) => rand(x.length))
.join(' ');
const random = genRand(0, orig.length);
ev.target.innerHTML = random
ev.target.innerHTML = random;
for (let i = 0; i <= steps; i++) {
setTimeout(() => {
ev.target.innerHTML = orig.substring(0, i) + genRand(i, orig.length)
ev.target.innerHTML = orig.substring(0, i) + genRand(i, orig.length);
//console.log(ev.target.innerHTML)
if (i === steps) {
ev.target.setAttribute('data-animate', "0")
ev.target.setAttribute('data-animate', '0');
}
}, interval * i)
}, interval * i);
}
}
export async function handleAnchorClick(event) {
event.preventDefault()
const link = event.currentTarget
const anchorId = new URL(link.href).hash.replace('#', '')
const anchor = document.getElementById(anchorId || 'intro')
event.preventDefault();
const link = event.currentTarget;
const anchorId = new URL(link.href).hash.replace('#', '');
const anchor = document.getElementById(anchorId || 'intro');
return window.scrollTo({
top: anchor.offsetTop,
behavior: 'smooth'
})
});
}
export function animateSection(interval = 50) {
return (el) => {
for (const e of el.target.getElementsByClassName('animate-section')) {
animateText({ target: e }, interval);
}
};
}

81
src/routes/+layout.svelte
View file

@ -3,7 +3,7 @@
export let data;
import SvelteMarkdown from 'svelte-markdown';
import { animateText, handleAnchorClick } from '$lib/helpers';
import { animateText, animateSection, handleAnchorClick } from '$lib/helpers';
import { onMount } from 'svelte';
let navbar = false;
@ -23,34 +23,34 @@
];
const homepageAnimation = () => {
const collection = document.getElementsByClassName('animation-crypt')
const collection = document.getElementsByClassName('animation-crypt');
for (const el of collection) {
animateText({ target: el })
}
animateText({ target: el });
}
};
function locationHashUpdateTick() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (lastScrollTop === scrollTop) {
return null;
} else {
lastScrollTop = scrollTop
lastScrollTop = scrollTop;
}
const arr = []
const arr = [];
for (const mi of menu) {
if (mi.external) continue;
const el = document.getElementById(mi.title.toLowerCase())
const pos = el.getBoundingClientRect()
const el = document.getElementById(mi.title.toLowerCase());
const pos = el.getBoundingClientRect();
//console.log(mi.title, pos.top, pos.bottom)
if (pos.top <= 100 && pos.bottom > 100) {
arr.push([ mi, pos.top, pos.bottom ])
arr.push([mi, pos.top, pos.bottom]);
}
}
choosed = arr[arr.length-1]
choosed = arr[arr.length - 1];
if (choosed) {
//console.log('choosed = ', choosed[0].title)
const currentHash = window.location.hash
const hash = choosed[0].url
const currentHash = window.location.hash;
const hash = choosed[0].url;
if (hash !== currentHash) {
if (hash === '') {
history.replaceState(null, null, ' ');
@ -62,11 +62,10 @@
}
onMount(async () => {
setTimeout(homepageAnimation, 0) // initial animation
setInterval(homepageAnimation, 10000) // every 10 seconds
setInterval(locationHashUpdateTick, 1000) // every 1 seconds
setTimeout(homepageAnimation, 0); // initial animation
setInterval(homepageAnimation, 10000); // every 10 seconds
setInterval(locationHashUpdateTick, 1000); // every 1 seconds
});
</script>
<div class="relative w-full min-h-screen text-white">
@ -75,15 +74,26 @@
<div class="flex">
<div class="flex items-center gap-4 grow">
<div class="w-16 py-2">
<a href={data.config.parentUrl} target="_blank"><img src={data.config.logo} alt={data.config.parent} /></a>
<a href={data.config.parentUrl} target="_blank"
><img src={data.config.logo} alt={data.config.parent} /></a
>
</div>
<!--h1 class="text-2xl uppercase">{data.config.title}</h1-->
</div>
<div class="flex items-center gap-6 text-xl">
<button class="md:hidden text-3xl" on:click={(ev) => (navbar = !navbar)}>☰</button>
{#each menu.filter(i => !i.hidden) as mi}
{#each menu.filter((i) => !i.hidden) as mi}
<div class="hidden md:block">
<a class="{mi.class ? mi.class : 'hover:underline'} {choosed && mi.url === choosed[0].url ? 'font-bold underline' : null} {mi.external ? 'external' : ''}" href={mi.url} on:mouseenter={animateText} on:click={!mi.external ? handleAnchorClick : null} target={mi.external ? '_blank' : ''}>
<a
class="{mi.class ? mi.class : 'hover:underline'} {choosed &&
mi.url === choosed[0].url
? 'font-bold underline'
: null} {mi.external ? 'external' : ''}"
href={mi.url}
on:mouseenter={animateText}
on:click={!mi.external ? handleAnchorClick : null}
target={mi.external ? '_blank' : ''}
>
{mi.name?.toUpperCase() || mi.title.toUpperCase()}
</a>
</div>
@ -93,9 +103,13 @@
</div>
{#if navbar}
<div class="w-full md:hidden p-4">
{#each menu.filter(i => !i.hidden) as mi}
{#each menu.filter((i) => !i.hidden) as mi}
<div class="my-3 mx-4">
<a href={mi.url} on:click={() => navbar = false}><button class="{mi.class} uppercase text-xl {mi.external ? 'external' : ''}">{mi.title}</button></a>
<a href={mi.url} on:click={() => (navbar = false)}
><button class="{mi.class} uppercase text-xl {mi.external ? 'external' : ''}"
>{mi.title}</button
></a
>
</div>
{/each}
</div>
@ -105,11 +119,18 @@
<div class="w-full h-screen" id="intro">
<div class="w-full h-full flex items-center text-center">
<div class="mx-auto px-4">
<div class="text-5xl md:text-8xl font-bold mb-4 md:mb-8 animation-crypt" on:mouseenter={animateText}>
<div
class="text-5xl md:text-8xl font-bold mb-4 md:mb-8 animation-crypt"
on:mouseenter={animateText}
>
{data.config.shortname.toUpperCase()}
</div>
<div class="text-3xl md:text-5xl md:mb-4 uppercase">
<span class="">{data.config.date}</span> @ <a href={data.config.venueMapUrl} target="_blank" class="underline hover:no-underline">{data.config.venue}</a></div>
<span class="">{data.config.date}</span> @
<a href={data.config.venueMapUrl} target="_blank" class="underline hover:no-underline"
>{data.config.venue}</a
>
</div>
<div class="mt-8 text-lg text-mild mx-4">
<p class="">{data.config.slogan}</p>
<p>
@ -132,11 +153,13 @@
<div class="flex gap-4">
<div class="grow">
<div class="w-32 sm:w-40">
<a href={data.config.parentUrl}><img src={data.config.logo} alt={data.config.parent} /></a>
<a href={data.config.parentUrl}
><img src={data.config.logo} alt={data.config.parent} /></a
>
</div>
</div>
<div class="text-right">
<div class="">
<div class="" on:mouseenter={animateSection()}>
<a class="inline-block w-5 mr-1" href="https://twitter.com/{data.config.twitter}">
<svg viewBox="0 0 29 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@ -145,7 +168,11 @@
/>
</svg>
</a>
<a href="https://twitter.com/{data.config.twitter}" class="text-2xl no-underline hover:underline external" target="_blank">
<a
href="https://twitter.com/{data.config.twitter}"
class="text-2xl no-underline hover:underline external animate-section"
target="_blank"
>
@{data.config.twitter}
</a>
</div>

59
src/routes/+page.svelte
View file

@ -1,18 +1,10 @@
<script>
import SvelteMarkdown from 'svelte-markdown';
import PeopleList from '$lib/components/PeopleList.svelte';
import { animateText } from '$lib/helpers';
import { animateText, animateSection } from '$lib/helpers';
import { goto } from '$app/navigation';
export let data;
function animateSection (interval = 50) {
return (el) => {
for(const e of el.target.getElementsByClassName('animate-section')) {
animateText({ target: e }, interval)
}
}
}
</script>
<svelte:head>
@ -33,7 +25,10 @@
<div class="section-header" on:mouseenter={animateText}>Key themes</div>
<div class="grid md:grid-cols-3 gap-4 md:gap-10">
{#each data.config.themes as ti}
<div class="bg-[#0d1117] hover:text-black hover:bg-white px-4 py-6 topic-item" on:mouseenter={animateSection(35)}>
<div
class="bg-[#0d1117] hover:text-black hover:bg-white px-4 py-6 topic-item"
on:mouseenter={animateSection(35)}
>
<div class="text-2xl animate-section">{ti.title.toUpperCase()}</div>
<div class="mt-4 text-lg text-mild markdown">
<SvelteMarkdown source={ti.desc} />
@ -76,7 +71,9 @@
<div class="text-lg text-supermild mb-16">{data.config.programNote}</div>
{/if}
<div class="program xl:flex gap-10 xl:gap-4">
{#each data.config.stages.map(s => ({ ...s, program: data.config.program[s.id]})).filter(s => s.program) as stage}
{#each data.config.stages
.map((s) => ({ ...s, program: data.config.program[s.id] }))
.filter((s) => s.program) as stage}
<div class="w-auto xl:w-1/2 mb-10 xl:mb-0">
<div class="text-3xl font-bold mb-4">{stage.name}</div>
<table class="table-auto table-custom w-full mx-0 lg:mx-8">
@ -90,14 +87,22 @@
<tbody>
{#each stage.program as pi}
<tr class="" on:mouseenter={animateSection(35)}>
<td class="text-right time xl:whitespace-nowrap sm:w-16 xl:w-36 {pi.type==="other" ? 'text-mild' : ''}"
<td
class="text-right time xl:whitespace-nowrap sm:w-16 xl:w-36 {pi.type === 'other'
? 'text-mild'
: ''}"
>{@html pi.time
.split('-')
.map((x) => x)
.join('<div class="xl:inline-block hidden mx-1">-</div>')}
</td>
<td class="text-left">
<div class="text-xl"><span class="animate-section {pi.type==="other" ? 'text-mild' : ''}">{pi.title}</span> {pi.speakers ? '― ' + pi.speakers[0]?.name : ''}</div>
<div class="text-xl">
<span class="animate-section {pi.type === 'other' ? 'text-mild' : ''}"
>{pi.title}</span
>
{pi.speakers ? '― ' + pi.speakers[0]?.name : ''}
</div>
{#if pi.desc}
<div class="mt-2 text-base description text-mild markdown">
<SvelteMarkdown source={pi.desc} />
@ -120,8 +125,8 @@
<div>
<a href={data.config.sponsorUrl}
><button
class="py-2 px-5 bg-white text-black hover:bg-black border border-bg-white hover:text-white" on:mouseenter={animateText}
>Become a Sponsor</button
class="py-2 px-5 bg-white text-black hover:bg-black border border-bg-white hover:text-white"
on:mouseenter={animateText}>Become a Sponsor</button
></a
>
</div>
@ -135,12 +140,19 @@
<div class="grid lg:grid-cols-2 gap-10 md:w-2/3 mx-auto">
{#each data.config.tickets as tt}
<div
class="bg-[#0d1117] hover:border-0 py-10 px-10 hover:text-black hover:bg-white {data.config.ticketing ? "cursor-pointer" : ""}"
class="bg-[#0d1117] hover:border-0 py-10 px-10 hover:text-black hover:bg-white {data
.config.ticketing
? 'cursor-pointer'
: ''}"
on:mouseenter={animateSection(40)}
on:click={() => data.config.ticketing ? goto(data.config.ticketingUrl) : false}
on:click={() => (data.config.ticketing ? goto(data.config.ticketingUrl) : false)}
>
<div class="text-3xl uppercase"><a href={data.config.ticketingUrl} class="animate-section">{tt.title}</a></div>
<div class="text-xl mt-6 font-bold"><a href={data.config.ticketingUrl}>{tt.price}</a></div>
<div class="text-3xl uppercase">
<a href={data.config.ticketingUrl} class="animate-section">{tt.title}</a>
</div>
<div class="text-xl mt-6 font-bold">
<a href={data.config.ticketingUrl}>{tt.price}</a>
</div>
<ul class="mt-6 text-lg text-left list-disc px-6">
{#each tt.includes as ti}
<li>{ti}</li>
@ -157,9 +169,12 @@
</div>
{#if data.config.ticketing}
<div class="mt-10">
<a href={data.config.ticketingUrl}><button
class="py-2 px-5 bg-white text-black hover:bg-black border border-bg-white hover:text-white" on:mouseenter={animateText}
>Buy a ticket</button></a>
<a href={data.config.ticketingUrl}
><button
class="py-2 px-5 bg-white text-black hover:bg-black border border-bg-white hover:text-white"
on:mouseenter={animateText}>Buy a ticket</button
></a
>
</div>
{/if}
{#if data.config.ticketsNote}

5
vite.config.js
View file

@ -3,8 +3,5 @@ import { defineConfig } from 'vite';
import ViteYaml from '@modyfi/vite-plugin-yaml';
export default defineConfig({
plugins: [
ViteYaml(),
sveltekit()
]
plugins: [ViteYaml(), sveltekit()]
});