From 256d068ee2e2ad2f1934e1fbea72ce40110b188f Mon Sep 17 00:00:00 2001 From: zhengqi zhang <770166635@qq.com> Date: Wed, 29 Nov 2023 22:33:05 +0800 Subject: [PATCH] Add additional guides --- src/components/AdditionalGuides/guides.json | 74 +++++++++ src/components/AdditionalGuides/index.astro | 111 +++++++++++++ src/components/DocsCard.astro | 129 ++++++++++++++ src/components/Footer/helper.tsx | 4 +- src/components/NewsCard.astro | 80 +++++++++ src/components/SectionHeader/index.astro | 32 +++- .../en/getting-started/additional-guides.mdx | 12 ++ src/pages/en/home/AdditionalGuides.astro | 157 ++++++++++++++++++ src/pages/en/home/Motion.astro | 63 +++++++ src/pages/en/home/index.astro | 4 + src/pages/es/home/AdditionalGuides.astro | 157 ++++++++++++++++++ src/pages/es/home/Motion.astro | 63 +++++++ src/pages/es/home/index.astro | 4 + src/pages/zh/home/AdditionalGuides.astro | 157 ++++++++++++++++++ src/pages/zh/home/Motion.astro | 63 +++++++ src/pages/zh/home/index.astro | 4 + 16 files changed, 1107 insertions(+), 7 deletions(-) create mode 100644 src/components/AdditionalGuides/guides.json create mode 100644 src/components/AdditionalGuides/index.astro create mode 100644 src/components/DocsCard.astro create mode 100644 src/components/NewsCard.astro create mode 100644 src/content/docs/en/getting-started/additional-guides.mdx create mode 100644 src/pages/en/home/AdditionalGuides.astro create mode 100644 src/pages/en/home/Motion.astro create mode 100644 src/pages/es/home/AdditionalGuides.astro create mode 100644 src/pages/es/home/Motion.astro create mode 100644 src/pages/zh/home/AdditionalGuides.astro create mode 100644 src/pages/zh/home/Motion.astro diff --git a/src/components/AdditionalGuides/guides.json b/src/components/AdditionalGuides/guides.json new file mode 100644 index 000000000..0d4e9c225 --- /dev/null +++ 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 new file mode 100644 index 000000000..def7260a4 --- /dev/null +++ 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))] +--- + +
+ +
+ { + guides.map(({ title, avatar, author, date, publishedTo, url, category }) => ( + + )) + } +
+
+ + + + diff --git a/src/components/DocsCard.astro b/src/components/DocsCard.astro new file mode 100644 index 000000000..86bc1f771 --- /dev/null +++ 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 +--- + + +
+ + + + {title} +
+
+
+ {title} +
+
{author}
+
{date}
+
+
+
+ Published to
+ {publishedTo} +
+
+ + + diff --git a/src/components/Footer/helper.tsx b/src/components/Footer/helper.tsx index c195d7dac..2d6c2e432 100644 --- 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 new file mode 100644 index 000000000..6d0b0c941 --- /dev/null +++ b/src/components/NewsCard.astro @@ -0,0 +1,80 @@ +--- +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. + */ +--- + +
+ +

{title}

+ + {domain} + + + + +
+ + diff --git a/src/components/SectionHeader/index.astro b/src/components/SectionHeader/index.astro index 4a2e88b39..1973997dd 100644 --- a/src/components/SectionHeader/index.astro +++ b/src/components/SectionHeader/index.astro @@ -2,16 +2,34 @@ interface Props { title: string content: string + url?: string + targetName?: string } -const { title, content } = Astro.props as Props +const { title, content, url, targetName } = Astro.props as Props --- -<> -

{title}

-

{content}

- +
+
+

{title}

+

{content}

