Merge

research/src/components/ArticleList.svelte

@@ -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} 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>

research/src/components/Dropdown.svelte

@@ -1,5 +1,7 @@
 <div class="group flex flex-col relative">
-    <button class="dropbtn flex gap-x-2 items-center hover:text-[#C6FF50]">
+    <button
+        class="dropbtn flex gap-x-2 items-center hover:text-greenLm hover:text-greenLm dark:hover:text-green"
+    >
         Resources
         <span class="">
             <svg

research/src/components/Header.svelte

@@ -1,17 +1,10 @@
 <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,
-        getTheme,
-        theme,
-        anotherStuff,
-    } from '../stores/theme.store'
+    import ToggleTheme from './ToggleTheme.svelte'
 </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="">
@@ -32,27 +25,16 @@
             </a>
         </div>
 
-        <div class="flex items-center">
-            <!-- <button
-                id="btn"
-                class="h-12 w-12 rounded-lg pr-8 hover:bg-gray-100 dark:hover:bg-gray-700"
-                on:click={toggleTheme}
-            >
-                {#if $theme === 'dark'}
-                    <Sun />
-                {:else}
-                    <Moon />
-                {/if}
-            </button> -->
-
-            <button class="lg:hidden">
-                <Menu />
-            </button>
+        <div class="flex items-center gap-0 md:gap-2 lg:gap-4">
+            <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"
+                <a
+                    href="https://2077.xyz/support"
+                    target="_blank"
+                    class="font-bold hover:text-greenLm dark:hover:text-green"
                     >Support us</a
                 >
                 <a
@@ -62,59 +44,7 @@
                     Subscribe
                 </a>
             </div>
+            <ToggleTheme />
         </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>

research/src/components/MobileNav.svelte

@@ -0,0 +1,87 @@
+<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 dark:bg-gray 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 p-2"
+            on:click={() => (open = false)}>X</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}

research/src/components/SideMenu.svelte

@@ -0,0 +1,77 @@
+<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 flex-wrap 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 min-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 min-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>

research/src/components/ToggleTheme.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { toggleTheme, theme } from '../stores/theme.store'
+    import Sun from './icons/Sun.svelte'
+    import Moon from './icons/Moon.svelte'
+    import { beforeUpdate } from 'svelte'
+
+    beforeUpdate(() => {
+        const theme = localStorage.getItem('theme')
+        if (theme === 'dark') {
+            document.documentElement.classList.add('dark')
+        } else {
+            document.documentElement.classList.remove('dark')
+        }
+    })
+</script>
+
+<button
+    id="btn"
+    class="rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center"
+    on:click={toggleTheme}
+>
+    {#if $theme === 'dark'}
+        <Sun />
+    {:else}
+        <Moon />
+    {/if}
+</button>

research/src/components/icons/ExternalLink.svelte

@@ -0,0 +1,25 @@
+<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}
+    class="text-current"
+>
+    <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="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </g>
+</svg>