docs(website): Restyle playground chrome and diff highlighting

.circleci/config.yml

@@ -249,13 +249,14 @@ jobs:
             elif [ "<< parameters.react-version >>" == "19.3" ]; then
               yarn test:ci --maxWorkers=4 --selectProjects ReactDOM --testPathPatterns 'packages/react/src/__tests__/concurrent-.*\.web\.tsx' 'packages/react/src/hooks/__tests__/useCacheState.web.tsx'
             else
-              curl -Os https://uploader.codecov.io/latest/linux/codecov;
-              chmod +x codecov;
+              curl -fsSO --connect-timeout 10 --max-time 60 https://uploader.codecov.io/latest/linux/codecov && chmod +x codecov || echo "Codecov uploader download failed; skipping coverage upload";
               yarn run test:coverage --ci --maxWorkers=4 --selectProjects ReactDOM Node --coverageReporters=text-lcov > ./lcov.info;
-              if [ "$CODECOV_TOKEN" != "" ]; then
-                ./codecov -t ${CODECOV_TOKEN} < ./lcov.info || true;
-              else
-                ./codecov < ./lcov.info || true;
+              if [ -x ./codecov ]; then
+                if [ "$CODECOV_TOKEN" != "" ]; then
+                  ./codecov -t ${CODECOV_TOKEN} < ./lcov.info || true;
+                else
+                  ./codecov < ./lcov.info || true;
+                fi
               fi
             fi
 

.cursor/rules/ci-config.mdc

@@ -32,4 +32,5 @@ alwaysApply: false
 
 - Vercel's ignore step: exit 0 skips, anything else builds, so fail open. Never diff only `HEAD^`: a master merge or multi-commit push makes it wrong. Run `vercel-ignore.test.sh` after changes.
 - `git.deploymentEnabled: false` doesn't stick (dashboard overrides it); skipped pushes still show as canceled deployments.
+- Vercel's clone can have a `master`/`origin/master` ref at the commit being built, so always fetch master and never use a ref equal to `HEAD` as the base (it makes every preview skip).
 - Previews on `renovate/*` skip when the only site changes are website `package.json` or lockfiles; production is unchanged.

docs/rest/api/Invalidate.md

@@ -140,7 +140,7 @@ export const PostResource = resource({
 });
 ```
 
-```typescript title="Request" column
+```typescript title="Usage" column
 import { PostResource } from './Resource';
 PostResource.deleteMany(['5', '13', '7']);
 ```
@@ -192,7 +192,7 @@ export const PostResource = resource({
 });
 ```
 
-```typescript title="Request" column
+```typescript title="Usage" column
 import { PostResource } from './Resource';
 PostResource.deleteMany(['5', '13', '7']);
 ```

docs/rest/api/resource.md

@@ -285,7 +285,7 @@ export const PostResource = resource({
 });
 ```
 
-```typescript title="Request" column
+```typescript title="Usage" column
 import { PostResource } from './Resource';
 PostResource.get({
   group: 'react',
@@ -327,7 +327,7 @@ export const PostResource = resource({
 });
 ```
 
