Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
mastodon
GitHub Repository: mastodon/joinmastodon
 Path: blob/main/components/Layout.tsx
1006 views
1
import Head from "next/head"

2
import { StaticImageData } from "next/image"

3
import { useRouter } from "next/router"

4


5
import Footer from "./Footer"

6
import Header from "./Header"

7


8
import { locales, defaultLocale } from "../data/locales"

9
import defaultPreviewImage from "../public/preview.png"

10


11
const BASE_URL = "https://joinmastodon.org"

12


13
/** Default layout component */

14
export const Layout = ({

15
  children,

16
  transparentHeader,

17
  previewImage,

18
}: {

19
  children: React.ReactNode

20
  transparentHeader?: boolean

21
  previewImage?: StaticImageData

22
}) => {

23
  const router = useRouter()

24


25
  const currentLocale = router.locale

26
  const currentPath = router.asPath

27
  const metaPreviewImage = previewImage || defaultPreviewImage

28


29
  return (

30
    <div className="mx-auto max-w-site px-6 lg:px-16">

31
      <a

32
        className="sr-only top-0 left-0 z-20 block bg-blurple-900 text-white focus:not-sr-only focus:absolute focus:p-2"

33
        href="#main"

34
      >

35
        Skip to main content

36
      </a>

37


38
      <Header transparent={transparentHeader} />

39
      <main id="main">{children}</main>

40
      <Footer />

41


42
      <Head>

43
        <meta

44
          property="og:image"

45
          content={`${BASE_URL}${metaPreviewImage.src}`}

46
        />

47
        <meta property="twitter:card" content="summary_large_image" />

48


49
        {locales

50
          .filter((locale) => locale.code !== currentLocale)

51
          .map((locale) => (

52
            <link

53
              key={locale.code}

54
              rel="alternate"

55
              hrefLang={locale.code}

56
              href={`${BASE_URL}${

57
                locale.code === defaultLocale ? "" : `/${locale.code}`

58
              }${currentPath}`}

59
            />

60
          ))}

61


62
        <link

63
          rel="canonical"

64
          href={`${BASE_URL}${

65
            currentLocale === defaultLocale ? "" : `/${currentLocale}`

66
          }${currentPath}`}

67
        />

68
      </Head>

69
    </div>

70
  )

71
}

72


73
export default Layout

74


75