Markdownファイルのサポート

ブログのコンテンツに Markdown ファイルを使用する方法を記述します。 　 具体的な方法は、Gatbyの公式サイトにあるチュートリアルに紹介されています。
この内容に沿って、TypeScript を使って機能を盛り込んで行きます。

Markdown ファイルをサポートするためには以下のことが必要になります。

• Markdown 用プラグインの導入
• gatsby-config.jsへのプラグイン使用のための記述追加
• Markdown ファイルをHTMLに変換しページとして追加する処理の記述
• 変換後のHTMLを表示するReactコンポーネントの記述

今回インストールするパッケージは以下になります。

例によって yarn でインストールします。

yarn add gatsby-transformer-remark ts-node

インストールしたプラグインを使用できるようにgatsby-config上に記述します。 このプラグインにはオプションがありますが、とりあえずはデフォルトのまま記述しておくことにします。

// ./gatsby-config.js
module.exports = {
  ...
  plugins: [
    ...
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        // CommonMark mode (default: true)
        commonmark: true,
        // Footnotes mode (default: true)
        footnotes: true,
        // Pedantic mode (default: true)
        pedantic: true,
        // GitHub Flavored Markdown mode (default: true)
        gfm: true,
        // Plugins configs
        plugins: [],

      },
    },
    ...
  ],
}

これで必要なパッケージの組み込みができました。

Gatsby でページを追加するには、主に以下の２通りの方法があります。

1. '/src/pages'直下にファイルを置きそこに React コンポーネントを配置
2. Gatsby の createPage というAPIを使用してページを追加

因みに２については、ページネーションやタグによるコンテンツのグループ化など論理的にURLを作成する場合にも使用します。

Gatsby API を実装する場合は、gatsby-node.js ファイルにて所定の関数を実装します。
TypeScript の場合は、ts-node を用いて直接TypeScriptで記述していきます。

実際に実装するAPIは以下の２つです。

• createPages
• onCreateNode

上記API用に以下の2ファイルを作成します。

• createPage.ts
• onCreateNode.ts

gatsby-helpers というディレクトリを作成し、その下に以下のように配置します。

├── src
│   ├── gatsby-helpers
│   │   ├── createPages.ts
│   │   └── onCreateNode.ts

Gatsby の Config ファイル関連をTypeScriptで扱えるようにする方法がここで紹介されていました。 基本的には、gatsby-node.js に以下の記述を行い、そこからTypeScriptの関数を繋いでいくような流れになります。

require('ts-node/register')

上記を踏まえ gatsby-node.js での記述は以下の様になります。

// ./gatsby-node.js
require('ts-node/register');

exports.createPages = require('./src/gatsby-helpers/createPages').createPages;
exports.onCreateNode = require('./src/gatsby-helpers/onCreateNode').onCreateNode;

長くなってきたので、残りは次回に記述します。

ここまでの作業で、TypeScript で Gatsby API を実装する準備が整いました。
この後、onCreateNode と createPages を実装していきます。