Portfolio/gatsby-node.js at main · reo-yamashita/Portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
const { createFilePath } = require(`gatsby-source-filesystem`)
const path = require("path")

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === "Mdx") {
    const slug = createFilePath({ node, getNode })

    createNodeField({
      node,
      name: "slug",
      value: slug,
    })
  }
}

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const blogTemplate = path.resolve("./src/templates/articles.jsx")
  const tagsTemplate = path.resolve("./src/templates/tags.jsx")

  return await graphql(`
    query AllNodeType {
      allPosts: allMdx(sort: { fields: frontmatter___date, order: DESC }) {
        edges {
          previous {
            frontmatter {
              title
              date(formatString: "MMMM DD, YYYY")
            }
            fields {
              slug
            }
          }
          next {
            frontmatter {
              title
              date(formatString: "MMMM DD, YYYY")
            }
            fields {
              slug
            }
          }
          node {
            fields {
              slug
            }
          }
        }
      }
      groups: allMdx(sort: { fields: frontmatter___date, order: DESC }) {
        group(field: frontmatter___tags) {
          tags: fieldValue
        }
      }
    }
  `).then((res) => {
    // tag は必ず、category の上位集合として定義してください.
    res.data.groups.group.forEach((group_item) => {
      createPage({
        component: tagsTemplate,
        path: `/tags/${group_item.tags}`,
        context: {
          tags: group_item.tags,
        },
      })
    })

    res.data.allPosts.edges.forEach(({ node, previous, next }) => {
      createPage({
        component: blogTemplate,
        path: `/blog${node.fields.slug}`,
        context: {
          slug: node.fields.slug,
          previous,
          next,
        },
      })
    })
  })
}

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
        "@@": path.resolve("./"),
        "@components": path.resolve(__dirname, "src/components"),
        "@layouts": path.resolve(__dirname, "src/layouts"),
        "@templates": path.resolve(__dirname, "src/templates"),
        "@utils": path.resolve(__dirname, "utils"),
        "@static": path.resolve(__dirname, "static"),
      },
    },
  })
}