chore(docs): add default og:image (#10777)

docs/app/api/og/route.tsx

@@ -0,0 +1,155 @@
+import { ImageResponse } from "next/og"
+import { type NextRequest } from "next/server"
+
+export const runtime = "edge"
+
+const medium = fetch(new URL("./Inter-Light.ttf", import.meta.url)).then(
+  (res) => res.arrayBuffer()
+)
+
+const bold = fetch(new URL("./Inter-Bold.ttf", import.meta.url)).then((res) =>
+  res.arrayBuffer()
+)
+
+const foreground = "hsl(0 0% 98%)"
+const mutedForeground = "hsl(0 0% 53.9%)"
+const background = "rgba(10, 10, 10, 0.90)"
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url!)
+  const title = searchParams.get("title")
+  const description = searchParams.get("description")
+
+  var url = `data:image/svg+xml;base64,${btoa(backgroundSvg)}`
+
+  return new ImageResponse(
+    OG({
+      title: title ?? "Authentication for the Web.",
+      description: description ?? "",
+      bgSvg: url,
+    }),
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        { name: "Inter", data: await medium, weight: 300 },
+        { name: "Inter", data: await bold, weight: 800 },
+      ],
+    }
+  )
+}
+
+function OG({
+  title,
+  description,
+  bgSvg,
+}: {
+  bgSvg: string
+  title: string
+  description: string
+}) {
+  return (
+    <div
+      tw="flex flex-col w-full h-full pb-12 pt-16 px-16"
+      style={{
+        fontFamily: "'Inter', system-ui, sans-serif",
+        color: foreground,
+        backgroundSize: "1200 630",
+      }}
+    >
+      <img
+        tw="absolute top-0 left-0"
+        style={{ width: 1200, height: 660 }}
+        src={bgSvg}
+      ></img>
+      <div
+        tw="flex flex-col justify-center rounded-2xl p-3 shadow-2xl"
+        style={{
+          background:
+            "linear-gradient(to right bottom, rgb(40, 158, 249), rgb(91, 33, 182))",
+          // New colors: "linear-gradient(to right bottom, rgb(255, 68, 0), rgb(187, 68, 204))",
+        }}
+      >
+        <div
+          tw="flex flex-col items-center rounded-xl p-12"
+          style={{
+            border: "1px rgba(156,163,175,0.3)",
+            background,
+          }}
+        >
+          <p
+            style={{
+              fontSize: "3.5rem",
+              fontWeight: 300,
+              maxHeight: "14rem",
+              overflow: "hidden",
+              textAlign: "center",
+              textWrap: "balance",
+            }}
+          >
+            {title}
+          </p>
+        </div>
+      </div>
+
+      <div tw="flex flex-row items-center justify-between mt-auto p-4">
+        <div tw="flex">
+          <img
+            src="https://authjs.dev/img/logo-sm.png"
+            width={77}
+            height={90}
+          />
+          <p
+            style={{
+              fontWeight: 800,
+              marginLeft: "1rem",
+              fontSize: "2.3rem",
+            }}
+          >
+            Auth.js
+          </p>
+        </div>
+        <p
+          style={{
+            marginLeft: "3rem",
+            color: mutedForeground,
+            fontWeight: 300,
+            fontSize: "2rem",
+          }}
+        >
+          {description}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+const backgroundSvg = `
+<svg width="2560" height="1280" viewBox="0 0 2560 1280" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_511_47)">
+<rect width="2560" height="1280" fill="#111111"/>
+<path d="M438.668 1160.38C1283.52 617.831 3403.85 1713.01 2144.14 1267.27L1980.48 1809.63C1746.84 1726.27 1275.31 1558.8 1258.29 1555.83C1237 1552.12 -35.3605 1436.43 151.807 1269.12C242.949 1225.11 254.011 1278.96 438.668 1160.38Z" fill="url(#paint0_radial_511_47)"/>
+<path d="M2335.05 977.4C1638.8 708.04 1258.25 143.506 1155 -105.091L2257.61 -196C2573.53 307.367 3031.29 1246.76 2335.05 977.4Z" fill="url(#paint1_radial_511_47)"/>
+<path d="M888.078 42.3028C465.467 1294.94 73.8505 662.761 -266.668 854.807L-294.52 -12.0731C-119.086 -25.2806 234.782 -53.0437 246.789 -58.4363C261.797 -65.1771 1132.31 -620.045 1050.51 -275.273C1001.27 -160.866 980.447 -231.483 888.078 42.3028Z" fill="url(#paint2_radial_511_47)"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_511_47" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1016.5 939) rotate(93.0267) scale(757.557 879.417)">
+<stop stop-color="#FF7722"/>
+<stop offset="1" stop-color="#111111"/>
+</radialGradient>
+<radialGradient id="paint1_radial_511_47" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1653 619) rotate(-46.5881) scale(548.572 1194.34)">
+<stop stop-color="#BB44CC"/>
+<stop offset="1" stop-color="#111111"/>
+</radialGradient>
+<radialGradient id="paint2_radial_511_47" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(666.999 571.116) rotate(-129.513) scale(513.947 862.777)">
+<stop stop-color="rgb(40, 158, 249)"/>
+<stop offset="1" stop-color="#111111"/>
+</radialGradient>
+<clipPath id="clip0_511_47">
+<rect width="2560" height="1280" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`
+
+// New colors - '#44BBCC', '#BB44CC', '#FF4400'

docs/components/Docsearch/wrapper.tsx → docs/components/DocSearch/wrapper.tsx

@@ -6,8 +6,8 @@ import { CustomSearchBox } from "./searchInput"
 import Hit from "./hit"
 
 const algoliaClient = algoliasearch(
-  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,
-  process.env.NEXT_PUBLIC_ALGOLIA_KEY
+  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,
+  process.env.NEXT_PUBLIC_ALGOLIA_KEY!
 )
 
 const searchClient = {

docs/components/Footer/index.tsx

@@ -13,7 +13,7 @@ export function Footer({ className = "" }) {
     fetch("https://api.github.com/repos/nextauthjs/next-auth")
       .then((res) => res.json())
       .then((data) => {
-        const githubStat = document.querySelector(".github-counter")
+        const githubStat = document.querySelector(".github-counter")!
         githubStat.innerHTML = kFormatter(data.stargazers_count ?? 21100)
       })
 

docs/components/LogosMarquee/index.tsx

@@ -49,7 +49,7 @@ export const LogosMarquee = memo(() => {
       >
         {Object.entries(manifest.providersOAuth)
           .sort(() => Math.random() - 0.5)
-          .filter((_, i) => i < logoCount)
+          .filter((_, i) => i < logoCount!)
           .map(([key, name]) => (
             <Motion
               key={`company-${key}`}
@@ -61,7 +61,7 @@ export const LogosMarquee = memo(() => {
               initDeg={randomIntFromInterval(0, 360)}
               direction={Math.random() > 0.5 ? "clockwise" : "counterclockwise"}
               velocity={10}
-              radius={scale}
+              radius={scale!}
             >
               <Img
                 src={`/img/providers/${key}.svg`}

docs/components/OAuthProviderInstructions/content/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { getHighlighter } from "shiki"
+import { type Highlighter, getHighlighter } from "shiki"
 import cx from "classnames"
 import { Callout, Pre, Code as NXCode } from "nextra/components"
 
@@ -16,7 +16,7 @@ interface Props {
 }
 
 export function OAuthInstructions({ providerId, disabled = false }: Props) {
-  const [highlighter, setHighlighter] = useState(null)
+  const [highlighter, setHighlighter] = useState<Highlighter | null>(null)
   useEffect(() => {
     ;(async () => {
       const hl = await getHighlighter({
@@ -28,7 +28,7 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
   }, [])
 
   const highlight = (code: string): string => {
-    if (!highlighter) return null
+    if (!highlighter) return ""
     return highlighter.codeToHtml(code, {
       lang: "tsx",
       themes: {

docs/components/RichTabs/useRichTabs.ts

@@ -3,9 +3,9 @@ import { useSearchParams, useRouter, usePathname } from "next/navigation"
 interface Args {
   onTabChange: ((value: string) => void) | undefined
   defaultValue: string
+  value: string
   persist?: boolean
   tabKey?: string
-  value?: string
   setValue?: any
 }
 
@@ -19,11 +19,11 @@ export function useRichTabs({
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const searchParamsTab = searchParams.get(tabKey)
+  const searchParamsTab = searchParams?.get(tabKey)
 
   // Handle searchParams
   if (searchParamsTab && value !== searchParamsTab) {
-    router.push(pathname)
+    router.push(pathname!)
     setValue((prevVal: string) => {
       if (prevVal !== searchParamsTab) {
         return searchParamsTab

docs/components/Tooltip/index.tsx

@@ -30,8 +30,8 @@ export function Tooltip({ label, framework, children }: Props) {
         {children}
       </button>
       <div
-        // @ts-expect-error
         popover="auto"
+        // @ts-expect-error
         ref={popoverTargetRef}
         className="py-2 px-4 max-w-xs text-sm text-center text-fuchsia-900 bg-purple-100 rounded-lg border shadow-md"
         anchor={`anchor-${framework}-${slug}`}

docs/next-env.d.ts

@@ -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/basic-features/typescript for more information.

docs/theme.config.tsx

@@ -2,7 +2,7 @@ import { DocsThemeConfig, ThemeSwitch } from "nextra-theme-docs"
 import { Link } from "@/components/Link"
 import { ChildrenProps } from "@/utils/types"
 import Footer from "@/components/Footer"
-import Docsearch from "@/components/Docsearch"
+import Docsearch from "@/components/DocSearch"
 import dynamic from "next/dynamic"
 import { usePathname } from "next/navigation"
 import { useConfig } from "nextra-theme-docs"
@@ -114,8 +114,8 @@ const config: DocsThemeConfig = {
     const { frontMatter } = useConfig()
     const url = `https://authjs.dev${pathname}`
 
-    const lastPathParam = pathname.split("/").at(-1).replaceAll("-", " ")
-    const capitalizedPathTitle = lastPathParam.replace(/\b\w/g, (l) =>
+    const lastPathParam = pathname?.split("/").at(-1)?.replaceAll("-", " ")
+    const capitalizedPathTitle = lastPathParam?.replace(/\b\w/g, (l) =>
       l.toUpperCase()
     )
     const title = frontMatter.title
@@ -145,6 +145,10 @@ const config: DocsThemeConfig = {
           property="og:description"
           content={frontMatter.description || "Authentication for the Web"}
         />
+        <meta
+          property="og:image"
+          content={`/api/og?title=${encodeURIComponent(title)}`}
+        />
       </>
     )
   },

docs/tsconfig.json

@@ -21,15 +21,22 @@
       "@/icons/*": ["components/Icons/*"],
       "@/icons": ["components/Icons"],
       "@/data/*": ["pages/data/*"]
-    }
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
   "include": [
     "next-env.d.ts",
     "types.d.ts",
     "**/*.ts",
     "**/*.tsx",
     "tailwind.config.js",
-    "pages/_meta.js"
+    "pages/_meta.js",
+    ".next/types/**/*.ts"
   ],
   "exclude": ["node_modules"]
 }

docs/utils/useInkeepSettings.ts

@@ -15,9 +15,9 @@ type InkeepSharedSettings = {
 const useInkeepSettings = (): InkeepSharedSettings => {
   const { resolvedTheme } = useTheme()
   const baseSettings: InkeepWidgetBaseSettings = {
-    apiKey: process.env.NEXT_PUBLIC_INKEEP_API_KEY,
-    integrationId: process.env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID,
-    organizationId: process.env.NEXT_PUBLIC_INKEEP_ORGANIZATION_ID,
+    apiKey: process.env.NEXT_PUBLIC_INKEEP_API_KEY!,
+    integrationId: process.env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID!,
+    organizationId: process.env.NEXT_PUBLIC_INKEEP_ORGANIZATION_ID!,
     primaryBrandColor: "#efe0ff", // your brand color, widget color scheme is derived from this
     organizationDisplayName: "Auth.js",
     theme: {