gatsby-starter-blog でドラフト記事のタイトルの前に prefix をつける

このブログの記事は git で管理をしているが、書いている途中はドラフト状態にしておいて、書き終えたら公開するというふうにしている。
ただ、書き終えた記事を git にコミットするときに公開状態にするのをなかなかの頻度でやらかす。

そこで一覧ページでタイトルの前に “draft” などと表示できれば、ある程度は防げるのでは？というのが始まり。

ドラフトかどうかは frontmatter に draft という項目を使って管理している。
なのでこの draft をドラフト状態の判定に使う。

一覧ページのファイルは src/pages/index.js なのでその中の graphql を変更して frontmatter に draft を追加する。

          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            title
            description
            tags
+           draft
          }

で、タイトルを表示するところで draft が true の場合に prefix が付くようにする。
frontmatter に draft が設定されていない場合もドラフトとして扱いたかったので post.frontmatter.draft ?? true のようにして判定することにした。

       <Seo title="All posts" />
       <ol style={{ listStyle: `none` }}>
         {posts.map(post => {
-          const title = post.frontmatter.title || post.fields.slug
+          const titlePrefix = (post.frontmatter.draft ?? true) ? "(draft) " : "";
+          const title = `${titlePrefix}${post.frontmatter.title || post.fields.slug}`
 
           return (
             <li key={post.fields.slug}>

これでいいかな〜と思ったけど記事ページもやっておいた。
変更したファイルは /sec/templates/blog-post.js 。
わかりやすくなったかな。

ここまでやって気づいたけど、 frontmatter に draft を書いたら公開されないというのは前に使っていたスターターの機能で、 gatsby-starter-blog ではすべて公開されるような・・・
（現時点でこのブログは未公開デス）

と、とりあえずでけた！