Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eggheadio/gatsby-theme-egghead-blog
This is a theme version of our gatsby-starter-egghead-blog.
https://github.com/eggheadio/gatsby-theme-egghead-blog
gatsby gatsby-theme mdx
Last synced: about 2 months ago
JSON representation
This is a theme version of our gatsby-starter-egghead-blog.
- Host: GitHub
- URL: https://github.com/eggheadio/gatsby-theme-egghead-blog
- Owner: eggheadio
- License: mit
- Created: 2019-03-14T17:47:47.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-09T21:18:19.000Z (almost 5 years ago)
- Last Synced: 2024-10-29T23:13:19.393Z (2 months ago)
- Topics: gatsby, gatsby-theme, mdx
- Language: JavaScript
- Size: 4.45 MB
- Stars: 16
- Watchers: 6
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# egghead.io creator MDX Blog Theme Project
This is based on Robin Wieruch's https://github.com/rwieruch/gatsby-mdx-blog-starter-project
Lots of nice pieces are also borrowed from Jason Lengstorf https://github.com/jlengstorf/lengstorf.com
A project in [Gatsby.js](https://www.gatsbyjs.org/) themes with [MDX](https://github.com/mdx-js/mdx).
## Features
- MDX: JavaScript/React in Markdown
- Prism.js: Syntax Highlighting
- Pagination
- Emotion
- Typography.js
- Self-hosted fonts ([Inter UI](https://rsms.me/inter/))
- Social media share buttons
- Site & Theme config files
- ConvertKit subscribe form (Formik and Yup)
- Placeholder illustrations by [Katerina Limpitsouni](https://twitter.com/ninalimpi) from [undraw.co](https://undraw.co/)
## Getting Started
This guide will take you through how to set up a blog with this theme.
### Step 1: Installation
```bash
# make your site folder
mkdir your-site && cd your-site
# init a new package.json
yarn init
# add dependencies
yarn add -D react react-dom gatsby @eggheadio/gatsby-theme-egghead-blog
touch gatsby-config.js
```
```js
// add the theme to your gatsby config
module.exports = {
plugins: [`@eggheadio/gatsby-theme-egghead-blog`],
}
```
We will walk through the `siteMetadata` this theme expects and how to change the default path to your blog posts.
### Step 2: Folder Structure
This is the default folder structure that we recommend:
```
your-site/
├── README.md
├── config
│ └── website.js
├── content
│ └── posts
│ ├── demo01
│ │ ├── HelloWorld.js
│ │ ├── banner.png
│ │ └── index.mdx
│ ├── demo02
│ └── frontmatter-placeholder
│ ├── images
│ │ └── banner.jpg
│ └── index.md
├── gatsby-config.js
├── node_modules
├── package.json
```
### Step 3: Adding Frontmatter Placeholder
Frontmatter is the block in a markdown file denoted by surrounding hyphens: `---`.
We need to supply MDX placeholder frontmatter so that our queries wont break. Inside of your `content/blog` folder, you can add a folder called `frontmatter-placeholder`.
```bash
# navigate to where you blog posts live
cd content/blog
# make a placeholder folder
mkdir frontmatter-placeholder && cd frontmatter-placeholder
# add an index file and an images directory.
touch index.md
mkdir images
```
Add this content to the `index.md` file:
```markdown
---
slug: invisible-post
date: 2019-01-01
title: 'this post is a ghost'
description: 'this post has all of the right fields'
categories: ['test']
keywords: ['test']
banner: './images/banner.jpg'
published: false
redirects:
- '/invisible-post-423123'
---
This exists to populate GraphQL fields and avoid null errors. It should contain all of the available frontmatter.
```
Then add [this image](./example/content/posts/frontmatter-placeholder/images/banner.jpg) (or any other image) to the images folder inside of `content/blog/frontmatter-placeholder/images`.
### Step 4: Configuring siteMetadata
In order for this theme to function properly, these fields need to be inside of `siteMetadata` in you `gatsby-config.js`.
```js
const config = require('./config/website')
const pathPrefix = config.pathPrefix === '/' ? '' : config.pathPrefix
module.exports = {
pathPrefix: config.pathPrefix,
siteMetadata: {
siteUrl: config.siteUrl + pathPrefix,
title: config.siteTitle,
description: config.siteDescription,
keywords: ['Video Blogger'],
canonicalUrl: config.siteUrl,
twitterUrl: config.twitterUrl,
twitterHandle: config.twitterHandle,
fbAppID: config.fbAppID,
githubUrl: config.githubUrl,
githubHandle: config.githubHandle,
image: config.siteLogo,
author: {
name: config.author,
minibio: `
egghead is the premier place on the internet for
experienced developers to enhance their skills and stay current
in the fast-faced field of web development.
`,
},
organization: {
name: config.organization,
url: config.siteUrl,
logo: config.siteLogo,
},
},
plugins: [
{
resolve: `gatsby-theme-egghead-blog`,
options: {},
},
],
}
```
## Override theme components (Component Shadowing)
Only the components that are exported from the theme are available to be overridden.
To override a theme component you will need to add `@eggheadio/gatsby-theme-egghead-blog/`. You may override anything in the `gatsby-theme-egghead-blog/src` directory.
For example, if you would like to override the default `Header` component. You would a file like this.
```js
// @egghead/gatsby-theme-egghead-blog/components/Header/index.js
import React from 'react'
class Header extends React.Component {
render() {
return
hello egghead
}
}
export default Header
```
Now "hello egghead" will be rendered anywhere the old `Header` component was render.
If you shadowing a component that references other theme components (and you still need them), You will need to import them. To import them, you start with `@eggheadio/gatsby-theme-egghead-blog/` and fill in the relative path of the component that you need.
e.g.
```js
import { withTheme } from '@eggheadio/gatsby-theme-egghead-blog/components/Theming'
import { rhythm } from 'eggheadio/gatsby-theme-egghead-blog/lib/typography’
```