From abd2eb2810f81660a12a43ffea2a1e0ec2b0d27e Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 26 Aug 2021 15:42:19 +0800 Subject: [PATCH 01/21] recent featured --- src/pages/blog/_recent-featured-posts.js | 417 ++++++++++-------- src/pages/blog/index.js | 62 ++- .../blog/recent-featured-posts/_style.js | 28 +- 3 files changed, 332 insertions(+), 175 deletions(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index 589b2a5c9a6..3b64fb464b2 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -1,7 +1,8 @@ import React from 'react' +import PropTypes from 'prop-types' import Clock from './recent-featured-posts/images/clock.svg' import Dot from './recent-featured-posts/images/dot.svg' -import { recent_article_data, featured_article_data, article_data, article_data_2 } from './recent-featured-posts/_data' +import { featured_article_data, article_data_2 } from './recent-featured-posts/_data' import { StyledContainer, StyledTabs, @@ -30,7 +31,7 @@ import { MobileDotIcon, MobileHeader, } from './recent-featured-posts/_style' -import { Carousel, Tabs, Header } from 'components/elements' +import { Carousel, Tabs, Header, QueryImage } from 'components/elements' import { localize, WithIntl } from 'components/localization' // Settings for carousel @@ -50,183 +51,253 @@ const settings = { }, } -const RecentFeaturedPosts = () => { - const recent = recent_article_data +const RecentFeaturedPosts = ({ recent_data, featured_data }) => { const featured = featured_article_data - const articles = article_data const articles_2 = article_data_2 + const recents = recent_data + const headline_recent = recents[0] + const featureds = featured_data + const headline_featured = featureds[0] + console.log(headline_featured) return ( - - - - - - - - - - - - {recent.category} - - - -
- {recent.title} -
-
- {recent.description} -
- - - {recent.date} - - {recent.reading_time} min read - - - - - - - {articles.map((article) => { - return ( - - - - - - - - - - - {article.category} - - - {article.date} - - {article.reading_time} min - -
- {article.title} -
- - + + + + + + + + + + + {headline_recent.tags.map((item) => { + return ( + <> + + <> + {item.tags && + item.tags + .slice(0, 2) + .map((tag) => ( + + { + tag.tags_id + .tag_name + } + + ))} + {item.tags.length > 2 && ( + + {`+${item.tags + .slice(2) + .length.toString()}`} + + )} + + + + ) + })} + +
+ {headline_recent.blog_title} +
+
+ {headline_recent.blog_description} +
+ + + {headline_recent.published_date} + + {headline_recent.read_time_in_minutes} min read + + + + + + + {recents.map((article) => { + return ( + + + + + + + + + + {headline_recent.map((item) => { + return ( + <> + {item.tags && + item.tags + .slice(0, 1) + .map((tag) => ( + + { + tag.tags_id + .tag_name + } + + ))} + {item.tags.length > 1 && ( + + {`+${item.tags + .slice(2) + .length.toString()}`} + + )} + + ) + })} + + {article.published_date} + + {article.read_time_in_minutes} min + +
+ {article.blog_title} +
+ + + {article.blog_description} + + + {article.published_date}{' '} + + {article.read_time_in_minutes} min read + + + + + ) + })} + + + + + + + + + + + + + + {featured.category} + + + +
+ {featured.title} +
+
+ {featured.description} +
+ + + {featured.date} + {featured.reading_time} min read + + + + + + + {articles_2.map((article) => { + return ( + + + + + + + + + + + {article.category} + + + {article.date} + + {article.reading_time} min + +
{article.title} - - - {article.date} - {article.reading_time} min read - - - - - ) - })} - - - - - - - - - - - - - - {featured.category} - - - -
- {featured.title} -
-
- {featured.description} -
- - - {featured.date} - {featured.reading_time} min read - - - - - - - {articles_2.map((article) => { - return ( - - - - - - - - - - - {article.category} - - - {article.date} - - {article.reading_time} min - -
- {article.title} -
- - - {article.title} - - - {article.date} - {article.reading_time} min read - - - - - ) - })} - - - - - - - See all blog articles - - +
+ + + {article.title} + + + {article.date} + {article.reading_time} min read + + + + + ) + })} + + + + + + + See all blog articles + + ) } +RecentFeaturedPosts.propTypes = { + featured_data: PropTypes.object, + recent_data: PropTypes.object, +} + export default WithIntl()(RecentFeaturedPosts) diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js index 97ed20567b8..25897ee6a32 100644 --- a/src/pages/blog/index.js +++ b/src/pages/blog/index.js @@ -57,6 +57,62 @@ export const query = graphql` id } } + recent: blog( + filter: { status: { _eq: "published" } } + sort: "-published_date" + limit: 6 + ) { + id + main_image { + id + description + imageFile { + childImageSharp { + gatsbyImageData + } + } + } + slug + published_date + featured + tags { + id + tags_id { + tag_name + } + } + blog_title + blog_description + read_time_in_minutes + } + featured: blog( + filter: { status: { _eq: "published" }, featured: { _eq: true } } + sort: "-published_date" + limit: 6 + ) { + id + main_image { + id + description + imageFile { + childImageSharp { + gatsbyImageData + } + } + } + slug + published_date + featured + tags { + id + tags_id { + tag_name + } + } + blog_title + blog_description + read_time_in_minutes + } } } ` @@ -80,6 +136,10 @@ const DerivBlog = ({ data }) => { } const homepage_banner_data = data.directus.homepage_banners const market_news_data = data.directus.blog + + //article data + const recent_data = data.directus.recent + const featured_data = data.directus.featured return ( { })} - + diff --git a/src/pages/blog/recent-featured-posts/_style.js b/src/pages/blog/recent-featured-posts/_style.js index ca8c616b40c..289bf876aae 100644 --- a/src/pages/blog/recent-featured-posts/_style.js +++ b/src/pages/blog/recent-featured-posts/_style.js @@ -66,7 +66,7 @@ export const MainArticle = styled(Flex)` @media ${device.laptopM} { /* prettier-ignore */ min-width: 328px; - width: unset; + width: 90vw; padding: 0; background: ${(props) => props.image @@ -80,9 +80,23 @@ export const MainArticle = styled(Flex)` width: 100%; min-width: 270px; } + + &.main-article-bg { + width: 100%; + height: 100%; + overflow: hidden; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + position: absolute; + object-fit: cover; + opacity: 0.8; + } ` export const Description = styled.div` + position: absolute; + left: 0; padding: 24px 40px 0 40px; margin-bottom: 24px; @@ -167,6 +181,18 @@ export const SmallArticleImageWrapper = styled.div` @media ${device.laptopM} { height: 78px; } + + &.small-article-bg { + width: 100%; + height: 100%; + overflow: hidden; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + position: absolute; + object-fit: cover; + opacity: 0.8; + } ` export const SmallArticleImage = styled.img` From e61ffa71e4b410ab199c115253c6c22f2f68b30d Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 26 Aug 2021 18:23:08 +0800 Subject: [PATCH 02/21] update code --- src/pages/blog/_recent-featured-posts.js | 82 +++++++------------ .../blog/recent-featured-posts/_style.js | 1 + 2 files changed, 29 insertions(+), 54 deletions(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index 3b64fb464b2..e856fb459f1 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -31,7 +31,7 @@ import { MobileDotIcon, MobileHeader, } from './recent-featured-posts/_style' -import { Carousel, Tabs, Header, QueryImage } from 'components/elements' +import { QueryImage , Carousel, Tabs, Header } from 'components/elements' import { localize, WithIntl } from 'components/localization' // Settings for carousel @@ -54,10 +54,12 @@ const settings = { const RecentFeaturedPosts = ({ recent_data, featured_data }) => { const featured = featured_article_data const articles_2 = article_data_2 - const recents = recent_data - const headline_recent = recents[0] - const featureds = featured_data - const headline_featured = featureds[0] + const recents = recent_data.slice(1) + const headline_recent = recent_data[0] + const featureds = featured_data.slice(1) + const headline_featured = featured_data[0] + console.log(featureds) + console.log(headline_featured) return ( @@ -85,32 +87,13 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { /> - {headline_recent.tags.map((item) => { + {headline_recent.tags.map((article) => { return ( <> - <> - {item.tags && - item.tags - .slice(0, 2) - .map((tag) => ( - - { - tag.tags_id - .tag_name - } - - ))} - {item.tags.length > 2 && ( - - {`+${item.tags - .slice(2) - .length.toString()}`} - - )} - + + {article.tags_id.tag_name} + ) @@ -159,32 +142,23 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { - {headline_recent.map((item) => { - return ( - <> - {item.tags && - item.tags - .slice(0, 1) - .map((tag) => ( - - { - tag.tags_id - .tag_name - } - - ))} - {item.tags.length > 1 && ( - - {`+${item.tags - .slice(2) - .length.toString()}`} - - )} - - ) - })} + {article.tags && + article.tags + .slice(0, 1) + .map((tag) => ( + + {tag.tags_id.tag_name} + + ))} + {article.tags.length > 1 && ( + + {`+${article.tags + .slice(1) + .length.toString()}`} + + )} {article.published_date} diff --git a/src/pages/blog/recent-featured-posts/_style.js b/src/pages/blog/recent-featured-posts/_style.js index 289bf876aae..6869ed8a352 100644 --- a/src/pages/blog/recent-featured-posts/_style.js +++ b/src/pages/blog/recent-featured-posts/_style.js @@ -216,6 +216,7 @@ export const SmallArticleCategories = styled(Text)` line-height: 20px; font-size: 14px; font-weight: 700; + display: inline-block; @media ${device.laptopM} { position: static; From 464e321111d1bebb447b27900eeec0f1ea1bae49 Mon Sep 17 00:00:00 2001 From: kevin Date: Fri, 27 Aug 2021 14:01:03 +0800 Subject: [PATCH 03/21] fix bugs --- src/pages/blog/_recent-featured-posts.js | 135 +++++++++------ src/pages/blog/recent-featured-posts/_data.js | 161 ------------------ .../blog/recent-featured-posts/_style.js | 29 +--- 3 files changed, 92 insertions(+), 233 deletions(-) delete mode 100644 src/pages/blog/recent-featured-posts/_data.js diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index e856fb459f1..176bc22d439 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -2,7 +2,6 @@ import React from 'react' import PropTypes from 'prop-types' import Clock from './recent-featured-posts/images/clock.svg' import Dot from './recent-featured-posts/images/dot.svg' -import { featured_article_data, article_data_2 } from './recent-featured-posts/_data' import { StyledContainer, StyledTabs, @@ -17,8 +16,8 @@ import { BottomDescription, SmallArticle, SmallArticleImageWrapper, - SmallArticleImage, SmallArticleCategories, + SmallArticleCategoryWrapper, SmallArticleTopContent, SmallArticleDateTimeDesktop, SmallArticleDateTimeMobile, @@ -31,7 +30,7 @@ import { MobileDotIcon, MobileHeader, } from './recent-featured-posts/_style' -import { QueryImage , Carousel, Tabs, Header } from 'components/elements' +import { QueryImage, Carousel, Tabs, Header } from 'components/elements' import { localize, WithIntl } from 'components/localization' // Settings for carousel @@ -52,15 +51,10 @@ const settings = { } const RecentFeaturedPosts = ({ recent_data, featured_data }) => { - const featured = featured_article_data - const articles_2 = article_data_2 const recents = recent_data.slice(1) const headline_recent = recent_data[0] const featureds = featured_data.slice(1) const headline_featured = featured_data[0] - console.log(featureds) - - console.log(headline_featured) return ( @@ -142,23 +136,25 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { - {article.tags && - article.tags - .slice(0, 1) - .map((tag) => ( - - {tag.tags_id.tag_name} - - ))} - {article.tags.length > 1 && ( - - {`+${article.tags - .slice(1) - .length.toString()}`} - - )} + + {article.tags && + article.tags + .slice(0, 1) + .map((tag) => ( + + {tag.tags_id.tag_name} + + ))} + {article.tags.length > 1 && ( + + {`+${article.tags + .slice(1) + .length.toString()}`} + + )} + {article.published_date} @@ -172,7 +168,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {article.blog_description} - {article.published_date}{' '} + {article.published_date} {article.read_time_in_minutes} min read @@ -188,18 +184,30 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { - - + + + - - - {featured.category} - - + {headline_featured.tags.map((article) => { + return ( + <> + + + {article.tags_id.tag_name} + + + + ) + })}
- {featured.title} + {headline_recent.blog_title}
{ color="white" weight="normal" > - {featured.description} + {headline_recent.blog_description}
- {featured.date} - {featured.reading_time} min read + {headline_recent.published_date} + + {headline_recent.read_time_in_minutes} min read - {articles_2.map((article) => { + {featureds.map((article) => { return ( - + - - - {article.category} - + + {article.tags && + article.tags + .slice(0, 1) + .map((tag) => ( + + {tag.tags_id.tag_name} + + ))} + {article.tags.length > 1 && ( + + {`+${article.tags + .slice(1) + .length.toString()}`} + + )} + - {article.date} + {article.published_date} - {article.reading_time} min + {article.read_time_in_minutes} min
- {article.title} + {article.blog_title}
- {article.title} + {article.blog_description} - {article.date} - {article.reading_time} min read + {article.published_date} + + {article.read_time_in_minutes} min read diff --git a/src/pages/blog/recent-featured-posts/_data.js b/src/pages/blog/recent-featured-posts/_data.js deleted file mode 100644 index e6748d26fda..00000000000 --- a/src/pages/blog/recent-featured-posts/_data.js +++ /dev/null @@ -1,161 +0,0 @@ -export const recent_article_data = { - image: 'https://source.unsplash.com/random/1', - reading_time: '2', - category: 'CFDs', - title: 'The complete beginner’s guide to cryptocurrency trading', - description: - 'Love the idea of leverage, but hate the thought of getting wiped out with one bad trade? We have the ideal trade type for you. One that combines the upside of a leveraged trade with the limited downside of an options trade', - date: 'Nov 5, 2020', - id: 1, - link: '/blog/articles/', -} - -export const featured_article_data = { - image: 'https://source.unsplash.com/random/2', - reading_time: '3', - category: 'Finance news', - title: 'Why it’s the Tesla of the financial industry', - description: - 'Tesla, Inc. designs, develops, manufactures and sells electric vehicles and designs, manufactures, installs and sells solar energy generation and energy storage products', - date: 'Nov 5, 2020', - id: 2, - link: '/blog/articles/', -} - -export const article_data = [ - { - image: 'https://source.unsplash.com/random/3', - reading_time: '2', - category: 'Multipliers', - title: 'How to trade multipliers on Deriv', - description: - 'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com', - date: '12 June 2021', - id: 1, - link: '/blog/articles/', - }, - { - image: 'https://source.unsplash.com/random/4', - reading_time: '2', - category: 'Multipliers', - title: 'How to trade multipliers on Deriv this is for', - description: - 'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on deriv.com', - date: '12 June 2021', - id: 2, - link: '/blog/articles/', - }, - { - image: 'https://source.unsplash.com/random/5', - reading_time: '2', - category: 'Multipliers', - title: 'How to trade multipliers on Deriv', - description: - 'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes', - date: '12 June 2021', - id: 3, - link: '/blog/articles/', - }, - { - image: 'https://source.unsplash.com/random/6', - reading_time: '2', - category: 'Multipliers', - title: 'How to trade multipliers on Deriv', - description: - 'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes', - date: '12 June 2021', - id: 4, - link: '/blog/articles/', - }, - { - image: 'https://source.unsplash.com/random/5', - reading_time: '2', - category: 'Multipliers', - title: 'How to trade multipliers on Deriv', - description: - 'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes', - date: '12 June 2021', - id: 5, - link: '/blog/articles/', - }, - { - image: 'https://source.unsplash.com/random/6', - reading_time: '2', - category: 'Multipliers', - title: 'How to trade multipliers on Deriv', - description: - 'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes', - date: '12 June 2021', - id: 6, - link: '/blog/articles/', - }, -] - -export const article_data_2 = [ - { - image: 'https://source.unsplash.com/random/7', - reading_time: '3', - category: 'Multipliers', - title: 'How to trade multipliers on Deriv', - description: - 'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on deriv.com', - date: '12 June 2021', - id: 1, - link: '/blog/articles/', - }, - { - image: 'https://source.unsplash.com/random/8', - reading_time: '2', - category: 'Multipliers', - title: 'How to trade multipliers on Deriv this is for really', - description: - 'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on deriv.com', - date: '12 June 2021', - id: 2, - link: '/blog/articles/', - }, - { - image: 'https://source.unsplash.com/random/9', - reading_time: '2', - category: 'Multipliers', - title: 'How to trade multipliers on Deriv', - description: - 'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes', - date: '12 June 2021', - id: 3, - link: '/blog/articles/', - }, - { - image: 'https://source.unsplash.com/random/10', - reading_time: '2', - category: 'Multipliers', - title: 'How to trade multipliers on Deriv', - description: - 'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes', - date: '12 June 2021', - id: 4, - link: '/blog/articles/', - }, - { - image: 'https://source.unsplash.com/random/11', - reading_time: '2', - category: 'Multipliers', - title: 'How to trade multipliers on Deriv', - description: - 'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes', - date: '12 June 2021', - id: 5, - link: '/blog/articles/', - }, - { - image: 'https://source.unsplash.com/random/12', - reading_time: '2', - category: 'Multipliers', - title: 'How to trade multipliers on Deriv', - description: - 'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes', - date: '12 June 2021', - id: 6, - link: '/blog/articles/', - }, -] diff --git a/src/pages/blog/recent-featured-posts/_style.js b/src/pages/blog/recent-featured-posts/_style.js index 6869ed8a352..0195befd184 100644 --- a/src/pages/blog/recent-featured-posts/_style.js +++ b/src/pages/blog/recent-featured-posts/_style.js @@ -56,7 +56,6 @@ export const MainArticle = styled(Flex)` width: 792px; max-height: 300px; align-items: flex-end; - padding-bottom: 80px; cursor: pointer; transition: transform 0.3s; @@ -82,14 +81,6 @@ export const MainArticle = styled(Flex)` } &.main-article-bg { - width: 100%; - height: 100%; - overflow: hidden; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - position: absolute; - object-fit: cover; opacity: 0.8; } ` @@ -98,7 +89,7 @@ export const Description = styled.div` position: absolute; left: 0; padding: 24px 40px 0 40px; - margin-bottom: 24px; + margin-bottom: 80px; @media ${device.laptopM} { padding: 30px; @@ -195,17 +186,6 @@ export const SmallArticleImageWrapper = styled.div` } ` -export const SmallArticleImage = styled.img` - width: 100%; - height: 100%; - overflow: hidden; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - position: absolute; - object-fit: cover; -` - export const SmallArticleCategories = styled(Text)` width: fit-content; border-radius: 8px; @@ -300,6 +280,13 @@ export const SmallArticleTopContent = styled(Flex)` } ` +export const SmallArticleCategoryWrapper = styled(Flex)` + justify-content: start; + @media ${device.laptopM} { + flex-direction: row; + } +` + export const SmallArticleDateTimeMobile = styled(Flex)` color: var(--color-grey-5); width: 100%; From 52751d2d9230eeb91699b55924406c90085143a0 Mon Sep 17 00:00:00 2001 From: kevin Date: Fri, 27 Aug 2021 15:52:12 +0800 Subject: [PATCH 04/21] fix dev comments --- src/pages/blog/_recent-featured-posts.js | 85 +++++++++++++++++------- 1 file changed, 61 insertions(+), 24 deletions(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index 176bc22d439..e24bf15756a 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -17,7 +17,6 @@ import { SmallArticle, SmallArticleImageWrapper, SmallArticleCategories, - SmallArticleCategoryWrapper, SmallArticleTopContent, SmallArticleDateTimeDesktop, SmallArticleDateTimeMobile, @@ -30,8 +29,10 @@ import { MobileDotIcon, MobileHeader, } from './recent-featured-posts/_style' +import { convertDate } from 'common/utility' +import { Flex } from 'components/containers' import { QueryImage, Carousel, Tabs, Header } from 'components/elements' -import { localize, WithIntl } from 'components/localization' +import { localize, WithIntl, Localize } from 'components/localization' // Settings for carousel const settings = { @@ -71,7 +72,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { - + { - {headline_recent.published_date} + {headline_recent?.published_date && + localize(convertDate(headline_recent?.published_date))} - {headline_recent.read_time_in_minutes} min read + {headline_recent.read_time_in_minutes}{' '} + @@ -118,7 +121,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {recents.map((article) => { return ( @@ -136,7 +139,10 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { - + {article.tags && article.tags .slice(0, 1) @@ -154,11 +160,17 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { .length.toString()}`} )} - + - {article.published_date} + {article?.published_date && + localize( + convertDate( + article?.published_date, + ), + )} - {article.read_time_in_minutes} min + {article.read_time_in_minutes}{' '} +
{article.blog_title} @@ -168,9 +180,15 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {article.blog_description} - {article.published_date} + {article?.published_date && + localize( + convertDate( + article?.published_date, + ), + )} - {article.read_time_in_minutes} min read + {article.read_time_in_minutes}{' '} + @@ -184,7 +202,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { - + { })}
- {headline_recent.blog_title} + {headline_featured.blog_title}
{ color="white" weight="normal" > - {headline_recent.blog_description} + {headline_featured.blog_description}
- {headline_recent.published_date} + {headline_featured.published_date && + localize( + convertDate(headline_featured?.published_date), + )} - {headline_recent.read_time_in_minutes} min read + {headline_featured.read_time_in_minutes} + @@ -231,7 +253,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {featureds.map((article) => { return ( @@ -249,7 +271,10 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { - + {article.tags && article.tags .slice(0, 1) @@ -267,11 +292,17 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { .length.toString()}`} )} - + - {article.published_date} + {article?.published_date && + localize( + convertDate( + article?.published_date, + ), + )} - {article.read_time_in_minutes} min + {article.read_time_in_minutes}{' '} +
{article.blog_title} @@ -281,9 +312,15 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {article.blog_description} - {article.published_date} + {article?.published_date && + localize( + convertDate( + article?.published_date, + ), + )} - {article.read_time_in_minutes} min read + {article.read_time_in_minutes}{' '} + From 495ce59b9ebea6cdd9093da1dc00a583b148f685 Mon Sep 17 00:00:00 2001 From: kevin Date: Fri, 27 Aug 2021 16:33:57 +0800 Subject: [PATCH 05/21] remove localize on published date --- src/pages/blog/_recent-featured-posts.js | 32 +++++++----------------- 1 file changed, 9 insertions(+), 23 deletions(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index e24bf15756a..60e9e139d64 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -108,7 +108,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {headline_recent?.published_date && - localize(convertDate(headline_recent?.published_date))} + convertDate(headline_recent?.published_date)} {headline_recent.read_time_in_minutes}{' '} @@ -163,10 +163,8 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {article?.published_date && - localize( - convertDate( - article?.published_date, - ), + convertDate( + article?.published_date, )} {article.read_time_in_minutes}{' '} @@ -181,13 +179,9 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {article?.published_date && - localize( - convertDate( - article?.published_date, - ), - )} + convertDate(article?.published_date)} - {article.read_time_in_minutes}{' '} + {article.read_time_in_minutes} @@ -238,9 +232,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {headline_featured.published_date && - localize( - convertDate(headline_featured?.published_date), - )} + convertDate(headline_featured?.published_date)} {headline_featured.read_time_in_minutes} @@ -295,10 +287,8 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {article?.published_date && - localize( - convertDate( - article?.published_date, - ), + convertDate( + article?.published_date, )} {article.read_time_in_minutes}{' '} @@ -313,11 +303,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {article?.published_date && - localize( - convertDate( - article?.published_date, - ), - )} + convertDate(article?.published_date)} {article.read_time_in_minutes}{' '} From 3a600bac6a820ae22c299fa1ea55ab99e4fd2e99 Mon Sep 17 00:00:00 2001 From: kevin Date: Fri, 27 Aug 2021 16:51:16 +0800 Subject: [PATCH 06/21] add space --- src/pages/blog/_recent-featured-posts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index 60e9e139d64..49f4b4eb0e7 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -181,7 +181,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {article?.published_date && convertDate(article?.published_date)} - {article.read_time_in_minutes} + {article.read_time_in_minutes}{' '} From b9ccb59e02546bfd747d727dd6a0fefa4e93a0b5 Mon Sep 17 00:00:00 2001 From: kevin Date: Mon, 30 Aug 2021 10:34:27 +0800 Subject: [PATCH 07/21] fix some error --- src/pages/blog/_recent-featured-posts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index 7d870153d78..d323bd4de4c 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -234,7 +234,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {headline_featured.published_date && convertDate(headline_featured?.published_date)} - {headline_featured.read_time_in_minutes} + {headline_featured.read_time_in_minutes}{' '} From 3a2c833bdb73c96ab30abb8c00845dd4c42c4cda Mon Sep 17 00:00:00 2001 From: kevin Date: Mon, 30 Aug 2021 10:40:34 +0800 Subject: [PATCH 08/21] vercel issue --- src/pages/blog/_recent-featured-posts.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index d323bd4de4c..8f00dff8f9d 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -326,8 +326,8 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { } RecentFeaturedPosts.propTypes = { - featured_data: PropTypes.object, - recent_data: PropTypes.object, + featured_data: PropTypes.array, + recent_data: PropTypes.array, } export default WithIntl()(RecentFeaturedPosts) From 3268497addaad1fbfb8303ff25d34b71a73ba868 Mon Sep 17 00:00:00 2001 From: kevin Date: Mon, 30 Aug 2021 10:45:17 +0800 Subject: [PATCH 09/21] fix vercel --- src/pages/blog/_recent-featured-posts.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index 8f00dff8f9d..86027fc928d 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -52,9 +52,9 @@ const settings = { } const RecentFeaturedPosts = ({ recent_data, featured_data }) => { - const recents = recent_data.slice(1) + const recents = recent_data const headline_recent = recent_data[0] - const featureds = featured_data.slice(1) + const featureds = featured_data const headline_featured = featured_data[0] return ( From 1a417471955ceba9e241a898fae4ffd00d8b68e8 Mon Sep 17 00:00:00 2001 From: kevin Date: Mon, 30 Aug 2021 11:32:22 +0800 Subject: [PATCH 10/21] vercel fix --- src/pages/blog/_recent-featured-posts.js | 8 ++++---- src/pages/blog/index.js | 1 - src/pages/blog/recent-featured-posts/_style.js | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index 86027fc928d..d323bd4de4c 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -52,9 +52,9 @@ const settings = { } const RecentFeaturedPosts = ({ recent_data, featured_data }) => { - const recents = recent_data + const recents = recent_data.slice(1) const headline_recent = recent_data[0] - const featureds = featured_data + const featureds = featured_data.slice(1) const headline_featured = featured_data[0] return ( @@ -326,8 +326,8 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { } RecentFeaturedPosts.propTypes = { - featured_data: PropTypes.array, - recent_data: PropTypes.array, + featured_data: PropTypes.object, + recent_data: PropTypes.object, } export default WithIntl()(RecentFeaturedPosts) diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js index 3f58d8f6e1f..47ae9a07333 100644 --- a/src/pages/blog/index.js +++ b/src/pages/blog/index.js @@ -194,7 +194,6 @@ const DerivBlog = ({ data }) => { - diff --git a/src/pages/blog/recent-featured-posts/_style.js b/src/pages/blog/recent-featured-posts/_style.js index 0195befd184..3525f1e7af8 100644 --- a/src/pages/blog/recent-featured-posts/_style.js +++ b/src/pages/blog/recent-featured-posts/_style.js @@ -76,7 +76,7 @@ export const MainArticle = styled(Flex)` } @media ${device.tablet} { - width: 100%; + width: 87vw; min-width: 270px; } From b654a2794398e2b1abbb39bc10cf63ce2992754b Mon Sep 17 00:00:00 2001 From: kevin Date: Mon, 30 Aug 2021 11:33:18 +0800 Subject: [PATCH 11/21] small housekeeping --- src/pages/blog/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js index 47ae9a07333..85df23ba578 100644 --- a/src/pages/blog/index.js +++ b/src/pages/blog/index.js @@ -193,7 +193,6 @@ const DerivBlog = ({ data }) => { - From cb678683edce384a7854eb7e3fe0ddce3aff5d73 Mon Sep 17 00:00:00 2001 From: kevin Date: Mon, 30 Aug 2021 11:39:04 +0800 Subject: [PATCH 12/21] fix --- src/pages/blog/_recent-featured-posts.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index d323bd4de4c..7ac4244a2a3 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -85,8 +85,8 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {headline_recent.tags.map((article) => { return ( <> - - + + {article.tags_id.tag_name} @@ -209,8 +209,8 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {headline_featured.tags.map((article) => { return ( <> - - + + {article.tags_id.tag_name} @@ -326,8 +326,8 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { } RecentFeaturedPosts.propTypes = { - featured_data: PropTypes.object, - recent_data: PropTypes.object, + featured_data: PropTypes.array, + recent_data: PropTypes.array, } export default WithIntl()(RecentFeaturedPosts) From e799a6ed9494e1cb4f19ccaa4c015a5841a11d9e Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 1 Sep 2021 11:46:32 +0800 Subject: [PATCH 13/21] add truncator --- src/pages/blog/_recent-featured-posts.js | 10 ++++++---- src/pages/blog/recent-featured-posts/_style.js | 4 +++- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index 7ac4244a2a3..9b11ee868f5 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -57,6 +57,8 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { const featureds = featured_data.slice(1) const headline_featured = featured_data[0] + const truncateString = (input) => (input.length > 40 ? `${input.substring(0, 40)}...` : input) + return ( {
- {article.blog_title} + {truncateString(article.blog_title)}
- {article.blog_description} + {truncateString(article.blog_title)} {article?.published_date && @@ -295,11 +297,11 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
- {article.blog_title} + {truncateString(article.blog_title)}
- {article.blog_description} + {truncateString(article.blog_title)} {article?.published_date && diff --git a/src/pages/blog/recent-featured-posts/_style.js b/src/pages/blog/recent-featured-posts/_style.js index 3525f1e7af8..e41f499812b 100644 --- a/src/pages/blog/recent-featured-posts/_style.js +++ b/src/pages/blog/recent-featured-posts/_style.js @@ -76,7 +76,7 @@ export const MainArticle = styled(Flex)` } @media ${device.tablet} { - width: 87vw; + width: 88vw; min-width: 270px; } @@ -200,6 +200,8 @@ export const SmallArticleCategories = styled(Text)` @media ${device.laptopM} { position: static; + height: 18px; + padding: 0 8px 0; font-size: 10px; } ` From 4efcbe8a5ec511c3f93e756a6d683282e2583b1e Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 1 Sep 2021 12:09:07 +0800 Subject: [PATCH 14/21] fix image problem --- src/components/elements/query-image.js | 4 ++++ src/pages/blog/recent-featured-posts/_style.js | 4 ---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/elements/query-image.js b/src/components/elements/query-image.js index 74408a55c18..0598d17ba9c 100644 --- a/src/components/elements/query-image.js +++ b/src/components/elements/query-image.js @@ -8,6 +8,10 @@ export const ImageWrapper = styled.div` width: ${(props) => props.width || '100%'}; height: ${(props) => props.height}; } + &.main-article-bg { + display: contents; + opacity: 0.8; + } ` const QueryImage = ({ alt, className, data, height, is_eager, width }) => { diff --git a/src/pages/blog/recent-featured-posts/_style.js b/src/pages/blog/recent-featured-posts/_style.js index e41f499812b..d7b73f66b0f 100644 --- a/src/pages/blog/recent-featured-posts/_style.js +++ b/src/pages/blog/recent-featured-posts/_style.js @@ -79,10 +79,6 @@ export const MainArticle = styled(Flex)` width: 88vw; min-width: 270px; } - - &.main-article-bg { - opacity: 0.8; - } ` export const Description = styled.div` From 4dda1c18f615087e4816502775212a0cc2157bca Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 1 Sep 2021 13:48:02 +0800 Subject: [PATCH 15/21] omit extra tags on small articles --- src/pages/blog/_recent-featured-posts.js | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index 9b11ee868f5..6aab0be71b7 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -155,13 +155,6 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {tag.tags_id.tag_name} ))} - {article.tags.length > 1 && ( - - {`+${article.tags - .slice(1) - .length.toString()}`} - - )} {article?.published_date && @@ -279,13 +272,6 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { {tag.tags_id.tag_name} ))} - {article.tags.length > 1 && ( - - {`+${article.tags - .slice(1) - .length.toString()}`} - - )} {article?.published_date && From 810879df056f78e4d455c40c74ffee19aa5f9dc9 Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 1 Sep 2021 14:57:09 +0800 Subject: [PATCH 16/21] omit classname on query image --- src/components/elements/query-image.js | 4 ---- src/pages/blog/recent-featured-posts/_style.js | 5 +++++ 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/elements/query-image.js b/src/components/elements/query-image.js index 0598d17ba9c..74408a55c18 100644 --- a/src/components/elements/query-image.js +++ b/src/components/elements/query-image.js @@ -8,10 +8,6 @@ export const ImageWrapper = styled.div` width: ${(props) => props.width || '100%'}; height: ${(props) => props.height}; } - &.main-article-bg { - display: contents; - opacity: 0.8; - } ` const QueryImage = ({ alt, className, data, height, is_eager, width }) => { diff --git a/src/pages/blog/recent-featured-posts/_style.js b/src/pages/blog/recent-featured-posts/_style.js index d7b73f66b0f..5176d11c065 100644 --- a/src/pages/blog/recent-featured-posts/_style.js +++ b/src/pages/blog/recent-featured-posts/_style.js @@ -79,6 +79,11 @@ export const MainArticle = styled(Flex)` width: 88vw; min-width: 270px; } + + > .main-article-bg { + display: contents; + opacity: 0.8; + } ` export const Description = styled.div` From 81454c3e39c7210bbfb00989c42522c63c618160 Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 1 Sep 2021 15:15:50 +0800 Subject: [PATCH 17/21] all article - first article container fix --- src/pages/blog/articles/_first-article.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/pages/blog/articles/_first-article.js b/src/pages/blog/articles/_first-article.js index 4b7c6eaf96e..c164f9ec42b 100644 --- a/src/pages/blog/articles/_first-article.js +++ b/src/pages/blog/articles/_first-article.js @@ -13,6 +13,7 @@ const StyledFlex = styled(Flex)` overflow: hidden; transition: transform 0.3s; cursor: pointer; + width: 77vw; &:hover { transform: translateY(-1.1rem) scale(1.02); @@ -33,6 +34,10 @@ const ImageWrapper = styled.div` width: 100%; height: unset; } + + > .main-article-bg { + display: contents; + } ` const StyledCategories = styled(Header)` @@ -65,6 +70,7 @@ const FirstArticle = ({ item }) => { data={getImage(item.main_image.imageFile)} alt={item.main_image.description || ''} width="100%" + className="main-article-bg" /> From 7c74c45eb31a7609bb98f7fd50b07c1e0c9f4ad1 Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 1 Sep 2021 15:20:06 +0800 Subject: [PATCH 18/21] extra tweak --- src/pages/blog/articles/_first-article.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/blog/articles/_first-article.js b/src/pages/blog/articles/_first-article.js index c164f9ec42b..810cc479644 100644 --- a/src/pages/blog/articles/_first-article.js +++ b/src/pages/blog/articles/_first-article.js @@ -21,6 +21,7 @@ const StyledFlex = styled(Flex)` @media (max-width: 823px) { flex-direction: column; height: auto; + width: 90vw; max-width: 384px; margin-top: 40px; } From edaa8e5382cd8c982632ad093dfc3a61f1ae7713 Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 1 Sep 2021 16:23:52 +0800 Subject: [PATCH 19/21] edit style for all article --- src/pages/blog/articles/_first-article.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/blog/articles/_first-article.js b/src/pages/blog/articles/_first-article.js index 810cc479644..6da23c2fabb 100644 --- a/src/pages/blog/articles/_first-article.js +++ b/src/pages/blog/articles/_first-article.js @@ -13,7 +13,8 @@ const StyledFlex = styled(Flex)` overflow: hidden; transition: transform 0.3s; cursor: pointer; - width: 77vw; + width: 78vw; + max-width: 1200px; &:hover { transform: translateY(-1.1rem) scale(1.02); @@ -59,7 +60,6 @@ const FirstContentWrapper = styled(Flex)` const RedirectLink = styled(LocalizedLink)` text-decoration: none; - max-width: 1200px; ` const FirstArticle = ({ item }) => { From 0244a55cb161dc1eafe88debe1ba300cdb7460be Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 1 Sep 2021 17:24:55 +0800 Subject: [PATCH 20/21] add extra styling --- src/pages/blog/articles/_first-article.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/pages/blog/articles/_first-article.js b/src/pages/blog/articles/_first-article.js index 6da23c2fabb..94596c2475c 100644 --- a/src/pages/blog/articles/_first-article.js +++ b/src/pages/blog/articles/_first-article.js @@ -13,17 +13,24 @@ const StyledFlex = styled(Flex)` overflow: hidden; transition: transform 0.3s; cursor: pointer; - width: 78vw; + width: 100vw; max-width: 1200px; &:hover { transform: translateY(-1.1rem) scale(1.02); } + + @media (max-width: 1333px) { + width: 100%; + min-width: 800px; + } + @media (max-width: 823px) { flex-direction: column; height: auto; width: 90vw; max-width: 384px; + min-width: unset; margin-top: 40px; } ` From e7745131b4f8765c2365fb31e4eb8a2fd3682d92 Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 1 Sep 2021 22:53:02 +0800 Subject: [PATCH 21/21] add wrapper --- src/pages/blog/recent-featured-posts/_style.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/blog/recent-featured-posts/_style.js b/src/pages/blog/recent-featured-posts/_style.js index 5176d11c065..02cc5dad634 100644 --- a/src/pages/blog/recent-featured-posts/_style.js +++ b/src/pages/blog/recent-featured-posts/_style.js @@ -302,6 +302,7 @@ export const SmallArticleDateTimeMobile = styled(Flex)` display: flex; font-size: 10px; justify-content: flex-end; + white-space: nowrap; } `