Merge branch 'source' into patch-1

Author: orta

.github/workflows/CI.yml

@@ -8,6 +8,8 @@ jobs:
     steps:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
+        with:
+          node-version: '16.5.0'
 
       - run: yarn install
 

.gitignore

@@ -71,3 +71,6 @@ yarn-error.log
 
 # Swap files
 *.swp
+
+# Codegen stuff
+src/__generated__/

.node-version

@@ -0,0 +1 @@
+16.5.0

LICENSE

@@ -1,26 +1,21 @@
-LICENSE AGREEMENT For graphql.org software
+MIT License
 
-Facebook, Inc. (“Facebook”) owns all right, title and interest, including all
-intellectual property and other proprietary rights, in and to the graphql.org
-software. Subject to your compliance with these terms, you are hereby granted a
-non-exclusive, worldwide, royalty-free copyright license to (1) use and copy the
-graphql.org software; and (2) reproduce and distribute the graphql.org software
-as part of your own software (“Your Software”). Facebook reserves all rights not
-expressly granted to you in this license agreement.
+Copyright (c) GraphQL Contributors
 
-THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS OR
-IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. IN NO
-EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICES, DIRECTORS OR EMPLOYEES BE
-LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
-CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
-GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
-HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
-LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
-THE USE OF THE SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-You will include in Your Software (e.g., in the file(s), documentation or other
-materials accompanying your software): (1) the disclaimer set forth above; (2)
-this sentence; and (3) the following copyright notice:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
-Copyright (c) 2015, Facebook, Inc. All rights reserved.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

gatsby-config.js

@@ -1,8 +1,8 @@
 module.exports = {
   siteMetadata: {
-    title: "A query language for your API",
+    title: "GraphQL",
     description:
-      "GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.",
+      "A query language for your API — GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.",
     siteUrl: "http://graphql.org/",
   },
 
@@ -115,5 +115,11 @@ module.exports = {
         ],
       },
     },
+    {
+      resolve: "gatsby-plugin-typegen",
+      options: {
+        outputPath: "src/__generated__/gatsby-types.d.ts",
+      },
+    },
   ],
 }

gatsby-node.js

@@ -5,7 +5,89 @@ const frontmatterParser = require("parser-front-matter")
 const { readFile } = require("fs-extra")
 const { promisify } = require("util")
 
+exports.createSchemaCustomization = ({ actions, schema }) => {
+  const gql = String.raw;
+  const { createTypes } = actions;
+
+  createTypes(gql`
+    type BlogPost implements Node
+      @childOf(types: ["MarkdownRemark"])
+    {
+      postId: String!
+      title: String!
+      tags: [String!]!
+      date: Date! @dateformat(formatString: "YYYY-MM-DD")
+      authors: [String!]!
+      guestBio: String
+      remark: MarkdownRemark! @link # backlink to the parent
+    }
+  `);
+};
+
+// Transform nodes, each of logic inside here can be extracted to a separated plugin later.
+exports.onCreateNode = async ({
+  reporter,
+  node,
+  actions,
+  createNodeId,
+  createContentDigest,
+}) => {
+  const { createNode, createParentChildLink } = actions;
+
+  // Derive content nodes from remark nodes
+  if (node.internal.type === 'MarkdownRemark') {
+    if (node.frontmatter.layout === 'blog') {
+      const nodeId = createNodeId(`${node.id} >>> BlogPost`);
+
+      const permalink = node.frontmatter.permalink;
+      if (!permalink?.startsWith('/blog/')) {
+        reporter.panicOnBuild(`${permalink} is not valid permalink for blog post`);
+        return;
+      }
+
+      // It contains a kind of transform logic. However, those logics can be extracted to resolvers into ahead of sourcing (createTypes)
+      const blogPostContent = {
+        id: nodeId,
+        postId: permalink.replace('/blog/', '').replace(/\/$/, ''),
+        title: node.frontmatter.title,
+        tags: node.frontmatter.tags ?? [],
+        date: node.frontmatter.date,
+        authors: (node.frontmatter.byline ?? '')
+          .split(',')
+          .map(name => name.trim())
+          .filter(Boolean),
+        guestBio: node.frontmatter.guestBio ?? null,
+      };
+
+      createNode({
+        ...blogPostContent,
+        remark: node.id,
+        parent: node.id,
+        children: [],
+        internal: {
+          type: 'BlogPost',
+          contentDigest: createContentDigest(blogPostContent),
+        },
+      });
+
+      createParentChildLink({
+        parent: node,
+        child: blogPostContent,
+      });
+    }
+  }
+};
+
 exports.onCreatePage = async ({ page, actions }) => {
+  // trying to refactor code to be "the Gatsby way".
+  // from the paths on ready, ignores a bunch of existing custom logic below.
+  if (page.path.startsWith('/blog')) {
+    return;
+  }
+  if (page.path.startsWith('/tags')) {
+    return;
+  }
+
   const { createPage, deletePage } = actions
   deletePage(page)
   let context = {
@@ -148,8 +230,8 @@ exports.createPages = async ({ graphql, actions }) => {
           }
         }
       }
