Add additional guides

scroll-tech · Nov 29, 2023 · 6fb2018 · 6fb2018
1 parent 9e7e761
commit 6fb2018
Show file tree

Hide file tree

Showing 10 changed files with 635 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": "Filosofia Codigo",
+    "author": "Filosofia Codigo",
+    "category": "Video",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": ""
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "Filosofia Codigo",
+    "author": "Filosofia Codigo",
+    "category": "Tutorial",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": ""
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "Filosofia Codigo",
+    "category": "DeFi",
+    "author": "Filosofia Codigo",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": ""
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "Filosofia Codigo",
+    "category": "L2 Architecture",
+    "author": "Filosofia Codigo",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": ""
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "Filosofia Codigo",
+    "category": "DeFi",
+    "author": "Filosofia Codigo",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": ""
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "Filosofia Codigo",
+    "category": "Zero-Knowledge Proofs",
+    "author": "Filosofia Codigo",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": ""
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "Filosofia Codigo",
+    "author": "Filosofia Codigo",
+    "category": "DeFi",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": ""
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "Filosofia Codigo",
+    "author": "Filosofia Codigo",
+    "category": "Solidity",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": ""
+  }
+]
diff --git a/src/components/AdditionalGuides/index.astro b/src/components/AdditionalGuides/index.astro
@@ -0,0 +1,96 @@
+---
+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, link, category }) => (
+        <DocsCard
+          title={title}
+          avatar={avatar}
+          author={author}
+          date={date}
+          publish={publishedTo}
+          link={link}
+          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: flex;
+    flex-wrap: wrap;
+    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;
+  }
+</style>
diff --git a/src/components/DocsCard.astro b/src/components/DocsCard.astro
@@ -0,0 +1,126 @@
+---
+import LinkSvg from "~/assets/svgs/home/home-link.svg?raw"
+export type Props = {
+  title: string
+  avatar: string
+  author: string
+  date: string
+  publish: string
+  link: string
+  category?: string
+}
+const { title, avatar, author, date, publish, link, category } = Astro.props as Props
+---
+
+<a class="docs-item" href={link} 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="https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg"
+        alt={title}
+      />
+      <div>
+        <div class="author">{author}</div>
+        <div>{date}</div>
+      </div>
+    </div>
+    <div class="right-side">
+      Published to <br />
+      {publish}
+    </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;
+  }
+
+  .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",
   },
 ]

diff --git a/src/components/NewsCard.astro b/src/components/NewsCard.astro
@@ -0,0 +1,74 @@
+---
+import LinkSvg from "~/assets/svgs/home/home-link.svg?raw"
+export type Props = {
+  cover: string
+  title: string
+  domain: string
+  link: string
+}
+const { cover, title, domain, link } = Astro.props as Props
+
+/**
+ * This component adds the classNames required by the scripts/click-to-zoom.ts script.
+ */
+---
+
+<div class="news-item">
+  <img class="news-item-cover" src={cover} />
+  <p class="news-item-title">{title}</p>
+  <a class="news-item-link" href={link}>
+    {domain}
+    <span class="link-icon">
+      <Fragment set:html={LinkSvg} />
+    </span>
+  </a>
+</div>
+
+<style>
+  .news-item {
+  }
+
+  .news-item-cover {
+    width: 100%;
+  }
+
+  .news-item-title {
+    font-size: 24px;
+    font-weight: 600;
+    margin-top: 18px;
+    margin-bottom: 20px;
+  }
+  .news-item-link {
+    font-size: 20px;
+    @apply text-black dark:text-white;
+  }
+
+  .link-icon {
+    display: inline-flex;
+
+    margin-left: 2px;
+  }
+
+  .link-icon :global(svg) {
+    width: 11px;
+    height: 11px;
+  }
+
+  @media screen and (max-width: 50em) {
+    .news-item {
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      max-width: 360px;
+      margin: 0 auto;
+    }
+    .news-item-title {
+      font-size: 20px;
+      line-height: normal;
+      margin-top: 13px;
+      margin-bottom: 8px;
+    }
+    .news-item-link {
+    }
+  }
+</style>