Skip to content

Commit

Permalink
Setting up a lot of infra
Browse files Browse the repository at this point in the history
This change does the following:

* Add ability for blog posts to generate automatically
* Add now.json file for deploying
* Finalize content on react error boundaries
* Add babel-standalone for transpiling future code to browser compat code
  • Loading branch information
hamlim committed Feb 1, 2019
1 parent 2015f27 commit 8317c99
Show file tree
Hide file tree
Showing 12 changed files with 457 additions and 65 deletions.
9 changes: 9 additions & 0 deletions gatsby-config.js
Expand Up @@ -9,10 +9,19 @@ module.exports = {
resolve: 'gatsby-mdx',
options: {
defaultLayouts: {
posts: require.resolve('./src/components/post-layout.js'),
default: require.resolve('./src/components/layout.js'),
},
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/pages/posts/`,
ignore: [`.draft`],
},
},
'gatsby-plugin-twitter',
{
resolve: `gatsby-plugin-feed`,
Expand Down
64 changes: 64 additions & 0 deletions gatsby-node.js
Expand Up @@ -5,3 +5,67 @@
*/

// You can delete this file if you're not using it

const { createFilePath } = require('gatsby-source-filesystem')
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
// We only want to operate on `Mdx` nodes. If we had content from a
// remote CMS we could also check to see if the parent node was a
// `File` node here
if (node.internal.type === 'Mdx') {
const value = createFilePath({ node, getNode })
createNodeField({
// Name of the field you are adding
name: 'slug',
// Individual MDX node
node,
// Generated value based on filepath with "blog" prefix
value: `/blog${value}`,
})
}
}

const path = require('path')
exports.createPages = ({ graphql, actions }) => {
// Destructure the createPage function from the actions object
const { createPage } = actions
return new Promise((resolve, reject) => {
resolve(
graphql(
`
{
allMdx {
edges {
node {
id
fields {
slug
}
}
}
}
}
`
).then(result => {
// this is some boilerlate to handle errors
if (result.errors) {
console.error(result.errors)
reject(result.errors)
}
// We'll call `createPage` for each result
result.data.allMdx.edges.forEach(({ node }) => {
createPage({
// This is the slug we created before
// (or `node.frontmatter.slug`)
path: node.fields.slug,
// This component will wrap our MDX content
component: path.resolve(`./src/components/post-layout.js`),
// We can use the values in this context in
// our page layout component
context: { id: node.id },
})
})
})
)
})
}
11 changes: 11 additions & 0 deletions now.json
@@ -0,0 +1,11 @@
{
"version": 2,
"name": "mhme-blog",
"builds": [
{
"src": "package.json",
"use": "@now/static-build",
"config": { "distDir": "public" }
}
]
}
27 changes: 15 additions & 12 deletions package.json
Expand Up @@ -5,18 +5,12 @@
"version": "0.0.0",
"author": "Matthew Hamlin <matthewjameshamlin@gmail.com>",
"dependencies": {
"@babel/standalone": "7.3.1",
"@emotion/core": "10.0.6",
"@emotion/styled": "10.0.6",
"@mdx-js/mdx": "0.16.8",
"@mdx-js/tag": "0.16.8",
"gatsby": "^2.0.0",
"gatsby-mdx": "0.3.5",
"gatsby-plugin-feed": "2.0.11",
"gatsby-plugin-offline": "^2.0.5",
"gatsby-plugin-react-helmet": "^3.0.0",
"gatsby-plugin-twitter": "2.0.8",
"react": "16.8.0.alpha-1",
"react-dom": "16.8.0.alpha-1",
"react": "16.8.0-alpha.1",
"react-dom": "16.8.0-alpha.1",
"react-helmet": "^5.2.0",
"react-live": "1.12.0"
},
Expand All @@ -27,11 +21,20 @@
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write '**/*.js'"
"format": "prettier --write '**/*.js'",
"now-build": "npm run build"
},
"devDependencies": {
"webpack-dev-server": ">=3.1.11",
"prettier": "^1.14.2"
"gatsby": "^2.0.0",
"@mdx-js/mdx": "0.16.8",
"gatsby-mdx": "0.3.5",
"gatsby-plugin-feed": "2.0.11",
"gatsby-plugin-offline": "^2.0.5",
"gatsby-plugin-react-helmet": "^3.0.0",
"gatsby-plugin-twitter": "2.0.8",
"gatsby-source-filesystem": "2.0.19",
"prettier": "^1.14.2",
"webpack-dev-server": ">=3.1.11"
},
"repository": {
"type": "git",
Expand Down
3 changes: 3 additions & 0 deletions src/components/GlobalStyles.js
Expand Up @@ -382,6 +382,9 @@ export default function GlobalStyles() {
padding: 1rem;
white-space: pre;
margin-bottom: 1.563rem;
}
.prism-code {
overflow: scroll;
}
Expand Down
48 changes: 2 additions & 46 deletions src/components/layout.js
Expand Up @@ -5,48 +5,6 @@ import styled from '@emotion/styled'
import Header from './header'
import GlobalStyles from './GlobalStyles.js'

import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { MDXProvider } from '@mdx-js/tag'

function Code({ children, className, ...props }) {
// See: https://github.com/c8r/x0/blob/5d5956517b67dcc2ea66974ca629085c2d17f9c7/src/scope.js#L47
const lang = className.replace(/^language-/, '')
const type = lang.charAt(0)
switch (type) {
case '.': {
return (
<LiveProvider
code={children}
{...props}
className={className.replace(/\.|!/, '')}
>
<LiveEditor />
</LiveProvider>
)
}
case '!': {
return (
<LiveProvider
code={children}
{...props}
className={className.replace(/\.|!/, '')}
>
<LiveEditor />
<LiveError />
<LivePreview />
</LiveProvider>
)
}
default: {
return (
<pre className={className} {...props}>
{children}
</pre>
)
}
}
}

const Wrapper = styled.div({
margin: '0 auto',
maxWidth: 960,
Expand All @@ -59,7 +17,7 @@ const Layout = ({ children }) => (
<GlobalStyles />
<StaticQuery
query={graphql`
query SiteTitleQuery {
query RegularSiteTitleQuery {
site {
siteMetadata {
title
Expand All @@ -86,9 +44,7 @@ const Layout = ({ children }) => (
<html lang="en" />
</Helmet>
<Header siteTitle={data.site.siteMetadata.title} />
<MDXProvider components={{ code: Code }}>
<Wrapper>{children}</Wrapper>
</MDXProvider>
<Wrapper>{children}</Wrapper>
</>
)}
/>
Expand Down
115 changes: 115 additions & 0 deletions src/components/post-layout.js
@@ -0,0 +1,115 @@
import React from 'react'
import Helmet from 'react-helmet'
import { graphql } from 'gatsby'
import styled from '@emotion/styled'
import Header from './header'
import GlobalStyles from './GlobalStyles.js'
import MDXRenderer from 'gatsby-mdx/mdx-renderer'

import { transform } from '@babel/standalone'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { MDXProvider } from '@mdx-js/tag'

function Code({ children, className, ...props }) {
// See: https://github.com/c8r/x0/blob/5d5956517b67dcc2ea66974ca629085c2d17f9c7/src/scope.js#L47
const lang = className.replace(/^language-/, '')
const type = lang.charAt(0)
switch (type) {
case '.': {
return (
<LiveProvider
code={children}
{...props}
className={className.replace(/\.|!/, '')}
>
<LiveEditor />
</LiveProvider>
)
}
case '!': {
return (
<LiveProvider
noInline
transformCode={code =>
`${
transform(code, {
presets: [['stage-0', { decoratorsLegacy: true }], 'react'],
}).code
}render(<Example />);`
}
code={children}
scope={{
Component: React.Component,
Fragment: React.Fragment,
}}
{...props}
className={className.replace(/\.|!/, '')}
>
<LivePreview />
<LiveError />
<LiveEditor />
</LiveProvider>
)
}
default: {
return (
<pre className={className} {...props}>
{children}
</pre>
)
}
}
}

const Wrapper = styled.div({
margin: '0 auto',
maxWidth: 960,
padding: '0px 1.0875rem 1.45rem',
paddingTop: 0,
})

const Layout = ({ data: { mdx } }) => (
<>
<GlobalStyles />
<>
<Helmet
title={mdx.frontmatter.title}
meta={[
{
name: 'description',
content:
'A blog about technology, web development, and other things.',
},
{
name: 'keywords',
content: 'blog, technology, web development',
},
]}
>
<html lang="en" />
</Helmet>
<Header siteTitle={mdx.frontmatter.title} />
<MDXProvider components={{ code: Code }}>
<Wrapper>
<MDXRenderer>{mdx.code.body}</MDXRenderer>
</Wrapper>
</MDXProvider>
</>
</>
)

export default Layout

export const pageQuery = graphql`
query BlogPostQuery($id: String) {
mdx(id: { eq: $id }) {
id
frontmatter {
title
}
code {
body
}
}
}
`
36 changes: 30 additions & 6 deletions src/pages/index.mdx
@@ -1,4 +1,4 @@
import { Link } from 'gatsby'
import { Link, graphql } from 'gatsby'

# Hey 👋

Expand All @@ -8,12 +8,36 @@ Its built with awesome tools like:

- `gatsby`
- `mdx`
- `react-live`
- and `emotion`

Expect to see more content showing up here as I migrate it over from my previous site!

## Blog Posts

- <Link to="/posts/2019/january/react-error-boundaries">
React Error Boundaries
</Link>
- <Link to="/posts/2018/december/testing-software">Testing Software</Link>
- <Link to="/posts/2018/december/starting-fresh">Starting Fresh</Link>
<ul>
{props.data.allMdx.edges.map(({ node }) => (
<li key={node.id}>
<Link to={node.fields.slug}>{node.frontmatter.title}</Link>
</li>
))}
</ul>

export const pageQuery = graphql`
query blogIndex {
allMdx {
edges {
node {
id
excerpt
frontmatter {
title
}
fields {
slug
}
}
}
}
}
`
4 changes: 4 additions & 0 deletions src/pages/posts/2018/december/starting-fresh.mdx
@@ -1,3 +1,7 @@
---
title: Starting Fresh
---

# Starting Fresh

Over the past two years or so I think I have tried to rewrite my personal site about 3 or 4 times.
Expand Down

0 comments on commit 8317c99

Please sign in to comment.