-      tagsGroup: allMarkdownRemark {
-        group(field: frontmatter___tags) {
+      allBlogPost {
+        group(field: tags) {
           fieldValue
         }
       }
@@ -164,6 +246,17 @@ exports.createPages = async ({ graphql, actions }) => {
     throw result.errors
   }
 
+  const tags = result.data.allBlogPost.group.map(group => group.fieldValue)
+  tags.forEach(tag => {
+    createPage({
+      path: `/tags/${tag.toLowerCase()}/`,
+      component: path.resolve("./src/templates/{BlogPost.tags}.tsx"),
+      context: {
+        tag,
+      },
+    })
+  })
+
   const markdownPages = result.data.allMarkdownRemark.edges
 
   // foundation: [
@@ -201,6 +294,15 @@ exports.createPages = async ({ graphql, actions }) => {
               category: "GraphQL Foundation",
             },
           },
+          {
+            frontmatter: {
+              sidebarTitle: "GraphQL Landscape",
+              title: "GraphQL Landscape",
+              permalink: "https://landscape.graphql.org/",
+              date: null,
+              category: "GraphQL Foundation",
+            },
+          },
         ],
       },
     ],
@@ -341,7 +443,9 @@ exports.createPages = async ({ graphql, actions }) => {
 
   // Use all the set up data to now tell Gatsby to create pages
   // on the site
-  allPages.forEach(page => {
+  allPages
+    .filter(page => !page.permalink.startsWith('/blog'))
+    .forEach(page => {
     createPage({
       path: `${page.permalink}`,
       component: docTemplate,
@@ -353,17 +457,14 @@ exports.createPages = async ({ graphql, actions }) => {
       },
     })
   })
+}
 
-  // Create tag pages
-  const tagTemplate = path.resolve("src/templates/tags.tsx")
-  const tags = result.data.tagsGroup.group
-  tags.forEach(tag => {
-    createPage({
-      path: `/tags/${tag.fieldValue}/`,
-      component: tagTemplate,
-      context: {
-        tag: tag.fieldValue,
-      },
-    })
+exports.onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({
+    resolve: {
+      fallback: {
+        "assert": require.resolve("assert/"),
+      }
+    }
   })
 }

package.json

@@ -11,36 +11,42 @@
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
+  "resolutions": {
+    "graphql": "15.6.0"
+  },
   "dependencies": {
-    "@graphql-tools/schema": "7.0.0",
-    "@weknow/gatsby-remark-twitter": "^0.2.3",
-    "codemirror": "5.58.2",
-    "codemirror-graphql": "0.12.3",
-    "gatsby": "2.25.0",
-    "gatsby-plugin-anchor-links": "1.1.1",
-    "gatsby-plugin-feed": "2.6.0",
-    "gatsby-plugin-google-analytics": "2.4.0",
-    "gatsby-plugin-less": "4.0.6",
-    "gatsby-plugin-react-helmet": "3.3.14",
-    "gatsby-plugin-webfonts": "1.1.3",
-    "gatsby-source-filesystem": "2.4.0",
-    "gatsby-transformer-remark": "2.9.0",
-    "globby": "11.0.1",
-    "graphql": "15.4.0",
-    "marked": "1.2.2",
-    "numbro": "2.3.2",
+    "@graphql-tools/schema": "8.2.0",
+    "@reach/router": "1.3.4",
+    "@weknow/gatsby-remark-twitter": "0.2.3",
+    "assert": "2.0.0",
+    "codemirror": "5.63.3",
+    "codemirror-graphql": "1.0.2",
+    "gatsby": "3.14.3",
+    "gatsby-plugin-anchor-links": "1.2.1",
+    "gatsby-plugin-feed": "3.14.0",
+    "gatsby-plugin-google-analytics": "3.14.0",
+    "gatsby-plugin-less": "5.14.0",
+    "gatsby-plugin-react-helmet": "4.14.0",
+    "gatsby-plugin-typegen": "2.2.4",
+    "gatsby-plugin-webfonts": "2.1.1",
+    "gatsby-source-filesystem": "3.14.0",
+    "gatsby-transformer-remark": "4.11.0",
+    "globby": "11.0.4",
+    "graphql": "15.6.0",
+    "marked": "3.0.7",
+    "numbro": "2.3.5",
     "parser-front-matter": "1.6.4",
-    "prism-react-renderer": "1.1.1",
-    "prismjs": "1.22.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "prism-react-renderer": "1.2.1",
+    "prismjs": "1.25.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
     "timeago.js": "4.0.2"
   },
   "devDependencies": {
-    "@types/codemirror": "0.0.98",
-    "@types/prismjs": "1.16.2",
-    "@types/react-helmet": "6.1.0",
-    "prettier": "2.1.2"
+    "@types/codemirror": "5.60.5",
+    "@types/prismjs": "1.16.6",
+    "@types/react-helmet": "6.1.4",
+    "prettier": "2.4.1"
   }
 }

renovate.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "config:base"
+  ]
+}