Add additional guides

scroll-tech · Dec 26, 2023 · af84234 · af84234
1 parent 9e7e761
commit af84234
Show file tree

Hide file tree

Showing 10 changed files with 659 additions and 7 deletions.
diff --git a/src/components/AdditionalGuides/guides.json b/src/components/AdditionalGuides/guides.json
@@ -0,0 +1,74 @@
+[
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "author": "Filosofia Codigo",
+    "category": "Video",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "author": "Filosofia Codigo",
+    "category": "Tutorial",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "category": "DeFi",
+    "author": "Filosofia Codigo",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "category": "L2 Architecture",
+    "author": "Filosofia Codigo",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "category": "DeFi",
+    "author": "Filosofia Codigo",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "category": "Zero-Knowledge Proofs",
+    "author": "Filosofia Codigo",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "author": "Filosofia Codigo",
+    "category": "DeFi",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "author": "Filosofia Codigo",
+    "category": "Solidity",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  }
+]
diff --git a/src/components/AdditionalGuides/index.astro b/src/components/AdditionalGuides/index.astro
@@ -0,0 +1,111 @@
+---
+import guides from "./guides.json"
+// import DocsCard from "../../components/DocsCard.astro"
+import DocsCard from "~/components/DocsCard.astro"
+const categories = ["All", ...new Set(guides.map((guide) => guide.category))]
+---
+
+<div>
+  <ul class="category-picker">
+    {
+      categories.map((category) => (
+        <li class={`item ${category === "All" ? "active" : ""}`} data-category={category} onclick="filterGuides(event)">
+          {category}
+        </li>
+      ))
+    }
+  </ul>
+  <div class="guides-list" id="guides-list">
+    {
+      guides.map(({ title, avatar, author, date, publishedTo, url, category }) => (
+        <DocsCard
+          title={title}
+          avatar={avatar}
+          author={author}
+          date={date}
+          publishedTo={publishedTo}
+          url={url}
+          category={category}
+        />
+      ))
+    }
+  </div>
+</div>
+
+<script type="module">
+  window.filterGuides = function (event) {
+    const selectedCategory = event.target.getAttribute("data-category")
+    const guidesList = document.getElementById("guides-list")
+    const guideItems = Array.from(guidesList.children)
+
+    document.querySelectorAll(".category-picker .item").forEach((item) => {
+      item.classList.remove("active")
+    })
+    event.target.classList.add("active")
+
+    guideItems.forEach((guide) => {
+      const category = guide.getAttribute("data-category")
+      if (selectedCategory === "All" || category === selectedCategory) {
+        guide.style.display = ""
+      } else {
+        guide.style.display = "none"
+      }
+    })
+  }
+</script>
+
+<style>
+  .category-picker {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .category-picker .item {
+    display: inline-flex;
+    height: 44px;
+    padding: 0px 30px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: 100px;
+    margin-top: 0;
+    cursor: pointer;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    border-width: 1px;
+    border-style: solid;
+    @apply border-black dark:border-white;
+  }
+  .category-picker .item.active {
+    @apply text-white bg-black dark:text-black dark:bg-white;
+  }
+  .guides-list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    margin-top: 30px;
+  }
+
+  .guides-list :global(.docs-item) {
+    background: rgba(237, 237, 237, 0.6);
+  }
+
+  :global(.dark .guides-list .docs-item) {
+    @apply bg-dark-normal;
+  }
+
+  @media screen and (max-width: 1300px) {
+    .guides-list {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media screen and (max-width: 50em) {
+    .category-picker .item {
+      height: 36px;
+      padding: 0px 20px;
+      margin-right: 12px;
+      margin-bottom: 12px;
+    }
+  }
+</style>
diff --git a/src/components/DocsCard.astro b/src/components/DocsCard.astro
@@ -0,0 +1,129 @@
+---
+import LinkSvg from "~/assets/svgs/home/home-link.svg?raw"
+export type Props = {
+  title: string
+  avatar: string
+  author: string
+  date: string
+  publishedTo: string
+  url: string
+  category?: string
+}
+const { title, avatar, author, date, publishedTo, url, category } = Astro.props as Props
+---
+
+<a class="docs-item" href={url} data-category={category}>
+  <div class="docs-item-title">
+    <span class="link-icon inline-block w-[1.5rem] h-[1.5rem] text-black dark:text-white">
+      <Fragment set:html={LinkSvg} />
+    </span>
+    {title}
+  </div>
+  <div class="docs-info-box">
+    <div class="left-side">
+      <img class="author-avator" src={avatar} alt={title} />
+      <div>
+        <div class="author">{author}</div>
+        <div>{date}</div>
+      </div>
+    </div>
+    <div class="right-side">
+      Published to <br />
+      {publishedTo}
+    </div>
+  </div>
+</a>
+
+<style>
+  .docs-item {
+    padding: 23px 30px 30px 30px;
+    width: 100%;
+    max-width: 430px;
+    height: 182px;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: all 0.2s ease-in-out;
+    cursor: pointer;
+  }
+
+  .docs-item:hover {
+    /* transform: scale(1.01); */
+    @apply bg-normal dark:bg-dark-highlight;
+  }
+
+  .docs-item-title {
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 30px;
+    letter-spacing: 0.22px;
+    width: 100%;
+    @apply text-black dark:text-white;
+  }
+  .docs-info-box {
+    display: flex;
+    justify-content: space-between;
+    color: #756a67;
+    text-align: right;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 125% */
+    letter-spacing: 0.16px;
+    width: 100%;
+  }
+
+  .left-side {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: left;
+  }
+
+  .author-avator {
+    width: 36px;
+    height: 36px;
+    margin-right: 12px;
+    border-radius: 50%;
+  }
+  .author {
+    @apply text-black dark:text-white;
+  }
+
+  .link-icon {
+    display: inline-flex;
+    margin-left: 33px;
+    margin-top: 10px;
+    float: right;
+  }
+
+  .link-icon :global(svg) {
+    width: 15px;
+    height: 15px;
+    font-size: 20px;
+  }
+
+  @media screen and (max-width: 50em) {
+    .docs-item {
+      padding: 12px 16px 16px 16px;
+    }
+    .docs-item {
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      max-width: 360px;
+      margin: 0 auto;
+    }
+    .docs-item-title {
+      font-size: 20px;
+      line-height: normal;
+      margin-top: 13px;
+      margin-bottom: 8px;
+    }
+    .docs-info-box {
+      font-size: 14px;
+    }
+  }
+</style>
diff --git a/src/components/Footer/helper.tsx b/src/components/Footer/helper.tsx
@@ -28,7 +28,7 @@ export const aboutList = [
   },
   {
     name: "Join Us",
-    href: "https://jobs.lever.co/ScrollFoundation",
+    href: "https://scroll.io/join-us",
   },
   {
     name: "Health Status",
@@ -54,7 +54,7 @@ export const resourceList = [
     href: "https://docs.scroll.io/",
   },
   {
-    name: "Press Kit",
+    name: "Brand Kit",
     href: "https://scrollzkp.notion.site/Scroll-Rebrand-Assets-5bb83465f56f40989c4f772b39ed3a06",
   },
 ]