feat(www): Ecosystem landing page (gatsbyjs#9442)

* feat(www): prepare featured items forEcosystem * feat(www): add new icons for Ecosystem * feat(www): Ecosystem content * feat(www): create Ecosystem mobile styles * feat(www): add new variant of Button * feat(www): Ecosystem desktop styles * feat(www): add thumbnail to featured starters * fix(www): fix button label * fix(www): fix typo * refactor(www): prettify svg code * refactor(www): remove unnecessary destructuring * fix(www): use slug to pick up featured starters * refactor(www): remove unnecessary spreading to a new object * fix(www): fix stylelint errors * fix(www): use gatsby-transformer-yaml to pull featured Ecosystem items * feat(www): add backkground icons to test it * refactor(www): remove unnecessary destructuring in Button * fix(www): remove unnecessary infos * fix(www): remove background * feat(www): add function preventing too long description of featured items * fix(www): add border to starter thumbnails * fix(www): refine Tablet styles * fix(www): fix desktop section height on FF * fix(www): change Ecosystem sections headers * fix(www): remove unused imports
gpetrioli · Jan 22, 2019 · 2328094 · 2328094
1 parent fc20bd9
commit 2328094
Show file tree

Hide file tree

Showing 16 changed files with 716 additions and 85 deletions.
diff --git a/www/gatsby-config.js b/www/gatsby-config.js
@@ -28,6 +28,13 @@ module.exports = {
         path: `${__dirname}/../packages/`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `ecosystem`,
+        path: `${__dirname}/src/data/ecosystem/`,
+      },
+    },
     {
       resolve: `gatsby-plugin-typography`,
       options: {

diff --git a/www/gatsby-node.js b/www/gatsby-node.js
@@ -10,6 +10,8 @@ const getpkgjson = require(`get-package-json-from-github`)
 const parseGHUrl = require(`parse-github-url`)
 const { GraphQLClient } = require(`graphql-request`)
 
+let ecosystemFeaturedItems
+
 require(`dotenv`).config({
   path: `.env.${process.env.NODE_ENV}`,
 })
@@ -142,91 +144,97 @@ exports.createPages = ({ graphql, actions }) => {
     )
 
     // Query for markdown nodes to use in creating pages.
-    graphql(
-      `
-        query {
-          allMarkdownRemark(
-            sort: { order: DESC, fields: [frontmatter___date] }
-            limit: 10000
-            filter: { fileAbsolutePath: { ne: null } }
-          ) {
-            edges {
-              node {
-                fields {
-                  slug
-                  package
-                }
-                frontmatter {
-                  title
-                  draft
-                  canonicalLink
-                  publishedAt
-                  tags
-                }
+    graphql(`
+      query {
+        allMarkdownRemark(
+          sort: { order: DESC, fields: [frontmatter___date] }
+          limit: 10000
+          filter: { fileAbsolutePath: { ne: null } }
+        ) {
+          edges {
+            node {
+              fields {
+                slug
+                package
+              }
+              frontmatter {
+                title
+                draft
+                canonicalLink
+                publishedAt
+                tags
               }
             }
           }
-          allAuthorYaml {
-            edges {
-              node {
-                fields {
-                  slug
-                }
+        }
+        allAuthorYaml {
+          edges {
+            node {
+              fields {
+                slug
               }
             }
           }
-          allCreatorsYaml {
-            edges {
-              node {
-                fields {
-                  slug
-                }
+        }
+        allCreatorsYaml {
+          edges {
+            node {
+              fields {
+                slug
               }
             }
           }
-          allSitesYaml(filter: { main_url: { ne: null } }) {
-            edges {
-              node {
-                fields {
-                  slug
-                }
+        }
+        allSitesYaml(filter: { main_url: { ne: null } }) {
+          edges {
+            node {
+              fields {
+                slug
               }
             }
           }
-          allStartersYaml {
-            edges {
-              node {
-                id
-                fields {
-                  starterShowcase {
-                    slug
-                    stub
-                  }
+        }
+        allStartersYaml {
+          edges {
+            node {
+              id
+              fields {
+                starterShowcase {
+                  slug
+                  stub
                 }
-                url
-                repo
               }
+              url
+              repo
             }
           }
-          allNpmPackage {
-            edges {
-              node {
+        }
+        allNpmPackage {
+          edges {
+            node {
+              id
+              title
+              slug
+              readme {
                 id
-                title
-                slug
-                readme {
+                childMarkdownRemark {
                   id
-                  childMarkdownRemark {
-                    id
-                    html
-                  }
+                  html
                 }
               }
             }
           }
         }
-      `
-    ).then(result => {
+        allEcosystemYaml {
+          edges {
+            node {
+              starters
+              plugins
+            }
+          }
+        }
+      }
+    `).then(result => {
       if (result.errors) {
         return reject(result.errors)
       }
@@ -393,6 +401,9 @@ exports.createPages = ({ graphql, actions }) => {
         }
       })
 
+      // Read featured starters and plugins for Ecosystem
+      ecosystemFeaturedItems = result.data.allEcosystemYaml.edges[0].node
+
       return resolve()
     })
   })
@@ -592,6 +603,20 @@ exports.onCreateNode = ({ node, actions, getNode, reporter }) => {
   // end Community/Creators Pages
 }
 
+exports.onCreatePage = ({ page, actions }) => {
+  // add lists of featured items to Ecosystem page
+  if (page.path === "/ecosystem/") {
+    const { createPage, deletePage } = actions
+    const oldPage = Object.assign({}, page)
+
+    page.context.featuredStarters = ecosystemFeaturedItems.starters
+    page.context.featuredPlugins = ecosystemFeaturedItems.plugins
+
+    deletePage(oldPage)
+    createPage(page)
+  }
+}
+
 exports.onPostBuild = () => {
   fs.copySync(
     `../docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/gatsbygram.mp4`,

diff --git a/www/src/assets/ecosystem-icons.js b/www/src/assets/ecosystem-icons.js
@@ -0,0 +1,4 @@
+import PluginsIcon from "!raw-loader!./plugins-ecosystem.svg"
+import StartersIcon from "!raw-loader!./starters.svg"
+
+export { PluginsIcon, StartersIcon }
diff --git a/www/src/assets/plugins-ecosystem.svg b/www/src/assets/plugins-ecosystem.svg
diff --git a/www/src/assets/starters.svg b/www/src/assets/starters.svg
diff --git a/www/src/components/button.js b/www/src/components/button.js
@@ -16,6 +16,7 @@ const Button = ({
   tag,
   large,
   small,
+  tiny,
   secondary,
   ...rest
 }) => {
@@ -31,9 +32,10 @@ const Button = ({
     "&&": {
       ...buttonStyles.default,
       ...overrideCSS,
-      ...(secondary && { ...buttonStyles.secondary }),
-      ...(large && { ...buttonStyles.large }),
-      ...(small && { ...buttonStyles.small }),
+      ...(secondary && buttonStyles.secondary),
+      ...(large && buttonStyles.large),
+      ...(small && buttonStyles.small),
+      ...(tiny && buttonStyles.tiny),
     },
   }
 

diff --git a/www/src/components/ecosystem/ecosystem-board.js b/www/src/components/ecosystem/ecosystem-board.js
@@ -0,0 +1,73 @@
+import React from "react"
+import PropTypes from "prop-types"
+import styled from "react-emotion"
+
+import EcosystemSection from "./ecosystem-section"
+
+import presets, { colors } from "../../utils/presets"
+
+const EcosystemBoardRoot = styled("div")`
+  display: flex;
+  flex-direction: column;
+
+  ${presets.Tablet} {
+    flex-direction: row;
+    flex-wrap: wrap;
+    height: calc(
+      100vh - (${presets.bannerHeight} + ${presets.headerHeight} + 1px)
+    );
+    padding: 2rem 1rem 1rem;
+  }
+`
+
+const EcosystemBoard = ({
+  icons: { plugins: PluginsIcon, starters: StartersIcon },
+  starters,
+  plugins,
+  background,
+}) => {
+  return (
+    <EcosystemBoardRoot>
+      <EcosystemSection
+        title="Plugins"
+        description="With 429 plugins, lorem ipsum sunt we need some proper copy here pulling in data from your favorite source is only a few mouseclicks away."
+        subTitle="Featured Plugins"
+        icon={PluginsIcon}
+        links={[
+          { label: "Browse Plugins", to: "/plugins/" },
+          {
+            label: "Plugin Authoring",
+            to: "/docs/plugin-authoring/",
+            secondary: true,
+          },
+          { label: "Plugin Docs", to: "/docs/plugins/", secondary: true },
+        ]}
+        featuredItems={plugins}
+      />
+      <EcosystemSection
+        title="Starters"
+        description="Starters are boilerplate Gatsby sites maintained by the community which give you a headstart for your Gatsby project."
+        subTitle="Featured Starters"
+        icon={StartersIcon}
+        links={[
+          { label: "Browse Starters", to: "/starters/" },
+          { label: "Starter Docs", to: "/docs/starters/", secondary: true },
+        ]}
+        featuredItems={starters}
+      />
+      <EcosystemSection
+        title="External Resources"
+        description="More awesome Gatsby content, created by the community."
+        links={[{ label: "Browse Resources", to: "/docs/awesome-gatsby/" }]}
+      />
+    </EcosystemBoardRoot>
+  )
+}
+
+EcosystemBoard.propTypes = {
+  icons: PropTypes.object,
+  starters: PropTypes.array,
+  plugins: PropTypes.array,
+}
+
+export default EcosystemBoard