Closed emmadigital closed 4 years ago
emmadigital
commented
4 years ago Any idea how should I make it work out please advise. How this template handles pagination when there are 100+ blog posts. And how to browse these blogs from different categories? Please advise.
emmadigital
commented
4 years ago I have this sidebar component, can you please guide how should I create the sidebar inside index-page.js https://github.com/netlify-templates/gatsby-starter-netlify-cms/blob/master/src/templates/index-page.js
I want to divide the index content in below structure:
<div className="row"><div className="col-md-8">Index Page Content</div><div className="col-md-4"><Sidebar /></div></div>
import React from 'react'
import { Card, CardTitle, CardBody, Form, FormGroup, Input } from 'reactstring'
import {graphql, StaticQuery, Link} from gatsby
import Img from 'gatsby-image'
const Sidebar = () => (
<div>
<card>
<CardBody>
<CardTitle className="text-center text-uppercase mb-3">
Newsletter
</CardTitle>
<Form className="text-center">
<FormGroup>
<Input
type="email"
name="email"
placeholder="Your email address"
/>
</FormGroup>
<button className="btn btn-outline-success text-uppercase">
Subscribe
</button>
</Form>
</CardBody>
</Card>
<Card>
<CardBody>
<CardTitle className="text-center text-uppercase">
Advertisement
</CardTitle>
<img src="" alt="" />
</CardBody>
</Card>
<Card>
<CardBody>
<CardTitle className="text-center text-uppercase mb-3">
Recent Posts
</CardTitle>
<StaticQuery query={sidebarQuery} render={(data) => (
<div>
{data.allMarkdownRemark.edges.map(({node}) => (
<Card key={node.id}>
<Link to={node.frontmatter.path}>
<Img className="card-image-top" fluid={node.frontmatter.image.childImageSharp.fluid}/>
</Link>
<CardBody>
<CardTitle>
<Link to={node.frontmatter.path}>
{node.frontmatter.title}
</Link>
</CardTitle>
</CardBody>
</Card>
))}
</div>
)}/>
</CardBody>
</Card>
</div>
)
const sidebarQuery = graphql`
query sidebarQuery{
allMarkdownRemark(
sort: {fields: [frontmatter__date], order:DESC}
limit: 3
){
edges{
node{
id
frontmatter{
title
path
image{
childImageSharp{
fluid(maxWidth: 300){
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
}
`
export default sidebarI tried to divide Landing Page (index.js) page in to two column but it displays the second column below the first column: https://prnt.sc/sb71hc Can you please check what I am doing wrong
index.js
import React from 'react'
import PropTypes from 'prop-types'
import { Link, graphql } from 'gatsby'
import Layout from '../components/Layout'
import Features from '../components/Features'
import BlogRoll from '../components/BlogRoll'
export const IndexPageTemplate = ({
image,
title,
heading,
subheading,
mainpitch,
description,
intro,
}) => (
<div>
<div
className="full-width-image margin-top-0"
style={{
backgroundImage: `url(${
!!image.childImageSharp ? image.childImageSharp.fluid.src : image
})`,
backgroundPosition: `top left`,
backgroundAttachment: `fixed`,
}}
>
<div
style={{
display: 'flex',
height: '150px',
lineHeight: '1',
justifyContent: 'space-around',
alignItems: 'left',
flexDirection: 'column',
}}
>
<h1
className="has-text-weight-bold is-size-3-mobile is-size-2-tablet is-size-1-widescreen"
style={{
boxShadow:
'#3571B8 0.5rem 0px 0px, #3571B8 -0.5rem 0px 0px',
backgroundColor: '#3571B8',
color: 'white',
lineHeight: '1',
padding: '0.25em',
}}
>
{title}
</h1>
<h3
className="has-text-weight-bold is-size-5-mobile is-size-5-tablet is-size-4-widescreen"
style={{
boxShadow:
'#3571B8 0.5rem 0px 0px, #3571B8 -0.5rem 0px 0px',
backgroundColor: '#3571B8',
color: 'white',
lineHeight: '1',
padding: '0.25em',
}}
>
{subheading}
</h3>
</div>
</div>
<section className="section section--gradient">
<div className="container">
<div className="section">
<div className="row">
<div className="col-md-8">
<div className="columns">
<div className="column is-8 is-offset-2">
<div className="content">
<div className="content">
<div className="tile">
<h1 className="title">{mainpitch.title}</h1>
</div>
<div className="tile">
<h3 className="subtitle">{mainpitch.description}</h3>
</div>
</div>
<div className="columns">
<div className="column is-8">
<h3 className="has-text-weight-semibold is-size-2">
{heading}
</h3>
<p>{description}</p>
</div>
</div>
<Features gridItems={intro.blurbs} />
<div className="columns">
<div className="column is-12 has-text-centered">
<Link className="btn" to="/products">
See all products
</Link>
</div>
</div>
<div className="column is-12">
<h3 className="has-text-weight-semibold is-size-2">
Latest stories
</h3>
<BlogRoll />
<div className="column is-12 has-text-centered">
<Link className="btn" to="/blog">
Read more
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-md-4 align-right"><h1>Sidebar</h1>
<div className="columns">
<div className="column is-12 has-text-centered">
See all trainings
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
)
IndexPageTemplate.propTypes = {
image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
title: PropTypes.string,
heading: PropTypes.string,
subheading: PropTypes.string,
mainpitch: PropTypes.object,
description: PropTypes.string,
intro: PropTypes.shape({
blurbs: PropTypes.array,
}),
}
const IndexPage = ({ data }) => {
const { frontmatter } = data.markdownRemark
return (
<Layout>
<IndexPageTemplate
image={frontmatter.image}
title={frontmatter.title}
heading={frontmatter.heading}
subheading={frontmatter.subheading}
mainpitch={frontmatter.mainpitch}
description={frontmatter.description}
intro={frontmatter.intro}
/>
</Layout>
)
}
IndexPage.propTypes = {
data: PropTypes.shape({
markdownRemark: PropTypes.shape({
frontmatter: PropTypes.object,
}),
}),
}
export default IndexPage
export const pageQuery = graphql`
query IndexPageTemplate {
markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
frontmatter {
title
image {
childImageSharp {
fluid(maxWidth: 2048, quality: 100) {
...GatsbyImageSharpFluid
}
}
}
heading
subheading
mainpitch {
title
description
}
description
intro {
blurbs {
image {
childImageSharp {
fluid(maxWidth: 240, quality: 64) {
...GatsbyImageSharpFluid
}
}
}
text
}
heading
description
}
}
}
}
`
Here I have divided the section in to 2 columns (8 - 4)
> <div className="section">
> <div className="row">
> <div className="col-md-8">
> <div className="columns">
> <div className="column is-8 is-offset-2">
> <div className="content">
> <div className="content">
> <div className="tile">
> <h1 className="title">{mainpitch.title}</h1>
> </div>
> <div className="tile">
> <h3 className="subtitle">{mainpitch.description}</h3>
> </div>
> </div>
> <div className="columns">
> <div className="column is-8">
> <h3 className="has-text-weight-semibold is-size-2">
> {heading}
> </h3>
> <p>{description}</p>
> </div>
> </div>
> <Features gridItems={intro.blurbs} />
> <div className="columns">
> <div className="column is-12 has-text-centered">
> <Link className="btn" to="/products">
> See all products
> </Link>
> </div>
> </div>
> <div className="column is-12">
> <h3 className="has-text-weight-semibold is-size-2">
> Latest stories
> </h3>
> <BlogRoll />
> <div className="column is-12 has-text-centered">
> <Link className="btn" to="/blog">
> Read more
> </Link>
> </div>
> </div>
> </div>
> </div>
> </div>
> </div>
> <div className="col-md-4 align-right"><h1>Sidebar</h1>
> <div className="columns">
> <div className="column is-12 has-text-centered">
> See all trainings
> </div>
> </div>
> </div>
> </div>
> </div>
> </div>
> </section>I used this grid system https://bulma.io/documentation/layout/tiles/ to implement the sidebar
I want to add below features to this template, please advise how should I go about it.
Sidebar widget on blog page to show all blog categories. Pagination on blog page.