From 85ad6f90ad5d7953b423feafbee8ca89df62bf51 Mon Sep 17 00:00:00 2001 From: Alan Shaw Date: Fri, 10 Nov 2017 17:21:34 +0000 Subject: [PATCH] separates document and meta from page layout --- build/html.js | 22 +++++++++++++++++++--- package-lock.json | 37 ++++++++++++++++++++++++++++++++++++- package.json | 3 ++- pages/layout.js | 15 +++++++-------- 4 files changed, 64 insertions(+), 13 deletions(-) diff --git a/build/html.js b/build/html.js index 31dbe0a..b1879b0 100644 --- a/build/html.js +++ b/build/html.js @@ -6,6 +6,7 @@ const mkdirp = require('mkdirp') const { createElement } = require('react') const { renderToStaticMarkup } = require('react-dom/server') const requireDirectory = require('require-directory') +const { Helmet } = require('react-helmet') console.time('Build html total') @@ -28,12 +29,27 @@ requireDirectory(module, '../pages', { pages: data.pages } const Component = require(filePath).default - const html = ` - ${renderToStaticMarkup(createElement(Component, props))}` + + const appHtml = renderToStaticMarkup(createElement(Component, props)) + const helmet = Helmet.renderStatic() + const docHtml = ` + + + ${helmet.title.toString()} + ${helmet.meta.toString()} + ${helmet.link.toString()} + + +
+ ${appHtml} +
+ +` + const subdir = name === 'home' ? '.' : name const outFile = path.join(outputDir, subdir, 'index.html') mkdirp.sync(path.dirname(outFile)) - fs.writeFileSync(outFile, html) + fs.writeFileSync(outFile, docHtml) console.timeEnd(`Build ${name}`) } }) diff --git a/package-lock.json b/package-lock.json index 881b194..ef5d7ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "aanchal-stories", - "version": "1.0.0", + "version": "1.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1985,6 +1985,11 @@ "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=" }, + "deep-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz", + "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=" + }, "deep-extend": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz", @@ -2783,6 +2788,11 @@ "strip-eof": "1.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "exit-hook": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz", @@ -6450,6 +6460,17 @@ "prop-types": "15.6.0" } }, + "react-helmet": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.0.tgz", + "integrity": "sha1-qBgR3yExOm1VxfBYxK66XW89l6c=", + "requires": { + "deep-equal": "1.0.1", + "object-assign": "4.1.1", + "prop-types": "15.6.0", + "react-side-effect": "1.1.3" + } + }, "react-markdown": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-2.5.0.tgz", @@ -6466,6 +6487,15 @@ "resolved": "https://registry.npmjs.org/react-responsive-embed/-/react-responsive-embed-2.1.0.tgz", "integrity": "sha512-GzvZ8i1ZRL4YRaTOfIeka5CQSc7mCIZVa0C7brJoA55EQ0A+EsFQT1YOvFVzKOVP33UqoKNMijI1PQ7UtO1Eeg==" }, + "react-side-effect": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.3.tgz", + "integrity": "sha1-USwlq+DewXKDTEAB7FxR4E1BvFw=", + "requires": { + "exenv": "1.2.2", + "shallowequal": "1.0.2" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -6991,6 +7021,11 @@ "integrity": "sha1-gaVSFB7BBLiOic44MQOtXGZWTQg=", "dev": true }, + "shallowequal": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.0.2.tgz", + "integrity": "sha512-zlVXeVUKvo+HEv1e2KQF/csyeMKx2oHvatQ9l6XjCUj3agvC8XGf6R9HvIPDSmp8FNPvx7b5kaEJTRi7CqxtEw==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", diff --git a/package.json b/package.json index 61d0e0c..527b074 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "postcss-import": "^11.0.0", "react": "^16.0.0", "react-dom": "^16.0.0", + "react-helmet": "^5.2.0", "react-markdown": "^2.5.0", "react-responsive-embed": "^2.1.0", "require-directory": "^2.1.1", @@ -51,4 +52,4 @@ "IE >= 9", "last 4 versions" ] -} \ No newline at end of file +} diff --git a/pages/layout.js b/pages/layout.js index 6b1117f..0485e9a 100644 --- a/pages/layout.js +++ b/pages/layout.js @@ -1,5 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' +import { Helmet } from 'react-helmet' import HelplineBox from '../components/helpline-box' const Header = ({relativePathToRoot}) => ( @@ -14,8 +15,8 @@ const Header = ({relativePathToRoot}) => ( ) const Layout = ({ content, facts, children }) => ( - - +
+ @@ -23,12 +24,10 @@ const Layout = ({ content, facts, children }) => ( {facts.title} - - -
- {children} - - + +
+ {children} +
) Layout.propTypes = {