init

2026-10-17 23:29:08 +03:00 · 2024-10-15 22:12:41 +08:00
1 parent b303834079
commit 306f19c2b4
@@ -12,6 +12,21 @@ import { GlobalProviders } from '~/features/app.providers'
 import { TopNavSkeleton } from '~/layouts/MainSkeleton'
 import { BASE_PATH, IS_PRODUCTION } from '~/lib/constants'

+import { Inter, Roboto_Mono } from 'next/font/google'
+
+// If loading a variable font, you don't need to specify the font weight
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-roboto-mono',
+})
+
 const metadata: Metadata = {
  applicationName: 'Supabase Docs',
  title: 'Supabase Docs',
@@ -45,7 +60,7 @@ const viewport: Viewport = {

 const RootLayout = ({ children }: { children: React.ReactNode }) => {
  return (
-    <html lang="en">
+    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <GlobalProviders>
          <TopNavSkeleton>{children}</TopNavSkeleton>
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
@@ -30,6 +30,7 @@
    "@mdx-js/loader": "^2.1.5",
    "@mdx-js/react": "^2.3.0",
    "@next/bundle-analyzer": "^14.2.3",
+    "@next/font": "^14.2.15",
    "@next/mdx": "^14.2.3",
    "@octokit/auth-app": "^6.0.3",
    "@octokit/core": "^5.1.0",
@@ -0,0 +1,39 @@
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { get, handleError } from 'data/fetchers'
+import { ResponseError } from 'types'
+
+import { apiKeysKeys } from './keys'
+
+export interface APIKeysVariables {
+  projectRef?: string
+}
+
+export async function getAPIKeys({ projectRef }: APIKeysVariables, signal?: AbortSignal) {
+  if (!projectRef) throw new Error('projectRef is required')
+
+  const { data, error } = await get(`/v1/projects/{ref}/api-keys`, {
+    params: { path: { ref: projectRef } },
+    signal,
+  })
+
+  if (error) {
+    handleError(error)
+  }
+
+  return data
+}
+
+export type APIKeysData = Awaited<ReturnType<typeof getAPIKeys>>
+
+export const useAPIKeysQuery = <TData = APIKeysData>(
+  { projectRef }: APIKeysVariables,
+  { enabled, ...options }: UseQueryOptions<APIKeysData, ResponseError, TData> = {}
+) =>
+  useQuery<APIKeysData, ResponseError, TData>(
+    apiKeysKeys.list(projectRef),
+    ({ signal }) => getAPIKeys({ projectRef }, signal),
+    {
+      enabled: enabled && !!projectRef,
+      ...options,
+    }
+  )
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />

 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
@@ -31,6 +31,7 @@
    "@hookform/resolvers": "^3.1.1",
    "@monaco-editor/react": "^4.6.0",
    "@next/bundle-analyzer": "^14.2.3",
+    "@next/font": "^14.2.15",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@sentry/nextjs": "^7.108.0",
@@ -54,6 +54,18 @@ import HCaptchaLoadedStore from 'stores/hcaptcha-loaded-store'
 import { AppPropsWithLayout } from 'types'
 import { SonnerToaster } from 'ui'
 import { CommandProvider } from 'ui-patterns/CommandMenu'
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+})
+
+const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  weight: ['400', '700'],
+  variable: '--font-roboto-mono',
+})

 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
