fixes build errors

Author: Dominique Chuo

blog/2025-01-09-welcome.md

@@ -8,4 +8,6 @@ description: Introducing ReifyDB - a modern database designed to help developers
 
 # Welcome to ReifyDB
 
-TBD
+TBD
+
+<!-- truncate -->

docs/getting-started/interactive-queries.mdx

@@ -3,6 +3,7 @@ sidebar_position: 3
 ---
 
 import InlineCodeBlock from '@site/src/components/InlineCodeBlock';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 # Interactive Queries
 
@@ -14,61 +15,72 @@ Learn how to query data in ReifyDB with interactive examples. You can run these
 
 The most fundamental query in ReifyDB is the SELECT statement. Try running this query to see all users:
 
-<InlineCodeBlock query="map {1}"/>
+<BrowserOnly fallback={<div>Loading editor...</div>}>
+  {() => <InlineCodeBlock query="map {1}"/>}
+</BrowserOnly>
 
 ### Filtering with WHERE
 
 You can filter results using the WHERE clause:
 
-<InlineCodeBlock
-  query="SELECT name, email 
+<BrowserOnly fallback={<div>Loading editor...</div>}>
+  {() => <InlineCodeBlock
+    query="SELECT name, email 
 FROM users 
 WHERE email LIKE '%@example.com'"
-/>
+  />}
+</BrowserOnly>
 
 ## Joining Tables
 
 ReifyDB supports various types of joins to combine data from multiple tables:
 
-<InlineCodeBlock
-  query="SELECT u.name, p.title
+<BrowserOnly fallback={<div>Loading editor...</div>}>
+  {() => <InlineCodeBlock
+    query="SELECT u.name, p.title
 FROM users u
 JOIN posts p ON u.id = p.user_id
 WHERE p.published = true"
-/>
+  />}
+</BrowserOnly>
 
 ## Aggregation
 
 Use aggregation functions to summarize your data:
 
-<InlineCodeBlock
-  query="SELECT u.name, COUNT(p.id) as post_count
+<BrowserOnly fallback={<div>Loading editor...</div>}>
+  {() => <InlineCodeBlock
+    query="SELECT u.name, COUNT(p.id) as post_count
 FROM users u
 LEFT JOIN posts p ON u.id = p.user_id
 GROUP BY u.id, u.name
 ORDER BY post_count DESC"
-/>
+  />}
+</BrowserOnly>
 
 ## Conditional Logic
 
 ReifyDB supports CASE statements for conditional logic:
 
-<InlineCodeBlock
-  query="SELECT 
+<BrowserOnly fallback={<div>Loading editor...</div>}>
+  {() => <InlineCodeBlock
+    query="SELECT 
   title,
   CASE 
     WHEN published = true THEN 'Published'
     ELSE 'Draft'
   END as status
 FROM posts"
-/>
+  />}
+</BrowserOnly>
 
 ## Multiple Statements
 
 You can run multiple SQL statements in a single execution. Each statement produces its own result table:
 
-<InlineCodeBlock
-  query={`-- Get all users
+<BrowserOnly fallback={<div>Loading editor...</div>}>
+  {() => <InlineCodeBlock
+    query={`-- Get all users
 SELECT * FROM users;
 
   -- Get all published posts
@@ -81,7 +93,8 @@ SELECT * FROM users;
   FROM users u
   LEFT JOIN posts p ON u.id = p.user_id
   GROUP BY u.id, u.name;`}
-/>
+  />}
+</BrowserOnly>
 
 ## Try Your Own Queries
 

src/components/InlineCodeBlock/index.tsx

@@ -17,16 +17,7 @@ export default function InlineCodeBlock({
   language = 'rql',
   forceViewer = false
 }: InlineCodeBlockProps) {
-  const [isMobile, setIsMobile] = useState(() => {
-    // Check if we're on the server (SSR)
-    if (typeof window === 'undefined') {
-      return false; // Default to desktop during SSR
-    }
-    // Initial client-side check
-    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-    const isSmallScreen = window.innerWidth <= 768;
-    return hasTouch || isSmallScreen;
-  });
+  const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
     // Check if device is mobile on mount and window resize

src/pages/index.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 import CodeBlock from '@theme/CodeBlock';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import AnimatedText from '@site/src/components/AnimatedText';
 import Card from '@site/src/components/Card';
-import InlineCodeBlock from "@components/InlineCodeBlock";
-import InlineViewer from "@components/InlineViewer";
+import InlineCodeBlock from "@site/src/components/InlineCodeBlock";
+import InlineViewer from "@site/src/components/InlineViewer";
 
 function HomepageHeader() {
     return (
@@ -75,7 +76,9 @@ create deferred view demo.adults {
                         automatically update when data changes</p>
                 </div>
                 <div className="grid lg:grid-cols-2 gap-8">
-                    <InlineViewer query={exampleCode}/>
+                    <BrowserOnly fallback={<div>Loading...</div>}>
+                        {() => <InlineViewer query={exampleCode}/>}
+                    </BrowserOnly>
                     <div className="grid gap-4">
 
                         <div className="card-clean">