text: import get from 'lodash.get';
  import React from 'react';
  import { Helmet } from 'react-helmet';
  
  import Layout from './layout';
  
  const Page = (props) => {
    let title = 'Heralded';
    const postTitle = get(
      props.data,
      'post.title',
      get(props, 'pageContext.frontmatter.title')
    );
    const description =
      get(
        props.data,
        'post.excerpt',
        get(props, 'pageContext.frontmatter.excerpt')
      ) || 'Hospitality resources gathered by @JovaniPink';
  
    if (postTitle) {
      title = `${postTitle} | ${title}`;
    }
  
    return (
      <>
        <Helmet
          htmlAttributes={{
            lang: 'en-us',
          }}
        >
          <meta
            name="description"
            content="A list of resources for the Hospitality industry."
          />
          <meta name="heralded" content="Heralded" />
          <meta name="theme-color" content="#211a23" />
  
          <link
            rel="apple-touch-icon"
            sizes="57x57"
            href="/favicon/apple-icon-57x57.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="60x60"
            href="/favicon/apple-icon-60x60.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="72x72"
            href="/favicon/apple-icon-72x72.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="76x76"
            href="/favicon/apple-icon-76x76.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="114x114"
            href="/favicon/apple-icon-114x114.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="120x120"
            href="/favicon/apple-icon-120x120.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="144x144"
            href="/favicon/apple-icon-144x144.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="152x152"
            href="/favicon/apple-icon-152x152.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="180x180"
            href="/favicon/apple-icon-180x180.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="192x192"
            href="/favicon/android-icon-192x192.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="/favicon/favicon-32x32.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="96x96"
            href="/favicon/favicon-96x96.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="16x16"
            href="/favicon/favicon-16x16.png"
          />
          <link rel="manifest" href="/favicon/manifest.json" />
          <meta name="msapplication-TileColor" content="#ffffff" />
          <meta
            name="msapplication-TileImage"
            content="/favicon/ms-icon-144x144.png"
          />
          <meta name="theme-color" content="#ffffff" />
          <link rel="canonical" href={props.location.href} />
          <meta name="twitter:site" content="@heraldedapp" />
          <meta name="og:image" content="/table.jpg" />
          <title>{title}</title>
          <meta name="og:title" content={title} />
          <meta name="og:description" content={description} />
          <meta name="twitter:title" content={title} />
          <meta name="twitter:description" content={description} />
          <meta name="twitter:creator" content="JovaniPink" />
          <meta
            name="twitter:card"
            content="A list of resources for the Hospitality industry."
          />
        </Helmet>
        <Layout {...props}>{props.children}</Layout>
      </>
    );
  };
  
  export const wrapPageElement = ({ element, props }) => (
    <Page {...props}>{element}</Page>
  );
  