text: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import ReactDOM from 'react-dom/server';
  import serialize from 'serialize-javascript';
  import Helmet from 'react-helmet';
  
  import { GTM_ID } from '../config';
  
  /**
   * Wrapper component containing HTML metadata and boilerplate tags.
   * Used in server-side code only to wrap the string output of the
   * rendered route component.
   *
   * The only thing this component doesn't (and can't) include is the
   * HTML doctype declaration, which is added to the rendered output
   * by the server.js file.
   */
  export default class Html extends Component {
    static propTypes = {
      assets: PropTypes.object,
      component: PropTypes.node,
      store: PropTypes.object,
    };
  
    render() {
      const { assets, component, store } = this.props;
      const content = component ? ReactDOM.renderToString(component) : '';
      const head = Helmet.rewind();
  
      return (
        <html lang="zh-TW">
          <head>
            {head.base.toComponent()}
            {head.title.toComponent()}
            {head.meta.toComponent()}
            {head.link.toComponent()}
            {head.script.toComponent()}
  
            <link
              rel="shortcut icon"
              href="https://image.goodjob.life/favicon.ico"
            />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <meta charSet="UTF-8" />
            {assets.client.css && (
              <link rel="stylesheet" href={assets.client.css} />
            )}
            {/* include Sentry library for reporting website error --> */}
            <script
              src="https://cdn.ravenjs.com/3.26.4/raven.min.js"
              crossOrigin="anonymous"
            />
            {/* install google tag manager */}
            <script
              dangerouslySetInnerHTML={{
                __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                })(window,document,'script','dataLayer','${GTM_ID}');`,
              }}
            />
          </head>
          <body>
            {/* install google tag manager */}
            <noscript>
              {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
              <iframe
                src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
                height="0"
                width="0"
                style={{ display: 'none', visibility: 'hidden' }}
              />
            </noscript>
            <div
              id="root"
              // eslint-disable-next-line react/no-danger
              dangerouslySetInnerHTML={{ __html: content }}
            />
            <script
              // eslint-disable-next-line react/no-danger
              dangerouslySetInnerHTML={{
                __html: `window.__data=${serialize(store.getState())};`,
              }}
              charSet="UTF-8"
            />
            <script src={assets.client.js} charSet="UTF-8" />
          </body>
        </html>
      );
    }
  }
  