fix(www): potentially fix intermittent screenshot failures (#15890)

* feat: rearrange starters to show top 5 featured first * chore: start handling null data
gatsbyjs · Jul 19, 2019 · 499838b · 499838b
1 parent 05bfa12
commit 499838b
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 87 deletions.
diff --git a/docs/starters.yml b/docs/starters.yml
@@ -1,3 +1,69 @@
+- url: https://gatsby-starter-blog-demo.netlify.com/
+  repo: https://github.com/gatsbyjs/gatsby-starter-blog
+  description: official blog
+  tags:
+    - Official
+    - Blog
+  features:
+    - Basic setup for a full-featured blog
+    - Support for an RSS feed
+    - Google Analytics support
+    - Automatic optimization of images in Markdown posts
+    - Support for code syntax highlighting
+    - Includes plugins for easy, beautiful typography
+    - Includes React Helmet to allow editing site meta tags
+    - Includes plugins for offline support out of the box
+- url: https://gatsby-starter-default-demo.netlify.com/
+  repo: https://github.com/gatsbyjs/gatsby-starter-default
+  description: official default
+  tags:
+    - Official
+  features:
+    - Comes with React Helmet for adding site meta tags
+    - Includes plugins for offline support out of the box
+- url: https://gatsby-netlify-cms.netlify.com/
+  repo: https://github.com/netlify-templates/gatsby-starter-netlify-cms
+  description: n/a
+  tags:
+    - Blog
+    - Styling:Bulma
+    - CMS:Netlify
+  features:
+    - A simple blog built with Netlify CMS
+    - Basic directory organization
+    - Uses Bulma for styling
+    - Visit the repo to learn how to set up authentication, and begin modeling your content.
+- url: https://vagr9k.github.io/gatsby-advanced-starter/
+  repo: https://github.com/Vagr9K/gatsby-advanced-starter
+  description: Great for learning about advanced features and their implementations
+  tags:
+    - Blog
+    - Styling:None
+  features:
+    - Does not contain any UI frameworks
+    - Provides only a skeleton
+    - Tags
+    - Categories
+    - Google Analytics
+    - Disqus
+    - Offline support
+    - Web App Manifest
+    - SEO
+- url: https://vagr9k.github.io/gatsby-material-starter/
+  repo: https://github.com/Vagr9K/gatsby-material-starter
+  description: n/a
+  tags:
+    - Styling:Material
+  features:
+    - React-MD for Material design
+    - Sass/SCSS
+    - Tags
+    - Categories
+    - Google Analytics
+    - Disqus
+    - Offline support
+    - Web App Manifest
+    - SEO
 - url: https://gatsby-advanced-blog-system.danilowoz.now.sh/blog
   repo: https://github.com/danilowoz/gatsby-advanced-blog-system
   description: Create a complete blog from scratch with pagination, categories, featured posts, author, SEO and navigation.
@@ -38,22 +104,7 @@
     - Portfolio
     - Resume
     - Redux for managing statement (with redux-saga / reselect)
-- url: https://vagr9k.github.io/gatsby-advanced-starter/
-  repo: https://github.com/Vagr9K/gatsby-advanced-starter
-  description: Great for learning about advanced features and their implementations
-  tags:
-    - Blog
-    - Styling:None
-  features:
-    - Does not contain any UI frameworks
-    - Provides only a skeleton
-    - Tags
-    - Categories
-    - Google Analytics
-    - Disqus
-    - Offline support
-    - Web App Manifest
-    - SEO
+
 - url: https://gatsby-tailwind-emotion-starter.netlify.com/
   repo: https://github.com/muhajirdev/gatsby-tailwind-emotion-starter
   description: A Gatsby Starter with Tailwind CSS + Emotion JS
@@ -116,21 +167,6 @@
     - A basic blog, with posts under src/pages/blog
     - A few basic components (Navigation, Layout, Link wrapper around gatsby-link))
     - Based on gatsby-starter-gatsbytheme
