Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Habib/banner data cms graphql #2028

Merged
9 commits merged into from
Aug 24, 2021
Merged

Habib/banner data cms graphql #2028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
777b8ed
add query implementation
ShuvoHabib Aug 17, 2021
842b137
add data fro m graphql
ShuvoHabib Aug 18, 2021
d705394
remove binary files
ShuvoHabib Aug 18, 2021
0fd56eb
add data from cms
ShuvoHabib Aug 18, 2021
32ec622
add data from cms graphql published
ShuvoHabib Aug 18, 2021
83e4c7f
add dynamic data
ShuvoHabib Aug 18, 2021
afa1105
add queryimage fix
ShuvoHabib Aug 19, 2021
bed77b2
width fix banner
ShuvoHabib Aug 19, 2021
ac3b7fc
add links
ShuvoHabib Aug 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/pages/blog/components/_hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import styled from 'styled-components'
import { TextWrapper, Title } from './_common'
import device from 'themes/device.js'
import { Flex } from 'components/containers'
import { QueryImage } from 'components/elements'

const MainWrapper = styled.div`
width: 100%;
Expand Down Expand Up @@ -51,6 +50,9 @@ const Wrapper = styled(Flex)`
@media screen and (min-width: 1980px) {
max-width: 1900px;
}
@media screen and (max-width: 500px) {
padding: 2rem 4rem;
}
`

const Hero = ({ heroImage, title, description }) => (
Expand All @@ -75,9 +77,7 @@ const Hero = ({ heroImage, title, description }) => (
{description}
</TextWrapper>
</Wrapper>
<ImageWrapper>
<QueryImage width="100%" height="100%" data={heroImage} alt="Hero Blog" />
</ImageWrapper>
<ImageWrapper>{heroImage}</ImageWrapper>
</MainWrapper>
)

Expand Down
98 changes: 57 additions & 41 deletions src/pages/blog/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,43 @@
import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import PropTypes from 'prop-types'
import { graphql } from 'gatsby'
import styled from 'styled-components'
import Subscribe from './components/_subscribe'
import RecentFeaturedPosts from './_recent-featured-posts'
import DVideoBanner from './video-banner'
import Hero from './components/_hero'
import Layout from 'components/layout/layout'
import { Container, SEO, Flex } from 'components/containers'
import { localize, WithIntl } from 'components/localization'
import { Carousel } from 'components/elements'
import { localize, WithIntl, LocalizedLink } from 'components/localization'
import { Carousel, QueryImage } from 'components/elements'

const query = graphql`
query {
hero_image_one: file(relativePath: { eq: "blog/blog-bg1.png" }) {
...fadeIn
}
hero_image_two: file(relativePath: { eq: "blog/blog-bg2.png" }) {
...fadeIn
}
hero_image_three: file(relativePath: { eq: "blog/blog-bg3.png" }) {
...fadeIn
}
}
`
const MainWrapper = styled(Flex)`
background-color: var(--color-white);
flex-direction: column;
overflow: hidden;
`
export const query = graphql`
query MyQuery {
directus {
homepage_banners(filter: { status: { _eq: "published" } }) {
id
link
heading
sub_heading
image {
imageFile {
childImageSharp {
gatsbyImageData
}
}
id
}
}
}
}
`

const DerivBlog = () => {
const DerivBlog = ({ data }) => {
const settings = {
options: {
loop: true,
Expand All @@ -46,33 +54,37 @@ const DerivBlog = () => {
nav_color: '--color-grey-5',
},
}
const data = useStaticQuery(query)
const homepage_banner_data = data.directus.homepage_banners
return (
<Layout type="blog" is_ppc_redirect={true}>
<SEO title={localize('Blog')} description={localize('Blog like a boss')} no_index />
<SEO
title={localize('Articles, trading guide and resources | Deriv')}
description={localize(
"If you are looking for trading guide or tutorials, visit Deriv's trading academy and learn how to trade online.",
)}
/>
<MainWrapper>
<Carousel has_autoplay autoplay_interval={60000000} {...settings}>
<Hero
heroImage={data['hero_image_one']}
title={localize('BeSquare')}
description={localize(
'Our 6-month programme aims to make fresh graduates attractive to hiring managers by providing them with square-shaped skills, mentorship, and a once-in-a-lifetime work experience.',
)}
/>
<Hero
heroImage={data['hero_image_two']}
title={localize('This week’s market report')}
description={localize(
'We give our 2 satoshis about the crypto market outlook, and talk about the performance of other markets in the past week. ',
)}
/>
<Hero
heroImage={data['hero_image_three']}
title={localize('Free ebook: How to trade stocks the smart way')}
description={localize(
'Today, financial markets are open to everyone, not just the financial elite. This ebook by Vince Stanzione teaches you how you can trade stocks just like the pros.',
)}
/>
<Carousel has_autoplay autoplay_interval={6000} {...settings}>
{homepage_banner_data.map((page_data) => {
return (
<LocalizedLink
key={page_data.id}
to={page_data.link}
style={{ textDecoration: 'none' }}
>
<Hero
heroImage={
<QueryImage
data={page_data.image.imageFile}
alt={page_data.image.description || ''}
/>
}
title={page_data.heading}
description={page_data.sub_heading}
/>
</LocalizedLink>
)
})}
</Carousel>
</MainWrapper>
<RecentFeaturedPosts />
Expand All @@ -86,4 +98,8 @@ const DerivBlog = () => {
)
}

DerivBlog.propTypes = {
data: PropTypes.object,
}

export default WithIntl()(DerivBlog)