Bloggy - A Gatsby Blog Starter

This is WIP - currently under construction

A Medium-inspired blog starter built from the gatsby-default-starter project. Best used for a personal or team blog, the Bloggy starter project can be used as is or modified for your use by adding new components, scripts, and stylesheets. Recipes welcome!

Out of the box, this starter:

has a clean style inspired by Medium
supports posts written in Markdown, html, and JS/X
uses Sass for css and FontAwesome for icons
Bourbon and Bourbon neat for grid and advanced styling needs
supports embedding Gists in posts (JS/X posts only)

Posts are just post bodies - use a manifest for post title and meta

Instead of using front-matter in Markdown posts (which presents consistency and ease-of-development issues across post-formats), this starter package renders all post formats into generic Post components, which in turn render a PostHeader and a PostFooter.

These, as well as PostSummaries, are built from the post meta object you'll add for each post in post-manifest.js. The key for each post will be the file name, and the file name doubles as the url 'slug' for that post.

Ex:

### post-manifest.js
{
  'my-first-post': {
    title: 'My First Post',
    author: 'Me!',
    date: 'January 1, 2020',
    abstract: 'This is my very first post. Please read on!...'
  }, ...
}

### posts/my-first-post.md
This is my very first post. Please read on!

Before I found Gatsby, I was lost.

- OR -

### posts/my-first-post.jsx
import React from 'react';

const myFirstPost = () => {
  return (
    <div>
      <p>This is my very first post. Please read on!</p>
      <p>Before I found Gatsby, I was lost.</p>
    </div>
  );
}
export default myFirstPost;

There are three advantages to doing it this way:

You can move post bodies between file formats without having to reformat all the front-matter.
You can extend PostHeader and PostFooter with other React components to add extra interactivity.
You can pull all post meta, such as tags or authors from a single, easily queryable source to build new features, such as tag clouds and index pages.

Since JS/X posts aren't wrapped in a React wrapper as part of the build process (see this issue thread on Gatsby), I've added a special JS/X wrapper in components that acts just like the other wrappers except that it renders a child component (your post) instead of calling dangerouslySetInnerHtml. This preserves PostHeader/Footer across all component types and allows for adding dynamic scripts (like the Gist embed script) in JS posts.

Why might you want to create posts in JSX?

Say, for example, you started with my-first-post.md but then decided that you wanted to add a Gist to your page using Github's Gist embed code. In order to do that, you'd just wrap your post body in a React component so that it looks like my-first-post.jsx, and add the EmbedGist component, passing your gist identifier as a prop:

### posts/my-first-post.jsx
...
<p>....</p>
<EmbedGist gist={'florapdx/09326933831039'} />
<p>...</p>

TODOs:

Add contact form
Add newsletter signup - TinyLetter distro?
Add auto-post to Medium?
...

florapdx/gatsby-bloggy-starter

Bloggy - A Gatsby Blog Starter

Posts are just post bodies - use a manifest for post title and meta

Why might you want to create posts in JSX?