-- url: https://vagr9k.github.io/gatsby-material-starter/
-  repo: https://github.com/Vagr9K/gatsby-material-starter
-  description: n/a
-  tags:
-    - Styling:Material
-  features:
-    - React-MD for Material design
-    - Sass/SCSS
-    - Tags
-    - Categories
-    - Google Analytics
-    - Disqus
-    - Offline support
-    - Web App Manifest
-    - SEO
 - url: https://xiaoxinghu.github.io/gatsby-orga/
   repo: https://github.com/xiaoxinghu/gatsby-orga
   description: n/a
@@ -182,21 +218,7 @@
     - Use your GitHub as your own portfolio site
     - List your GitHub repositories
     - GitHub GraphQL API v4
-- url: https://gatsby-starter-blog-demo.netlify.com/
-  repo: https://github.com/gatsbyjs/gatsby-starter-blog
-  description: official blog
-  tags:
-    - Official
-    - Blog
-  features:
-    - Basic setup for a full-featured blog
-    - Support for an RSS feed
-    - Google Analytics support
-    - Automatic optimization of images in Markdown posts
-    - Support for code syntax highlighting
-    - Includes plugins for easy, beautiful typography
-    - Includes React Helmet to allow editing site meta tags
-    - Includes plugins for offline support out of the box
+
 - url: https://gatsby-starter-bloomer.netlify.com/
   repo: https://github.com/Cethy/gatsby-starter-bloomer
   description: n/a
@@ -321,14 +343,6 @@
     - i18n
   features:
     - localization (Multilanguage)
-- url: https://gatsby-starter-default-demo.netlify.com/
-  repo: https://github.com/gatsbyjs/gatsby-starter-default
-  description: official default
-  tags:
-    - Official
-  features:
-    - Comes with React Helmet for adding site meta tags
-    - Includes plugins for offline support out of the box
 - url: http://gatsby-dimension.surge.sh/
   repo: https://github.com/codebushi/gatsby-starter-dimension
   description: Single page starter based on the Dimension site template
@@ -542,18 +556,6 @@
     - Use EditorConfig to maintain consistent coding styles between different editors and IDEs
     - Integration with Visual Studio Code
     - Based on gatsby-starter-default
-- url: https://gatsby-netlify-cms.netlify.com/
-  repo: https://github.com/netlify-templates/gatsby-starter-netlify-cms
-  description: n/a
-  tags:
-    - Blog
-    - Styling:Bulma
-    - CMS:Netlify
-  features:
-    - A simple blog built with Netlify CMS
-    - Basic directory organization
-    - Uses Bulma for styling
-    - Visit the repo to learn how to set up authentication, and begin modeling your content.
 - url: https://gatsby-starter-personal-blog.greglobinski.com/
   repo: https://github.com/greglobinski/gatsby-starter-personal-blog
   description: n/a