+
+ { + targetName && ( +
+ {targetName} +
+ ) + } +
diff --git a/src/pages/en/home/Motion.astro b/src/pages/en/home/Motion.astro new file mode 100644 index 000000000..41b463caa --- /dev/null +++ b/src/pages/en/home/Motion.astro @@ -0,0 +1,63 @@ +--- +import NewsCard from "~/components/NewsCard.astro" +import SectionHeader from "~/components/SectionHeader/index.astro" + +const newsList = [ + { + cover: "https://scroll.io/imgs/career/news/news-cover-1.png", + title: "Get introduced to zkRollups and zkEVMs", + domain: "youtube.com", + link: "https://www.youtube.com/watch?v=JdjRcW13LME", + }, + { + cover: "https://scroll.io/imgs/career/news/news-cover-2.png", + title: "What it means to build in the open on the Zero Knowledge podcast", + domain: "zeroknowledge.fm", + link: "https://zeroknowledge.fm/275-2/", + }, + { + cover: "https://scroll.io/imgs/career/news/news-cover-3.png", + title: "Diving Deep into ZK with Scroll’s Co-Founders", + domain: "blockworks.co", + link: "https://blockworks.co/podcast/empire/dc33c4f8-da5f-11ec-a5ac-27c2459d4600", + }, +] +--- + +
+ +
+ { + newsList.map(({ cover, title, domain, link }) => ( + + )) + } +
+
+ + diff --git a/src/pages/en/home/index.astro b/src/pages/en/home/index.astro index ae44695e9..bd2f7a814 100644 --- a/src/pages/en/home/index.astro +++ b/src/pages/en/home/index.astro @@ -4,6 +4,8 @@ import HomeLayout from "../../../layouts/HomeLayout.astro" import Search from "../../../components/HomeSearch" import QuickStart from "./QuickStart.astro" import Navigate from "./Navigate.astro" +import Motion from "./Motion.astro" +import AdditionalGuides from "./AdditionalGuides.astro" import ConnectUs from "./ConnectUs.astro" changeLanguage("en") @@ -20,6 +22,8 @@ changeLanguage("en")
+ +
diff --git a/src/pages/es/home/AdditionalGuides.astro b/src/pages/es/home/AdditionalGuides.astro new file mode 100644 index 000000000..1f87dee2f --- /dev/null +++ b/src/pages/es/home/AdditionalGuides.astro @@ -0,0 +1,157 @@ +--- +import DocsCard from "~/components/DocsCard.astro" +import SectionHeader from "~/components/SectionHeader/index.astro" + +const docsList = { + featured: [ + { + title: "How to Earn on Aave from Solidity", + avatar: "", + author: "Filosofia Codigo", + date: "Oct 4th", + publish: "docsListFilosofía Código EN", + link: "", + }, + { + title: "5 Ways to Deploy Your Smart Contract", + avatar: "", + author: "Filosofia Codigo", + date: "Oct 4th", + publish: "docsListFilosofía Código EN", + link: "", + }, + { + title: "Trustless Attestation", + avatar: "", + author: "Filosofia Codigo", + date: "Oct 4th", + publish: "docsListFilosofía Código EN", + link: "", + }, + { + title: "Additional Guide With Max Topic Line Can Go Lorem Ipsum ", + avatar: "", + author: "Filosofia Codigo", + date: "Oct 4th", + publish: "docsListFilosofía Código EN", + link: "", + }, + ], + latest: [ + { + title: "How to Earn on Aave from Solidity", + avatar: "", + author: "Filosofia Codigo", + date: "Oct 4th", + publish: "docsListFilosofía Código EN", + link: "", + }, + { + title: "5 Ways to Deploy Your Smart Contract", + avatar: "", + author: "Filosofia Codigo", + date: "Oct 4th", + publish: "docsListFilosofía Código EN", + link: "", + }, + ], +} +--- + +
+ + +
+
+

Featured

+
+ { + docsList.featured.map(({ title, avatar, author, date, publish, url }) => ( + + )) + } +
+
+
+
+

Latest

