docs: Fix blog hydration error

Author: ntucker

docs/core/concepts/normalization.md

@@ -385,6 +385,8 @@ library, which has less features, but similar schema definitions.
 Memoization is done at every entity level - no matter how nested, ensuring global referential equality guarantees
 and up to 20x performance even after [mutation operations](../getting-started/mutations.md) like Create, Update and Delete.
 
+<center>
+
 <Grid>
 
 ```mermaid
@@ -405,8 +407,6 @@ xychart-beta
 
 </Grid>
 
-<center>
-
 [View benchmark](https://github.com/reactive/data-client/blob/master/examples/benchmark)
 
 </center>

website/blog/.cursor/rules/blog-posts.mdc

@@ -113,6 +113,7 @@ When documenting performance gains:
 3. **Link evidence** - Reference the PR implementing the optimization and relevant docs
 4. **Visualize with mermaid chart** - Use `xychart-beta` bar chart comparing operations:
 
+<div style={{maxWidth:'600px'}}>
 ```mermaid
 xychart-beta
     title "Performance vs vX.Y"
@@ -121,6 +122,7 @@ xychart-beta
     bar [new_values]
     bar [baseline_100s]
 ```
+</div>
 
 5. **Include benchmark links** - End with centered links to live benchmarks and source:
 

website/blog/2024-04-08-v0.11-queries-querable-usequery.md

@@ -6,7 +6,6 @@ image: /img/social/0.11-card.png
 description: 0.11 of Data Client brings new memoized direct schema access to the store with any Queryable Schema with the useQuery hook
 ---
 
-import Grid from '@site/src/components/Grid';
 import Link from '@docusaurus/Link';
 
 Besides the performance and data integrity benefits of [normalizing the state](https://react.dev/learn/choosing-the-state-structure),
@@ -256,6 +255,9 @@ decent boost of 2x to the most common operations. With the addition of [query ca
 
 These adds to the existing (up to 23x) [lead over the legacy normalizr](/docs/concepts/normalization#benchmarks) library.
 
+<center>
+<div style={{maxWidth:'600px'}}>
+
 ```mermaid
 xychart-beta
     title "Performance vs v0.10"
@@ -265,7 +267,7 @@ xychart-beta
     bar [100, 100, 100, 100, 100]
 ```
 
-<center>
+</div>
 
 [Benchmarks over time](https://reactive.github.io/data-client/dev/bench/) | [View benchmark](https://github.com/reactive/data-client/tree/master/examples/benchmark)
 

website/blog/2024-07-13-v0.14-release-announcement.md

@@ -207,6 +207,9 @@ Internal schema interface changes provide a **10% normalization performance boos
 
 Using `Map` instead of plain objects for entity storage provides up to **32% faster lookups** for large datasets. [#3390](https://github.com/reactive/data-client/pull/3390)
 
+<center>
+<div style={{maxWidth:'500px'}}>
+
 ```mermaid
 xychart-beta
     title "Performance vs v0.13"
@@ -216,7 +219,7 @@ xychart-beta
     bar [100, 100, 100]
 ```
 
-<center>
+</div>
 
 [Benchmarks over time](https://reactive.github.io/data-client/dev/bench/) | [View benchmark](https://github.com/reactive/data-client/tree/master/examples/benchmark)
 

website/blog/2025-01-XX-v0.15-vue-support-collection-remove.md

@@ -228,6 +228,9 @@ import {
 
 Removing ImmutableJS auto-detection overhead and optimizing denormalization code paths provides a **10-20% improvement** for get/denormalize operations. [#3421](https://github.com/reactive/data-client/pull/3421), [#3468](https://github.com/reactive/data-client/pull/3468)
 
+<center>
+<div style={{maxWidth:'500px'}}>
+
 ```mermaid
 xychart-beta
     title "Performance vs v0.14"
