{title}

/* eslint-disable no-process-env */ import Head from 'next/head' import {type ComponentProps, memo, useCallback} from 'react' // @ts-ignore import iconApple from './apple-touch-icon.png' // @ts-ignore import iconIco from './favicon.ico' // @ts-ignore import iconSvg from './favicon.svg' // @ts-ignore import icon192 from './favicon-192.png' // @ts-ignore import icon512 from './favicon-512.png' import type {MetaThemeColors} from './utils' import webmanifest from './webmanifest.json' // Interop between how Parcel and Next deals with asset imports const interop = (href: string | {src: string}): string => typeof href === 'string' ? href : href.src export interface NextStudioHeadProps extends Partial { children?: ComponentProps['children'] title?: string favicons?: boolean } const NextStudioHeadComponent = ({ children, themeColorDark, themeColorLight, title = 'Sanity Studio', favicons, }: NextStudioHeadProps) => { const inlineWebmanifest = useCallback(() => { const manifest = JSON.parse(JSON.stringify(webmanifest)) const icons = manifest.icons.map((icon: any) => { // Inline manifests works best when URLs are absolute const src = // eslint-disable-next-line no-nested-ternary icon.src === './favicon-192.png' ? interop(icon192) : icon.src === './favicon-512.png' ? interop(icon512) : icon.src return { ...icon, src: process.env.NEXT_PUBLIC_VERCEL_URL ? new URL(src, `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`).toString() : src, } }) return `data:application/manifest+json,${encodeURIComponent( JSON.stringify({...manifest, icons}) )}` }, []) return ( {title && {title}} {favicons && } {favicons && } {favicons && } {favicons && ( )} {/* These theme-color tags makes the Studio look really really good on devices like iPads as the browser chrome adopts the Studio background */} {themeColorLight && ( )} {themeColorDark && ( )} {children} ) } export const NextStudioHead = memo(NextStudioHeadComponent)