Merge branch 'source' into landing--interactive-editor-on-landing

Author: hasparus

.eslintrc.cjs

@@ -59,25 +59,22 @@ module.exports = {
         "@next/next/no-img-element": "off", // straight up upsell, small `img`s actually don't need optimization
 
         "tailwindcss/classnames-order": "off",
-        "@typescript-eslint/no-restricted-imports": [
-          "error",
-          {
-            paths: [
-              {
-                name: "next/image",
-                message: "Please use `next-image-export-optimizer` instead",
-                allowTypeImports: true,
-              },
-            ],
-          },
-        ],
         "prefer-const": ["error", { destructuring: "all" }],
         "prefer-rest-params": "off",
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-unused-vars": "off",
         "@typescript-eslint/ban-ts-comment": "off",
         "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/ban-types": "off",
+        "no-restricted-syntax": [
+          "error",
+          {
+            selector:
+              "JSXElement[openingElement.name.name=/^(Image|NextImage)$/]:not(:has(JSXAttribute[name.name='placeholder']))",
+            message:
+              "Pass `placeholder: 'empty' | 'blur'` when calling <Image> or <NextImage>.",
+          },
+        ],
       },
       settings: {
         tailwindcss: {

.prettierrc

@@ -7,6 +7,7 @@ import withLess from "next-with-less"
 import nextBundleAnalyzer from "@next/bundle-analyzer"
 import fs from "fs"
 import rehypeMermaid from "rehype-mermaid"
+import withPlaiceholder from "@plaiceholder/next"
 
 import { remarkGraphiQLComment } from "./src/remark-graphiql-comment.js"
 import { syntaxHighlightingThemes } from "./src/_design-system/syntax/index.js"
@@ -111,24 +112,14 @@ const config = {
     return config
   },
   images: {
-    loader: "custom",
-    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    remotePatterns: [
+      {
+        hostname: "avatars.sched.co",
+        pathname: "**",
+      },
+    ],
   },
-  transpilePackages: ["next-image-export-optimizer"],
   env: {
-    nextImageExportOptimizer_imageFolderPath: "public/images",
-    nextImageExportOptimizer_exportFolderPath: "out",
-    nextImageExportOptimizer_quality: "75",
-    nextImageExportOptimizer_storePicturesInWEBP: "true",
-    nextImageExportOptimizer_exportFolderName: "nextImageExportOptimizer",
-    // If you do not want to use blurry placeholder images, then you can set
-    // nextImageExportOptimizer_generateAndUseBlurImages to false and pass
-    // `placeholder="empty"` to all <ExportedImage> components.
-    nextImageExportOptimizer_generateAndUseBlurImages: "true",
-    // If you want to cache the remote images, you can set the time to live of the cache in seconds.
-    // The default value is 0 seconds.
-    nextImageExportOptimizer_remoteImageCacheTTL: "0",
     NEXT_PUBLIC_GA_ID:
       process.env.NODE_ENV === "production" ? "UA-44373548-16" : "",
   },
@@ -172,13 +163,16 @@ const config = {
       },
     ]
   },
+  typedRoutes: true,
 }
 
 const withBundleAnalyzer = nextBundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
 })
 
