digital-collections/app/layout.tsx at qa · NYPL/digital-collections · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import React from "react";
import newrelic from "newrelic";
import { Metadata } from "next";
import { headers } from "next/headers";
import Script from "next/script";

import "./globals.css";

export const metadata: Metadata = {
  title: "NYPL Digital Collections",
  description:
    "NYPL's Digital Collections is a living database featuring prints, photographs, maps, manuscripts, video, and more unique research materials.",
  openGraph: {
    title: "NYPL Digital Collections",
    description:
      "Explore hundreds of thousands of digital items from The New York Public Library.",
    url: "https://digitalcollections.nypl.org/",
    type: "website",
    siteName: "NYPL Digital Collections",
    images: [
      {
        url: "https://digitalcollections.nypl.org/featured_items/ps_mss_831.jpg",
        width: 1200,
        height: 630,
        alt: "NYPL Digital Collections",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    site: "@nypl",
    creator: "@nypl",
    title: "NYPL Digital Collections",
    description:
      "Explore hundreds of thousands of digital items from The New York Public Library.",
    images: [
      "https://digitalcollections.nypl.org/featured_items/ps_mss_831.jpg",
    ],
  },
  verification: {
    google: "oLXa8JvslCKNxtg-fzL1aL8Q_yNmWvxExwaGs8UgyRM",
  },
};

export async function generateViewport() {
  const userAgent = headers().get("user-agent");
  const isiPhone = /iphone/i.test(userAgent ?? "");

  return isiPhone
    ? {
        width: "device-width",
        initialScale: 1,
        maximumScale: 1,
        userScalable: false,
      }
    : {};
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // Not ideal but `any` for now.
  const newRelicTyped: any = newrelic;
  // Track data for New Relic Browser
  if (newRelicTyped?.agent?.collector?.isConnected() === false) {
    await new Promise((resolve) => {
      newRelicTyped?.agent?.on("connected", resolve);
    });
  }
  const browserTimingHeader = newRelicTyped?.getBrowserTimingHeader({
    hasToRemoveScriptWrapper: true,
    allowTransactionlessInjection: true,
  });

  return (
    <html lang="en">
      <head>
        <script>window.dataLayer = window.dataLayer || [];</script>

        {/* <!-- Google Tag Manager --> */}
        <Script
          id="ga4-gtm"
          strategy="afterInteractive"
          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-RKWC');
              `,
          }}
        />
        {/* <!-- End Google Tag Manager --> */}
        <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      </head>
      <body>
        {/* <!-- Google Tag Manager (noscript) --> */}
        <noscript>
          <iframe
            src="https://www.googletagmanager.com/ns.html?id=GTM-RKWC"
            height="0"
            width="0"
            style={{ display: "none", visibility: "hidden" }}
          ></iframe>
        </noscript>

        {/* <!-- End Google Tag Manager (noscript) --> */}
        {/* <!-- OptinMonster --> */}
        {/* <!-- This site is converting visitors into subscribers and customers with OptinMonster - https://optinmonster.com --> */}
        <Script
          id="optinmonster"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html:
              "(function(d,u,ac){var s=d.createElement('script');s.type='text/javascript';s.src='https://a.omappapi.com/app/js/api.min.js';s.async=true;s.dataset.user=u;s.dataset.account=ac;d.getElementsByTagName('head')[0].appendChild(s);})(document,12468,1044);",
          }}
        />
        {/* <!-- / OptinMonster --> */}
        {children}
        <div id="nypl-footer"></div>
        <Script
          src="https://ds-header.nypl.org/footer.min.js?containerId=nypl-footer"
          strategy="lazyOnload"
          async
        ></Script>
        <Script
          id="nr-browser-agent"
          // By setting the strategy to "beforeInteractive" we guarantee that
          // the script will be added to the document's `head` element.
          strategy="beforeInteractive"
          dangerouslySetInnerHTML={{ __html: browserTimingHeader }}
        />
      </body>
    </html>
  );
}