fix: posts initial (#5903)

* fix: posts initial

* fix: sorting done

crowdin/messages.json

@@ -1,4 +1,5 @@
 {
+  "0": "",
   "3670321": "<0>IVV.US</0> 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</0>.",
   "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",

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 = {

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 (
+        <Layout>
+            <Flex.Box margin_block="12x" direction="col" className={styles.posts_wrapper}>
+                <Typography.Heading as="h2" size="small">
+                    <Localize translate_text={'_t_Recent articles_t_'} />
+                </Typography.Heading>
+
+                <Flex.Box wrap="wrap" margin_block="15x" justify="around">
+                    {posts?.map(({ hero }) => {
+                        const { title, banner, date } = hero
+                        const parsedDate = moment(date)
+                        const formattedDate = parsedDate?.format('Do [of] MMMM YYYY')
+                        return (
+                            <Flex.Box direction="col" key={title} className={styles.image_wrapper}>
+                                <Link url={{ type: 'internal', to: '/' }} no_hover>
+                                    <img
+                                        src={banner?.localFile?.publicURL}
+                                        className={styles.post_image}
+                                    />
+                                </Link>
+                                <div className={dclsx('margin-block-10x')}>
+                                    <Link url={{ type: 'internal', to: '/' }} no_hover>
+                                        <Typography.Heading as="h3" size="xxs">
+                                            <Localize translate_text={`_t_${title}_t_`} />
+                                        </Typography.Heading>
+                                    </Link>
+                                    <div
+                                        className={dclsx(
+                                            'text-medium',
+                                            'typography-color-gray-shade',
+                                        )}
+                                    >
+                                        {formattedDate || ''}
+                                    </div>
+                                </div>
+                            </Flex.Box>
+                        )
+                    })}
+                </Flex.Box>
+            </Flex.Box>
+        </Layout>
+    )
+}
+
+export default PostsModule

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%;
+    }
+}

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
+            }[]
+        }
+    }
+}

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 <PostsModule data={data} />
+}
+
+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) => (
+    <SEO title="_t__t_" description="_t_._t_" pageContext={pageContext} />
+)