-export default withBundleAnalyzer(withLess(withNextra(config)))
+export default withBundleAnalyzer(
+  withLess(withNextra(withPlaiceholder(config))),
+)
 
 function mermaidConfig() {
   return [

next.config.js

@@ -6,7 +6,7 @@
   "packageManager": "pnpm@10.16.1+sha512.0e155aa2629db8672b49e8475da6226aa4bdea85fdcdfdc15350874946d4f3c91faaf64cbdc4a5d1ab8002f473d5c3fcedcd197989cf0390f9badd3c04678706",
   "scripts": {
     "analyze": "ANALYZE=true next build",
-    "build": "next build && next-image-export-optimizer",
+    "build": "next build",
     "check:links": "lychee --verbose --no-progress './src/pages/**/*.mdx' --base https://graphql.org",
     "dev": "next",
     "format": "pnpm format:check --write",
@@ -16,7 +16,7 @@
     "lint:docs:ci": "eslint --ignore-path .gitignore src/pages/learn --format eslint-formatter-github",
     "postbuild": "next-sitemap",
     "prebuild": "tsx scripts/get-github-info && tsx scripts/sync-landing-schema/src/index.ts",
-    "serve": "pnpx serve out",
+    "start": "next start",
     "test": "playwright test && pnpm test:unit",
     "test:e2e": "playwright test",
     "test:ui": "playwright test --ui",
@@ -36,6 +36,7 @@
     "@igorkowalczyk/is-browser": "^5.1.0",
     "@lezer/highlight": "^1.2.1",
     "@next/bundle-analyzer": "^15.4.5",
+    "@plaiceholder/next": "^3.0.0",
     "@radix-ui/react-radio-group": "^1.2.2",
     "@sparticuz/chromium": "^138.0.2",
     "@tailwindcss/container-queries": "^0.1.1",
@@ -57,7 +58,6 @@
     "markdown-to-jsx": "^7.7.2",
     "motion": "^12.11.0",
     "next": "^14.2.32",
-    "next-image-export-optimizer": "^1.18.0",
     "next-query-params": "^5.0.1",
     "next-sitemap": "^4.2.3",
     "next-with-less": "^3.0.1",
@@ -66,6 +66,7 @@
     "numbro": "2.5.0",
     "p-limit": "^4.0.0",
     "parser-front-matter": "1.6.4",
+    "plaiceholder": "^3.0.0",
     "playwright-core": "^1.54.2",
     "postcss": "^8.4.49",
     "postcss-import": "^16.1.1",

package.json

@@ -1,8 +1,8 @@
 diff --git a/dist/index.d.mts b/dist/index.d.mts
-index 71f87bcd1dde49d7c19ad49fc098e715a76c5c10..aadd6228910ee3ebafccfae8672cb9ae1b0bca3c 100644
+index 71f87bcd1dde49d7c19ad49fc098e715a76c5c10..53dffe4fbe5fb2a92cb55a0466bf95315f904e4e 100644
 --- a/dist/index.d.mts
 +++ b/dist/index.d.mts
-@@ -1421,3 +1421,25 @@ declare function ThemeSwitch({ lite, className }: ThemeSwitchProps): ReactElemen
+@@ -1421,3 +1421,24 @@ declare function ThemeSwitch({ lite, className }: ThemeSwitchProps): ReactElemen
  declare function Layout({ children, themeConfig, pageOpts }: NextraThemeLayoutProps): ReactElement;
 
  export { Bleed, Collapse, type PartialDocsThemeConfig as DocsThemeConfig, Link, LocaleSwitch, Navbar, NotFoundPage, SkipNavContent, SkipNavLink, ThemeSwitch, Layout as default, getComponents, useConfig, useMenu, useThemeConfig };
@@ -22,14 +22,13 @@ index 71f87bcd1dde49d7c19ad49fc098e715a76c5c10..aadd6228910ee3ebafccfae8672cb9ae
 +export declare const useIntersectionObserver: () => IntersectionObserver | null
 +export declare const useSlugs: () => WeakMap<any, any>
 +
-+export declare const Breadcrumb: (props: { activePath: Item[] }) => ReactElement | null
 +export declare const NavLinks: (props: NavLinkProps) => ReactElement | null
 +export interface NavLinkProps {
 +  currentIndex: number
 +  flatDocsDirectories: Item[]
 +}
 diff --git a/dist/index.js b/dist/index.js
-index 56201641fd965dcc5ab7c5df53e444c41293c00e..07147c688ae75c4c7daf082833acc71de16b36ee 100644
+index 56201641fd965dcc5ab7c5df53e444c41293c00e..29a446663f5d24acad0389f873c5e31be910717c 100644
 --- a/dist/index.js
 +++ b/dist/index.js
 @@ -100,10 +100,10 @@ IntersectionObserverContext.displayName = "IntersectionObserver";
@@ -47,16 +46,52 @@ index 56201641fd965dcc5ab7c5df53e444c41293c00e..07147c688ae75c4c7daf082833acc71d
  var ActiveAnchorProvider = ({
    children
  }) => {
-@@ -526,7 +526,7 @@ import NextLink2 from "next/link";
- import { ArrowRightIcon } from "nextra/icons";
- import { Fragment as Fragment3 } from "react";
- import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+@@ -520,44 +520,6 @@ function Bleed({
+   );
+ }
+ 
+-// src/components/breadcrumb.tsx
+-import cn4 from "clsx";
+-import NextLink2 from "next/link";
+-import { ArrowRightIcon } from "nextra/icons";
+-import { Fragment as Fragment3 } from "react";
+-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 -function Breadcrumb({
-+export function Breadcrumb({
-   activePath
- }) {
-   return /* @__PURE__ */ jsx9("div", { className: "nextra-breadcrumb _mt-1.5 _flex _items-center _gap-1 _overflow-hidden _text-sm _text-gray-500 dark:_text-gray-400 contrast-more:_text-current", children: activePath.map((item, index, arr) => {
-@@ -1255,7 +1255,7 @@ var classes = {
+-  activePath
+-}) {
+-  return /* @__PURE__ */ jsx9("div", { className: "nextra-breadcrumb _mt-1.5 _flex _items-center _gap-1 _overflow-hidden _text-sm _text-gray-500 dark:_text-gray-400 contrast-more:_text-current", children: activePath.map((item, index, arr) => {
+-    const nextItem = arr[index + 1];
+-    const href = nextItem ? item.withIndexPage ? item.route : item.children[0].route === nextItem.route ? "" : item.children[0].route : "";
+-    const ComponentToUse = href ? NextLink2 : "span";
+-    return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+-      index > 0 && /* @__PURE__ */ jsx9(
+-        ArrowRightIcon,
+-        {
+-          height: "14",
+-          className: "_shrink-0 rtl:_rotate-180"
+-        }
+-      ),
+-      /* @__PURE__ */ jsx9(
+-        ComponentToUse,
+-        __spreadProps(__spreadValues({
+-          className: cn4(
+-            "_whitespace-nowrap _transition-colors",
+-            nextItem ? "_min-w-6 _overflow-hidden _text-ellipsis" : "_font-medium _text-gray-700 contrast-more:_font-bold contrast-more:_text-current dark:_text-gray-100 contrast-more:dark:_text-current",
+-            href && "nextra-focus _ring-inset hover:_text-gray-900 dark:hover:_text-gray-100"
+-          ),
+-          title: item.title
+-        }, href && { href }), {
+-          children: item.title
+-        })
+-      )
+-    ] }, item.route + item.name);
+-  }) });
+-}
+-
+ // src/components/collapse.tsx
+ import cn5 from "clsx";
+ import { useEffect as useEffect3, useRef as useRef3 } from "react";
+@@ -1255,7 +1217,7 @@ var classes = {
    ),
    icon: cn10("_inline _h-5 _shrink-0")
  };
@@ -65,3 +100,11 @@ index 56201641fd965dcc5ab7c5df53e444c41293c00e..07147c688ae75c4c7daf082833acc71d
    flatDocsDirectories,
    currentIndex
  }) {
+@@ -2421,7 +2383,6 @@ function Body({ children }) {
+         themeContext.typesetting === "article" && "nextra-body-typesetting-article"
+       ),
+       children: /* @__PURE__ */ jsxs17("main", { className: "_w-full _min-w-0 _max-w-6xl _px-6 _pt-4 md:_px-12", children: [
+-        activeType !== "page" && themeContext.breadcrumb && /* @__PURE__ */ jsx26(Breadcrumb, { activePath }),
+         body
+       ] })
+     }

patches/nextra-theme-docs.patch

@@ -1,14 +1,3 @@
-diff --git a/dist/client/components/image.js b/dist/client/components/image.js
-index 239d72f5921e2d1b7359e569ae5b74c12d7c9d8a..ebeb619da1e3ccb7722e9388c92c1e2192527027 100644
---- a/dist/client/components/image.js
-+++ b/dist/client/components/image.js
-@@ -1,5 +1,5 @@
- import { jsx } from "react/jsx-runtime";
--import NextImage from "next/image";
-+import NextImage from "next-image-export-optimizer";
- import { forwardRef } from "react";
- const Image = forwardRef((props, ref) => {
-   const ComponentToUse = typeof props.src === "object" ? NextImage : "img";
 diff --git a/dist/client/components/index.js b/dist/client/components/index.js
 index 9d05118d3d10e746cd2c020785a0f34465bb8570..218107600d7efed1b5f9d49f0a696b166917d1ce 100644
 --- a/dist/client/components/index.js