Merge branch 'main' of gwei.cz:ethbrno/eb2-website

2022-10-15 19:11:16 +02:00 · 2022-10-15 19:11:16 +02:00 · 05d0c02fa2
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@ -2,6 +2,7 @@ pipeline:
  build:
    image: node
    commands:
+      - node --version
      - npm ci
      - npm run build
  deploy:
--- a/README.md
+++ b/README.md
@ -1,38 +1,9 @@
-# create-svelte
+# ETHBrno² Website

-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+Website is created using [SvelteKit](https://kit.svelte.dev/) and deployed as a static application to these addresses:
+* [ethbrno.cz](https://ethbrno.cz) (self-hosted)
+* [ethbrno.netlify.app](https://ethbrno.netlify.app/) ([Netlify](https://www.netlify.com/) mirror)

-## Creating a project
+## Authors

-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+* vorcigernix
--- a/package.json
+++ b/package.json
@ -4,11 +4,12 @@
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
-		"build": "js-yaml ./data/data.yaml > ./src/lib/data.json && vite build",
+		"build": "npm run make-data && vite build",
 		"preview": "vite preview",
 		"test": "playwright test",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"format": "prettier --plugin-search-dir . --write .",
+		"make-data": "node ./scripts/make-data.js"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.25.0",
--- a/scripts/make-data.js
+++ b/scripts/make-data.js
@ -0,0 +1,19 @@
+import yaml from 'js-yaml'
+import fs from 'fs'
+
+const DATA_FILE = './data/data.yaml'
+const DATA_OUTPUT = './src/lib/data.json'
+
+function gen() {
+  // load data
+  const data = yaml.load(fs.readFileSync(DATA_FILE))
+
+  // add generation time
+  data.time = new Date
+
+  // write to json
+  fs.writeFileSync(DATA_OUTPUT, JSON.stringify(data, null, 2))
+  console.log(`Writed: ${DATA_OUTPUT}`)
+}
+
+gen()
--- a/src/app.css
+++ b/src/app.css
@ -26,4 +26,20 @@ body {
    .active {
        @apply underline;
    }
+}
+
+.external::after {
+    padding-left: 10px;
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.5' height='13.5' aria-hidden='true' viewBox='0 0 24 24' class='iconExternalLink_nPIU'%3E%3Cpath fill='currentColor' d='M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.external.text-white::after {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.5' height='13.5' aria-hidden='true' viewBox='0 0 24 24' class='iconExternalLink_nPIU'%3E%3Cpath fill='white' d='M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.contributor-remote::after {
+    width: 1rem;
+    height: 1rem;
+    margin-left: 3px;
+    content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.5' stroke='white' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418' /%3E%3C/svg%3E");
 }
--- a/src/app.html
+++ b/src/app.html
@ -4,27 +4,26 @@
 <head>
 	<meta charset="utf-8" />
 	<link rel="icon" href="%sveltekit.assets%/icons/favicon-32x32.png" />
-	<meta name="description" content="PRIVACY & SECURITY EDITION HACKATHON" />
-
+	<meta name="description" content="November 11 - 13, 2022, Impact Hub / Clubco, Brno, Czech Republic - Lunarpunk hackathon focused on privacy and security. We believe that privacy is a fundamental human right. And good privacy needs good security foundations." />

 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap" rel="stylesheet">

 	<!-- Facebook Meta Tags -->
-	<meta property="og:url" content="https://ethbrno.pages.dev/">
+	<meta property="og:url" content="https://ethbrno.cz/">
 	<meta property="og:type" content="website">
-	<meta property="og:title" content="ETHBrno²">
-	<meta property="og:description" content="PRIVACY & SECURITY EDITION HACKATHON">
+	<meta property="og:title" content="ETHBrno² 2022">
+	<meta property="og:description" content="November 11 - 13, 2022, Impact Hub / Clubco, Brno, Czech Republic - Lunarpunk hackathon focused on privacy and security. We believe that privacy is a fundamental human right. And good privacy needs good security foundations.">
 	<meta property="og:image" content="https://ethbrno.pages.dev/ogbrno.png">

 	<!-- Twitter Meta Tags -->
 	<meta name="twitter:card" content="summary_large_image">
-	<meta property="twitter:domain" content="ethbrno.pages.dev">
+	<meta property="twitter:domain" content="ethbrno.cz">
 	<meta property="twitter:url" content="https://ethbrno.pages.dev/">
-	<meta name="twitter:title" content="ETHBrno²">
-	<meta name="twitter:description" content="PRIVACY & SECURITY EDITION HACKATHON">
-	<meta name="twitter:image" content="https://ethbrno.pages.dev/ogbrno.png">
+	<meta name="twitter:title" content="ETHBrno² 2022">
+	<meta name="twitter:description" content="November 11 - 13, 2022, Impact Hub / Clubco, Brno, Czech Republic - Lunarpunk hackathon focused on privacy and security. We believe that privacy is a fundamental human right. And good privacy needs good security foundations.">
+	<meta name="twitter:image" content="https://dev.ethbrno.cz/ogbrno.png">

 	<!-- Plausible -->
 	<script defer data-domain="ethbrno.cz" src="https://x.gwei.cz/js/script.js"></script>
--- a/src/lib/Footer.svelte
+++ b/src/lib/Footer.svelte
@ -11,24 +11,37 @@
 		<div
 			class="container mx-auto px-4 flex flex-wrap flex-col sm:flex-row justify-center items-center h-60"
 		>
-			<a
-				href="https://twitter.com/ethbrno"
-				rel="noopener noreferrer"
-				class="text-black ml-1"
-				target="_blank"><img src={logo} class=" h-6" alt="logo" /></a
-			>
+			<div>
+				<img src={logo} class=" h-6" alt="logo" />
+			</div>

-			<span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
-				<a class="text-black mr-10" href="https://twitter.com/ethbrno" rel="noopener noreferrer"
-					>Twitter
-				</a>
-				<a
-					class="ml-3 text-black"
-					href="https://matrix.to/#/#ethbrno:gwei.cz"
-					rel="noopener noreferrer"
-					>Chat
-				</a>
-			</span>
+			<div class="md:inline-flex gap-10 sm:ml-auto sm:mt-0 mt-10 justify-center sm:justify-start">
+				<div>
+					<a
+						class="text-black external"
+						href="https://docs.ethbrno.cz"
+						rel="noopener noreferrer"
+						>Documentation
+					</a>
+				</div>
+				<div>
+					<a
+						class="text-black external"
+						href="https://twitter.com/ethbrno"
+						rel="noopener noreferrer"
+						>Twitter
+					</a>
+				</div>
+				<div>
+					/join 
+					<a
+						class="text-black external"
+						href="https://matrix.ethbrno.cz"
+						rel="noopener noreferrer"
+						>#ethbrno:gwei.cz
+					</a>
+				</div>
+			</div>
 		</div>
 	</div>
 </footer>
--- a/src/lib/Navigation.svelte
+++ b/src/lib/Navigation.svelte
@ -10,14 +10,8 @@
 <nav class="flex flex-wrap items-center justify-center py-6  bg-white mx-auto sticky top-0 z-50">
 	<div class="container flex flex-wrap items-center justify-between xl:max-w-screen-xl px-3">
 		<div class="w-full relative flex justify-between xl:w-auto xl:static xl:block xl:justify-start">
-			<a class="text-sm leading-relaxed flex items-center justify-center" href="/">
+			<a class="text-sm leading-relaxed flex items-center justify-center" href="/" on:click={() => (open = false)}>
 				<img src={logo} alt="logo" class="w-[145px] h-[54px] md:mr-14 ml-4 md:ml-0" />
-				<a
-					href="webcal://dev.ethbrno.cz/icalendar.ics"
-					rel="noopener noreferrer"
-					target="_blank"
-					class="hidden md:block pt-2 underline">November 11.-13.</a
-				>
 			</a>
 			<button
 				class="text-black cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block xl:hidden outline-none focus:outline-none"
@ -29,53 +23,61 @@
 		</div>

 		<div
-			class={open ? 'xl:flex flex-grow items-center flex' : 'xl:flex flex-grow items-center hidden'}
+			class={open ? 'block w-full' : 'xl:flex flex-grow items-center hidden'}
 			id="navbar"
 		>
-			<ul
-				class="flex flex-col xl:flex-row xl:flex-grow-0 xl:mt-0 list-none xl:ml-auto text-base flex-grow my-8 xl:my-0"
-			>
-				<li>
-					<a
-						href="/"
-						class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75" on:click={() => (open = false)}
-						class:active={$page.url.pathname === '/'}>Home</a
-					>
-				</li>
-				<li>
-					<a
-						href="/venues"
-						class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75" on:click={() => (open = false)}
-						class:active={$page.url.pathname === '/venues'}>Venues</a
-					>
-				</li>
-				<li>
-					<a
-						href="/contributors"
-						class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75" on:click={() => (open = false)}
-						class:active={$page.url.pathname === '/contributors' || $page.url.pathname === '/team'}
-						>Contributors</a
-					>
-				</li>
-				<li>
-					<a
-						href="https://matrix.to/#/#ethbrno:gwei.cz"
-						rel="noopener noreferrer"
-						on:click={() => (open = false)}
-						class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75">Chat</a
-					>
-				</li>
-				<li>
-					<a
-						href="https://join.ethbrno.cz"
-						rel="noopener noreferrer"
-						target="_blank"
-						on:click={() => (open = false)}
-						class="px-5 py-2 flex items-center bg-black text-white leading-snug hover:opacity-75"
-						>Join</a
-					>
-				</li>
-			</ul>
+
+			<div class="text-sm pt-10 xl:pt-0 pl-4 xl:pl-0">
+					<strong>November 11 - 13, 2022</strong><br />
+					Brno, Czech Republic
+			</div>
+			<div class="flex flex-grow items-center">
+				<ul
+					class="flex flex-col xl:flex-row xl:flex-grow-0 xl:mt-0 list-none xl:ml-auto text-base flex-grow my-8 xl:my-0"
+				>
+					<li>
+						<a
+							href="/"
+							class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75" on:click={() => (open = false)}
+							class:active={$page.url.pathname === '/'}>Home</a
+						>
+					</li>
+					<li>
+						<a
+							href="/venues"
+							class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75" on:click={() => (open = false)}
+							class:active={$page.url.pathname === '/venues/'}>Venues</a
+						>
+					</li>
+					<li>
+						<a
+							href="/contributors"
+							class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75" on:click={() => (open = false)}
+							class:active={$page.url.pathname === '/contributors/'}
+							>Contributors</a
+						>
+					</li>
+					<li>
+						<a
+							href="https://matrix.ethbrno.cz"
+							rel="noopener noreferrer"
+							target="_blank"
+							on:click={() => (open = false)}
+							class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75 external">Chat</a
+						>
+					</li>
+					<li class="pl-0 xl:pl-5">
+						<a
+							href="https://join.ethbrno.cz"
+							rel="noopener noreferrer"
+							target="_blank"
+							on:click={() => (open = false)}
+							class="px-5 py-2 flex items-center bg-black text-white leading-snug hover:opacity-75 external"
+							>Join</a
+						>
+					</li>
+				</ul>
+			</div>
 		</div>
 	</div>
 </nav>
--- a/src/routes/+layout.js
+++ b/src/routes/+layout.js
@ -4,5 +4,8 @@ export const prerender = true;
 import data from '$lib/data.json';

 export async function load() {
-    return data
+    return {
+        ...data,
+        title: 'ETHBrno² 2022'
+    }
 }
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -27,7 +27,7 @@


 <svelte:head>
-	<title>ETHBrno²</title>
+	<title>ETHBrno² 2022</title>
 </svelte:head>
 <section class="text-gray-400 bg-black border-b">
 	<div class="w-full mx-auto flex md:flex-row md:h-5/6 flex-col items-center">
@ -72,14 +72,14 @@
 			<div class="flex justify-center">
 				<a
 					href="https://join.ethbrno.cz/"
-					class="inline-flex text-white bg-black border-0 py-2 px-6 focus:outline-none hover:bg-gray-900 text-lg"
+					class="inline-flex text-white bg-black border-0 py-2 px-6 focus:outline-none hover:bg-gray-900 text-lg external"
 					>Apply To Hack</a
 				>
 				<a
 					href="https://ethbrno.cz/sponsor-deck.pdf"
 					target="_blank"
 					rel="noopener noreferrer"
-					class="ml-4 inline-flex  border-0 py-2 px-6 focus:outline-none hover:bg-gray-100  text-lg underline"
+					class="ml-4 inline-flex  border-0 py-2 px-6 focus:outline-none hover:bg-gray-100  text-lg underline external"
 					>Sponsor</a
 				>
 			</div>
--- a/src/routes/contributors/+page.svelte
+++ b/src/routes/contributors/+page.svelte
@ -1,5 +1,4 @@
 <script>
-	/** @type {import('./$types').PageData} */
 	export let data;

 	const categories = [
@ -24,7 +23,7 @@
 </script>

 <svelte:head>
-	<title>Contributors: ETHBrno²</title>
+	<title>Contributors: {data.title}</title>
 </svelte:head>

 <section class="text-gray-400 body-font bg-black py-12">
@ -38,12 +37,14 @@
 				{#each Object.values(data.contributors).filter(x => x.roles.includes(cat.role)) as item}
 					{#if item.name !== undefined}
 						<div class="bg-black bg-opacity-40 p-6 h-full w-full md:w-1/3 lg:w-1/4">
-							<img
-								class="h-40 md:h-60 w-full object-cover object-center mb-6 grayscale hover:grayscale-0"
-								loading="lazy"
-								src={`/photos/contributors/${item.id}.jpg`}
-								alt={item.desc}
-							/>
+							<a href="https://twitter.com/{item.twitter}" target="_blank">
+								<img
+									class="h-40 md:h-60 w-full object-cover object-center mb-6 grayscale hover:grayscale-0"
+									loading="lazy"
+									src={`/photos/contributors/${item.id}.jpg`}
+									alt={item.desc}
+								/>
+							</a>
 							<h3
 								class="tracking-widest text-gray-400 text-xs font-medium title-font flex flex-row divide-x"
 							>
@ -51,32 +52,17 @@
 									<span class="underline">{role}</span>
 								{/each}
 							</h3>
-							<div class="flex flex-row mb-2">
+							<div class="flex flex-row mb-2 {item.remote ? 'contributor-remote' : ''}">
 								<a
 									class="text-lg text-white font-medium title-font"
 									href={`https://twitter.com/${item.twitter}`}
+									target="_blank"
 								>
 									{item.name}
 									{#if item.nickname}
 										({item.nickname})
 									{/if}
 								</a>
-								{#if item.remote}
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="w-4 h-4 ml-1 text-white"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
-										/>
-									</svg>
-								{/if}
 							</div>

 							<p class="leading-relaxed text-sm">{item.bio}</p>
--- a/src/routes/venues/+page.svelte
+++ b/src/routes/venues/+page.svelte
@ -1,5 +1,9 @@
+<script>
+	export let data;
+</script>
+
 <svelte:head>
-	<title>Venues: ETHBrno²</title>
+	<title>Venues: {data.title}</title>
 </svelte:head>
 <section class="text-white bg-black body-font">
 	<div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
@ -27,12 +31,20 @@
 				more. We want you to feel as comfortable as possible and we will do everything we can to
 				make that happen.
 			</div>
-			<div class="flex justify-center">
+			<div class="flex flex-wrap justify-center gap-4">
 				<a
-					href="https://goo.gl/maps/wutjvk8jCFuDcvSG6"
-					class="inline-flex text-black bg-white border-0 py-2 px-12 focus:outline-none hover:bg-gray-600 text-lg"
+					href="https://www.openstreetmap.org/way/339769163"
+					target="_blank"
+					class="inline-flex text-black bg-white border-0 py-2 px-6 focus:outline-none hover:bg-gray-600 text-lg external"
 				>
-					Map
+					OpenStreetMap
+				</a>
+				<a
+					href="https://goo.gl/maps/8bKsGHhVSYrF8ZmE8"
+					target="_blank"
+					class="inline-flex text-black bg-white border-0 py-2 px-6 focus:outline-none hover:bg-gray-600 text-lg external"
+				>
+					Google Maps
 				</a>
 			</div>
 		</div>
@ -78,12 +90,20 @@
 			<div class="relative mb-4">
 				This location will NOT be open 24/7, you will need to move to the Impact Hub for the night.
 			</div>
-			<div class="flex justify-center">
+			<div class="flex flex-wrap justify-center gap-4">
 				<a
-					href="https://g.page/clubco-brno?share"
-					class="inline-flex text-black bg-white border-0 py-2 px-12 focus:outline-none hover:bg-gray-600 text-lg"
+					href="https://www.openstreetmap.org/node/8848071783"
+					target="_blank"
+					class="inline-flex text-black bg-white border-0 py-2 px-6 focus:outline-none hover:bg-gray-600 text-lg external"
 				>
-					Map
+					OpenStreetMap
+				</a>
+				<a
+					href="https://g.page/clubco-brno"
+					target="_blank"
+					class="inline-flex text-black bg-white border-0 py-2 px-6 focus:outline-none hover:bg-gray-600 text-lg external"
+				>
+					Google Maps
 				</a>
 			</div>
 		</div>
--- a/static/sponsor-deck.pdf
+++ b/static/sponsor-deck.pdf