Content Wrappers

Implementation

✅ Work on site-wrapper feature
⬜ Work on content-wrapper feature (for posts). Tried to do this with grid but didn't go well and perhaps didn't need it. I left the work in content-grid branch.

Site Wrapper

This is where I'm going to bring in twin.macro to use with Tailwind. I really hope it works! Seems to sort of!

• Install/config twin.macro

  At this point, most everything is ready to go so here's all that is needed.

Copy
1npm install twin.macro

Copy
1"babelMacros": {
2  "twin": {
3    "preset": "styled-components"
4  }
5},

In Skillthrive, he's putting all styled-components in an elements folder. I like the idea, if they are reusable, but in this case, the SiteWrapper is only used in the Layout component.

SiteWrapper will have the basic screen sizing stuff and padding for the main content. There really isn't any CSS Grid or FlexBox going on at the moment. It's a pretty early 00's or 90's style home page 🙂

Copy
1import tw, { styled } from 'twin.macro'
2const SiteWrapper = styled.div(() => [
3  tw`h-full m-auto max-w-screen-lg pt-0 px-4 pb-6 mt-6`,
4])

Content Wrapper

This one may be involved. It's not really needed in the Layout at the moment, since the layout is so simple. And, with mt-6 moved into the SiteWrapper, the main element is now not styled! For blog, site, and product, perhaps they could use the same wrapper?! At least at first! So, most likely the first reusable style! But, why can't it just go into components? It's only going to be used in the Container component. This will not contain Nav or Footer.

Retrospective

⬜ Look for Tailwind ways to make the cover image look better and responsive. I want full bleed width but it isn't perfect.
⬜ Add more padding (at least on the X-axis) for content

Attributions

Photo by Visual Stories || Micheile (@micheile) on Unsplash

Look out behind you

This is what I'll be stealing from!

Container

Container Component (ContainerElement.ContainerWrapper) - a styled.div that defines 100% height, CSS grid, and breakpoints.

He uses this to wrap that whole site really.

• Container Component

Copy
1export const Container = ({ children }) => (
2  <ContainerWrapper>
3    <Nav />
4    {children}
5    <Footer />
6  </ContainerWrapper>
7)

• Used in allPosts

Copy
1<Container>
2  <Seo />
3  <FeatureImage />
4  <Content>// static content // maping of posts to a list</Content>
5  <Pagination /> // more to this but allows user to go from page to page
6</Container>

• Used in singlePost

Copy
1<Container>
2  <Seo
3    title={data.mdx.frontmatter.title}
4    image={seoImage}
5    description={data.mdx.frontmatter.excerpt}
6  />
7  <FeatureImage fluid={featureImage} />
8  <Post>
9    <H1 margin='0 0 2rem 0'>{data.mdx.frontmatter.title}</H1>
10    <MDXRenderer>{data.mdx.body}</MDXRenderer>
11  </Post>
12</Container>

Container equivalent for my site is Layout component. It will eventually have a Nav and Footer. Currently Layout has a header, a very basic footer, and a bit of junk. There is a main and it only has a margin-top defined. There is a wrapping div after title that doesn't do a whole lot. That's a good spot for a grid definition if that's what is going to happen.

Content

Content Component just wraps the {children}

Content Component (ContentElement.ContentWrapper) - a styled.main that defines the location on the CSS grid, background-color, padding, box-shadow, and breakpoints. Also z-index…