GatsbyでTinaCMSを探索する

マークダウンの素晴らしさについて私たち全員が同意できる限り、ページの編集やスタイルの変更をリアルタイムで確認することは、常に非常に満足のいくものです。 🦙TinaCMSをGatsbyと組み合わせると、ページ上のマークダウンファイルを視覚的に直接操作できるようになります。 TinaCMSはNext.jsでも動作しますが、ここでは、Gatsbyサイトを使用してこの強力な新しいツールについて説明します。

インストール

gatsby-starter-blog スターターから始めましょう。これには、マークダウン投稿に必要なものがすべて揃っているからです。

必要なのは、TinaCMS自体、 styled-components （TinaCMSが依存している）、マークダウンを処理するためのTinaのremarkプラグイン、およびTinaのgitの4つだけです。プラグインを使用すると、ファイルシステム内のファイルを直接変更し、投稿を保存するときにGithubアカウントにコミットすることができます。

$ gatsby new tina-example https://github.com/gatsbyjs/gatsby-starter-blog
$ yarn add gatsby-plugin-tinacms styled-components gatsby-tinacms-remark gatsby-tinacms-git

設定

初期設定はこれ以上ないほど簡単です。gatsby-plugin-tinacmsをgatsby-config.jsにremarkおよびgitプラグインで追加します。個人的には、positionをfixedに設定することを好みます。これは、デフォルトでサイドバーがサイトを横に押すためです。

gatsby-config.js

{
  resolve: 'gatsby-plugin-tinacms',
  options: {
    plugins: [
      "gatsby-tinacms-git",
      "gatsby-tinacms-remark",
    ],
    position: 'fixed'
  }
}

それだけで、新しいサイドバーを開くために、ページの下部に小さな青いタブが表示されます。

サイドバー

ここで、投稿テンプレートで、クエリからいくつかの追加情報を取得する必要があります。 fileRelativePath、rawFrontmatter、rawMarkdownBody。これらは、TinaCMSが提供するremarkForm 高次コンポーネントによって使用されます。必要なのは、エクスポートされたコンポーネントをラップすることだけです。

blog-post.js

import { remarkForm } from "gatsby-tinacms-remark";

class BlogPostTemplate extends React.Component { 
    // ...
};

export default remarkForm(BlogPostTemplate);

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    # ...
    markdownRemark(fields: { slug: { eq: $slug } }) {
      # ...
      fileRelativePath
      rawFrontmatter
      rawMarkdownBody
    }
  }
`;

これで、Tinaはすべてのマークダウン投稿にアクセスできるようになり、ページを更新してすばやくリロードし、新しい変更を表示します。さらに、保存ボタンを押すたびに、Githubリポジトリに対して小さなコミットが行われるため、それに接続されているホスティングプラットフォームはすべて自動的に更新されます。

インライン編集

長いコンテンツを完全にサイドバーで処理する必要があるのは面倒です。代わりに、出力されたコンテンツをエディターとして設定して、ページ上のコンテンツを直接操作し、メタデータ、テーマ設定、追加/削除のためだけにサイドバーを保持できるようにします。、など。

remarkFormの代わりに、ページテンプレートをliveRemarkFormでラップし、編集可能にする部分をTinaFieldでラップします。 TinaFieldは、rawMarkdownBodyという名前を付け、Wysiwygライブラリを小道具として渡す必要があります。 Wysiwygは、の略で、表示されるものはを取得します。これにより、ほとんどのリアルタイム編集機能が提供されます。

便利なsetIsEditingメソッドを使用して、記事自体をクリックするたびに編集モードをアクティブにします。

layout.js

import { liveRemarkForm } from 'gatsby-tinacms-remark';
import { Wysiwyg } from '@tinacms/fields';
import { TinaField } from '@tinacms/form-builder';

const BlogPostTemplate = props => {
  const { previous, next } = props.pageContext;

  return (
    <Layout>
        {*/ ... */}
      <TinaField name="rawMarkdownBody" Component={Wysiwyg}>
        <article onClick={() => props.setIsEditing(true)}>
            {*/ ... */}
        </article>
      </TinaField>
    </Layout>
  )
};

setIsEditingメソッドの最初の小道具は現在の編集状態であるため、代わりにトグルボタンを使用する場合は、props.setIsEditing(editing => !editing)のような操作を行うことができます。

投稿の削除

ファイルの削除はとてつもなく簡単です。便利なDeleteActionメソッドをインポートし、ラベルの付いたオブジェクトにスローして、liveRemarkFormに渡すだけです。

blog-post.js

import { liveRemarkForm, DeleteAction } from 'gatsby-tinacms-remark';

const deleteButton = {
  label: 'Delete',
  actions: [DeleteAction]
};

export default liveRemarkForm(BlogPostTemplate, deleteButton);

保存ボタンの横には、Deleteオプションのある小さなメニューがあります。

投稿の追加

投稿を追加する機能は、ボイラープレートで物事が少し重くなるところです。

createRemarkButton関数を使用して、サイドバーに新しいオプションを追加します。 filenameに戻るものはすべてファイルシステムに追加され、slugifyライブラリを使用してファイルの名前をフォーマットできます。

frontmatterは、フォームからの投稿のメタデータを処理します。 fieldsはフォーム自体を確立します。最後に、withPlugin HOCを使用して、新しいボタンをレイアウトに追加します。

layout.js

import { withPlugin } from 'tinacms';
import { createRemarkButton } from 'gatsby-tinacms-remark';
import slugify from 'react-slugify';

const CreatePostButton = createRemarkButton({
  label: "New Post",
  filename(form) {
    let slug = slugify(form.title.toLowerCase())
    return `content/blog/${slug}/${slug}.md`
  },
  frontmatter(form) {
    let slug = slugify(form.title.toLowerCase())
    return new Promise(resolve => {
      resolve({
        title: form.title,
        description: form.description,
        data: new Date(),
        path: `content/blog/${slug}/${slug}`,
      })
    })
  },
  fields: [
    { name: "title", label: "Title", component: "text", required: true },
    { name: "description", label: "Description", component: "text", required: true },
  ],
});

export default withPlugin(Layout, CreatePostButton);

結論

JSONを使用してページを作成/削除したり、カスタムフィールド、ブロック、プラグインを作成したりするなど、TinaCMSで探索することはまだたくさんあります。

TinaCMSはまだかなり新しい技術であるため、改善できる方法はまだたくさんあります。彼らは現在、さまざまな役割と編集権限のチームサポートの追加に取り組んでいます。将来的には、技術者以外のクライアントがTinaにアクセスし、すべてをオンサイトで編集する方法が追加されることを願っています。 🤞