Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement/issue 128 title from data #300

Merged
merged 14 commits into from
Mar 22, 2020
Merged

Enhancement/issue 128 title from data #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
123333a
Rfc/issue 115 build time data access (#269)
thescientist13 Jan 29, 2020
cd4fb7f
hello and graph queries working together
thescientist13 Mar 4, 2020
2541747
config def and resolvers
thescientist13 Mar 4, 2020
0ac54ab
flesh out config schema and query
thescientist13 Mar 4, 2020
ca50e62
remove theme file from config
thescientist13 Mar 4, 2020
9618d5f
delete hello query example
thescientist13 Mar 4, 2020
08ba3b8
formatting
thescientist13 Mar 4, 2020
6c7b68b
documentation
thescientist13 Mar 4, 2020
2fccd6e
app template with config title from data
thescientist13 Mar 8, 2020
5c05f8d
page title with project title
thescientist13 Mar 11, 2020
260cdd5
tests for custom page title
thescientist13 Mar 15, 2020
ced3789
cleanup console log
thescientist13 Mar 15, 2020
b021588
docs
thescientist13 Mar 15, 2020
c318fae
Merge branch 'release/0.5.0' into enhancement/issue-128-title-from-data
thescientist13 Mar 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/cli/src/data/schema/graph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
});
Expand Down Expand Up @@ -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,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

link: route
});
}
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/src/lifecycles/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ let defaultConfig = {
host: 'localhost'
},
publicPath: '/',
title: 'Greenwood App',
title: 'My App',
meta: [],
plugins: [],
themeFile: 'theme.css'
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/src/lifecycles/graph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 || '';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


/*
* Variable Definitions
Expand Down
8 changes: 0 additions & 8 deletions packages/cli/src/plugins/meta.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
Expand Down
34 changes: 34 additions & 0 deletions packages/cli/src/templates/app-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
}),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it easier to instead include this data as part of the graph, from within the graph lifecycle, then queried as part of the graph query? Just spitballing here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, two queries here isn't ideal, that said, I think config should stay it's own schema / structure. Mixing it up with the graph may not be super intuitive / maintainable.

However, it would be great if apollo-client could support sending multiple queries for us, then we wouldn't have to use Promise.all but I suppose it could just be a limitation. Would be good to think of another more elegant way if we can think of one.

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
Expand Down
3 changes: 2 additions & 1 deletion packages/cli/src/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'/>
Expand All @@ -20,6 +20,7 @@
<body>

<eve-app></eve-app>

</body>

</html>
6 changes: 3 additions & 3 deletions packages/cli/test/cases/build.config.title/build.config.title.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -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}`);
});
});
});
Expand Down
4 changes: 2 additions & 2 deletions ...t/cases/build.default.workspace-template-app/build.default.workspace-template-app.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
21 changes: 21 additions & 0 deletions packages/cli/test/cases/build.default.workspace-template-app/src/templates/app-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down
Loading