put meta[charset] before title (#497)

ctrlplusb · Oct 4, 2017 · 83d533a · 83d533a
1 parent 152a260
commit 83d533a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/server/middleware/reactApplication/ServerHTML.js b/server/middleware/reactApplication/ServerHTML.js
@@ -43,14 +43,13 @@ function ServerHTML(props) {
  const { asyncComponentsState, helmet, nonce, reactAppString } = props;
 
  // Creates an inline script definition that is protected by the nonce.
- const inlineScript = body => (
- <script nonce={nonce} type="text/javascript" dangerouslySetInnerHTML={{ __html: body }} />
- );
+ const inlineScript = body =>
+ <script nonce={nonce} type="text/javascript" dangerouslySetInnerHTML={{ __html: body }} />;
 
  const headerElements = removeNil([
+ ...ifElse(helmet)(() => helmet.meta.toComponent(), []),
  ...ifElse(helmet)(() => helmet.title.toComponent(), []),
  ...ifElse(helmet)(() => helmet.base.toComponent(), []),
- ...ifElse(helmet)(() => helmet.meta.toComponent(), []),
  ...ifElse(helmet)(() => helmet.link.toComponent(), []),
  ifElse(clientEntryAssets && clientEntryAssets.css)(() => stylesheetTag(clientEntryAssets.css)),
  ...ifElse(helmet)(() => helmet.style.toComponent(), []),
@@ -83,7 +82,9 @@ function ServerHTML(props) {
  process.env.BUILD_FLAG_IS_DEV === 'true' && config('bundles.client.devVendorDLL.enabled'),
  )(() =>
  scriptTag(
- `${config('bundles.client.webPath')}${config('bundles.client.devVendorDLL.name')}.js?t=${Date.now()}`,
+ `${config('bundles.client.webPath')}${config(
+ 'bundles.client.devVendorDLL.name',
+ )}.js?t=${Date.now()}`,
  ),
  ),
  ifElse(clientEntryAssets && clientEntryAssets.js)(() => scriptTag(clientEntryAssets.js)),
@@ -93,10 +94,16 @@ function ServerHTML(props) {
  return (
  <HTML
  htmlAttributes={ifElse(helmet)(() => helmet.htmlAttributes.toComponent(), null)}
- headerElements={headerElements.map((x, idx) => (
- <KeyedComponent key={idx}>{x}</KeyedComponent>
- ))}
- bodyElements={bodyElements.map((x, idx) => <KeyedComponent key={idx}>{x}</KeyedComponent>)}
+ headerElements={headerElements.map((x, idx) =>
+ (<KeyedComponent key={idx}>
+ {x}
+ </KeyedComponent>),
+ )}
+ bodyElements={bodyElements.map((x, idx) =>
+ (<KeyedComponent key={idx}>
+ {x}
+ </KeyedComponent>),
+ )}
  appBodyString={reactAppString}
  />
  );

diff --git a/shared/components/DemoApp/index.js b/shared/components/DemoApp/index.js
@@ -21,15 +21,17 @@ function DemoApp() {
  <div style={{ padding: '2rem' }}>
  <Helmet>
  <html lang="en" />
- <title>{config('htmlPage.defaultTitle')}</title>
+ <meta charSet="utf-8" />
  <meta name="application-name" content={config('htmlPage.defaultTitle')} />
  <meta name="description" content={config('htmlPage.description')} />
- <meta charSet="utf-8" />
  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="msapplication-TileColor" content="#2b2b2b" />
  <meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png" />
  <meta name="theme-color" content="#2b2b2b" />
+ <title>
+ {config('htmlPage.defaultTitle')}
+ </title>
  {/*
  A great reference for favicons:
  https://github.com/audreyr/favicon-cheat-sheet