how can i add global header and footer?

anuar-fullstack commented 5 years ago

Summary

Relevant information

i try to add my header and footer component in html.js but the on enter effect did not trigger. unlike when i try to add the Header component and footer component in my pages it run correctly

Environment (if relevant)

System: OS: Linux 4.15 elementary OS 0.4.1 Loki CPU: (4) x64 Intel(R) Core(TM) i3-7100 CPU @ 3.90GHz Shell: 4.3.48 - /bin/bash Binaries: Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node Yarn: 1.10.1 - /usr/bin/yarn npm: 6.8.0 - /var/www/html/purple-rain-gatsby/node_modules/.bin/npm Languages: Python: 2.7.12 - /usr/bin/python Browsers: Chrome: 69.0.3497.81 npmPackages: gatsby: ^2.0.19 => 2.1.4 gatsby-image: ^2.0.15 => 2.0.29 gatsby-plugin-manifest: ^2.0.5 => 2.0.17 gatsby-plugin-offline: ^2.0.11 => 2.0.23 gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6 gatsby-plugin-sass: ^2.0.10 => 2.0.10 gatsby-plugin-sharp: ^2.0.7 => 2.0.20 gatsby-source-filesystem: ^2.0.20 => 2.0.20 gatsby-source-storyblok: ^0.1.4 => 0.1.4 gatsby-transformer-sharp: ^2.1.4 => 2.1.13 npmGlobalPackages: gatsby-cli: 2.4.9

File contents (if changed)

gatsby-config.js: module.exports = { siteMetadata: { title: 'Gatsby Default Starter', }, plugins: [ { resolve: 'gatsby-source-storyblok', options: { accessToken: 'YsaJ73fHrmMvTdVFGhb3yQtt', homeSlug: 'home', version: process.env.NODE_ENV === 'production' ? 'published' : 'draft' } }, 'gatsby-plugin-react-helmet', 'gatsby-plugin-sass', { resolve:gatsby-source-filesystem, options: { name:images, path:${__dirname}/src/images, }, } ], }

package.json: { "name": "gatsby-storyblok-boilerplate", "description": "Gatsby Storyblok starter", "version": "1.0.0", "author": "Alexander Feiglstorfer <delooks@gmail.com>", "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.15", "@fortawesome/free-brands-svg-icons": "^5.7.2", "@fortawesome/free-regular-svg-icons": "^5.7.2", "@fortawesome/free-solid-svg-icons": "^5.7.2", "@fortawesome/react-fontawesome": "^0.1.4", "classnames": "^2.2.6", "gatsby": "^2.0.19", "gatsby-image": "^2.0.15", "gatsby-plugin-manifest": "^2.0.5", "gatsby-plugin-offline": "^2.0.11", "gatsby-plugin-react-helmet": "^3.0.6", "gatsby-plugin-sass": "^2.0.10", "gatsby-plugin-sharp": "^2.0.7", "gatsby-source-filesystem": "^2.0.20", "gatsby-source-storyblok": "^0.1.4", "gatsby-transformer-sharp": "^2.1.4", "i": "^0.3.6", "node-sass": "^4.11.0", "npm": "^6.8.0", "rangeslider.js": "^2.3.2", "react": "^16.5.1", "react-dom": "^16.5.1", "react-helmet": "^5.2.0", "react-id-swiper": "^1.6.9", "semantic-ui-react": "^0.85.0", "storyblok-react": "0.0.6" }, "keywords": [ "gatsby" ], "license": "MIT", "scripts": { "build": "gatsby build", "develop": "gatsby develop", "start": "yarn develop", "format": "prettier --write \"src/**/*.js\"", "test": "echo \"Error: no test specified\" && exit 1" }, "devDependencies": { "prettier": "^1.14.2" }, "repository": { "type": "git", "url": "https://github.com/storyblok/gatsby-storyblok-boilerplate" } } `gatsby-node.js:const path = require('path')

exports.createPages = ({ graphql, actions }) => { const { createPage } = actions

return new Promise((resolve, reject) => { const storyblokEntry = path.resolve('src/templates/storyblok-entry.js')

resolve(
  graphql(
    `{
      allStoryblokEntry {
        edges {
          node {
            id
            name
            created_at
            uuid
            slug
            full_slug
            content
            is_startpage
            parent_id
            group_id
          }
        }
      }
    }`
  ).then(result => {
    if (result.errors) {
      console.log(result.errors)
      reject(result.errors)
    }

    const entries = result.data.allStoryblokEntry.edges
    entries.forEach((entry, index) => {
      let pagePath = entry.node.full_slug == 'home' ? '' : `${entry.node.full_slug}/`

      createPage({
        path: `/${pagePath}`,
        component: storyblokEntry,
        context: {
          story: entry.node
        }
      })
    })
  })
)

}) } gatsby-browser.js:/**

Implement Gatsby's Browser APIs in this file.
See: https://www.gatsbyjs.org/docs/browser-apis/ */

// You can delete this file if you're not using it

import "./src/stylesheets/main.scss" gatsby-ssr.js`: N/A

HurricaneInteractive commented 5 years ago

Have you tried adding it in your layout.js file? Have a read through this page in the docs for more information.

I am not sure how recommended it is to edit the html.js directly. Someone else more experienced might be able to answer that one.

DSchau commented 5 years ago

Hard to pin-down exactly what the issue is here. As @HurricaneInteractive noted, the recommendation for shared component pieces/blocks (e.g. header, footer, etc.) is to use a Layout component, documented here.

Generally - we recommend only editing/creating the html.js file if absolutely necessary and it does not seem to be necessary here.

So to sum this up, I'd recommend using a layout component, and import your header/footer there. This layout component should be imported (or use gatsby-plugin-layout) and all your pages will get this layout just by importing/wrapping.

Going to close as answered, but please feel free to reply if we can help further and we'll re-open.

Thanks for using Gatsby 💜

gatsbyjs / gatsby