chore: add cosmicjs benchmark (gatsbyjs#24504)

* chore: add cosmicjs benchmark

* chore: add back style

benchmarks/source-cosmicjs/.env.example

@@ -0,0 +1,3 @@
+COSMIC_BUCKET=
+COSMIC_READ_KEY=
+COSMIC_API_URL=

benchmarks/source-cosmicjs/.gitignore

@@ -0,0 +1,70 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env.development
+.env.production
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity

benchmarks/source-cosmicjs/.prettierignore

@@ -0,0 +1,4 @@
+.cache
+package.json
+package-lock.json
+public

benchmarks/source-cosmicjs/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

benchmarks/source-cosmicjs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 gatsbyjs
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.

benchmarks/source-cosmicjs/README.md

@@ -0,0 +1,7 @@
+# Cosmic JS Will it Build
+
+Example page for Cosmic JS as a source for "Will It Build".
+Should/Will be generalized into e.g. a theme.
+
+Queries the title, body and a cover image from Cosmic JS. Creates pages for that and displays those three things as "Articles".
+Those individual article pages and the homepage share a common "Layout" component (in src/components) that can be swapped (layout_1.js and layout_2.js) to simulate a code change in multiple pages.

benchmarks/source-cosmicjs/gatsby-browser.js

@@ -0,0 +1 @@
+import "./src/styles.css"

benchmarks/source-cosmicjs/gatsby-config.js

@@ -0,0 +1,33 @@
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
+
+module.exports = {
+  siteMetadata: {
+    siteTitle: `Gatsby Cosmic JS Benchmark`,
+  },
+  plugins: [
+    `gatsby-plugin-benchmark-reporting`,
+    `gatsby-plugin-sharp`,
+    `gatsby-transformer-sharp`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `pages`,
+        path: `${__dirname}/src/pages/`,
+      },
+    },
+    {
+      resolve: 'gatsby-source-cosmicjs',
+      options: {
+        apiURL: process.env.COSMIC_API_URL,
+        bucketSlug: process.env.COSMIC_BUCKET,
+        objectTypes: ['posts'],
+        apiAccess: {
+          read_key: process.env.COSMIC_READ_KEY,
+        },
+        localMedia: true
+      }
+    },
+  ],
+}

benchmarks/source-cosmicjs/gatsby-node.js

@@ -0,0 +1,39 @@
+const kebabCase = require(`lodash.kebabcase`)
+
+exports.onCreateNode = ({ actions, node }) => {
+  const { createNodeField } = actions
+
+  if (node.internal.type === 'node__article') {
+    createNodeField({ node, name: "slug", value: kebabCase(node.title) })
+  }
+}
+
+exports.createPages = async ({ actions, graphql, reporter }) => {
+  const { createPage } = actions
+
+  const result = await graphql(`
+    {
+      articles: allCosmicjsPosts {
+        edges {
+          node {
+            slug
+          }
+        }
+      }
+    }
+  `)
+
+  if (result.errors) {
+    reporter.panicOnBuild(result.errors)
+  }
+
+  result.data.articles.edges.map(article => {
+    createPage({
+      path: article.node.slug,
+      component: require.resolve(`./src/templates/article.js`),
+      context: {
+        slug: article.node.slug,
+      }
+    })
+  })
+}

benchmarks/source-cosmicjs/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "gatsby-cosmicjs-benchmark",
+  "private": true,
+  "description": "A simplified bare-bones starter for Gatsby",
+  "version": "0.1.0",
+  "license": "MIT",
+  "scripts": {
+    "build": "gatsby build",
+    "build:send": "cross-env BENCHMARK_REPORTING_URL=true gatsby build",
+    "develop": "gatsby develop",
+    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
+    "start": "npm run develop",
+    "serve": "gatsby serve"
+  },
+  "dependencies": {
+    "dotenv": "^8.2.0",
+    "gatsby": "^2.19.7",
+    "gatsby-image": "^2.2.40",
+    "gatsby-plugin-benchmark-reporting": "^0.0.2",
+    "gatsby-plugin-sharp": "^2.4.5",
+    "gatsby-source-cosmicjs": "^1.1.0",
+    "gatsby-source-filesystem": "^2.1.48",
+    "gatsby-transformer-sharp": "^2.3.14",
+    "lodash.kebabcase": "^4.1.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.0",
+    "prettier": "^1.19.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
+  },
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  }
+}

benchmarks/source-cosmicjs/src/components/layout_1.js

@@ -0,0 +1,12 @@
+import React from "react"
+
+const Layout = ({ children }) => (
+  <>
+    <header>
+      <h1>Header A</h1>
+    </header>
+    <main>{children}</main>
+  </>
+)
+
+export default Layout

benchmarks/source-cosmicjs/src/components/layout_2.js

@@ -0,0 +1,12 @@
+import React from "react"
+
+const Layout = ({ children }) => (
+  <>
+    <header>
+      <h1>Header B</h1>
+    </header>
+    <main>{children}</main>
+  </>
+)
+
+export default Layout

benchmarks/source-cosmicjs/src/pages/index.js

@@ -0,0 +1,38 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import Layout from "../components/layout_1"
+
+const Index = ({ data }) => {
+  return (
+    <Layout>
+      {data.site.siteMetadata.siteTitle}
+      <ul>
+        {data.articles.edges.map(article => (
+          <li>
+            <Link to={article.node.slug}>{article.node.title}</Link>
+          </li>
+        ))}
+      </ul>
+    </Layout>
+  )
+}
+
+export default Index
+
+export const query = graphql`
+  {
+    site {
+      siteMetadata {
+        siteTitle
+      }
+    }
+    articles: allCosmicjsPosts {
+      edges {
+        node {
+          title
+          slug
+        }
+      }
+    }
+  }
+`

benchmarks/source-cosmicjs/src/styles.css

@@ -0,0 +1,4 @@
+main {
+  max-width: 960px;
+  margin: 0 auto;
+}

benchmarks/source-cosmicjs/src/templates/article.js

@@ -0,0 +1,43 @@
+import React from "react"
+import { graphql, Link } from "gatsby"
+import Img from "gatsby-image"
+import Layout from "../components/layout_1"
+
+const Article = ({ data }) => {
+  return (
+    <Layout>
+      <Link to="/">Go back to index page</Link>
+      <div>
+        <h2>{data.article.title}</h2>
+        {data.article.metadata.image.local.childImageSharp ? (
+          <Img fluid={data.article.metadata.image.local.childImageSharp.fluid} />
+        ) : (
+          <div>Image can't be displayed</div>
+        )}
+        <div dangerouslySetInnerHTML={{ __html: data.article.content }} />
+      </div>
+    </Layout>
+  )
+}
+
+export default Article
+
+export const query = graphql`
+  query($slug: String!){
+    article: cosmicjsPosts(slug: {eq: $slug }) {
+      title
+      content
+      metadata{
+        image {
+          local {
+            childImageSharp {
+              fluid(quality: 90, maxWidth: 960) {
+                ...GatsbyImageSharpFluid_withWebp_tracedSVG
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`