-```typescript title="Request" column
+```typescript title="Usage" column
 import { PostResource } from './Resource';
 PostResource.getList({
   group: 'react',
@@ -380,7 +380,7 @@ export const PostResource = resource({
 });
 ```
 
-```typescript title="Request" column
+```typescript title="Usage" column
 import { PostResource } from './Resource';
 PostResource.getList.push(
   { group: 'react', author: 'clara' },
@@ -424,7 +424,7 @@ export const PostResource = resource({
 });
 ```
 
-```typescript title="Request" column
+```typescript title="Usage" column
 import { PostResource } from './Resource';
 PostResource.getList.unshift(
   { group: 'react', author: 'clara' },
@@ -471,7 +471,7 @@ export const PostResource = resource({
 });
 ```
 
-```typescript title="Request" column
+```typescript title="Usage" column
 import { PostResource } from './Resource';
 PostResource.getList.getPage({
   group: 'react',
@@ -519,7 +519,7 @@ export const PostResource = resource({
 });
 ```
 
-```typescript title="Request" column
+```typescript title="Usage" column
 import { PostResource } from './Resource';
 PostResource.getList.move(
   { group: 'react', id: '1' },
@@ -562,7 +562,7 @@ export const PostResource = resource({
 });
 ```
 
-```typescript title="Request" column
+```typescript title="Usage" column
 import { PostResource } from './Resource';
 PostResource.update(
   { group: 'react', id: '1' },
@@ -605,7 +605,7 @@ export const PostResource = resource({
 });
 ```
 
-```typescript title="Request" column
+```typescript title="Usage" column
 import { PostResource } from './Resource';
 PostResource.partialUpdate(
   { group: 'react', id: '1' },
@@ -648,7 +648,7 @@ export const PostResource = resource({
 });
 ```
 
-```typescript title="Request" column
+```typescript title="Usage" column
 import { PostResource } from './Resource';
 PostResource.delete({ group: 'react', id: '1' });
 ```

docs/rest/guides/auth.md

@@ -47,7 +47,7 @@ export const MyResource = resource({
 });
 ```
 
-```ts title="Request" column
+```ts title="Usage" column
 import { MyResource } from './MyResource';
 MyResource.get({ id: 1 });
 ```
@@ -128,7 +128,7 @@ export const MyResource = resource({
 });
 ```
 
-```ts title="Request" column
+```ts title="Usage" column
 import { MyResource } from './MyResource';
 MyResource.get({ id: 1 });
 ```
@@ -204,7 +204,7 @@ export const MyResource = resource({
 });
 ```
 
-```ts title="Request" column
+```ts title="Usage" column
 import { MyResource } from './MyResource';
 MyResource.get({ id: 1 });
 ```
@@ -279,7 +279,7 @@ export const MyResource = resource({
 });
 ```
 
-```ts title="Request" column
+```ts title="Usage" column
 import { MyResource } from './MyResource';
 MyResource.get({ id: 1 });
 ```

docs/rest/guides/axios-migration.md

@@ -115,7 +115,7 @@ export const getUser = new RestEndpoint({
 });
 ```
 
-```ts title="Request" column
+```ts title="Usage" column
 import { getUser } from './api';
 getUser({ id: '1' });
 ```
@@ -190,7 +190,7 @@ export const PostResource = resource({
 });
 ```
 
-```ts title="Request" column
+```ts title="Usage" column
 import { PostResource } from './PostResource';
 PostResource.get({ id: '1' });
 ```
@@ -244,7 +244,7 @@ export const PostResource = resource({
 });
 ```
 
-```ts title="Request" column
+```ts title="Usage" column
 import { PostResource } from './PostResource';
 PostResource.getList.push({
   title: 'New Post',

docs/rest/guides/django.md

@@ -75,7 +75,7 @@ export const MyResource = resource({
 });
 ```
 
-```ts title="Request" column
+```ts title="Usage" column
 import { MyResource } from './MyResource';
 MyResource.get({ id: 1 });
 ```

website/scripts/vercel-ignore.sh

@@ -51,20 +51,28 @@ is_ancestor() {
   [ -n "$1" ] && git merge-base --is-ancestor "$1" "$2" 2>/dev/null
 }
 
-# Prints master's sha. Vercel clones shallow, so fetch it if missing; the
-# timeout keeps a hung network call from holding the build machine.
+# Prints master's sha. A ref equal to HEAD is never trusted as master: Vercel's
+# clone can carry one at the commit being built, which empties every diff.
 upstream() {
-  has_rev origin/master ||
-    timeout 15 git fetch -q --no-tags --depth=80 origin master:refs/remotes/origin/master 2>/dev/null
-  git rev-parse --verify -q origin/master || git rev-parse --verify -q master
+  local head ref sha
+  head="$(git rev-parse HEAD)"
+  for ref in origin/master master; do
+    sha="$(git rev-parse --verify -q "$ref^{commit}")" && [ "$sha" != "$head" ] && {
+      echo "$sha"
+      return 0
+    }
+  done
+  return 1
 }
 
 # Vercel clones about 10 commits deep. Fetch more of this branch and master
-# when a comparison base is out of reach.
+# when a comparison base is out of reach. One fetch per ref: when both go in
+# one call, newer git (2.55) can leave master at its old depth.
 deepen() {
-  [ -n "${VERCEL_GIT_COMMIT_REF:-}" ] &&
-    timeout 30 git fetch -q --no-tags --deepen=300 origin "$VERCEL_GIT_COMMIT_REF" \
-      '+refs/heads/master:refs/remotes/origin/master' 2>/dev/null
+  [ -n "${VERCEL_GIT_COMMIT_REF:-}" ] || return 1
+  timeout 30 git fetch -q --no-tags --deepen=300 origin "$VERCEL_GIT_COMMIT_REF" 2>/dev/null
+  timeout 30 git fetch -q --no-tags --deepen=300 origin \
+    '+refs/heads/master:refs/remotes/origin/master' 2>/dev/null
 }
 
 merge_base() {
@@ -81,6 +89,11 @@ if [[ "${VERCEL_GIT_COMMIT_REF:-}" =~ ^(master|rest-hooks-site)$ || "${VERCEL_EN
   build "no previous production deploy to compare"
 fi
 
+# Previews need the real master. Fetch it once, forced, so a clone-provided
+# ref is replaced; refetching later with --depth would undo deepen(). The
+# timeout keeps a hung network call from holding the build machine.
+timeout 15 git fetch -q --no-tags --depth=80 origin +master:refs/remotes/origin/master 2>/dev/null
+
 # Renovate previews skip when only website dependency manifests or lockfiles
 # changed. Site or docs source changes still build.
 if [[ "${VERCEL_GIT_COMMIT_REF:-}" == renovate/* ]]; then
@@ -100,7 +113,7 @@ fi
 is_ancestor "$prev" HEAD && decide "$prev" HEAD "preview changes since ${prev:0:12}"
 
 if base="$(merge_base)" || { deepen && base="$(merge_base)"; }; then
-  decide "$base" HEAD "preview changes vs master"
+  decide "$base" HEAD "preview changes vs master (base ${base:0:12})"
 fi
 
 # Without a base, the tip commit alone can't prove earlier commits left the

website/scripts/vercel-ignore.test.sh

@@ -163,6 +163,15 @@ commit "unrelated site" website/src/pages/index.js
 commit "unrelated pkg" packages/core/src/index.ts
 expect build "preview without merge-base builds" unrelated
 
+# Vercel's clone can carry a master ref at the commit being built. Comparing
+# HEAD with itself would always skip, so that ref is not a base.
+git -C "$repo" checkout -b clone-master master >/dev/null 2>&1
+commit "clone-master page" docs/core/api/CloneMaster.md
+real_master="$(git -C "$repo" rev-parse master)"
+git -C "$repo" update-ref refs/heads/master HEAD
+expect build "preview when the clone's master ref is HEAD" clone-master
+git -C "$repo" update-ref refs/heads/master "$real_master"
+
 # gh-pages branches never build, even if website files differ.
 expect skip "gh-pages branch" gh-pages-bench
 
@@ -203,4 +212,25 @@ git -C "$repo" checkout master >/dev/null 2>&1
 commit "master bump" website/package.json website/yarn.lock
 expect build "master website manifest" master "$(parent)"
 
+# --- Vercel-like shallow clone: fork point far behind master, and the clone
+# carries a master ref at HEAD. deepen() must reach the real merge-base.
+git -C "$repo" checkout -b far-pkg master >/dev/null 2>&1
+commit "far pkg" packages/core/src/far.ts
+git -C "$repo" checkout -b far-site master >/dev/null 2>&1
+commit "far site" docs/core/api/Far.md
+git -C "$repo" checkout master >/dev/null 2>&1
+for i in $(seq 1 100); do commit "master filler $i" packages/rest/src/filler.ts; done
+origin_repo="$repo"
+for branch in far-pkg far-site; do
+  clone="$(mktemp -d)"
+  git clone -q --depth=10 --branch "$branch" "file://$origin_repo" "$clone"
+  git -C "$clone" branch -f master HEAD
+  repo="$clone"
+  want=skip
+  [ "$branch" = far-site ] && want=build
+  expect "$want" "shallow clone, fork far behind master ($branch)" "$branch"
+  repo="$origin_repo"
+  rm -rf "$clone"
+done
+
 echo "all vercel-ignore cases passed"

website/src/components/DiffEditorMonaco.tsx

@@ -1,8 +1,11 @@
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import { DiffEditor as BaseDiffEditor } from '@monaco-editor/react';
+import {
+  DiffEditor as BaseDiffEditor,
+  type MonacoDiffEditor,
+} from '@monaco-editor/react';
 import clsx from 'clsx';
 import { type editor } from 'monaco-editor';
-import { useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import type { CodeDocument } from './Playground/editor/codeModel';
 import { extensionToMonacoLanguage } from './Playground/monaco/language';
@@ -25,6 +28,31 @@ export default function DiffEditor({ documents, fallback }: DiffMonacoProps) {
       options.lineHeight,
   });
 
+  // Left edge of each pane's code, so labels line up with the first column
+  const [labelOffsets, setLabelOffsets] = useState<number[]>();
+  const handleDiffMount = useCallback(
+    (editor: MonacoDiffEditor) => {
+      handleMount(editor);
+      const panes = [editor.getOriginalEditor(), editor.getModifiedEditor()];
+      const updateOffsets = () => {
+        const left = editor.getContainerDomNode().getBoundingClientRect().left;
+        const next = panes.map(
+          pane =>
+            (pane.getDomNode()?.getBoundingClientRect().left ?? left) -
+            left +
+            pane.getLayoutInfo().contentLeft,
+        );
+        setLabelOffsets(prev =>
+          prev?.every((offset, i) => offset === next[i]) ? prev : next,
+        );
+      };
+      updateOffsets();
+      // Both panes lay out together; disposed along with the pane
+      panes[1].onDidLayoutChange(updateOffsets);
+    },
+    [handleMount],
+  );
+
   return (
     <BrowserOnly fallback={fallback}>
       {() => {
@@ -41,13 +69,25 @@ export default function DiffEditor({ documents, fallback }: DiffMonacoProps) {
               )}
             >
               <div className={styles.playgroundTextEdit}>
+                <div className={styles.diffLabels} aria-hidden>
+                  {documents.map(({ title }, i) => (
+                    <span
+                      key={i}
+                      style={{
+                        left: labelOffsets?.[i] ?? (i ? '50%' : undefined),
+                      }}
+                    >
+                      {title || (i ? 'After' : 'Before')}
+                    </span>
+                  ))}
+                </div>
                 <div className={styles.playgroundEditor}>
                   <BaseDiffEditor
                     language={extensionToMonacoLanguage(documents[0].language)}
                     original={original}
                     modified={modified}
                     options={DIFF_OPTIONS}
-                    onMount={handleMount}
+                    onMount={handleDiffMount}
                     height={height}
                     theme={MONACO_THEME}
                     loading={fallback}