Skip to content

Commit

Permalink
Merge pull request #2 from 2077-Collective/main
Browse files Browse the repository at this point in the history
pr
  • Loading branch information
losndu authored Aug 21, 2024
2 parents a990cc7 + a118114 commit 62a785f
Show file tree
Hide file tree
Showing 22 changed files with 3,429 additions and 2,621 deletions.
5,336 changes: 2,951 additions & 2,385 deletions research/pnpm-lock.yaml

Large diffs are not rendered by default.

47 changes: 47 additions & 0 deletions research/src/components/ArticleList.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<script lang="ts">
import { type Article } from '../types/article'
import { categories } from '../stores/filters.store'
export let articles: Article[]
let filteredArticles: Article[]
$: {
if ($categories.length === 0) {
filteredArticles = articles
} else {
filteredArticles = articles.filter((article) =>
article.categories.some((category) =>
$categories.includes(category.name),
),
)
}
}
</script>

<ul
class="mb-32 grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-12 gap-y-4 xl:w-5/6"
>
{#each filteredArticles as article (article.id)}
<li class="flex flex-col gap-y-1">
<a class="bg-transparent" href={`/${article.slug}`}>
<img src={article.thumb.url} alt="" width="720" height="480" />
<ul class="flex py-2">
{#each article.categories as category}
<li>
<a
href={`/categories/${category.name}`}
class="mr-2 font-bold flex items-center gap-0.5 text-sm bg-[#1B1B1B] text-[#C6FF50] max-w-fit-content px-2 py-1.5 rounded-md"
>
{category.name}
</a>
</li>
{/each}
</ul>
<h2 class="mb-2 text-xl font-bold">{article.title}</h2>
<p class="text-lg text-gray-900 font-bold mb-4">
{article.summary}
</p>
</a>
</li>
{/each}
</ul>
67 changes: 7 additions & 60 deletions research/src/components/Header.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import Sun from './icons/Sun.svelte'
import Moon from './icons/Moon.svelte'
import Menu from './icons/Menu.svelte'
import MobileNav from './MobileNav.svelte'
import Dropdown from './Dropdown.svelte'
import {
toggleTheme,
Expand All @@ -11,7 +11,7 @@
} from '../stores/theme.store'
</script>

<header class="py-8 px-6 lg:px-32 max-w-screen-3xl m-auto">
<header class="py-8 px-6 lg:px-32 max-w-screen-3xl m-auto w-full">
<nav class="flex justify-between">
<div>
<a href="/" class="">
Expand Down Expand Up @@ -45,15 +45,15 @@
{/if}
</button> -->

<button class="lg:hidden">
<Menu />
</button>
<MobileNav />

<div class="font-bold hidden lg:flex items-center gap-x-8">
<Dropdown />

<a href="https://2077.xyz/support" class="font-bold hover:text-green"
>Support us</a
<a
href="https://2077.xyz/support"
target="_blank"
class="font-bold hover:text-green">Support us</a
>
<a
href="#subscribe"
Expand All @@ -65,56 +65,3 @@
</div>
</nav>
</header>

<style scoped>
.sidebar {
clip-path: polygon(30px 0, 100% 0, 280% 0px, 80% 100%, 0 100%, 0 30px);
display: none;
}
.sidebar > a:hover {
clip-path: polygon(20px 0, 100% 0, 300% 0px, 100% 100%, 0 100%, 0 20px);
}
.sidebar > a:last-child:hover {
clip-path: polygon(50px 0, 10% 0, 137% 0px, 80% 100%, 0 100%, 0 0px);
}
.sidebar.show {
display: block;
}
.resources-button:hover .svg-path {
fill: #c6ff50;
}
.resources-button:focus + .sidebar,
.resources-button:hover + .sidebar {
display: block;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
</style>
86 changes: 86 additions & 0 deletions research/src/components/MobileNav.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<script lang="ts">
import { slide } from 'svelte/transition'
import { quintOut } from 'svelte/easing'
import ExternalLink from './icons/ExternalLink.svelte'
import Hamburguer from './icons/Hamburguer.svelte'
let open = false
</script>

<button class="lg:hidden cursor-pointer p-2" on:click={() => (open = !open)}>
<Hamburguer />
</button>

{#if open}
<button
class="fixed inset-0 bg-black bg-opacity-50 z-40"
on:click={() => (open = false)}
></button>
<div
class="fixed inset-y-0 right-0 md:w-2/5 max-w-sm w-full max-w-full bg-white shadow-lg z-50 overflow-y-auto flex flex-col p-4"
transition:slide={{ duration: 300, easing: quintOut }}
>
<button class="self-end text-gray-700" on:click={() => (open = false)}
>Close</button
>
<div class="flex flex-col gap-4">
<div>
<div class="flex items-center gap-2">
<h3 class="font-semibold">Resources</h3>
<ExternalLink />
</div>
<ul class="mt-4 space-y-4">
<li>
<a
href="https://eip2077.info"
target="_blank"
class="block px-4 py-2">EIP-2077</a
>
</li>
<li>
<a
href="https://eips.wiki"
target="_blank"
class="block px-4 py-2">EIP Wiki</a
>
</li>
<li>
<a
href="https://research.2077.xyz"
target="_blank"
class="block px-4 py-2">2077 Labs</a
>
</li>
<li>
<a
href="https://etherpedia.2077.xyz"
target="_blank"
class="block px-4 py-2"
>
Etherpedia
</a>
</li>
</ul>
</div>
<div>
<a
href="https://2077.xyz/support"
target="_blank"
class="flex items-center gap-2"
>
<h3 class="font-semibold">Support us</h3>
<ExternalLink />
</a>
</div>
<div class="w-full flex items-center justify-center mt-16">
<a
on:click={() => (open = false)}
href="#subscribe"
class="bg-greenLm text-black px-8 py-2 rounded font-bold"
>
Subscribe
</a>
</div>
</div>
</div>
{/if}
69 changes: 69 additions & 0 deletions research/src/components/SideMenu.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<script lang="ts">
import { type Article } from '../types/article'
import {
toggleCategory,
clearCategories,
categories,
} from '../stores/filters.store'
export let articles: Article[]
let availableCategories: string[] = []
$: {
availableCategories = Array.from(
new Set(
articles.flatMap((article) =>
article.categories.map((category) => category.name),
),
),
)
}
</script>

<div
class="hidden menu dark:bg-gray bg-black lg:block lg:min-w-[180px] mr-12 rounded-md xl:w-1/6 h-[520px]"
>
<div class="font-bold pt-2 px-2 flex flex-col">
<a
class="block px-4 py-4 text-white hover:text-black hover:bg-greenLm hover:rounded cursor-pointer"
class:text-green={$categories.length === 0}
on:click={() => clearCategories()}
>
All
</a>
{#each availableCategories as category}
<a
class="block px-4 py-4 text-white hover:text-black hover:bg-greenLm hover:rounded cursor-pointer"
class:text-green={$categories.includes(category)}
on:click={() => toggleCategory(category)}
>
{category}
</a>
{/each}
</div>
</div>

<div class="flex gap-2 block lg:hidden mb-8">
<button
class="mr-2 font-bold flex items-center gap-0.5 text-sm bg-[#1B1B1B] text-gray-100 w-fit px-2 py-1.5 rounded-md hover:text-green hover:bg-black"
class:text-green={$categories.length === 0}
on:click={() => clearCategories()}
>
All
</button>
{#each availableCategories as category}
<button
class="mr-2 font-bold flex items-center gap-0.5 text-sm bg-[#1B1B1B] text-gray-100 w-fit px-2 py-1.5 rounded-md hover:text-green hover:bg-black"
class:text-green={$categories.includes(category)}
on:click={() => toggleCategory(category)}
>
{category}
</button>
{/each}
</div>

<style scoped>
.menu {
clip-path: polygon(30px 0, 100% 0, 290% 20px, 85% 100%, 0 100%, 0 30px);
}
</style>
24 changes: 24 additions & 0 deletions research/src/components/icons/ExternalLink.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<script lang="ts">
export let size = '16px'
</script>

<svg
width="800px"
height="800px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style:width={size}
style:height={size}
>
<g id="Interface / External_Link">
<path
id="Vector"
d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
</svg>
File renamed without changes.
Loading

0 comments on commit 62a785f

Please sign in to comment.