Mis notas - Matias Hernández

Setup Gatsby

Iniciar

        npm init gatsby

Setup multiple MDX sources thank to Paulie

  • add two more source file system plugin

install dependencies

gatsby-plugin-react-helmet react-helmet gatsby-plugin-emotion gatsby-source-rss-feed gatsby-remark-images gatsby-remark-prismjs prismjs @emotion/react @emotion/styled @mdx-js/mdx @mdx-js/react gatsby-plugin-emotion tailwindcss twin.macro

Setup tailwind and twin.macro

const baseStyles = css`
  body {
    ${tw`bg-blue-100`}
  }
`;

const BaseStyles = () => (
  <>
    <GlobalStyles />
    <Global styles={baseStyles} />
  </>
);

const Grid = styled.div`
  ${tw`grid w-screen h-screen`};
  grid-template-columns: 200px 1fr 200px;
  grid-gap: 1rem;
  grid-template-areas: "left content right";
`;

const Content = styled.main`
  ${tw`border-2 border-opacity-60 border-blue-200`};
  grid-area: content;
`;

const Layout = ({ children, ...rest }) => {
  return (
    <div {...rest}>
      <BaseStyles />
      <Grid>
        <Content>{children}</Content>
      </Grid>
    </div>
  );
};

export default Layout;

Layout

OG Image

Links to this note