What's new in gatsby-starter-morning-dew v1.1?

TLDR; Metatags generation, CSS-in-JS (styled-components) and pagination are now in gatsby-starter-morning-dew 🎉

🏷 Social media card generator

It’s now posible to generate preview images for social networks (Twitter and Facebook).

This great idea come from a conversation I had with Luciano Mammino (aka @Loige). I basically took 85% of his code. Thanks Luciano 😊

How to do it?

1. In a terminal, run npm run dev.
2. In a second terminal, run: npm run generatePostPreviewImages

3. In the post’s header, add the generated images:

   title: My blog post
   # ...
   imageTw: ./gatsby-starter-morning-dew-v1-1-tw.png
   imageFb: ./gatsby-starter-morning-dew-v1-1-fb.png

Gatsby will first create extra url suffixed by /image_tw and /image_fb (i.e. http://localhost:8000/gatsby-starter-morning-dew-v1-1/image_tw). Then, Pupetter will take a snapshot and add it to your post folder.

Quick tip: If you want to recreate this pictures

# delete Facebook images
find ./content -name "*-fb.png" -type f -delete
# delete Twitter images
find ./content -name "*-tw.png" -type f -delete

If you don’t to skip the file generation for some posts, add generate-card: false to the post’s header.

---
title: My blog post
# ...
generate-card: false
---

💅 CSS-in-JS (styled-components)

I added a library called styled-components which allow me to create components like this:

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;


<Title>
  Hello World!
</Title>

Main motivations were:

• Avoid name collision. During the development I face a problem where component’s CSS had collision with other components. Now this problem is fixed. Styled component assing uniq class identifer (example class="Article__ArticleWrapper-dSJTpe loVbTg").

• Automatic critical CSS.

• Cleaner file architecture. I previously had a redundant file organisation. For 1 component, I end up with 1 folder and 2 files with the same name (but a different extension).

  # Before
  ├── components/
  │   ├── Article
  │   │   ├── Article.css
  │   │   └── Article.js
  │   ├── Content
  │   │   ├── Content.css
  │   │   └── Content.js
  │   └── ...
  
  # Now
  ├── components/
  │   ├── Article.js
  │   ├── Content.js

Biggest cons: files are now larger!

Pagination

Pagination is now available. By default, there’s 6 posts per page. You can change this value in siteConfig.js:

module.exports = {
  // ...
  postsPerPage: 6,
  // ...
}

Other

• Few CSS improvements. Example: previous code tag … new code tag
• Generate WebP images (withWebp option in gatsby-remark-images)
• Disqus support on pages (previously only supported on blog posts)