+
+ { + docsList.latest.map(({ title, avatar, author, date, publish, url }) => ( + + )) + } +
+
+
+
+ + diff --git a/src/pages/es/home/Motion.astro b/src/pages/es/home/Motion.astro new file mode 100644 index 000000000..41b463caa --- /dev/null +++ b/src/pages/es/home/Motion.astro @@ -0,0 +1,63 @@ +--- +import NewsCard from "~/components/NewsCard.astro" +import SectionHeader from "~/components/SectionHeader/index.astro" + +const newsList = [ + { + cover: "https://scroll.io/imgs/career/news/news-cover-1.png", + title: "Get introduced to zkRollups and zkEVMs", + domain: "youtube.com", + link: "https://www.youtube.com/watch?v=JdjRcW13LME", + }, + { + cover: "https://scroll.io/imgs/career/news/news-cover-2.png", + title: "What it means to build in the open on the Zero Knowledge podcast", + domain: "zeroknowledge.fm", + link: "https://zeroknowledge.fm/275-2/", + }, + { + cover: "https://scroll.io/imgs/career/news/news-cover-3.png", + title: "Diving Deep into ZK with Scroll’s Co-Founders", + domain: "blockworks.co", + link: "https://blockworks.co/podcast/empire/dc33c4f8-da5f-11ec-a5ac-27c2459d4600", + }, +] +--- + +
+ +
+ { + newsList.map(({ cover, title, domain, link }) => ( + + )) + } +
+
+ + diff --git a/src/pages/es/home/index.astro b/src/pages/es/home/index.astro index a9a587cef..f26ea86a6 100644 --- a/src/pages/es/home/index.astro +++ b/src/pages/es/home/index.astro @@ -4,6 +4,8 @@ import HomeLayout from "../../../layouts/HomeLayout.astro" import Search from "../../../components/HomeSearch" import QuickStart from "./QuickStart.astro" import Navigate from "./Navigate.astro" +import Motion from "./Motion.astro" +import AdditionalGuides from "./AdditionalGuides.astro" import ConnectUs from "./ConnectUs.astro" changeLanguage("es") @@ -20,6 +22,8 @@ changeLanguage("es")
+ +
diff --git a/src/pages/zh/home/AdditionalGuides.astro b/src/pages/zh/home/AdditionalGuides.astro new file mode 100644 index 000000000..1f87dee2f --- /dev/null +++ b/src/pages/zh/home/AdditionalGuides.astro @@ -0,0 +1,157 @@ +--- +import DocsCard from "~/components/DocsCard.astro" +import SectionHeader from "~/components/SectionHeader/index.astro" + +const docsList = { + featured: [ + { + title: "How to Earn on Aave from Solidity", + avatar: "", + author: "Filosofia Codigo", + date: "Oct 4th", + publish: "docsListFilosofía Código EN", + link: "", + }, + { + title: "5 Ways to Deploy Your Smart Contract", + avatar: "", + author: "Filosofia Codigo", + date: "Oct 4th", + publish: "docsListFilosofía Código EN", + link: "", + }, + { + title: "Trustless Attestation", + avatar: "", + author: "Filosofia Codigo", + date: "Oct 4th", + publish: "docsListFilosofía Código EN", + link: "", + }, + { + title: "Additional Guide With Max Topic Line Can Go Lorem Ipsum ", + avatar: "", + author: "Filosofia Codigo", + date: "Oct 4th", + publish: "docsListFilosofía Código EN", + link: "", + }, + ], + latest: [ + { + title: "How to Earn on Aave from Solidity", + avatar: "", + author: "Filosofia Codigo", + date: "Oct 4th", + publish: "docsListFilosofía Código EN", + link: "", + }, + { + title: "5 Ways to Deploy Your Smart Contract", + avatar: "", + author: "Filosofia Codigo", + date: "Oct 4th", + publish: "docsListFilosofía Código EN", + link: "", + }, + ], +} +--- + +
+ + +
+
+

Featured

+
+ { + docsList.featured.map(({ title, avatar, author, date, publish, url }) => ( + + )) + } +
+
+
+
+

Latest

+
+ { + docsList.latest.map(({ title, avatar, author, date, publish, url }) => ( + + )) + } +
+
+
+
+ + diff --git a/src/pages/zh/home/Motion.astro b/src/pages/zh/home/Motion.astro new file mode 100644 index 000000000..41b463caa --- /dev/null +++ b/src/pages/zh/home/Motion.astro @@ -0,0 +1,63 @@ +--- +import NewsCard from "~/components/NewsCard.astro" +import SectionHeader from "~/components/SectionHeader/index.astro" + +const newsList = [ + { + cover: "https://scroll.io/imgs/career/news/news-cover-1.png", + title: "Get introduced to zkRollups and zkEVMs", + domain: "youtube.com", + link: "https://www.youtube.com/watch?v=JdjRcW13LME", + }, + { + cover: "https://scroll.io/imgs/career/news/news-cover-2.png", + title: "What it means to build in the open on the Zero Knowledge podcast", + domain: "zeroknowledge.fm", + link: "https://zeroknowledge.fm/275-2/", + }, + { + cover: "https://scroll.io/imgs/career/news/news-cover-3.png", + title: "Diving Deep into ZK with Scroll’s Co-Founders", + domain: "blockworks.co", + link: "https://blockworks.co/podcast/empire/dc33c4f8-da5f-11ec-a5ac-27c2459d4600", + }, +] +--- + +
+ +
+ { + newsList.map(({ cover, title, domain, link }) => ( + + )) + } +
+
+ + diff --git a/src/pages/zh/home/index.astro b/src/pages/zh/home/index.astro index d0bdb9582..84c127523 100644 --- a/src/pages/zh/home/index.astro +++ b/src/pages/zh/home/index.astro @@ -4,6 +4,8 @@ import HomeLayout from "../../../layouts/HomeLayout.astro" import Search from "../../../components/HomeSearch" import QuickStart from "./QuickStart.astro" import Navigate from "./Navigate.astro" +import Motion from "./Motion.astro" +import AdditionalGuides from "./AdditionalGuides.astro" import ConnectUs from "./ConnectUs.astro" changeLanguage("zh") @@ -20,6 +22,8 @@ changeLanguage("zh")
+ +