Enhancement/issue 128 title from data (#300)

* Rfc/issue 115 build time data access (#269)

* graphql server working

* apollo client connect to apollo server

* connected header example using lit apollo

* todo

* todos

* query and client + server refactor

* schema refactoring

* clean up console logging

* alias all @greenwood/cli/data module imports

* avoid paramater destructuring

* graphql example in the header

* multiple schemas

* internal data sources documentation

* shelf refactor and children query integration

* refactor out ApolloQuery

* ability to intercept client.query calls

* basic semi-working implementation

* remove extra config from server context

* have puppeteer wait for graphql requests before returning content

* fix and add test cases for apollo

* merged resolvers not actually working

* multiple queries support

* everything working

* todos

* TODO tracking

* fix fallback apollo client fetch handling

* full test suite

* cache json test cases

* stablize test due to inconsistent data results ordering

* clean up deps

* todo cleanup

* remove forced client call in SSG mode for client

* represent graph through the schema

* updated data docs

* typos and grammer

* typos and community link fixes

* hello and graph queries working together

* config def and resolvers

* flesh out config schema and query

* remove theme file from config

* delete hello query example

* formatting

* documentation

* app template with config title from data

* page title with project title

* tests for custom page title

* cleanup console log

* docs

Author: thescientist13

packages/cli/src/data/schema/graph.js

@@ -22,16 +22,16 @@ const getPagesFromGraph = async (root, query, context) => {
 
   graph
     .forEach((page) => {
-      const { route, mdFile, fileName, template } = page;
-      const id = page.label;
+      const { route, mdFile, fileName, template, title } = page;
       const { label } = getDeriveMetaFromRoute(route);
+      const id = page.label;
 
       pages.push({
         id,
         filePath: mdFile,
         fileName,
         template,
-        title: label,
+        title: title !== '' ? title : label,
         link: route
       });
     });
@@ -69,19 +69,19 @@ const getChildrenFromParentRoute = async (root, query, context) => {
 
   graph
     .forEach((page) => {
-      const { route, mdFile, fileName, template } = page;
+      const { route, mdFile, fileName, template, title } = page;
+      const { label } = getDeriveMetaFromRoute(route);
       const root = route.split('/')[1];
 
       if (root.indexOf(parent) >= 0) {
-        const { label } = getDeriveMetaFromRoute(route);
         const id = page.label;
 
         pages.push({
           id,
           filePath: mdFile,
           fileName,
           template,
-          title: label,
+          title: title !== '' ? title : label,
           link: route
         });
       }

packages/cli/src/lifecycles/config.js

@@ -9,7 +9,7 @@ let defaultConfig = {
     host: 'localhost'
   },
   publicPath: '/',
-  title: 'Greenwood App',
+  title: 'My App',
   meta: [],
   plugins: [],
   themeFile: 'theme.css'

packages/cli/src/lifecycles/graph.js

@@ -72,7 +72,7 @@ const createGraphFromPages = async (pagesDir, config) => {
                 label = label || generateLabelHash(filePath);
 
                 // set <title></title> element text, override with markdown title
-                title = title || config.title;
+                title = title || '';
 
                 /*
                 * Variable Definitions

packages/cli/src/plugins/meta.js

@@ -56,14 +56,6 @@ class meta extends LitElement {
           header.appendChild(meta);
         }
       });
-
-      // handle <title> tag
-      let title = document.createElement('title');
-
-      title.innerText = this.attributes.title;
-      const oldTitle = document.head.querySelector('title');
-
-      header.replaceChild(title, oldTitle);
     }
   }
 }

packages/cli/src/templates/app-template.js

@@ -3,6 +3,9 @@ import { connectRouter } from 'lit-redux-router';
 import { applyMiddleware, createStore, compose as origCompose, combineReducers } from 'redux';
 import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js';
 import thunk from 'redux-thunk';
+import client from '@greenwood/cli/data/client';
+import ConfigQuery from '@greenwood/cli/data/queries/config';
+import GraphQuery from '@greenwood/cli/data/queries/graph';
 
 // eslint-disable-next-line no-underscore-dangle
 const compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || origCompose;
@@ -17,6 +20,37 @@ import './list';
 connectRouter(store);
 
 class AppComponent extends LitElement {
+
+  async connectedCallback() {
+    super.connectedCallback();
+    const route = window.location.pathname;
+    const response = await Promise.all([
+      await client.query({
+        query: ConfigQuery
+      }),
+      await client.query({
+        query: GraphQuery
+      })
+    ]);
+    const { config } = response[0].data;
+    const currentPage = response[1].data.graph.filter((page) => {
+      return route === page.link;
+    })[0];
+    const currentPageTitleSuffix = currentPage.link === '/'
+      ? ''
+      : ` - ${currentPage.title}`;
+    const fullTitle = `${config.title}${currentPageTitleSuffix}`;
+
+    this.setDocoumentTitle(fullTitle);
+  }
+
+  setDocoumentTitle(title) {
+    const head = document.head;
+    const titleElement = head.getElementsByTagName('title')[0];
+
+    titleElement.innerHTML = title;
+  }
+
   render() {
     return html`
         MYROUTES

packages/cli/src/templates/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" prefix="og:http://ogp.me/ns#">
   <head>
-    <title>My App</title>
+    <title></title>
 
     <meta charset='utf-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1'/>
@@ -20,6 +20,7 @@
   <body>
 
     <eve-app></eve-app>
+    
   </body>
 
 </html>

packages/cli/test/cases/build.config.title/build.config.title.spec.js

@@ -27,6 +27,7 @@ const expect = require('chai').expect;
 const runSmokeTest = require('../../../../../test/smoke-test');
 const TestBed = require('../../../../../test/test-bed');
 
+const configTitle = require('./greenwood.config').title;
 const mainBundleScriptRegex = /index.*.bundle\.js/;
 
 describe('Build Greenwood With: ', function() {
@@ -45,7 +46,6 @@ describe('Build Greenwood With: ', function() {
     runSmokeTest(['public', 'not-found', 'hello'], LABEL);
 
     describe('Custom Title', function() {
-      const indexPageTitle = 'My Custom Greenwood App';
       const indexPageHeading = 'Greenwood';
       const indexPageBody = 'This is the home page built by Greenwood. Make your own pages in src/pages/index.js!';
       let dom;
@@ -61,7 +61,7 @@ describe('Build Greenwood With: ', function() {
       it('should have our custom config meta <title> tag in the <head>', function() {
         const title = dom.window.document.querySelector('head title').textContent;
 
-        expect(title).to.be.equal(indexPageTitle);
+        expect(title).to.be.equal(configTitle);
       });
 
       // rest of index smoke-test because <title></title> is changed for this case
@@ -116,7 +116,7 @@ describe('Build Greenwood With: ', function() {
       it('should have a overridden meta <title> tag in the <head> using markdown front-matter', function() {
         const title = dom.window.document.querySelector('head title').textContent;
 
-        expect(title).to.be.equal(helloPageTitle);
+        expect(title).to.be.equal(`${configTitle} - ${helloPageTitle}`);
       });
     });
   });

packages/cli/test/cases/build.default.workspace-template-app/build.default.workspace-template-app.spec.js

@@ -51,10 +51,10 @@ describe('Build Greenwood With: ', function() {
         dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
       });
 
-      it('should have a <title> tag in the <head>', function() {
+      it('should have the default config title in the <title> tag in the <head>', function() {
         const title = dom.window.document.querySelector('head title').textContent;
 
-        expect(title).to.be.equal('Greenwood App');
+        expect(title).to.be.equal('My App');
       });
 
       it('should have one <script> tag in the <body> for the main bundle', function() {

packages/cli/test/cases/build.default.workspace-template-app/src/templates/app-template.js

@@ -3,6 +3,8 @@ import { connectRouter } from 'lit-redux-router';
 import { applyMiddleware, createStore, compose as origCompose, combineReducers } from 'redux';
 import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js';
 import thunk from 'redux-thunk';
+import client from '@greenwood/cli/data/client';
+import ConfigQuery from '@greenwood/cli/data/queries/config';
 
 // eslint-disable-next-line no-underscore-dangle
 const compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || origCompose;
@@ -18,6 +20,25 @@ import './list';
 connectRouter(store);
 
 class AppComponent extends LitElement {
+
+  async connectedCallback() {
+    super.connectedCallback();
+
+    const response = await client.query({
+      query: ConfigQuery
+    });
+    const { config } = response.data;
+
+    this.setDocoumentTitle(config.title);
+  }
+
+  setDocoumentTitle(title) {
+    const head = document.head;
+    const titleElement = head.getElementsByTagName('title')[0];
+
+    titleElement.innerHTML = title;
+  }
+
   render() {
     return html`
         MYROUTES