diff --git a/crowdin/messages.json b/crowdin/messages.json index 075b19c1175..8c22dcfdb7a 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -1,4 +1,5 @@ { + "0": "", "3670321": "<0>IVV.US The iShares Core S&P 500 ETF tracks the performance of an index of large-capitalisation US equities.", "3965745": "Your payout can potentially grow by 1% or 5% on average per tick.", "4506932": "How do I add a Deriv X account?", @@ -244,6 +245,7 @@ "247754618": "Do I need a Deriv account to become a payment agent?", "247817566": "With a Digits contract, you predict whether the last digit of the last tick of your contract will meet specified criteria, depending on the contract type you select.", "248446741": "Predict which will be the highest or the lowest tick in a series of five ticks.", + "248832578": ".", "250159252": "web browser logo", "250681139": "How do I log in to Deriv X?", "251340836": "Help centre | Frequently asked questions | Deriv MT5 | Deriv", @@ -1654,6 +1656,7 @@ "1597478217": "No, you cannot close an Asians contract before it expires.", "1598664071": "List of directors", "1599891822": "Stop loss amount in Down direction", + "1601498870": "Recent articles", "1602627054": "So your pip value is <0>2 USD.", "1602716515": "When you join our IB programme,", "1602800752": "Save your strategies", @@ -1692,6 +1695,7 @@ "1631281562": "GBP Basket", "1631620531": "Years of industry experience", "1631705059": "Predict whether the exit spot will be higher or lower than a price target (the barrier) at the end of the contract period.", + "1632565779": "${title}", "1633022779": "Synthetic indices and cryptocurrencies are available for trading 24/7.", "1633102593": "Software developers", "1634507782": "Range Break 200 Index", diff --git a/gatsby-config.js b/gatsby-config.js index 5d8ea2e798e..a8fc98399b9 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -28,6 +28,16 @@ const strapi_config = [ singularName: 'contact-us', queryParams: strapi_preview_param, }, + { + singularName: 'post', + queryParams: { + publicationState: 'live', + populate: { + image: '*', + images: '*', + }, + }, + }, ] module.exports = { diff --git a/src/features/pages/posts/index.tsx b/src/features/pages/posts/index.tsx new file mode 100644 index 00000000000..a98b920cf44 --- /dev/null +++ b/src/features/pages/posts/index.tsx @@ -0,0 +1,58 @@ +import React from 'react' +import moment from 'moment' +import Layout from 'features/components/templates/layout' +import * as styles from './posts.module.scss' +import Typography from 'features/components/atoms/typography' +import { Localize } from 'components/localization' +import Flex from 'features/components/atoms/flex-box' +import Link from 'features/components/atoms/link' +import dclsx from 'features/utils/dclsx' + +const PostsModule = ({ data }: TBlogPosts) => { + const posts = data?.allStrapiPost?.nodes || [] + console.log(data, 'www') + return ( + + + + + + + + {posts?.map(({ hero }) => { + const { title, banner, date } = hero + const parsedDate = moment(date) + const formattedDate = parsedDate?.format('Do [of] MMMM YYYY') + return ( + + + + +
+ + + + + +
+ {formattedDate || ''} +
+
+ + ) + })} + + + + ) +} + +export default PostsModule diff --git a/src/features/pages/posts/posts.module.scss b/src/features/pages/posts/posts.module.scss new file mode 100644 index 00000000000..4f79db73159 --- /dev/null +++ b/src/features/pages/posts/posts.module.scss @@ -0,0 +1,27 @@ +@use 'features/styles/theme/theme-mixins' as *; + +.post_image { + max-width: 42rem; + width: 98%; + height: 25rem; + @include breakpoints(tablet) { + height: 14rem; + } +} +.posts_wrapper { + margin-inline: 2%; + + @include breakpoints(laptop) { + margin-inline: 12%; + } +} + +.image_wrapper { + flex-basis: unset; + @include breakpoints(phone) { + flex-basis: 48%; + } + @include breakpoints(tablet) { + flex-basis: 18%; + } +} diff --git a/src/pages/blog/_types.ts b/src/pages/blog/_types.ts new file mode 100644 index 00000000000..a790730b981 --- /dev/null +++ b/src/pages/blog/_types.ts @@ -0,0 +1,21 @@ +type StrapiImage = { + localFile: { + publicURL: string + } +} +type Thero = { + title: string + date: Date + tags: string + banner: StrapiImage +} + +type TBlogPosts = { + data: { + allStrapiPost: { + nodes: { + hero: Thero + }[] + } + } +} diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx new file mode 100644 index 00000000000..80d44e5e598 --- /dev/null +++ b/src/pages/blog/index.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import { graphql } from 'gatsby' +import { TGatsbyHead } from 'features/types' +import { SEO } from 'components/containers' +import { WithIntl } from 'components/localization' +import PostsModule from 'features/pages/posts' + +const BlogPosts = ({ data }: TBlogPosts) => { + return +} + +export default WithIntl()(BlogPosts) + +export const query = graphql` + query { + allStrapiPost(sort: { fields: createdAt, order: DESC }, limit: 10) { + nodes { + createdAt + hero { + title + date + tags + banner { + localFile { + publicURL + } + } + } + } + } + } +` + +export const Head = ({ pageContext }: TGatsbyHead) => ( + +)