@@ -237,7 +240,7 @@ xychart-beta
     bar [100, 100, 100]
 ```
 
-<center>
+</div>
 
 [Benchmarks over time](https://reactive.github.io/data-client/dev/bench/) | [View benchmark](https://github.com/reactive/data-client/tree/master/examples/benchmark)
 

website/src/components/DiffEditorChooser.tsx

@@ -1,6 +1,6 @@
-import DiffEditorMonaco, { type DiffMonacoProps } from './DiffEditorMonaco';
-import usingMonaco from './Playground/usingMonaco';
+import DiffEditorMonaco from './DiffEditorMonaco';
 
-const DiffEditorChooser =
-  usingMonaco ? DiffEditorMonaco : ({ fallback }: DiffMonacoProps) => fallback;
+// Always use DiffEditorMonaco which handles SSR via <BrowserOnly>
+// The mobile/bot detection is handled inside DiffEditorMonaco
+const DiffEditorChooser = DiffEditorMonaco;
 export default DiffEditorChooser;

website/src/components/DiffEditorMonaco.tsx

@@ -5,6 +5,7 @@ import { type editor } from 'monaco-editor';
 import { useMemo } from 'react';
 
 import { extensionToMonacoLanguage } from './Playground/extensionToMonacoLanguage';
+import { isMobileOrBot } from './Playground/isMobileOrBot';
 import { options } from './Playground/monacoOptions';
 import MonacoPreloads from './Playground/MonacoPreloads';
 import styles from './Playground/styles.module.css';
@@ -30,37 +31,43 @@ export default function DiffEditor({
   return (
     <>
       <BrowserOnly fallback={fallback}>
-        {() => (
-          <div
-            className={clsx(
-              styles.playgroundContainer,
-              styles.standaloneEditor,
-            )}
-          >
-            <div className={styles.playgroundTextEdit}>
-              <div className={clsx(styles.playgroundEditor)}>
-                <BaseDiffEditor
-                  language={extensionToMonacoLanguage(codeTabs[0].language)}
-                  original={original}
-                  modified={modified}
-                  options={DIFF_OPTIONS}
-                  onMount={handleMount}
-                  height={height}
-                  theme="prism"
-                  loading={fallback}
-                />
+        {() => {
+          // Skip Monaco for mobile/bots - use static fallback
+          if (isMobileOrBot()) {
+            return fallback;
+          }
+          return (
+            <div
+              className={clsx(
+                styles.playgroundContainer,
+                styles.standaloneEditor,
+              )}
+            >
+              <div className={styles.playgroundTextEdit}>
+                <div className={clsx(styles.playgroundEditor)}>
+                  <BaseDiffEditor
+                    language={extensionToMonacoLanguage(codeTabs[0].language)}
+                    original={original}
+                    modified={modified}
+                    options={DIFF_OPTIONS}
+                    onMount={handleMount}
+                    height={height}
+                    theme="prism"
+                    loading={fallback}
+                  />
+                </div>
               </div>
             </div>
-          </div>
-        )}
+          );
+        }}
       </BrowserOnly>
       <MonacoPreloads />
     </>
   );
 }
 
 export type DiffMonacoProps = {
-  fallback: JSX.Element;
+  fallback: React.ReactNode;
   codes: string[];
   codeTabs: {
     [k: string]: any;

website/src/components/Playground/PlaygroundEditor.tsx

@@ -1,7 +1,10 @@
 import PlaygroundLiveEditor from './PlaygroundLiveEditor';
 import PlaygroundMonacoEditor from './PlaygroundMonacoEditor';
-import usingMonaco from './usingMonaco';
 
-const PlaygroundEditor =
-  usingMonaco ? PlaygroundMonacoEditor : PlaygroundLiveEditor;
+// Always use Monaco editor wrapper - mobile/bot check happens inside
+// This avoids hydration mismatch from module-level navigator checks
+const PlaygroundEditor = PlaygroundMonacoEditor;
 export default PlaygroundEditor;
+
+// Re-export for use as fallback inside Monaco editor
+export { PlaygroundLiveEditor };

website/src/components/Playground/PlaygroundMonacoEditor.tsx

@@ -7,7 +7,9 @@ import { LiveEditor } from 'react-live';
 import './monaco-init';
 
 import { extensionToMonacoLanguage } from './extensionToMonacoLanguage';
+import { isMobileOrBot } from './isMobileOrBot';
 import { largeOptions, options } from './monacoOptions';
+import PlaygroundLiveEditor from './PlaygroundLiveEditor';
 import useAutoHeight from './useAutoHeight';
 
 export default function PlaygroundMonacoEditor({
@@ -22,7 +24,18 @@ export default function PlaygroundMonacoEditor({
   isFocused = false,
   language = 'tsx',
   readOnly = false,
-  ...rest
+}: {
+  onChange: (value: string | undefined) => void;
+  code: string;
+  path?: string;
+  onFocus: (tabIndex: number) => void;
+  tabIndex: number;
+  highlights?: string;
+  autoFocus?: boolean;
+  large?: boolean;
+  isFocused?: boolean;
+  language?: string;
+  readOnly?: boolean;
 }) {
   const editorOptions = useMemo(
     () => ({ ...(large ? largeOptions : options), readOnly }),
@@ -43,14 +56,15 @@ export default function PlaygroundMonacoEditor({
     isFocused,
     lineHeight: editorOptions.lineHeight,
   });
+
   const handleMount = useCallback(
     (editor: Monaco.editor.ICodeEditor, monaco: typeof Monaco) => {
       // autofocus
       if (autoFocus) editor.focus();
       // autohighlight
-      const myhighlights = highlights && rangeParser(highlights);
+      const myhighlights = highlights ? rangeParser(highlights) : undefined;
 
-      if (highlights) {
+      if (myhighlights) {
         let selectionStartLineNumber = myhighlights[0];
         let positionLineNumber = selectionStartLineNumber;
         const selections: ISelection[] = [];
@@ -88,6 +102,13 @@ export default function PlaygroundMonacoEditor({
     [],
   );
 
+  // Use lightweight editor for mobile/bots
+  // This runs inside BrowserOnly, so navigator is always defined
+  // Check must be after hooks to satisfy React's rules of hooks
+  if (isMobileOrBot()) {
+    return <PlaygroundLiveEditor onChange={onChange} code={code} />;
+  }
+
   return (
     <Editor
       path={path}

website/src/components/Playground/isMobileOrBot.ts

@@ -0,0 +1,6 @@
+/** Check if current browser is mobile or a bot - must be called client-side only */
+export function isMobileOrBot(): boolean {
+  return /bot|googlebot|crawler|spider|robot|crawling|Mobile|Android|BlackBerry/i.test(
+    navigator.userAgent,
+  );
+}