From 230a2bf69bfeff304c5e0ae408e7ee53069e8c49 Mon Sep 17 00:00:00 2001 From: Haruki Tazoe <40142697+jdkfx@users.noreply.github.com> Date: Tue, 25 Jun 2024 07:20:53 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=8B=E3=83=A5=E3=83=BC=E3=82=B9=E3=83=9A?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=AE=E8=BF=BD=E5=8A=A0=20(#196)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ナビバーにニュースリンクを追加 * ニュース一覧ページの作成 * 個別記事ページ表示用の機能作成 * pluginsの重複している箇所を削除 * 型付けを単一の関数内で行う * ニュースに関するリンクの位置を変更 * GraphQL実行時の型作成 * noindex有効化とリンクのコメントアウト --- gatsby-node.ts | 51 +++++++++++++++++++++++++++++++++++ src/components/page.tsx | 4 +++ src/markdowns/news/fuga.md | 15 +++++++++++ src/markdowns/news/hoge.md | 15 +++++++++++ src/pages/index.tsx | 9 +++++++ src/pages/news/index.tsx | 54 ++++++++++++++++++++++++++++++++++++++ src/templates/newsPost.tsx | 45 +++++++++++++++++++++++++++++++ 7 files changed, 193 insertions(+) create mode 100644 src/markdowns/news/fuga.md create mode 100644 src/markdowns/news/hoge.md create mode 100644 src/pages/news/index.tsx create mode 100644 src/templates/newsPost.tsx diff --git a/gatsby-node.ts b/gatsby-node.ts index 76d5954db..85b1e806f 100644 --- a/gatsby-node.ts +++ b/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, + }, + }) + }) +} diff --git a/src/components/page.tsx b/src/components/page.tsx index 6d4a547fd..981e5c197 100644 --- a/src/components/page.tsx +++ b/src/components/page.tsx @@ -109,6 +109,10 @@ export const Page: React.FC<{ 変更履歴 + {/* TODO: リリース時にコメントアウトを外す + + ニュース + */} + {/* TODO: リリース時にコメントアウトを外す +
  • + + ニュース + +
    • */}
  • { + const data = useStaticQuery(graphql` + query IndexPage { + allMarkdownRemark ( + filter: {fileAbsolutePath: {regex: "/news/"}} + sort: {frontmatter: {date: DESC}} + ) { + edges { + node { + html + frontmatter { + title + slug + date(formatString: "YYYY/MM/DD") + } + } + } + } + } + `); + + return ( + + +
    +
    +

    ニュース

    + {data.allMarkdownRemark.edges.map((edge) => ( +
    + + {edge.node.frontmatter!.title} + +

    {edge.node.frontmatter!.date}

    +
    + ))} +
    +
    +     + ) +} + +export default NewsIndex diff --git a/src/templates/newsPost.tsx b/src/templates/newsPost.tsx new file mode 100644 index 000000000..dc3ad3856 --- /dev/null +++ b/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 ( + + +
    +
    +

    {frontmatter.title}

    +

    {frontmatter.date}

    +
    +
    +
    +     + ) +} + +export const query = graphql` + query($slug: String!) { + markdownRemark(frontmatter: { slug: { eq: $slug } }) { + html + frontmatter { + slug + title + date(formatString: "YYYY/MM/DD") + } + } + } +`; + +export default NewsPost