fix: build errors

Author: jeffsieu

src/components/CodeEditor/CopyToClipboardButton.tsx

@@ -0,0 +1,32 @@
+import { useState, useRef } from "react";
+
+type CopyToClipboardButtonProps = { value: string };
+
+export default function CopyToClipboardButton({
+  value,
+}: CopyToClipboardButtonProps) {
+  const [clipboardTick, setClipboardTick] = useState(false);
+  const clipboardTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleCopyToClipboard = () => {
+    navigator.clipboard.writeText(value);
+    setClipboardTick(true);
+
+    if (clipboardTimeoutRef.current) {
+      clearTimeout(clipboardTimeoutRef.current);
+    }
+
+    clipboardTimeoutRef.current = setTimeout(() => {
+      setClipboardTick(false);
+    }, 1000);
+  };
+
+  return (
+    <button
+      className="button button--secondary button--outline"
+      onClick={handleCopyToClipboard}
+    >
+      {clipboardTick ? "✔ Copied" : "Copy"}
+    </button>
+  );
+}

src/components/CodeEditor/index.tsx

@@ -5,46 +5,32 @@ import { useEffect, useState, useRef } from "react";
 import clsx from "clsx";
 import TypeScriptSandboxEditor from "./TypeScriptSandboxEditor";
 import styles from "./styles.module.css";
-
-function useSavedCode(key: string, defaultValue: string) {
-  const [code, setCode] = useLocalStorage(key, defaultValue);
-
-  return {
-    code,
-    setCode,
-  };
-}
-
-function useShouldSaveCode() {
-  const [shouldAutosaveCode, setShouldAutosaveCode] = useLocalStorage(
-    "shouldAutosaveCode",
-    true
-  );
-
-  return [shouldAutosaveCode, setShouldAutosaveCode] as const;
-}
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import CopyToClipboardButton from "./CopyToClipboardButton";
 
 type CodeEditorProps = {
   codeKey: string;
   defaultValue: string;
   solution: string;
 };
 
-export default function CodeEditor({
+function BrowserCodeEditor({
   codeKey,
   defaultValue,
   solution,
 }: CodeEditorProps) {
   const monaco = useMonaco();
+  const [shouldAutosaveCode, setShouldAutosaveCode] = useLocalStorage(
+    "shouldAutosaveCode",
+    true
+  );
+  const [code, setCode] = useLocalStorage(codeKey, defaultValue);
+
   const [shouldShowDiff, setShouldShowDiff] = useState(false);
-  const { code, setCode } = useSavedCode(codeKey, defaultValue);
   const [shouldShowSolution, setShouldShowSolution] = useState(false);
   const [value, setValue] = useState(code);
-  const [shouldAutosaveCode, setShouldAutosaveCode] = useShouldSaveCode();
-  const { colorMode } = useColorMode();
-  const [clipboardTick, setClipboardTick] = useState(false);
-  const clipboardTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+  const { colorMode } = useColorMode();
   const theme = colorMode === "dark" ? "vs-dark" : "light";
 
   const handleCodeChange = (newValue: string | undefined) => {
@@ -54,26 +40,12 @@ export default function CodeEditor({
     setValue(newValue || "");
   };
 
-  const handleCopyToClipboard = () => {
-    navigator.clipboard.writeText(value);
-    setClipboardTick(true);
-
-    if (clipboardTimeoutRef.current) {
-      clearTimeout(clipboardTimeoutRef.current);
-    }
-
-    clipboardTimeoutRef.current = setTimeout(() => {
-      setClipboardTick(false);
-    }, 1000);
-  };
-
   useEffect(() => {
     if (shouldShowSolution) {
       return;
     }
 
     if (shouldAutosaveCode) {
-      console.log("Autosaving code...", value);
       setCode(value);
     }
   }, [value, shouldAutosaveCode, setCode, shouldShowSolution]);
@@ -83,9 +55,6 @@ export default function CodeEditor({
       return;
     }
 
-    // Show inlay hints
-    // monaco.languages.registerInlayHintsProvider("typescript", )
-
     monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
       noSemanticValidation: false,
       noSyntaxValidation: false,
@@ -123,12 +92,7 @@ export default function CodeEditor({
           >
             Reset
           </button>
-          <button
-            className="button button--secondary button--outline"
-            onClick={handleCopyToClipboard}
-          >
-            {clipboardTick ? "✔ Copied" : "Copy"}
-          </button>
+          <CopyToClipboardButton value={value} />
         </div>
         <div style={{ display: "flex", gap: "1rem" }}>
           {shouldShowSolution && (
@@ -205,3 +169,7 @@ export default function CodeEditor({
     </div>
   );
 }
+
+export default function CodeEditor(props: CodeEditorProps) {
+  return <BrowserOnly>{() => <BrowserCodeEditor {...props} />}</BrowserOnly>;
+}

src/pages/index.tsx

@@ -1,17 +1,17 @@
-import type {ReactNode} from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import Heading from '@theme/Heading';
+import type { ReactNode } from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import Heading from "@theme/Heading";
 
-import styles from './index.module.css';
+import styles from "./index.module.css";
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
         <Heading as="h1" className="hero__title">
           {siteConfig.title}
@@ -20,8 +20,9 @@ function HomepageHeader() {
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
+            to="/docs/basics/introduction-to-typescript/"
+          >
+            Start my journey
           </Link>
         </div>
       </div>
@@ -30,11 +31,12 @@ function HomepageHeader() {
 }
 
 export default function Home(): ReactNode {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      description="Description will go into a meta tag in <head />"
+    >
       <HomepageHeader />
       <main>
         <HomepageFeatures />