Fixed docs site build issues

Author: elilambnz

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [1.11.0](https://github.com/elilambnz/react-py/compare/v1.10.7...v1.11.0) (2024-08-05)
 
+### Features
+
+- Added `autoImportPackages` prop to automatically import packages in a code chunk
+
 ### [1.10.7](https://github.com/elilambnz/react-py/compare/v1.10.6...v1.10.7) (2024-02-13)
 
 ### [1.10.6](https://github.com/elilambnz/react-py/compare/v1.10.5...v1.10.6) (2023-09-21)

website/docs/examples/custom-modules.mdx

@@ -10,7 +10,7 @@ By default, Python modules are cached. If you intend to make changes to an impor
 
 Create a module using the file system APIs or write the file using Python, [examples here](file-system).
 
-Then call `watchModules()` to automatically reload the module before running code. For more info, see the [API reference docs](../introduction/api-reference#watchModules).
+Then call `watchModules()` to automatically reload the module before running code. For more info, see the [API reference docs](../introduction/api-reference.md#watchmodules).
 
 The following example shows this in action. To try it out:
 

website/docs/examples/file-system.mdx

@@ -8,7 +8,7 @@ import MultiFileExample from '../../src/components/MultiFileExample'
 
 Some internal Pyodide file system methods are exposed.
 
-For more info, see the [API reference docs](../introduction/api-reference#usepython-hook).
+For more info, see the [API reference docs](../introduction/api-reference#readfile).
 
 ```tsx
 import { usePython } from 'react-py'

website/docs/introduction/usage.md

@@ -27,7 +27,7 @@ render(<App />, document.getElementById('root'))
 
 ## `usePython` Hook
 
-Use the `usePython` hook to run code and access both stdout and stderr. For props, see the [API reference docs](../introduction/api-reference#usepython-hook).
+Use the `usePython` hook to run code and access both stdout and stderr. For props, see the [API reference docs](../introduction/api-reference#usepython-and-usepythonconsole-hooks).
 
 Try the example, [Basic Example](../examples/basic-example.md).
 
@@ -74,7 +74,7 @@ function Codeblock() {
 
 ## `usePythonConsole` Hook
 
-Use the `usePythonConsole` hook to emulate a Python console to run code and access both stdout and stderr. For props, see the [API reference docs](../introduction/api-reference#usepython-hook).
+Use the `usePythonConsole` hook to emulate a Python console to run code and access both stdout and stderr. For props, see the [API reference docs](../introduction/api-reference#usepython-and-usepythonconsole-hooks).
 
 Try the example, [REPL](../examples/repl.mdx).
 

website/src/components/Editor.tsx

@@ -1,47 +1,53 @@
-import AceEditor from "react-ace";
-
-import "ace-builds/src-noconflict/mode-python";
-import "ace-builds/src-noconflict/theme-textmate";
-import "ace-builds/src-noconflict/theme-twilight";
-import "ace-builds/src-noconflict/ext-language_tools";
+import BrowserOnly from '@docusaurus/BrowserOnly'
 
 const editorOptions = {
   enableBasicAutocompletion: true,
   enableLiveAutocompletion: true,
   highlightActiveLine: false,
-  showPrintMargin: false,
-};
+  showPrintMargin: false
+}
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const editorOnLoad = (editor: any) => {
-  editor.renderer.setScrollMargin(10, 10, 0, 0);
-  editor.moveCursorTo(0, 0);
-};
+  editor.renderer.setScrollMargin(10, 10, 0, 0)
+  editor.moveCursorTo(0, 0)
+}
 
 export default function Editor({
   theme,
   input,
-  onChange,
+  onChange
 }: {
-  theme: string;
-  input: string;
-  onChange: (value: string) => void;
+  theme: string
+  input: string
+  onChange: (value: string) => void
 }) {
   return (
-    <AceEditor
-      value={input}
-      mode="python"
-      name="CodeBlock"
-      fontSize="0.9rem"
-      className="flex-1 overflow-clip"
-      theme={theme === "dark" ? "twilight" : "textmate"}
-      onChange={onChange}
-      width="100%"
-      height="100%"
-      onLoad={editorOnLoad}
-      editorProps={{ $blockScrolling: true }}
-      setOptions={editorOptions}
-      wrapEnabled={true}
-    />
-  );
+    <BrowserOnly fallback={<div>Loading...</div>}>
+      {() => {
+        const AceEditor = require('react-ace').default
+        require('ace-builds/src-noconflict/mode-python')
+        require('ace-builds/src-noconflict/theme-textmate')
+        require('ace-builds/src-noconflict/theme-twilight')
+        require('ace-builds/src-noconflict/ext-language_tools')
+        return (
+          <AceEditor
+            value={input}
+            mode="python"
+            name="CodeBlock"
+            fontSize="0.9rem"
+            className="flex-1 overflow-clip"
+            theme={theme === 'dark' ? 'twilight' : 'textmate'}
+            onChange={onChange}
+            width="100%"
+            height="100%"
+            onLoad={editorOnLoad}
+            editorProps={{ $blockScrolling: true }}
+            setOptions={editorOptions}
+            wrapEnabled={true}
+          />
+        )
+      }}
+    </BrowserOnly>
+  )
 }

website/src/components/Environment.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { usePythonConsole } from 'react-py'
+import { usePythonConsole } from '@site/../dist'
 
 import Editor from './Editor'
 import Output from './Output'

website/src/components/Output.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
-import { ConsoleState } from 'react-py/dist/types/Console'
+
+import { ConsoleState } from '@site/../dist/types/Console'
+
 import clsx from 'clsx'
 
 const ps1 = '>>> '

website/src/pages/index.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import Link from '@docusaurus/Link'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import Layout from '@theme/Layout'
-import { useColorMode } from '@docusaurus/theme-common'
 
 import Logo from '../../static/img/logo.svg'
 
@@ -24,14 +23,7 @@ import {
 import clsx from 'clsx'
 
 function HomepageHeader() {
-  const [isDarkMode, setIsDarkMode] = useState(false)
-
   const { siteConfig } = useDocusaurusContext()
-  const { colorMode } = useColorMode()
-
-  useEffect(() => {
-    setIsDarkMode(colorMode === 'dark')
-  }, [colorMode])
 
   return (
     <div>

website/src/pages/playground/index.tsx

@@ -4,11 +4,18 @@ import Layout from '@theme/Layout'
 import { useColorMode } from '@docusaurus/theme-common'
 
 import Environment from '@site/src/components/Environment'
+import BrowserOnly from '@docusaurus/BrowserOnly'
 
 function EnvironmentContainer() {
   const { colorMode } = useColorMode()
 
-  return <Environment theme={colorMode} />
+  return (
+    <BrowserOnly fallback={<div>Loading...</div>}>
+      {() => {
+        return <Environment theme={colorMode} />
+      }}
+    </BrowserOnly>
+  )
 }
 
 export default function Playground(): JSX.Element {