task: implementing basic graphql injection example

packages/cli/package.json

@@ -25,6 +25,7 @@
     "@babel/core": "^7.6.0",
     "@babel/preset-env": "^7.6.0",
     "@webcomponents/webcomponentsjs": "^2.3.0",
+    "apollo-boost": "^0.4.4",
     "babel-loader": "^8.0.5",
     "chalk": "^2.4.2",
     "colors": "^1.3.3",
@@ -38,6 +39,8 @@
     "front-matter": "^3.0.1",
     "fs-extra": "^8.1.0",
     "glob-promise": "^3.4.0",
+    "graphql": "^14.5.8",
+    "graphql-tag": "^2.10.1",
     "html-webpack-plugin": "^3.2.0",
     "lit-element": "^2.0.1",
     "lit-redux-router": "^0.9.3",

packages/cli/src/lifecycles/graph.js

@@ -23,7 +23,7 @@ const createGraphFromPages = async (pagesDir, config) => {
               if (isMdFile && !stats.isDirectory()) {
                 const fileContents = await fs.readFile(filePath, 'utf8');
                 const { attributes } = fm(fileContents);
-                let { label, template, title } = attributes;
+                let { label, template, title, menu } = attributes;
                 let { meta } = config;
                 let mdFile = '';
 
@@ -65,6 +65,8 @@ const createGraphFromPages = async (pagesDir, config) => {
                 // set <title></title> element text, override with markdown title
                 title = title || config.title;
 
+                // set specific menu to place this page
+                menu = menu;
                 /*
                 * Variable Definitions
                 *----------------------
@@ -77,10 +79,11 @@ const createGraphFromPages = async (pagesDir, config) => {
                 * relativeExpectedPath: relative import path for generated component within a list.js file to later be
                 * imported into app.js root component
                 * title: the head <title></title> text
+                * menu: the name of the menu this item should be placed in
                 * meta: og graph meta array of objects { property/name, content }
                 */
 
-                pages.push({ mdFile, label, route, template, filePath, fileName, relativeExpectedPath, title, meta });
+                pages.push({ mdFile, label, route, template, filePath, fileName, relativeExpectedPath, title, menu, meta });
               }
               if (stats.isDirectory()) {
                 await walkDirectory(filePath);

packages/cli/src/tasks/build.js

@@ -1,15 +1,17 @@
 const path = require('path');
 const webpack = require('webpack');
 const serializeBuild = require('../lifecycles/serialize');
+const runGraphQLServer = require('../../../plugin-graphql/src/server.js');
 
 module.exports = runProductionBuild = async(compilation) => {
   return new Promise(async (resolve, reject) => {
 
-    try {      
+    try {
+      runGraphQLServer(compilation.graph);
       console.log('Building SPA from compilation...');
       await runWebpack(compilation);
       await serializeBuild(compilation);
-      
+
       resolve();
     } catch (err) {
       reject(err);

packages/cli/src/tasks/develop.js

@@ -1,21 +1,24 @@
 const path = require('path');
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
+const runGraphQLServer = require('../../../plugin-graphql/src/server.js');
 
 module.exports = runDevServer = async (compilation) => {
   return new Promise(async (resolve, reject) => {
 
     try {
+      runGraphQLServer(compilation.graph);
       const webpackConfig = require(path.join(__dirname, '..', './config/webpack.config.develop.js'))(compilation);
       const devServerConfig = webpackConfig.devServer;
 
       let compiler = webpack(webpackConfig);
       let webpackServer = new WebpackDevServer(compiler, devServerConfig);
-      
+
       webpackServer.listen(devServerConfig.port);
+
     } catch (err) {
       reject(err);
     }
-  
+
   });
 };

packages/plugin-graphql/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@greenwood/plugin-graphql",
+  "version": "0.4.0",
+  "description": "A plugin for Greenwood to enable use of GraphQL",
+  "repository": "https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-graphql",
+  "author": "Grant Hutchinson <[email protected]>",
+  "license": "MIT",
+  "keywords": [
+    "Greenwood",
+    "Web Components",
+    "Lit Element",
+    "Lit Html",
+    "Static Site Generator",
+    "GraphQL"
+  ],
+  "main": "src/index.js",
+  "files": [
+    "src/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@greenwood/cli": "^0.4.0"
+  },
+  "devDependencies": {
+    "@greenwood/cli": "^0.4.0"
+  },
+  "dependencies": {
+    "apollo-server": "^2.9.7",
+    "graphql": "^14.5.8",
+    "lodash": "^4.17.15"
+  }
+}

packages/plugin-graphql/src/lib/menu-queries.js

@@ -0,0 +1,12 @@
+
+/* Queries */
+exports.getMenu = async (root, { name }, { graph }) => {
+
+  const items = graph
+    .filter((page) => page.menu === name)
+    .map(({ title, route }) => {
+      return { path: route, name: title, items: [] };
+    });
+
+  return { name, items };
+};

packages/plugin-graphql/src/schema.js

@@ -0,0 +1,12 @@
+const { gql } = require('apollo-server-express');
+const { merge } = require('lodash');
+
+const { menuTypeDefs, menuResolvers } = require('./schemas/menu-schema');
+
+exports.typeDefs = gql`
+  ${menuTypeDefs}
+`;
+
+exports.resolvers = merge(
+  menuResolvers,
+);

packages/plugin-graphql/src/schemas/menu-schema.js

@@ -0,0 +1,33 @@
+const { gql } = require('apollo-server-express');
+const {
+  getMenu
+} = require('../lib/menu-queries');
+
+exports.menuTypeDefs = gql`
+  type Menu {
+    name: String!
+    path: String!
+    items: [MenuItem]
+  }
+
+  type MenuItem {
+    name: String!
+    path: String!
+    items: [SubMenuItem]
+  }
+
+  type SubMenuItem {
+    name: String!
+    id: String!
+  }
+
+  type Query {
+    getMenu(name: String!): Menu
+  }
+`;
+
+exports.menuResolvers = {
+  Query: {
+    getMenu
+  }
+};

packages/plugin-graphql/src/server.js

@@ -0,0 +1,29 @@
+// GraphQL-Express middleware
+const { ApolloServer } = require('apollo-server');
+const { typeDefs, resolvers } = require('./schema');
+
+module.exports = (graph) => {
+
+  // Create schema
+  // disable playground in prod
+  const server = new ApolloServer({
+    typeDefs,
+    resolvers,
+    playground: {
+      endpoint: '/graphql',
+      settings: {
+        'request.credentials': 'include',
+        'editor.theme': 'light'
+      }
+    },
+    context: () => ({
+      graph
+    })
+  });
+
+  // The `listen` method launches a web server.
+  server.listen().then(({ url }) => {
+    console.log(`🚀  Server ready at ${url}`);
+  });
+
+};

www/pages/about/community.md

@@ -1,3 +1,8 @@
+---
+menu: about
+title: Community
+---
+
 ## Community
 
 Greenwood understands the role of community in open source, technology, and learning and we want to embrace that in this project as well.  There are many great tools and projects available in the web ecosystem and we want to highlight those projects here, that have been important in the development of Greenwood (in no particular order).

www/pages/about/features.md

@@ -1,19 +1,24 @@
+---
+menu: about
+title: Features
+---
+
 ## Features
 
 #### Onboarding
 We built Greenwood in the hopes that getting started would be easy.  By default Greenwood will build an app for you.  Just simply start adding pages and customizing templates as needed and you're good to go!  You pick your workspace, Greenwood makes as few assumptions as needed to deliver an optimal development experience with minimum configuration needed.
 
-We strive to provide good documentation, intuitive developer experiences, and stable workflows.  Even if you don't know anything about webpack or Web Components, if you can learn a little markdown, you can get started making a modern website right away!  
+We strive to provide good documentation, intuitive developer experiences, and stable workflows.  Even if you don't know anything about webpack or Web Components, if you can learn a little markdown, you can get started making a modern website right away!
 
 
 #### Modern Apps, Modern Toolchains
-At the heart of Greenwood is an "evergreen" build, that aims to deliver the most optimized user experience through a combination of tools like webpack, babel, and PostCSS.  
+At the heart of Greenwood is an "evergreen" build, that aims to deliver the most optimized user experience through a combination of tools like webpack, babel, and PostCSS.
 
 Develop like it's a Single Page Application, deploy like it's a static site.  (because it is!)
 
 
 #### Performance
-We believe delivering a great user experience is above all else the most crucial element to a successful web product and part of that means performance out of the box.  Greenwood wants to help your site be one of the fastest out there and so we'll take care of all those optimizations for you, ensuring your site gets a great score in tools like [Lighthouse](https://developers.google.com/web/tools/lighthouse/), one of our primary performance benchmarking tools.  
+We believe delivering a great user experience is above all else the most crucial element to a successful web product and part of that means performance out of the box.  Greenwood wants to help your site be one of the fastest out there and so we'll take care of all those optimizations for you, ensuring your site gets a great score in tools like [Lighthouse](https://developers.google.com/web/tools/lighthouse/), one of our primary performance benchmarking tools.
 
 
 Haven't given Greenwood a try yet?  Check out our [Getting Started](/getting-started) guide and start building your next modern web experience!  💯

www/pages/about/goals.md

@@ -1,3 +1,8 @@
+---
+menu: about
+title: Goals
+---
+
 ## Goals
 
 #### It's Not About Us

www/pages/about/how-it-works.md

@@ -1,5 +1,10 @@
+---
+menu: about
+title: How It Works
+---
+
 ## How It Works
-Following similar motivations and inspirations as other [Project Evergreen](https://github.com/ProjectEvergreen/) projects like [Create Evergreen App](https://github.com/ProjectEvergreen/create-evergreen-app), Greenwood aims to provide a build and development workflow designed for the modern web and leveraging great open source projects in the NodeJS ecosystem.  
+Following similar motivations and inspirations as other [Project Evergreen](https://github.com/ProjectEvergreen/) projects like [Create Evergreen App](https://github.com/ProjectEvergreen/create-evergreen-app), Greenwood aims to provide a build and development workflow designed for the modern web and leveraging great open source projects in the NodeJS ecosystem.
 
 Read on to learn more about how we put them all together for you!
 

www/pages/docs/component-model.md

@@ -1,3 +1,8 @@
+---
+menu: docs
+title: Component Model
+---
+
 ## Component Model
 In this section we'll review a little bit about how you can use Web Components in Greenwood.  Both the native `HTMLElement` and `LitElement` are available by default.
 

www/pages/docs/configuration.md

@@ -1,3 +1,8 @@
+---
+menu: docs
+title: Configuration
+---
+
 ## Configuration
 These are all the supported configuration options in Greenwood, which you can define in a _greenwood.config.js_ file in your project's root directory.
 

www/pages/docs/css-and-images.md

@@ -1,3 +1,8 @@
+---
+menu: docs
+title: Styles and Assets
+---
+
 ## Styles and Assets
 Greenwood provides a couple ways to help style and theme your site.
 

www/pages/docs/front-matter.md

@@ -1,3 +1,8 @@
+---
+menu: docs
+title: Front Matter
+---
+
 ## Front Matter
 
 "Front matter" is a [YAML](https://yaml.org/) block at the top of any markdown file.  It gives you the ability to define variables that are made available to Greenwood's build process. You can also use it to `import` additional files.

www/pages/docs/layouts.md

@@ -1,3 +1,8 @@
+---
+menu: docs
+title: Templates
+---
+
 ## Templates
 Greenwood has two types of templates:
 - App Template: The [app shell](https://developers.google.com/web/fundamentals/architecture/app-shell) if you will, that wraps all pages.  This is provided for you by Greenwood, but you can override if needed. (though not recommended)

www/pages/docs/markdown.md

@@ -1,3 +1,8 @@
+---
+menu: docs
+title: Markdown
+---
+
 ## Markdown
 In this section we'll cover some of the Markdown related feature of Greenwood, which by default supports the [CommonMark](https://commonmark.org/help/) specification.
 

www/pages/docs/tech-stack.md

@@ -1,3 +1,8 @@
+---
+menu: docs
+title: Tech Stack
+---
+
 ## Tech Stack
 
 Greenwood uses a variety of open source JavaScript tools to help faciliate development and production building of Greenwood projects.  By putting all these tools together and configuring them for you, Greenwood helps you focus more on what matters; building your project.  Greenwood takes are of performance and optimizations for you and provides a static build of your project that you can host on any web server or cloud host, be it Netlify, S3 / CloudFront, Express, Apache, etc.  It's entirely up to you and what fits your workflow the best.

www/pages/getting-started/branding.md

@@ -1,13 +1,18 @@
+---
+menu: getting-started
+title: CSS and Web Components
+---
+
 ## CSS and Web Components
 
-So now that we've made some [content](/getting-started/creating-content/) for your site, I think we can agree it's not quite all "there" yet and could benefit from a little styling and branding.  
+So now that we've made some [content](/getting-started/creating-content/) for your site, I think we can agree it's not quite all "there" yet and could benefit from a little styling and branding.
 
 In this section, we will add the following to your project:
 1. Header / Footer - The elements provide a great case for creating some reusable components and with Custom Elements, we can create self contained reusable components for our site.
 1. Styles - Of course we want things to look nice too!  We'll add some CSS to help hang things in just right the place.
 
 ### Web Components
-Web Components are supported out of the box with Greenwood using `HTMLElement` or **LitElement**.  For this guide, we'll use a "vanilla" custom element for our header, in _src/components/header.js_.  
+Web Components are supported out of the box with Greenwood using `HTMLElement` or **LitElement**.  For this guide, we'll use a "vanilla" custom element for our header, in _src/components/header.js_.
 ```render javascript
 class HeaderComponent extends HTMLElement {
   constructor() {

www/pages/getting-started/build-and-deploy.md

@@ -1,3 +1,8 @@
+---
+menu: getting-started
+title: Build and Deploy
+---
+
 ## Build and Deploy
 
 Congrats!  After all your good work making your first site with Greenwood, it's now time to take it live!
@@ -19,7 +24,7 @@ And from the command line, run `npm run build`.  That's it!
 If you look in your project directory, you will now have a _public/_ directory that will contain all the static assets (HTML / CSS / JS / fonts / images) you will need to deploy your site.  At this point, you can now put these assets on any web server like Apache, S3, Express, or Netlify (which is what this website uses).
 
 ### Deploying and Hosting
-There are many ways to host and deploy a web site, but essentially any static hosting or web server will work for Greenwood, which keeps things simple and easy to setup.  No servers needed if you don't need them!  
+There are many ways to host and deploy a web site, but essentially any static hosting or web server will work for Greenwood, which keeps things simple and easy to setup.  No servers needed if you don't need them!
 
 For the Greenwood website, our code is in [GitHub](https://github.com/ProjectEvergreen/greenwood) and we use [Netlify](https://www.netlify.com) to deploy from our GitHub repo.  With Netlify, Greenwood configuration is straightforward.  Here is what our Netlify configuration looks like.