@@ -123,52 +135,62 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
  const isTestEnv = process.env.NEXT_PUBLIC_NODE_ENV === 'test'

  return (
-    <ErrorBoundary FallbackComponent={ErrorBoundaryState} onError={errorBoundaryHandler}>
-      <QueryClientProvider client={queryClient}>
-        <Hydrate state={pageProps.dehydratedState}>
-          <AuthContainer>
-            <FlagProvider>
-              <ProfileProvider>
-                <Head>
-                  <title>Supabase</title>
-                  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-                </Head>
-                <MetaFaviconsPagesRouter applicationName="Supabase Studio" />
-                <PageTelemetry>
-                  <TooltipProvider>
-                    <RouteValidationWrapper>
-                      <ThemeProvider
-                        defaultTheme="system"
-                        themes={['dark', 'light', 'classic-dark']}
-                        enableSystem
-                        disableTransitionOnChange
-                      >
-                        <AppBannerContextProvider>
-                          <CommandProvider>
-                            <AppBannerWrapper>
-                              <FeaturePreviewContextProvider>
-                                {getLayout(<Component {...pageProps} />)}
-                                <StudioCommandMenu />
-                                <GenerateSql />
-                                <FeaturePreviewModal />
-                              </FeaturePreviewContextProvider>
-                            </AppBannerWrapper>
-                            <SonnerToaster position="top-right" />
-                          </CommandProvider>
-                        </AppBannerContextProvider>
-                      </ThemeProvider>
-                    </RouteValidationWrapper>
-                  </TooltipProvider>
-                </PageTelemetry>
+    <>
+      <style jsx global>{`
+        :root {
+          --font-inter: ${inter.style.fontFamily};
+          --font-roboto-mono: ${roboto_mono.style.fontFamily};
+        }
+      `}</style>
+      <ErrorBoundary FallbackComponent={ErrorBoundaryState} onError={errorBoundaryHandler}>
+        <QueryClientProvider client={queryClient}>
+          <Hydrate state={pageProps.dehydratedState}>
+            <AuthContainer>
+              <FlagProvider>
+                <ProfileProvider>
+                  <Head>
+                    <title>Supabase</title>
+                    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+                  </Head>
+                  <MetaFaviconsPagesRouter applicationName="Supabase Studio" />
+                  <PageTelemetry>
+                    <TooltipProvider>
+                      <RouteValidationWrapper>
+                        <ThemeProvider
+                          defaultTheme="system"
+                          themes={['dark', 'light', 'classic-dark']}
+                          enableSystem
+                          disableTransitionOnChange
+                        >
+                          <AppBannerContextProvider>
+                            <CommandProvider>
+                              <AppBannerWrapper>
+                                <FeaturePreviewContextProvider>
+                                  {getLayout(<Component {...pageProps} />)}
+                                  <StudioCommandMenu />
+                                  <GenerateSql />
+                                  <FeaturePreviewModal />
+                                </FeaturePreviewContextProvider>
+                              </AppBannerWrapper>
+                              <SonnerToaster position="top-right" />
+                            </CommandProvider>
+                          </AppBannerContextProvider>
+                        </ThemeProvider>
+                      </RouteValidationWrapper>
+                    </TooltipProvider>
+                  </PageTelemetry>

-                {!isTestEnv && <HCaptchaLoadedStore />}
-                {!isTestEnv && <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />}
-              </ProfileProvider>
-            </FlagProvider>
-          </AuthContainer>
-        </Hydrate>
-      </QueryClientProvider>
-    </ErrorBoundary>
+                  {!isTestEnv && <HCaptchaLoadedStore />}
+                  {!isTestEnv && (
+                    <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
+                  )}
+                </ProfileProvider>
+              </FlagProvider>
+            </AuthContainer>
+          </Hydrate>
+        </QueryClientProvider>
+      </ErrorBoundary>
+    </>
  )
 }

@@ -24,7 +24,6 @@ class MyDocument extends Document {
                : `${BASE_PATH}/monaco-editor/editor/editor.main.css`
            }
          />
-          <link rel="stylesheet" type="text/css" href={`${BASE_PATH}/css/fonts.css`} />
        </Head>
        <body>
          <Main />
@@ -19,6 +19,7 @@
    "@heroicons/react": "^1.0.6",
    "@mdx-js/react": "^2.3.0",
    "@next/bundle-analyzer": "^14.2.3",
+    "@next/font": "^14.2.15",
    "@next/mdx": "^14.2.3",
    "@octokit/auth-app": "^6.0.3",
    "@octokit/core": "^5.0.2",
