parcels-code.org/src/components/layout.js at 0c59263ebf332e0123543ecb8ef458a1b44a6410 · Parcels-code/parcels-code.org · 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
import { Banner } from '@/components/banner'
import { Footer } from '@/components/footer'
import { Header } from '@/components/header'
import { Link } from '@/components/mdx'
import { Box, Flex } from '@chakra-ui/react'
import Head from 'next/head'
import ReactGA from 'react-ga4'
import { useEffect } from 'react'

// Google Analytics
ReactGA.initialize('G-62W42QPRQC')

export const Layout = ({
  title,
  description,
  card,
  children,
  url = 'https://oceanparcels.org',
  enableBanner = false,
}) => {
  // Track page views
  useEffect(() => {
    ReactGA.send({ hitType: 'pageview' })
  }, [])

  const bannerTitle =
    'Join the Parcels 10 year anniversary event 🎉 on 1-3 Oct 2025!'
  const bannerDescription = ''
  const bannerChildren = (
    <Link href='https://oceanparcels.org/10year-event'>Learn more</Link>
  )

  // Determine the base URL based on the environment
  const baseUrl =
    process.env.NODE_ENV === 'production'
      ? 'https://oceanparcels.org'
      : 'http://localhost:3000'

  // Construct the full card URL
  const fullCardUrl = card.startsWith('http') ? card : `${baseUrl}${card}`

  return (
    <>
      <Head>
        <meta content='IE=edge' httpEquiv='X-UA-Compatible' />
        <meta content='width=device-width, initial-scale=1' name='viewport' />
        <meta property='og:title' content={title} />
        <meta property='og:description' content={description} />
        <meta property='og:image' content={fullCardUrl} />
        <meta property='og:url' content={url} />
        <meta name='twitter:title' content={title} />
        <meta name='twitter:description' content={description} />
        <meta name='twitter:image' content={fullCardUrl} />
        <meta name='twitter:card' content='summary_large_image' />
        <link
          rel='icon'
          type='image/png'
          sizes='96x96'
          href='/parcels-assets/logo-no-text.svg'
        />
        <link rel='icon' type='image/svg+xml' href='/favicon.svg' />
        <link rel='icon' type='image/png' href='/favicon.png' />

        <title>{title}</title>
      </Head>
      <Flex
        direction={'column'}
        justify={'space-between'}
        gap={0}
        minHeight={'100vh'}
      >
        <Box>
          <Header />
          {enableBanner && (
            <Banner title={bannerTitle} description={bannerDescription}>
              {bannerChildren}
            </Banner>
          )}
          {children}
        </Box>

        <Footer />
      </Flex>
    </>
  )
}

export default Layout