NoteBlockWorld/apps/frontend/src/app/layout.tsx at fae61d269e0f42926a05509f4aa5939acc64f0fd · OpenNBS/NoteBlockWorld · 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import { config } from '@fortawesome/fontawesome-svg-core';
import { GoogleAnalytics } from '@next/third-parties/google';
import type { Metadata } from 'next';
import { Lato } from 'next/font/google';
import './globals.css';
import { ReCaptchaProvider } from 'next-recaptcha-v3';
import NextTopLoader from 'nextjs-toploader';
import { NuqsAdapter } from 'nuqs/adapters/next/app';
import { Toaster } from 'react-hot-toast';
import 'react-loading-skeleton/dist/skeleton.css';
import { SkeletonTheme } from 'react-loading-skeleton';
import { WebSite, WithContext } from 'schema-dts';

import DetectAdBlock from '../modules/shared/components/client/ads/DetectAdBlock';
import GoogleAdSense from '../modules/shared/components/GoogleAdSense';
import { isProductionAppEnv } from '@web/lib/appEnv';
import { TooltipProvider } from '../modules/shared/components/tooltip';

// Pre-import FontAwesome CSS to avoid FOUC
// See: https://fontawesome.com/docs/web/use-with/react/use-with#nextjs
import '@fortawesome/fontawesome-svg-core/styles.css';

// Prevent FontAwesome from injecting CSS after initial render
config.autoAddCss = false;

const lato = Lato({
  subsets: ['latin'],
  weight: ['100', '300', '400', '700', '900'],
  variable: '--font-lato',
});

export const metadata: Metadata = {
  title: { template: '%s | Note Block World', default: '' },
  description:
    'Discover, share and listen to note block music from all around the world',
  applicationName: 'Note Block World',
  keywords: ['note block', 'music', 'minecraft', 'nbs', 'note block studio'],
  openGraph: {
    type: 'website',
    images: `${process.env.NEXT_PUBLIC_URL}/nbw-header.png`,
    locale: 'en_US',
    url: process.env.NEXT_PUBLIC_URL,
    siteName: 'Note Block World',
  },
};

const jsonLd: WithContext<WebSite> = {
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: 'Note Block World',
  url: process.env.NEXT_PUBLIC_URL,
  description:
    'Discover, share and listen to note block music from all around the world',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ReCaptchaProvider useEnterprise>
      <html lang='en' className={lato.variable}>
        <head>
          <GoogleAdSense pId={process.env.NEXT_PUBLIC_ADSENSE_CLIENT} />
          {/* https://nextjs.org/docs/app/building-your-application/optimizing/metadata#json-ld */}
          <script
            type='application/ld+json'
            dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
          />
          <link
            rel='apple-touch-icon'
            sizes='180x180'
            href='/icons/apple-touch-icon.png'
          />
          <link
            rel='icon'
            type='image/png'
            sizes='32x32'
            href='/icons/favicon-32x32.png'
          />
          <link
            rel='icon'
            type='image/png'
            sizes='16x16'
            href='/icons/favicon-16x16.png'
          />
          <link rel='manifest' href='/icons/site.webmanifest' />
          <link
            rel='mask-icon'
            href='/icons/safari-pinned-tab.svg'
            color='#3295ff'
          />
          <link rel='shortcut icon' href='/icons/favicon.ico' />
          <meta name='msapplication-TileColor' content='#3295ff' />
          <meta
            name='msapplication-config'
            content='/icons/browserconfig.xml'
          />
          <meta name='theme-color' content='#3295ff' />
        </head>
        <body
          className={`${lato.className} dark bg-zinc-900 text-white h-full`}
        >
          <NextTopLoader
            showSpinner={false}
            crawlSpeed={700}
            speed={700}
            easing='cubic-bezier(0.16, 1, 0.3, 1)' // easeOutExpo
            height={3}
          />
          <Toaster
            position='bottom-center'
            toastOptions={{
              className: 'bg-zinc-700! text-white! max-w-fit!',
              duration: 4000,
            }}
          />
          <SkeletonTheme
            borderRadius='10px'
            baseColor='rgb(39 39 42)'
            highlightColor='rgb(63 63 70)'
          >
            <TooltipProvider delayDuration={0} skipDelayDuration={0}>
              <NuqsAdapter>{children}</NuqsAdapter>
            </TooltipProvider>
          </SkeletonTheme>
          <DetectAdBlock />
        </body>
        {isProductionAppEnv() && process.env.NEXT_PUBLIC_GA_ID && (
          <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
        )}
      </html>
    </ReCaptchaProvider>
  );
}