diff --git a/src/constants/blog.ts b/src/constants/blog.ts index e62d9e1f..93579fee 100644 --- a/src/constants/blog.ts +++ b/src/constants/blog.ts @@ -20,6 +20,10 @@ export const getBlogCategoryList = lang => [ label: LANGUAGE_MAP[lang].technical, key: "Technical", }, + { + label: LANGUAGE_MAP[lang].ecosystem_highlights, + key: "Ecosystem highlights", + }, ] export const getBlogSortList = lang => [ @@ -42,6 +46,7 @@ export const LANGUAGE_MAP = { announcement: "Announcement", general: "General", technical: "Technical", + ecosystem_highlights: "Ecosystem highlights", sort: "Order by", newest: "Newest", oldest: "Oldest", @@ -56,6 +61,7 @@ export const LANGUAGE_MAP = { announcement: "Duyuru", general: "Genel", technical: "Teknik", + ecosystem_highlights: "Ekosistem vurguları", sort: "Şuna göre sırala", newest: "En yeni", oldest: "En eski", diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index e8f99436..e2835d64 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -1,5 +1,6 @@ import { orderBy } from "lodash" import { useEffect, useMemo, useState } from "react" +import { useLocation } from "react-router-dom" import useStorage from "squirrel-gill" import { Tune as TuneIcon } from "@mui/icons-material" @@ -162,6 +163,7 @@ const BlogList = styled("ul")(({ theme }) => ({ })) const Blog = () => { + const location = useLocation() const { isDesktop } = useCheckViewport() const [language] = useStorage(localStorage, BLOG_LANGUAGE, "en") const BLOG_CATEGORY_LIST = useMemo(() => getBlogCategoryList(language), [language]) @@ -171,10 +173,12 @@ const Blog = () => { const handleFilterOpen = () => setFilterOpen(true) const handleFilterClose = () => setFilterOpen(false) + const { category } = location.state || "All" + const [blogs, setBlogs] = useState(blogSource) const [queryForm, setQueryForm] = useState({ sort: "Newest", - category: "All", + category, }) const blogsWithLang = useMemo(() => filterBlogsByLanguage(blogSource, language), [blogSource, language]) diff --git a/src/pages/ecosystem/Highlights/HighlightList/Card.tsx b/src/pages/ecosystem/Highlights/HighlightList/Card.tsx index 6900ee26..c593a340 100644 --- a/src/pages/ecosystem/Highlights/HighlightList/Card.tsx +++ b/src/pages/ecosystem/Highlights/HighlightList/Card.tsx @@ -56,14 +56,10 @@ const ReadButton = styled(Button)(({ theme }) => ({ }, })) -const BlogCard = ({ blog, small = false }) => { +const BlogCard = ({ blog }) => { const navigate = useNavigate() const handleClick = () => { - if (blog.externalLink) { - window.location.href = blog.externalLink - } else { - navigate("/blog/" + blog.id) - } + navigate("/blog/" + blog.slug) } return ( diff --git a/src/pages/ecosystem/Highlights/HighlightList/index.tsx b/src/pages/ecosystem/Highlights/HighlightList/index.tsx index d8130288..0f59736c 100644 --- a/src/pages/ecosystem/Highlights/HighlightList/index.tsx +++ b/src/pages/ecosystem/Highlights/HighlightList/index.tsx @@ -1,10 +1,11 @@ -import { Pagination } from "swiper/modules" +import { Autoplay, Pagination } from "swiper/modules" import { Swiper, SwiperSlide } from "swiper/react" import { styled } from "@mui/system" import useCheckViewport from "@/hooks/useCheckViewport" +// import Data from "@/pages/blog/data.json" import BlogCard from "./Card" const StyledSwiper = styled(Swiper)(({ theme }) => ({ @@ -25,29 +26,6 @@ const StyledSwiper = styled(Swiper)(({ theme }) => ({ }, })) -const data = [ - { - title: "Scaling DeFi: Announcing The First zkEVM Market On Aave", - posterImg: "https://scroll.ghost.io/content/images/2024/08/Hero-page_Darwin-Mainnet-Upgrade-_1280-_721--1-.png", - link: "https://baidu.com", - }, - { - title: "Scaling DeFi: Announcing The First zkEVM Market On Aave", - posterImg: "https://scroll.ghost.io/content/images/2024/08/Hero-page_Darwin-Mainnet-Upgrade-_1280-_721--1-.png", - link: "https://baidu.com", - }, - { - title: "Scaling DeFi: Announcing The First zkEVM Market On Aave", - posterImg: "https://scroll.ghost.io/content/images/2024/08/Hero-page_Darwin-Mainnet-Upgrade-_1280-_721--1-.png", - link: "https://baidu.com", - }, - { - title: "Scaling DeFi: Announcing The First zkEVM Market On Aave", - posterImg: "https://scroll.ghost.io/content/images/2024/08/Hero-page_Darwin-Mainnet-Upgrade-_1280-_721--1-.png", - link: "https://baidu.com", - }, -] - const Carousel = props => { const { isPortrait, isTabletLandscape } = useCheckViewport() let slidesPerView = 3 @@ -56,6 +34,451 @@ const Carousel = props => { } else if (isPortrait) { slidesPerView = 1 } + + // const data = Data.filter(blog => blog.type === "Ecosystem highlights" && blog.language === "en") + const data = [ + { + _id: "66b131df6c7355000146e8e2", + title: "Proof Recursion: Scroll’s Darwin Upgrade", + slug: "proof-recursion-scrolls-darwin-upgrade", + status: "published", + feature_image: "https://scroll.ghost.io/content/images/2024/08/Blog_Banner____Darwin_Mainnet_Upgrade.png", + created_at: "2024-08-05T20:11:11.000Z", + updated_at: "2024-08-07T22:51:10.000Z", + published_at: "2024-08-06T16:00:44.000Z", + custom_excerpt: null, + canonical_url: null, + tags: [ + { + id: "65a625ac254b5b0001f24b2c", + name: "Technical", + slug: "technical", + description: null, + feature_image: null, + visibility: "public", + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: null, + meta_description: null, + codeinjection_head: null, + codeinjection_foot: null, + canonical_url: null, + accent_color: null, + created_at: "2024-01-16T06:43:56.000Z", + updated_at: "2024-01-16T06:43:56.000Z", + url: "https://scroll.ghost.io/tag/technical/", + }, + { + id: "65a6264f254b5b0001f24b46", + name: "Announcement", + slug: "announcement", + description: null, + feature_image: null, + visibility: "public", + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: null, + meta_description: null, + codeinjection_head: null, + codeinjection_foot: null, + canonical_url: null, + accent_color: null, + created_at: "2024-01-16T06:46:39.000Z", + updated_at: "2024-01-16T06:46:39.000Z", + url: "https://scroll.ghost.io/tag/announcement/", + }, + ], + primary_tag: { + id: "65a625ac254b5b0001f24b2c", + name: "Technical", + slug: "technical", + description: null, + feature_image: null, + visibility: "public", + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: null, + meta_description: null, + codeinjection_head: null, + codeinjection_foot: null, + canonical_url: null, + accent_color: null, + created_at: "2024-01-16T06:43:56.000Z", + updated_at: "2024-01-16T06:43:56.000Z", + url: "https://scroll.ghost.io/tag/technical/", + }, + excerpt: + "\n\n\n\nOverview\n\n\nScroll is excited to announce the Darwin upgrade, launching on August 21st, 2024. This upgrade will reduce gas fees by 34% by using a single aggregated proof for multiple batches, eliminating the need to finalize each batch individually.\n\n\n\nContents of this Upgrade\n\n\n\nAggregating Multiple Batches\n\n\nReducing fees is Scroll’s top priority. In zkEVM, users’ gas fees cover three primary costs:\n\n\n 1. L1 gas fees for publishing L2 transaction data on Ethereum.\n 2. Hardware costs to gene", + reading_time: 5, + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: "Scroll's Darwin Upgrade: 34% Gas Fee Reduction Explained", + meta_description: + "Discover how Scroll's Darwin upgrade reduces gas fees by 34% with aggregated proofs. Learn about the latest improvements and changes.", + email_subject: null, + frontmatter: null, + feature_image_alt: null, + feature_image_caption: null, + id: "proof-recursion-scrolls-darwin-upgrade", + type: "Ecosystem highlights", + date: "2024-08-06", + posterImg: "https://scroll.ghost.io/content/images/2024/06/Backend-upload-for-Twitter.png", + posterTitle: "", + summary: + "\n\n\n\nOverview\n\n\nScroll is excited to announce the Darwin upgrade, launching on August 21st, 2024. This upgrade will reduce gas fees by 34% by using a single aggregated proof for multiple batches, eliminating the need to finalize each batch individually.\n\n\n\nContents of this Upgrade\n\n\n\nAggregating Multiple Batches\n\n\nReducing fees is Scroll’s top priority. In zkEVM, users’ gas fees cover three primary costs:\n\n\n 1. L1 gas fees for publishing L2 transaction data on Ethereum.\n 2. Hardware costs to gene", + canonical: null, + ogImg: null, + language: "en", + valid: true, + }, + { + _id: "66b131df6c7355000146e8e2", + title: "Proof Recursion: Scroll’s Darwin Upgrade", + slug: "proof-recursion-scrolls-darwin-upgrade", + status: "published", + feature_image: "https://scroll.ghost.io/content/images/2024/08/Blog_Banner____Darwin_Mainnet_Upgrade.png", + created_at: "2024-08-05T20:11:11.000Z", + updated_at: "2024-08-07T22:51:10.000Z", + published_at: "2024-08-06T16:00:44.000Z", + custom_excerpt: null, + canonical_url: null, + tags: [ + { + id: "65a625ac254b5b0001f24b2c", + name: "Technical", + slug: "technical", + description: null, + feature_image: null, + visibility: "public", + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: null, + meta_description: null, + codeinjection_head: null, + codeinjection_foot: null, + canonical_url: null, + accent_color: null, + created_at: "2024-01-16T06:43:56.000Z", + updated_at: "2024-01-16T06:43:56.000Z", + url: "https://scroll.ghost.io/tag/technical/", + }, + { + id: "65a6264f254b5b0001f24b46", + name: "Announcement", + slug: "announcement", + description: null, + feature_image: null, + visibility: "public", + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: null, + meta_description: null, + codeinjection_head: null, + codeinjection_foot: null, + canonical_url: null, + accent_color: null, + created_at: "2024-01-16T06:46:39.000Z", + updated_at: "2024-01-16T06:46:39.000Z", + url: "https://scroll.ghost.io/tag/announcement/", + }, + ], + primary_tag: { + id: "65a625ac254b5b0001f24b2c", + name: "Technical", + slug: "technical", + description: null, + feature_image: null, + visibility: "public", + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: null, + meta_description: null, + codeinjection_head: null, + codeinjection_foot: null, + canonical_url: null, + accent_color: null, + created_at: "2024-01-16T06:43:56.000Z", + updated_at: "2024-01-16T06:43:56.000Z", + url: "https://scroll.ghost.io/tag/technical/", + }, + excerpt: + "\n\n\n\nOverview\n\n\nScroll is excited to announce the Darwin upgrade, launching on August 21st, 2024. This upgrade will reduce gas fees by 34% by using a single aggregated proof for multiple batches, eliminating the need to finalize each batch individually.\n\n\n\nContents of this Upgrade\n\n\n\nAggregating Multiple Batches\n\n\nReducing fees is Scroll’s top priority. In zkEVM, users’ gas fees cover three primary costs:\n\n\n 1. L1 gas fees for publishing L2 transaction data on Ethereum.\n 2. Hardware costs to gene", + reading_time: 5, + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: "Scroll's Darwin Upgrade: 34% Gas Fee Reduction Explained", + meta_description: + "Discover how Scroll's Darwin upgrade reduces gas fees by 34% with aggregated proofs. Learn about the latest improvements and changes.", + email_subject: null, + frontmatter: null, + feature_image_alt: null, + feature_image_caption: null, + id: "proof-recursion-scrolls-darwin-upgrade", + type: "Ecosystem highlights", + date: "2024-08-06", + posterImg: "https://scroll.ghost.io/content/images/2024/06/Backend-upload-for-Twitter.png", + posterTitle: "", + summary: + "\n\n\n\nOverview\n\n\nScroll is excited to announce the Darwin upgrade, launching on August 21st, 2024. This upgrade will reduce gas fees by 34% by using a single aggregated proof for multiple batches, eliminating the need to finalize each batch individually.\n\n\n\nContents of this Upgrade\n\n\n\nAggregating Multiple Batches\n\n\nReducing fees is Scroll’s top priority. In zkEVM, users’ gas fees cover three primary costs:\n\n\n 1. L1 gas fees for publishing L2 transaction data on Ethereum.\n 2. Hardware costs to gene", + canonical: null, + ogImg: null, + language: "en", + valid: true, + }, + { + _id: "66b131df6c7355000146e8e2", + title: "Proof Recursion: Scroll’s Darwin Upgrade", + slug: "proof-recursion-scrolls-darwin-upgrade", + status: "published", + feature_image: "https://scroll.ghost.io/content/images/2024/08/Blog_Banner____Darwin_Mainnet_Upgrade.png", + created_at: "2024-08-05T20:11:11.000Z", + updated_at: "2024-08-07T22:51:10.000Z", + published_at: "2024-08-06T16:00:44.000Z", + custom_excerpt: null, + canonical_url: null, + tags: [ + { + id: "65a625ac254b5b0001f24b2c", + name: "Technical", + slug: "technical", + description: null, + feature_image: null, + visibility: "public", + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: null, + meta_description: null, + codeinjection_head: null, + codeinjection_foot: null, + canonical_url: null, + accent_color: null, + created_at: "2024-01-16T06:43:56.000Z", + updated_at: "2024-01-16T06:43:56.000Z", + url: "https://scroll.ghost.io/tag/technical/", + }, + { + id: "65a6264f254b5b0001f24b46", + name: "Announcement", + slug: "announcement", + description: null, + feature_image: null, + visibility: "public", + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: null, + meta_description: null, + codeinjection_head: null, + codeinjection_foot: null, + canonical_url: null, + accent_color: null, + created_at: "2024-01-16T06:46:39.000Z", + updated_at: "2024-01-16T06:46:39.000Z", + url: "https://scroll.ghost.io/tag/announcement/", + }, + ], + primary_tag: { + id: "65a625ac254b5b0001f24b2c", + name: "Technical", + slug: "technical", + description: null, + feature_image: null, + visibility: "public", + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: null, + meta_description: null, + codeinjection_head: null, + codeinjection_foot: null, + canonical_url: null, + accent_color: null, + created_at: "2024-01-16T06:43:56.000Z", + updated_at: "2024-01-16T06:43:56.000Z", + url: "https://scroll.ghost.io/tag/technical/", + }, + excerpt: + "\n\n\n\nOverview\n\n\nScroll is excited to announce the Darwin upgrade, launching on August 21st, 2024. This upgrade will reduce gas fees by 34% by using a single aggregated proof for multiple batches, eliminating the need to finalize each batch individually.\n\n\n\nContents of this Upgrade\n\n\n\nAggregating Multiple Batches\n\n\nReducing fees is Scroll’s top priority. In zkEVM, users’ gas fees cover three primary costs:\n\n\n 1. L1 gas fees for publishing L2 transaction data on Ethereum.\n 2. Hardware costs to gene", + reading_time: 5, + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: "Scroll's Darwin Upgrade: 34% Gas Fee Reduction Explained", + meta_description: + "Discover how Scroll's Darwin upgrade reduces gas fees by 34% with aggregated proofs. Learn about the latest improvements and changes.", + email_subject: null, + frontmatter: null, + feature_image_alt: null, + feature_image_caption: null, + id: "proof-recursion-scrolls-darwin-upgrade", + type: "Ecosystem highlights", + date: "2024-08-06", + posterImg: "https://scroll.ghost.io/content/images/2024/06/Backend-upload-for-Twitter.png", + posterTitle: "", + summary: + "\n\n\n\nOverview\n\n\nScroll is excited to announce the Darwin upgrade, launching on August 21st, 2024. This upgrade will reduce gas fees by 34% by using a single aggregated proof for multiple batches, eliminating the need to finalize each batch individually.\n\n\n\nContents of this Upgrade\n\n\n\nAggregating Multiple Batches\n\n\nReducing fees is Scroll’s top priority. In zkEVM, users’ gas fees cover three primary costs:\n\n\n 1. L1 gas fees for publishing L2 transaction data on Ethereum.\n 2. Hardware costs to gene", + canonical: null, + ogImg: null, + language: "en", + valid: true, + }, + { + _id: "66b131df6c7355000146e8e2", + title: "Proof Recursion: Scroll’s Darwin Upgrade", + slug: "proof-recursion-scrolls-darwin-upgrade", + status: "published", + feature_image: "https://scroll.ghost.io/content/images/2024/08/Blog_Banner____Darwin_Mainnet_Upgrade.png", + created_at: "2024-08-05T20:11:11.000Z", + updated_at: "2024-08-07T22:51:10.000Z", + published_at: "2024-08-06T16:00:44.000Z", + custom_excerpt: null, + canonical_url: null, + tags: [ + { + id: "65a625ac254b5b0001f24b2c", + name: "Technical", + slug: "technical", + description: null, + feature_image: null, + visibility: "public", + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: null, + meta_description: null, + codeinjection_head: null, + codeinjection_foot: null, + canonical_url: null, + accent_color: null, + created_at: "2024-01-16T06:43:56.000Z", + updated_at: "2024-01-16T06:43:56.000Z", + url: "https://scroll.ghost.io/tag/technical/", + }, + { + id: "65a6264f254b5b0001f24b46", + name: "Announcement", + slug: "announcement", + description: null, + feature_image: null, + visibility: "public", + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: null, + meta_description: null, + codeinjection_head: null, + codeinjection_foot: null, + canonical_url: null, + accent_color: null, + created_at: "2024-01-16T06:46:39.000Z", + updated_at: "2024-01-16T06:46:39.000Z", + url: "https://scroll.ghost.io/tag/announcement/", + }, + ], + primary_tag: { + id: "65a625ac254b5b0001f24b2c", + name: "Technical", + slug: "technical", + description: null, + feature_image: null, + visibility: "public", + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: null, + meta_description: null, + codeinjection_head: null, + codeinjection_foot: null, + canonical_url: null, + accent_color: null, + created_at: "2024-01-16T06:43:56.000Z", + updated_at: "2024-01-16T06:43:56.000Z", + url: "https://scroll.ghost.io/tag/technical/", + }, + excerpt: + "\n\n\n\nOverview\n\n\nScroll is excited to announce the Darwin upgrade, launching on August 21st, 2024. This upgrade will reduce gas fees by 34% by using a single aggregated proof for multiple batches, eliminating the need to finalize each batch individually.\n\n\n\nContents of this Upgrade\n\n\n\nAggregating Multiple Batches\n\n\nReducing fees is Scroll’s top priority. In zkEVM, users’ gas fees cover three primary costs:\n\n\n 1. L1 gas fees for publishing L2 transaction data on Ethereum.\n 2. Hardware costs to gene", + reading_time: 5, + og_image: null, + og_title: null, + og_description: null, + twitter_image: null, + twitter_title: null, + twitter_description: null, + meta_title: "Scroll's Darwin Upgrade: 34% Gas Fee Reduction Explained", + meta_description: + "Discover how Scroll's Darwin upgrade reduces gas fees by 34% with aggregated proofs. Learn about the latest improvements and changes.", + email_subject: null, + frontmatter: null, + feature_image_alt: null, + feature_image_caption: null, + id: "proof-recursion-scrolls-darwin-upgrade", + type: "Ecosystem highlights", + date: "2024-08-06", + posterImg: "https://scroll.ghost.io/content/images/2024/06/Backend-upload-for-Twitter.png", + posterTitle: "", + summary: + "\n\n\n\nOverview\n\n\nScroll is excited to announce the Darwin upgrade, launching on August 21st, 2024. This upgrade will reduce gas fees by 34% by using a single aggregated proof for multiple batches, eliminating the need to finalize each batch individually.\n\n\n\nContents of this Upgrade\n\n\n\nAggregating Multiple Batches\n\n\nReducing fees is Scroll’s top priority. In zkEVM, users’ gas fees cover three primary costs:\n\n\n 1. L1 gas fees for publishing L2 transaction data on Ethereum.\n 2. Hardware costs to gene", + canonical: null, + ogImg: null, + language: "en", + valid: true, + }, + ] + return ( { pagination={{ clickable: true, }} - modules={[Pagination]} + autoplay={{ + delay: 2500, + disableOnInteraction: false, + }} + modules={[Pagination, Autoplay]} > {data.map(blog => ( - + ))} diff --git a/src/pages/ecosystem/Highlights/index.tsx b/src/pages/ecosystem/Highlights/index.tsx index a6f7289b..1a543694 100644 --- a/src/pages/ecosystem/Highlights/index.tsx +++ b/src/pages/ecosystem/Highlights/index.tsx @@ -8,36 +8,11 @@ import SectionWrapper from "@/components/SectionWrapper" import { ECOSYSTEM_PAGE_SYMBOL } from "@/constants" import useCheckViewport from "@/hooks/useCheckViewport" -// import useCanvasStore from "@/stores/canvasStore" import HighlightList from "./HighlightList" -const data = [ - { - title: "Scaling DeFi: Announcing The First zkEVM Market On Aave", - cover: "Discover Badges on Scroll Canvas", - link: "https://baidu.com", - }, - { - title: "Scaling DeFi: Announcing The First zkEVM Market On Aave", - cover: "Discover Badges on Scroll Canvas", - link: "https://baidu.com", - }, - { - title: "Scaling DeFi: Announcing The First zkEVM Market On Aave", - cover: "Discover Badges on Scroll Canvas", - link: "https://baidu.com", - }, - { - title: "Scaling DeFi: Announcing The First zkEVM Market On Aave", - cover: "Discover Badges on Scroll Canvas", - link: "https://baidu.com", - }, -] - const Highlights = () => { const { isMobile, isTablet } = useCheckViewport() const { hash } = useLocation() - // const { badgeList } = useCanvasStore() const navigate = useNavigate() useEffect(() => { @@ -52,7 +27,7 @@ const Highlights = () => { }, [hash]) return ( - + { Ecosystem highlights - + {isMobile ? null : ( + + )} - + ) }