portfolio2/gatsby-node.js at master · itsmedmd/portfolio2 · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
const path = require("path");
const projectsData = require("./src/data/projects");
const aboutData = require("./src/data/about");
const createSVGImagesObject =
  require("./src/utils/createSVGImagesObject").createSVGImagesObject;

// custom webpack config
exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        components: path.resolve(__dirname, "src/components"),
        images: path.resolve(__dirname, "src/images"),
        data: path.resolve(__dirname, "src/data"),
        utils: path.resolve(__dirname, "src/utils"),
        styles: path.resolve(__dirname, "src/styles"),
      },
    },
  });
};

// create graphql nodes from data files for build time data
exports.sourceNodes = async ({
  actions: { createNode },
  createNodeId,
  createContentDigest,
}) => {
  // "project" pages' data
  projectsData.map((project) => {
    // create slug (url) of the project page
    const formattedTitle = project.title.toLowerCase().replace(/[\s-]+/g, "-");
    const slug = `projects/${formattedTitle}`;

    createNode({
      ...project,
      id: createNodeId(project.title),
      slug,
      parent: null,
      children: [],
      internal: {
        type: `Project`,
        contentDigest: createContentDigest(project),
      },
    });
  });

  // "about" page data
  createNode({
    ...aboutData,
    id: createNodeId(aboutData.description[0]),
    parent: null,
    children: [],
    internal: {
      type: `About`,
      contentDigest: createContentDigest(aboutData),
    },
  });
};

//programatically create "Project" pages
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const projectsQuery = await graphql(`
    query ProjectsQuery {
      allFile(filter: { extension: { regex: "/^((?!svg).)*$/" } }) {
        nodes {
          childImageSharp {
            gatsbyImageData(placeholder: DOMINANT_COLOR, quality: 75)
          }
          relativePath
        }
      }
      svgAllFile: allFile(filter: { extension: { regex: "/svg/" } }) {
        nodes {
          relativePath
          publicURL
        }
      }
      allProject {
        nodes {
          sortIndex
          description
          features
          img
          title
          url
          github_repo
          tools {
            text
            img
          }
          slug
        }
      }
    }
  `);

  const { allFile, allProject, svgAllFile } = projectsQuery.data;
  const SVGImages = createSVGImagesObject(svgAllFile.nodes);

  allProject.nodes.forEach((node) => {
    const { img, slug, ...data } = node;
    const sharpImg = allFile.nodes.find(
      (imgSharp) => imgSharp.relativePath === img
    );
    createPage({
      path: slug,
      component: path.resolve(`src/templates/project/Project.jsx`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        ...data,
        SVGImages,
        sharpImg: sharpImg.childImageSharp,
        slug,
      },
    });
  });
};