Files
supabase/apps/ui-library/app/layout.tsx
Ivan VasilovandAlaister Young 37e44bec9c feat: Add GTM (#35567)
* Add third-parties dependency for GTM. Reexport the GTM from the common package.

* Add the TelemetryTagManager to four of the production apps.

* Add the GOOGLE_TAG_MANAGER_ID env var as a turbo dependency to the 4 apps.

* Skip rendering the tag manager if the env var is not set or not running on the platform.

* Fix the prop type to be extracted from the component.

* Add default values for consent to GTM.

* Another try to mimic gtag function.

* Fix a link in www.

* Try another approach.

* try.

* Remove the data-redaction flag.

* Remove extra code.

* Send a sign-up event if GTM is enabled.

* Send only the email to GTM.

* Minor fixes.

* Remove third-parties from pnpm lockfile.

* Lets try to make studio work again.

* Add CSP rules for img loading for GTM.

* Add event for testing.

* Add www.googletagmanager.com to the CSP rules.

* Add Stape to CSP rules.

* Fix stape CSP.

* Clean up the code.

* Remove extra console.log.

* Fix the stape urls for CORS.

* Fix the wrong category for Stape URL.

* Add google ads urls.

* Bump the timeout.

* Add google.com to the img-src for google ads.

* update csp

* remove comment

* update to use google analytics without signals

* add stape to default-src in csp

* move csp to middleware

* add google ads support and fix middleware base path

* remove google tag manager / google ads references from csp. load via stape proxy instead

* add double click url to image src

* add Google Tag Manager URL to CSP configuration

* add ga4 urls to csp

* remove google urls from CSP

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
2025-06-30 10:35:47 +00:00

61 lines
1.7 KiB
TypeScript

import type { Metadata } from 'next'
import '@/styles/globals.css'
import { API_URL } from '@/lib/constants'
import { FeatureFlagProvider, TelemetryTagManager } from 'common'
import { genFaviconData } from 'common/MetaFavicons/app-router'
import { Inter } from 'next/font/google'
import { ThemeProvider } from './Providers'
import { SonnerToaster } from './SonnerToast'
const inter = Inter({ subsets: ['latin'] })
const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
export const metadata: Metadata = {
applicationName: 'Supabase UI Library',
title: 'Supabase UI Library',
description: 'Provides a library of components for your project',
metadataBase: new URL('https://supabase.com'),
icons: genFaviconData(BASE_PATH),
openGraph: {
type: 'article',
authors: 'Supabase',
url: `${BASE_PATH}`,
images: `${BASE_PATH}/img/supabase-og-image.png`,
publishedTime: new Date().toISOString(),
modifiedTime: new Date().toISOString(),
},
twitter: {
card: 'summary_large_image',
site: '@supabase',
creator: '@supabase',
images: `${BASE_PATH}/img/supabase-og-image.png`,
},
}
interface RootLayoutProps {
children: React.ReactNode
}
export default async function Layout({ children }: RootLayoutProps) {
return (
<html lang="en" suppressHydrationWarning>
<head />
<body className={`${inter.className} antialiased`}>
<TelemetryTagManager />
<FeatureFlagProvider API_URL={API_URL}>
<ThemeProvider
themes={['dark', 'light', 'classic-dark']}
defaultTheme="system"
enableSystem
>
{children}
<SonnerToaster />
</ThemeProvider>
</FeatureFlagProvider>
</body>
</html>
)
}