diff --git a/www/gatsby-config.js b/www/gatsby-config.js
@@ -108,6 +108,12 @@ module.exports = {
         path: `${__dirname}/src/data/diagram`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/src/assets`,
+      },
+    },
     {
       resolve: `gatsby-plugin-mdx`,
       options: {

diff --git a/www/gatsby-node.js b/www/gatsby-node.js
@@ -943,6 +943,28 @@ exports.sourceNodes = ({ actions: { createTypes }, schema }) => {
       data: AirtableData
     }
 
+    type SitesYaml implements Node {
+      title: String!
+      main_url: String!
+      url: String!
+      source_url: String
+      featured: Boolean
+      categories: [String]!
+      built_by: String
+      built_by_url: String
+      description: String
+      screenshotFile: Screenshot # added by gatsby-transformer-screenshot
+    }
+
+    type StartersYaml implements Node {
+      url: String!
+      repo: String!
+      description: String
+      tags: [String!]
+      features: [String!]
+      screenshotFile: Screenshot # added by gatsby-transformer-screenshot
+    }
+
     type AirtableData @dontInfer {
       name: String @proxy(from: "Name_of_Event")
       organizerFirstName: String @proxy(from: "Organizer_Name")

diff --git a/www/src/assets/screenshot-fallback.png b/www/src/assets/screenshot-fallback.png
diff --git a/www/src/templates/template-starter-page.js b/www/src/templates/template-starter-page.js
@@ -12,19 +12,27 @@ import StarterSource from "../views/starter/source"
 import StarterDetails from "../views/starter/details"
 import FooterLinks from "../components/shared/footer-links"
 
+const getFallbackScreenshot = fallback => {
+  return {
+    childScreenshot: fallback,
+  }
+}
+
 class StarterTemplate extends React.Component {
   state = {
     showAllDeps: false,
   }
   render() {
-    const { startersYaml } = this.props.data
+    const { fallback, startersYaml } = this.props.data
     const {
       url: demoUrl,
       repo: repoUrl,
       fields: { starterShowcase },
-      childScreenshot: { screenshotFile },
+      childScreenshot = getFallbackScreenshot(fallback),
     } = startersYaml
 
+    const screenshot = childScreenshot.screenshotFile
+
     // preprocessing of dependencies
     const { miscDependencies = [], gatsbyDependencies = [] } = starterShowcase
     const allDeps = [
@@ -62,12 +70,12 @@ class StarterTemplate extends React.Component {
               <title>{`${repoName}: Gatsby Starter`}</title>
               <meta
                 property="og:image"
-                content={screenshotFile.childImageSharp.fluid.src}
+                content={screenshot.childImageSharp.fluid.src}
               />
               <meta property="og:image:alt" content="Gatsby Logo" />
               <meta
                 name="twitter:image"
-                content={screenshotFile.childImageSharp.fluid.src}
+                content={screenshot.childImageSharp.fluid.src}
               />
               <meta
                 name="description"
@@ -100,13 +108,10 @@ class StarterTemplate extends React.Component {
               <StarterMeta
                 starter={starterShowcase}
                 repoName={repoName}
-                imageSharp={screenshotFile}
+                imageSharp={screenshot}
                 demo={demoUrl}
               />
-              <StarterScreenshot
-                imageSharp={screenshotFile}
-                repoName={repoName}
-              />
+              <StarterScreenshot imageSharp={screenshot} repoName={repoName} />
             </div>
             <StarterSource repoUrl={repoUrl} startersYaml={startersYaml} />
             <StarterDetails
@@ -131,6 +136,15 @@ class StarterTemplate extends React.Component {
 export default StarterTemplate
 
 export const pageQuery = graphql`
+  fragment ScreenshotDetails on ImageSharp {
+    fluid(maxWidth: 700) {
+      ...GatsbyImageSharpFluid
+    }
+    resize(width: 1500, height: 1500, cropFocus: CENTER, toFormat: JPG) {
+      src
+    }
+  }
+
   query TemplateStarter($slug: String!) {
     startersYaml(fields: { starterShowcase: { slug: { eq: $slug } } }) {
       id
@@ -160,20 +174,16 @@ export const pageQuery = graphql`
       childScreenshot {
         screenshotFile {
           childImageSharp {
-            fluid(maxWidth: 700) {
-              ...GatsbyImageSharpFluid
-            }
-            resize(
-              width: 1500
-              height: 1500
-              cropFocus: CENTER
-              toFormat: JPG
-            ) {
-              src
-            }
+            ...ScreenshotDetails
           }
         }
       }
     }
+
+    fallback: file(relativePath: { eq: "screenshot-fallback.png" }) {
+      childImageSharp {
+        ...ScreenshotDetails
+      }
+    }
   }
 `
diff --git a/www/src/views/starter/screenshot.js b/www/src/views/starter/screenshot.js
@@ -1,7 +1,8 @@
 import React from "react"
-import sharedStyles from "../shared/styles"
 import Img from "gatsby-image"
 
+import sharedStyles from "../shared/styles"
+
 const Screenshot = ({ imageSharp, repoName }) => (
   <div
     className="screenshot"