@@ -87,9 +88,9 @@
    "@types/classnames": "^2.3.1",
    "@types/common-tags": "^1.8.4",
    "@types/dat.gui": "^0.7.10",
+    "@types/lodash": "^4.0.0",
    "@types/mdx-js__react": "^1.5.6",
    "@types/node": "^20.11.16",
-    "@types/lodash": "^4.0.0",
    "@types/parse-numeric-range": "^0.0.1",
    "@types/react": "^18.2.24",
    "@types/react-copy-to-clipboard": "^5.0.4",
@@ -22,6 +22,18 @@ import { API_URL, APP_NAME, DEFAULT_META_DESCRIPTION, IS_PREVIEW } from '~/lib/c
 import { post } from '~/lib/fetchWrapper'
 import supabase from '~/lib/supabase'
 import useDarkLaunchWeeks from '../hooks/useDarkLaunchWeeks'
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+})
+
+const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  weight: ['400', '700'],
+  variable: '--font-roboto',
+})

 export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter()
@@ -86,6 +98,12 @@ export default function App({ Component, pageProps }: AppProps) {

  return (
    <>
+      <style jsx global>{`
+        :root {
+          --font-inter: ${inter.style.fontFamily};
+          --font-roboto-mono: ${roboto_mono.style.fontFamily};
+        }
+      `}</style>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
@@ -861,6 +861,7 @@
        "@mdx-js/loader": "^2.1.5",
        "@mdx-js/react": "^2.3.0",
        "@next/bundle-analyzer": "^14.2.3",
+        "@next/font": "^14.2.15",
        "@next/mdx": "^14.2.3",
        "@octokit/auth-app": "^6.0.3",
        "@octokit/core": "^5.1.0",
@@ -1817,6 +1818,7 @@
        "@hookform/resolvers": "^3.1.1",
        "@monaco-editor/react": "^4.6.0",
        "@next/bundle-analyzer": "^14.2.3",
+        "@next/font": "^14.2.15",
        "@radix-ui/react-popover": "^1.0.7",
        "@radix-ui/react-tooltip": "^1.0.7",
        "@sentry/nextjs": "^7.108.0",
@@ -3000,6 +3002,7 @@
        "@heroicons/react": "^1.0.6",
        "@mdx-js/react": "^2.3.0",
        "@next/bundle-analyzer": "^14.2.3",
+        "@next/font": "^14.2.15",
        "@next/mdx": "^14.2.3",
        "@octokit/auth-app": "^6.0.3",
        "@octokit/core": "^5.0.2",
@@ -9427,6 +9430,14 @@
        "glob": "10.3.10"
      }
    },
+    "node_modules/@next/font": {
+      "version": "14.2.15",
+      "resolved": "https://registry.npmjs.org/@next/font/-/font-14.2.15.tgz",
+      "integrity": "sha512-QopYhBmCDDrNDynbi+ZD1hDZXmQXVFo7TmAFp4DQgO/kogz1OLbQ92hPigJbj572eZ3GaaVxNIyYVn3/eAsehg==",
+      "peerDependencies": {
+        "next": "*"
+      }
+    },
    "node_modules/@next/mdx": {
      "version": "14.2.3",
      "resolved": "https://registry.npmjs.org/@next/mdx/-/mdx-14.2.3.tgz",
@@ -361,9 +361,15 @@ const uiConfig = ui({
        xs: '480px',
      },
      fontFamily: {
-        sans: ['Circular', 'custom-font', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
-        mono: ['Office Code Pro', 'Source Code Pro', 'Menlo', 'monospace'],
+        // sans: ['Circular', 'custom-font', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+        sans: ['var(--font-inter)'],
+        mono: ['var(--font-roboto-mono)'],
+        // mono: ['Office Code Pro', 'Source Code Pro', 'Menlo', 'monospace'],
      },
+      // fontFamily: {
+      //   sans: ['var(--font-inter)'],
+      //   mono: ['var(--font-roboto-mono)'],
+      // },

      // shadcn defaults START
      keyframes: {