Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
mrchow19910319

Add in components into Gatsby's layout.

Recommended Posts

Posted · Original PosterOP

How am I supposed to divide my layout into different part and add in all the components 1 by one?

This is how I am planning my page: 

Spoiler

1010813892_mainlayout.png.0e1afd1bfef7edac3dcb8cedc8e0a953.png

The header + footer I can easily add in using <Header /> and <Footer />.

 

Here is the layout.js file: 

import React from "react"
import PropTypes from "prop-types"
import { StaticQuery, graphql } from "gatsby"

import Header from "./header"
import Footer from "./footer"
import bio from "./bio"
import "./layout.css"

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Header siteTitle={data.site.siteMetadata.title} />
        <div
          style={{
            margin: `0 auto`,
            maxWidth: 960,
            padding: `0px 1.0875rem 1.45rem`,
            paddingTop: 0,
          }}
        >
          <main>{children}</main>
        </div>
        <Footer />
      </>
    )}
  />
)

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Here is my Bio.js file:

 

import React from "react"
import Layout from "./layout"
import SEO from "./seo"
import 'bootstrap/dist/css/bootstrap.css'

const bio = (data) => (
  <Layout>
    <SEO title="slowpacedcoding" keywords={[`slowpacedcoding`, `web development`, `Matt Zhou`]} />

    <h3 style={{
      fontFamily: `'Montserrat', sans-serif`,
      fontWeight: 400,
      marginTop:`1rem`,
      color: `#f47c48`,
    }}>Bio</h3>
    <img src="https://res.cloudinary.com/zzrot/image/upload/v1549713970/Personal%20Portfolio%20Collection/Personal%20Portfolio%20Site%20Images/no_background.png" alt="profile_pic" style={{
      width:`100px`,
    }}></img>
    <p style={{
      fontFamily: `'Montserrat', sans-serif`,
    }}>
    Former student of Singapore Polytechnic, dropped out at the end of year two, had been
    learning Web-Development since 2016. My goal is to become a web developer in an English speaking country.
    </p>

    <h5 style={{
      fontFamily: `'Montserrat', sans-serif`,
    }}>Find me at :</h5>

    <div>
      <a href="https://www.linkedin.com/in/xiang-zhou-03547755/" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>LinkedIn</a>
      <a href="https://github.com/zhouxiang19910319" rel='noopener noreferrer' target="_blank"  style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>github</a>
      <a href="https://medium.freecodecamp.org/the-most-difficult-things-about-learning-to-code-by-yourself-b24ac8c3c23a "
      rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>medium</a>
      <a href="https://twitter.com/zh0ux1ang" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>twitter</a>
      <a href="https://www.freecodecamp.org/zhouxiang19910319" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}} >freeCodeCamp</a>
    </div>

  </Layout>
)

export default bio

 


If it is not broken, let's fix till it is. 

Link to post
Share on other sites

Kind of hard to understand what you're asking here, if I understand correctly you'd import your Posts.js file which I'm assuming is a react class then simply place it into your main page js's render method. 

 

Something like this(very pseudo as i don't have your exact project):

import React, { Component } from "react";

import Layout from '...path/to/Layout'
import Posts from '...path/to/Posts'
import Bio from '...path/to/Bio'

class Home extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Layout>
        	<div>
            	<Posts />
                <Bio />
            </div>
        </Layou>;
    }
}

export default Home;

 

However if you are asking how to achieve that specific style of layout then I would suggest checking out css flex box.

Link to post
Share on other sites
Posted · Original PosterOP
1 hour ago, infamoustrey said:

 

sorry I didn't specify what I wanna achieve, in the layout.js file we can find imported components like footer , as well as header.

I want to make a bio.js file then import it into layout.js.


If it is not broken, let's fix till it is. 

Link to post
Share on other sites
Posted · Original PosterOP

Here is the project repo: 

https://github.com/zhouxiang19910319/slowpacedcoding_gatsby

 

 

check out this thread I made: https://www.freecodecamp.org/forum/t/import-react-components-in-gatsby-js/265231

 

I think I am going to make bio.js a full blown react class components then import it into layout.js.


If it is not broken, let's fix till it is. 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×