xarray.dev/src/components/layout.js at b7006dba02a28e84ce480e01f24d9f26d8175822 · xarray-contrib/xarray.dev · 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
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'

export const Layout = ({
  title,
  description,
  card,
  children,
  url = 'https://xarray.dev',
  enableBanner = false,
  type = 'website',
  imageWidth,
  imageHeight,
  publishedTime,
  authors,
}) => {
  const bannerTitle = 'Check out the latest blog post:'
  // The first link will be the main description for the banner
  const bannerDescription = (
    <Link href='/blog/xarray-napari-plan' fontWeight='medium'>
      {' '}
      {/* Ensure it stands out a bit */}
      Xarray ❤️ napari: A plan for seamless integration
    </Link>
  )
  // The second link will be passed as children, styled to be smaller
  // const bannerChildren = (
  //   <Link
  //     href='https://docs.google.com/forms/d/e/1FAIpQLSeGvTLONF-24V7z2HoACm4MhEr82c2V-VIzA9eqM9-jt-Xh8g/viewform?usp=sharing&ouid=111570313164368772519'
  //     fontSize='sm'
  //   >
  //     {' '}
  //     {/* Add your second link here, smaller font */}
  //     <b>SciPy 2025</b> Click here for info about an Xarray for Bio Sprint!
  //   </Link>
  //)

  // Base URL is set via build command (DEPLOY_PRIME_URL for previews, production URL otherwise)
  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'

  // Canonical URL always points to production for SEO
  const canonicalBaseUrl = 'https://xarray.dev'
  const canonicalUrl = url.startsWith('http')
    ? url
    : `${canonicalBaseUrl}${url}`

  // Construct the full card URL
  const fullCardUrl = card.startsWith('http') ? card : `${baseUrl}${card}`
  // Construct the full URL for og:url (uses preview URL in previews, production in prod)
  const fullUrl = url.startsWith('http') ? url : `${baseUrl}${url}`

  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} />
        {imageWidth && <meta property='og:image:width' content={imageWidth} />}
        {imageHeight && (
          <meta property='og:image:height' content={imageHeight} />
        )}
        <meta property='og:url' content={fullUrl} />
        <meta property='og:type' content={type} />
        {type === 'article' && publishedTime && (
          <meta property='article:published_time' content={publishedTime} />
        )}
        {type === 'article' &&
          authors &&
          authors.map((author) => (
            <meta
              key={author.github}
              property='article:author'
              content={`https://github.com/${author.github}`}
            />
          ))}
        <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' />
        <meta name='twitter:site' content='@xarray_dev' />
        <link rel='canonical' href={canonicalUrl} />
        <link
          rel='icon'
          type='image/png'
          sizes='96x96'
          href='/Xarray-assets/Icon/Xarray_Icon_final.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