Socialify

Folder ..

Viewing _app.tsx 
85 lines (77 loc) • 2.4 KB

 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
import App from 'next/app'
import Head from 'next/head'
import Script from 'next/script'
import { Toaster } from 'react-hot-toast'
import { Analytics } from '@vercel/analytics/react'

import { HOST_PREFIX } from '../common/helpers'

import '../styles/global.css'

import HeaderElement from '../src/components/header/header'
import FooterElement from '../src/components/footer/footer'

const GoogleTagManager = () => {
  if (process.env.GTM_ID) {
    return (
      <>
        <Script
          src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GTM_ID}`}
          strategy="afterInteractive"
        />
        <Script id="google-analytics">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){window.dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', '${process.env.GTM_ID}');
          `}
        </Script>
      </>
    )
  }

  return (
    <Script id="google-analytics">
      {`
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
      `}
    </Script>
  )
}

export default class MyApp extends App {
  public render() {
    const { Component, pageProps } = this.props

    return (
      <>
        <Head>
          <meta
            name="viewport"
            content="width=device-width,initial-scale=1,minimal-ui,maximum-scale=1,user-scalable=no"
          />
          <meta name="theme-color" content="#000000" />
          <meta
            name="description"
            content="💞 Socialify your project. 🌐 Share with the world!"
          />
          <meta
            property="og:image"
            content={`${HOST_PREFIX}/assets/socialify.png`}
          />
          <meta property="og:image:type" content="image/png" />
          <meta property="og:image:width" content="1280" />
          <meta property="og:image:height" content="640" />
          <link rel="apple-touch-icon" href="/assets/logo192.png" />
          <link rel="manifest" href="/manifest.json" />
          <title>Socialify - That Computer Scientist Fork</title>
          {GoogleTagManager()}
        </Head>
        <div className="flex flex-col min-h-screen bg-gradient-to-r from-[#231e43] via-[#191630] to-[#15103e]">
          <HeaderElement />
          <div className="flex-1 flex">
            <Component {...pageProps} />
          </div>
          <FooterElement />
          <Toaster />
          <Analytics />
        </div>
      </>
    )
  }
}