johno

Set up changesets with a release GitHub Action

Changesets is the raddest way to manage monorepos. You can combine changesets with GitHub Actions to automate releases.

---

Install changesets CLI.

johno

diff --git a/src/components/CodeBlock.js b/src/components/CodeBlock.js
index 8b828d6..1751585 100644
--- a/src/components/CodeBlock.js
+++ b/src/components/CodeBlock.js
@@ -2,6 +2,7 @@
 
 import React from 'react'
 import Highlight, {defaultProps} from 'prism-react-renderer'
+import {mdx} from '@mdx-js/react'
 import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live'

johno

const path = require('path')

module.exports = {
  plugins: [
    // ...
    {
      resolve: 'gatsby-plugin-page-creator',
      options: {
        path: path.join(__dirname, 'src', 'pages')
      }

johno

workflow "npm" {
  on = "push"
  resolves = ["npm:publish:ci"]
}

action "npm:master" {
  uses = "actions/bin/filter@b2bea07"
  args = "branch master"
}

johno

Programmatic redirects in Gatsby

In the frontmatter of your post you can specify legacy redirects.

---
title: foo
date: 2012-11-10
path: bar
redirects:

johno

module.exports = {
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  setupFiles: ['./test-setup.js']
}

johno

Links for starting out

• https://reactjs.org/docs/hello-world.html
• https://egghead.io/courses/the-beginner-s-guide-to-react
• https://github.com/kentcdodds/learn-react
• https://reactcheatsheet.com/
• https://learnreact.com/
• https://reactpatterns.com/
• https://nextjs.org/learn/

johno

import React from 'react'
import Markdown from './Markdown'

const components = {
  h1: props => <h1 style={{ color: 'tomato' }} {...props} />
}

const scope = {
  name: 'world!',
  Box: props => <div style={{border: 'thin solid tomato'}} {...props} />

johno

import React from 'react'
import Markdown from './Markdown'

const components = {
  h1: props => <h1 style={{ color: 'tomato' }} {...props} />
}

const scope = {
  name: 'world!',
  Box: props => <div style={{border: 'thin solid tomato'}} {...props} />

johno

import React from 'react'

import {
  Provider,
  Library,
  Example,
  Documentation,
  Knobs,
  contextTypes
} from '@compositor/kit'