Gatsby themeを使ってみる

const path = require('path')

// ユーザ側からルートディレクトリを指定して、それをもとに設定の中でパスを組み立てるmodule.exports = ({ root }) => ({  // ･･･
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        // ページはコンテンツ側の資産を読み込む        path: `src/pages`,        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-plugin-typography',
      options: {
        // typographyはテーマで用意した資産を使うのでrootからの相対パスを指定する        pathToConfigModule: path.relative(          root,          require.resolve('./src/utils/typography')        ),      },
    },
    // ページとして、テーマで用意した資産を読み込む    {      resolve: `gatsby-plugin-page-creator`,      options: {        path: require.resolve(`./src/pages`),      },    },  ],
})

const fs = require('fs')
const withThemePath = require('./with-theme-path')
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  return new Promise((resolve, reject) => {
    // withThemePathを使って、ユーザが作成したページまたはテーマで用意しているページを読み込む    const blogPost = withThemePath('./src/templates/blog-post.js')    resolve(
        // ･･･
    )
  })
}

// ･･･

/* * Gatsbyテーマのビルド方法をwebpackに設定しています。 * NPMモジュールの公開時は、(1)事前コンパイルするか、(2)コンパイル方法の設定追加 どちらかが必要です。 * Gatsbyテーマの場合(2)が可能なので、ここで設定しています。 */exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {  actions.setWebpackConfig({    module: {      rules: [        {          test: /\.js$/,          include: path.dirname(require.resolve('gatsby-blog-theme')),          use: [loaders.js()],        },      ],    },  })}
// ユーザがsrc/pages未作成の場合にエラーになるのを防ぐため、無ければ作成するexports.onPreBootstrap = ({ store }) => {  const { program } = store.getState()  const dir = `${program.directory}/src/pages`  if (!fs.existsSync(dir)) {    fs.mkdirSync(dir)  }}

/* eslint-disable */// 冒頭に上記コメントを追加

{
  "name": "blog-minimal",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build"
  },
  "dependencies": {    "gatsby": "^2.0.19",    "gatsby-blog-theme": "*"  }}

// 上書きページではテーマで用意しているコンポーネントを使用できるimport Bio from 'gatsby-blog-theme/src/components/Bio'import Layout from 'gatsby-blog-theme/src/components/Layout'import { rhythm, scale } from 'gatsby-blog-theme/src/utils/typography'
class BlogPostTemplate extends React.Component {
  render() {
      // テーマのblog-post.jsと同じ実装
  }
}

// テーマ差し替え用フォルダを指定して// ユーザがフォルダ配下にコンポーネントを配置している場合、テーマで用意したものと差し替えるようにするconst THEME_PREFIX = 'gatsby-blog-component-replacement-theme--component'const RELATIVE_DIR_PATH_OF_REPLACEMENT_COMPONETS = `./src/components/${THEME_PREFIX}`
exports.onCreateWebpackConfig = ({ actions, store }) => {

  // ユーザが作成したコンポーネント読み込んで  // エイリアスを作成する  const userComponents = fs    .readdirSync(path.resolve(RELATIVE_DIR_PATH_OF_REPLACEMENT_COMPONETS))    .reduce(      (acc, componentName) => ({        ...acc,        [`${THEME_PREFIX}/${componentName.substr(0, componentName.lastIndexOf('.'))}`]: path.resolve(          `${RELATIVE_DIR_PATH_OF_REPLACEMENT_COMPONETS}/${componentName}`        ),
      }),
      {}
    )

  // エイリアス設定でユーザが作成したコンポーネントを先に定義することで
  // ユーザが作成したコンポーネントを優先的に読み込むようにする
  actions.setWebpackConfig({
    resolve: {
      alias: {
        ...userComponents,
        [THEME_PREFIX]: path.join(__dirname, './src/components'),
      },
    },
  })
}


// ユーザがsrc/pages未作成の場合にエラーになるのを防ぐため、無ければ作成する
// RELATIVE_DIR_PATH_OF_REPLACEMENT_COMPONETSも同様
exports.onPreBootstrap = ({ store }) => {
  const { program } = store.getState()

  const pageDir = `${program.directory}/src/pages/`
  const componentDir = `${program.directory}/src/components/`
  const replaceComponentDir = `${componentDir}/${THEME_PREFIX}/`

  mkdir(pageDir)
  mkdir(componentDir)
  mkdir(replaceComponentDir)
}

function mkdir(path) {
  if (!fs.existsSync(path)) {
    fs.mkdirSync(path)
  }
}