ニュースページの追加 (#196)

* ナビバーにニュースリンクを追加

* ニュース一覧ページの作成

* 個別記事ページ表示用の機能作成

* pluginsの重複している箇所を削除

* 型付けを単一の関数内で行う

* ニュースに関するリンクの位置を変更

* GraphQL実行時の型作成

* noindex有効化とリンクのコメントアウト

gatsby-node.ts

@@ -5,6 +5,7 @@
  */
 import type { GatsbyNode } from "gatsby"
 import { characterKeys, characterInfos } from "./src/constants"
+import path from "path"
 
 export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
   actions,
@@ -30,3 +31,53 @@ export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
     actions.createNode(node)
   })
 }
+
+export const createPages: GatsbyNode["createPages"] = async ({
+  actions,
+  graphql
+}) => {
+  const { createPage } = actions
+
+  // ニュースページ
+  const newsPostTemplate = path.resolve("src/templates/newsPost.tsx")
+
+  const result = await graphql(`
+    query NewsPages {
+      allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/news/" } }) {
+        edges {
+          node {
+            frontmatter {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `)
+
+  if (result.errors) {
+    throw result.errors
+  }
+
+  const data = result.data as {
+    allMarkdownRemark: {
+      edges: {
+        node: {
+          frontmatter: {
+            slug: string
+          }
+        }
+      }[]
+    }
+  }
+
+  data.allMarkdownRemark.edges.forEach(({ node }) => {
+    createPage({
+      path: `/news/${node.frontmatter.slug}/`,
+      component: newsPostTemplate,
+      context: {
+        slug: node.frontmatter.slug,
+      },
+    })
+  })
+}

src/components/page.tsx

@@ -109,6 +109,10 @@ export const Page: React.FC<{
             <Link to={"/update_history/"} className="navbar-item">
               変更履歴
             </Link>
+            {/* TODO: リリース時にコメントアウトを外す
+            <Link to={"/news/"} className="navbar-item">
+              ニュース
+            </Link> */}
             <a
               href="https://hiho.fanbox.cc/"
               target={"_blank"}

src/markdowns/news/fuga.md

@@ -0,0 +1,15 @@
+---
+slug: "fuga"
+title: "VOICEVOXサンプルニュース_2"
+date: "2024-07-01"
+---
+
+この文章は `VOICEVOXサンプルニュース_2` のテストです。
+
+## 小見出し
+
+あいうえお
+
+### 小見出し
+
+かきくけこ

src/markdowns/news/hoge.md

@@ -0,0 +1,15 @@
+---
+slug: "hoge"
+title: "VOICEVOXサンプルニュース_1"
+date: "2024-05-01"
+---
+
+この文章は `VOICEVOXサンプルニュース_1` のテストです。
+
+## 小見出し
+
+あいうえお
+
+### 小見出し
+
+かきくけこ

src/pages/index.tsx

@@ -340,6 +340,15 @@ const Main = React.memo(
                       変更履歴
                     </Link>
                   </li>
+                  {/* TODO: リリース時にコメントアウトを外す
+                  <li>
+                    <Link
+                      to={"/news/"}
+                      className="has-text-weight-bold is-underlined"
+                    >
+                      ニュース
+                    </Link>
+                  </li> */}
                   <li>
                     <a
                       href="https://hiho.fanbox.cc/"

src/pages/news/index.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+import "../../components/layout.scss"
+import { Page } from "../../components/page"
+import Seo from "../../components/seo"
+import { Link, graphql, useStaticQuery } from "gatsby"
+import shareThumb from "../../images/nemo/share-thumbnail.png"
+
+const NewsIndex = () => {
+  const data = useStaticQuery<Queries.IndexPageQuery>(graphql`
+    query IndexPage {
+      allMarkdownRemark (
+        filter: {fileAbsolutePath: {regex: "/news/"}}
+        sort: {frontmatter: {date: DESC}}
+      ) {
+        edges {
+          node {
+            html
+            frontmatter {
+              title
+              slug
+              date(formatString: "YYYY/MM/DD")
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <Page>
+      <Seo
+        title="ニュース | VOICEVOX"
+        description="無料で使える中品質なテキスト読み上げ・歌声合成ソフトウェア。商用・非商用問わず無料で、誰でも簡単にお使いいただけます。イントネーションを詳細に調整することも可能です。"
+        image={shareThumb}
+        noindex={true} // TODO: リリース時に外す
+      />
+      <section className="section">
+        <div className="container is-max-desktop">
+        <h1 className="title">ニュース</h1>
+          {data.allMarkdownRemark.edges.map((edge) => (
+            <div key={edge.node.frontmatter!.slug} className="mb-3">
+              <Link to={`/news/${edge.node.frontmatter!.slug}`}>
+                {edge.node.frontmatter!.title}
+              </Link>
+              <p className="has-text-grey-light">{edge.node.frontmatter!.date}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </Page>
+  )
+}
+
+export default NewsIndex

src/templates/newsPost.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import "../components/layout.scss"
+import { Page } from "../components/page"
+import Seo from "../components/seo"
+import { graphql } from "gatsby"
+
+const NewsPost = ({ data }) => {
+  const { markdownRemark } = data;
+  const { frontmatter, html } = markdownRemark;
+
+  return (
+    <Page>
+      <Seo
+        title={`${frontmatter.title} | ニュース | VOICEVOX`}
+        description="無料で使える中品質なテキスト読み上げ・歌声合成ソフトウェア。商用・非商用問わず無料で、誰でも簡単にお使いいただけます。イントネーションを詳細に調整することも可能です。"
+        noindex={true} // TODO: リリース時に外す
+      />
+      <section className="section">
+        <div className="container is-max-desktop">
+          <h1 className="title">{frontmatter.title}</h1>
+          <p className="has-text-grey-light">{frontmatter.date}</p>
+          <div
+            className="markdown mt-5"
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        </div>
+      </section>
+    </Page>
+  )
+}
+
+export const query = graphql`
+  query($slug: String!) {
+    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
+      html
+      frontmatter {
+        slug
+        title
+        date(formatString: "YYYY/MM/DD")
+      }
+    }
+  }
+`;
+
+export default NewsPost