Layout en Gatsby

https://i.postimg.cc/6q3pg48v/Logo.png
https://i.postimg.cc/L6wpMxLt/cart.png
❤️

Acá la documentación de wrapRootElement

Amigo sere honesto

NO entiendo mucho tu explicacion de Gatsby… tu forma de enseñar es muy riguida … y nada fluida… … pero bueno continuare con tu explicacion

Saludos.

Si se les presenta un error con el Layout pueden probar con el codigo en ES6

import React from "react";
import Layout from "./src/components/Layout";

export const wrapRootElement = ({ element }) => <Layout>{element}</Layout>;

Para importar las imagenes, prueben:

import logo from '../images/Logo.png'
import bolsa from '../images/cart.png'

Y ya solo las llaman asi:

<img src={logo} alt='logotipo' />
<img src={carro} alt='cart icon' />

Los estilos no me quedaron iguales pero algo que los mejoró a como estaban es usar el siguiente código en layour.js, lo vi en un comentario a un aporte y me pareció importatne:

import "./layout.css"

Si llegas hasta aqui, ve al video 10 luego 11 y regresa a este, el 9

igual se ve val pero igual para que futuros usos de img no se les llene el archivo importando n cantidad de imagenes creen este compoenente

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'

// Note: You can change "images" to whatever you'd like.

const Image = props => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 600) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(props.filename)
      });
      if (!image) {
        return null
      }

      //const imageSizes = image.node.childImageSharp.sizes; sizes={imageSizes}
      return <Img alt={props.alt} fluid={image.node.childImageSharp.fluid} />
    }}
  />
)

export default Image

y después solo por prop mandan a llamar el nombre de la imagen

<Image filename='nombredelaimagen.png'/>

Como sugerencia, los atributos alt deben tener una estructura diferente para poder ser interpretados de una mejor manera.

Ejemplo: Para el carrito de compra, debería ser algo así: ícono del carrito de compras.

Debe ser una descripción corta, pero que permita ser entendido su uso.

Este atributo, permite que cuando pasamos por encima de una imagen el cursor, nos muestre el título de la misma.

También, cuando una imagen no carga, aparece su descripción en su lugar.

Y por último, pero no menos importante, para temas de accesibilidad tiene una función vital.

que frustrante es, estudiar con cosas que no funcionan, termina siendo mas rapido estudiar todo por aparte y hacer los estilos por aparte, que intentar utilizar los recursos de estos cursos

Mmm… en la documentación de Gatsby recomiendan wrapRootElement para Provider Components (como Context o el provider de Redux) y wrapPageElement para componentes de UI estáticos (como un layout). Acá el ejemplo:

const React = require("react")
const Layout = require("./src/components/layout").default

exports.wrapPageElement = ({ element, props }) => {
  // props provide same data to Layout as Page element will get
  // including location, data, etc - you don't need to pass it
  return <Layout {...props}>{element}</Layout>
}

A Alguien mas se le esta renderizando doble el Layout ? , solo me sucede en la home por que la page gracias funciona bien.

dejo mi repo por si alguien puede hecharle un ojito, gracias.

Repositorio de Platzi Shop

tengo un problema, al hacer la configuracion del gatsby-browser envia el layout a todas las paginas pero las envia sin estilos. 😕

Links de las imagenes

const logoLink = "https://i.postimg.cc/6q3pg48v/Logo.png"
const carritoLink = "https://i.postimg.cc/L6wpMxLt/cart.png"

Segun la documentacion para este caso es mas recomendable usar wrapPageElement , ya que wrapRootElemet es para providers y no para UI.

`const React = require(“react”)
const Layout = require("./src/components/layout").default

exports.wrapRootElement = ({ element }) => <Layout>{element}</Layout>`

importante colocar el default al final del require de Layput

Crei que la api de gatsby tendria _document o _app como nextjs

Parece ser que con la nueva version pasamos de wrapRootElement a wrapPageElement

Existe otra forma de importar images en Gatsby como en Next.js con /static/

no seria mas facil ponerle el Layout a gracias.js… ??

Es posible usar ahora el import y export de javascript es6 dentro del gatsby-browser.js

import React from 'react';
import Layout from "./src/components/layout";

export const wrapRootElement = ({ element }) => (
    <Layout>{element}</Layout>
);

No estoy muy seguro del por que mi body aparece con margen 🤔

Corríjanme si estoy mal, pero no podía ver los estilos de /components/layout.css, tuve que importarlos al /pages/index.js y ya veo todo con normalidad ¿hice bien?

Me sale el siguiente error. alguien sabe que show? 😒

Actualmente en la documentación para colocar cosas como Layout y elementos de UI recomiendan wrapPageElement y el wrapRootElement para providers y cosas del estilo