styles: automatically adapt light and dark theme

src/App.tsx

@@ -4,7 +4,7 @@ import Output from "@/components/Output/Output";
 
 export default function App() {
   return (
-    <main className="relative rounded-md py-2 flex flex-col gap-3">
+    <main className="relative rounded-md flex flex-col gap-3">
       <Editor />
       <Buttons />
       <Output />

src/components/Buttons/Buttons.module.css

@@ -1,5 +1,5 @@
 .wrapper {
-  @apply opacity-0 duration-300 absolute right-2 top-4 flex flex-row items-center gap-2;
+  @apply opacity-0 duration-300 absolute right-2 top-2 flex flex-row items-center gap-2;
 }
 
 .wrapper button {

src/components/Buttons/Buttons.tsx

@@ -1,5 +1,7 @@
 import clsx from "clsx";
+import { useState } from "react";
 import { IconType } from "react-icons/lib";
+import { IoCheckmark } from "react-icons/io5";
 import { FaRegCopy, FaPlay, FaHistory } from "react-icons/fa";
 
 import style from "./Buttons.module.css";
@@ -17,20 +19,25 @@ function Button({ Icon, onClick, disabled, name }: ButtonProps) {
     <button
       disabled={disabled}
       type="button"
-      aria-label={`${name} button`}
       onClick={onClick}
-      className="dark:bg-black dark:text-gray-400 dark:hover:text-gray-500 hover:text-blue-600"
+      title={`${name} code`}
+      className="dark:bg-zinc-900 dark:text-gray-400 dark:hover:text-gray-600 hover:text-blue-600 dark:border-zinc-600"
     >
       <Icon size={13} />
     </button>
   );
 }
 
 export default function Buttons() {
+  const [copied, setCopied] = useState(false);
   const { editor, setEditor, output, setOutput, workers } = useAppContext();
 
-  const handleCopy = () => navigator.clipboard.writeText(editor.code);
   const handleReset = () => setEditor({ ...editor, code: editor.defaultCode });
+  const handleCopy = () => {
+    setCopied(true);
+    navigator.clipboard.writeText(editor.code);
+    setTimeout(() => setCopied(false), 2000);
+  };
 
   // post message to worker
   const handlePlay = () => {
@@ -42,7 +49,7 @@ export default function Buttons() {
   return (
     <div className={clsx(style.wrapper, "buttons")}>
       <Button name="play" Icon={FaHistory} onClick={handleReset} />
-      <Button name="copy" Icon={FaRegCopy} onClick={handleCopy} />
+      <Button name="copy" Icon={copied ? IoCheckmark : FaRegCopy} onClick={handleCopy} />
       <Button
         name="reset"
         Icon={FaPlay}

src/components/Editor/Editor.tsx

@@ -8,7 +8,7 @@ import "ace-builds/src-noconflict/ext-language_tools";
 import { useAppContext } from "@/contexts/AppProvider";
 
 const defaultOptions = {
-  placeholder: "mdbook-repl",
+  placeholder: "Try writing some code...",
   fontSize: 17,
   showPrintMargin: false,
   highlightActiveLine: false,
@@ -17,6 +17,7 @@ const defaultOptions = {
   enableBasicAutocompletion: true,
   enableLiveAutocompletion: true,
   tabSize: 4,
+  minLines: 2,
   editorProps: { $blockScrolling: true }
 };
 

src/components/Output/Output.tsx

@@ -8,7 +8,7 @@ export default function Output() {
   const message = output.status === "start" ? "Running..." : output.msg;
 
   return (
-    <p className="whitespace-pre-wrap px-4 py-2 rounded-sm bg-stone-100 dark:text-gray-300 dark:bg-zinc-800 font-mono">
+    <p className="whitespace-pre-wrap px-4 py-2 rounded-sm bg-stone-100 dark:text-gray-300 dark:bg-zinc-800 font-mono empty:hidden">
       {message}
     </p>
   );

src/contexts/AppProvider.tsx

@@ -1,19 +1,19 @@
-import z from "zod";
 import { Dispatch, SetStateAction, createContext, useContext, useEffect, useState } from "react";
 
-import { EditorType } from "@/types/editor";
+import { MessageType } from "@/types/message";
 import { Output, OutputType } from "@/types/output";
-import { Message, MessageType } from "@/types/message";
+import { Editor, EditorType } from "@/types/editor";
 
 import useResizeObserver from "@/hooks/useResizeObserver";
 
-const defaultCode = `# Try to change dec and see the output change
-dec = 344
+const defaultCode = `# This is a default python code
+import calendar
 
-print("The decimal value of", dec, "is:")
-print(bin(dec), "in binary.")
-print(oct(dec), "in octal.")
-print(hex(dec), "in hexadecimal.")`;
+yy = 2024  # year
+mm = 2    # month
+
+# display the calendar
+print(calendar.month(yy, mm))`;
 
 const defaultOutput: OutputType = { status: "idle" };
 
@@ -71,11 +71,11 @@ export const AppContextProvider = ({ children }: AppContextProviderProps) => {
   // listen for messages from parent window
   useEffect(() => {
     const onmessage = (event: MessageEvent) => {
-      if (event.source === window) return;
-      const result = z.object({ repl: Message.omit({ output: true, dimensions: true }) }).safeParse(event.data);
-      if (!result.success) return;
-      setId(result.data.repl.id);
-      setEditor(result.data.repl.editor);
+      if (event.source === window || !event.data.repl) return;
+      if (typeof event.data.repl.id === "string") setId(event.data.repl.id);
+
+      const parsedEditor = Editor.safeParse(Object.assign(editor, event.data.repl.editor));
+      if (parsedEditor.success) setEditor({ ...parsedEditor.data });
     };
     window.addEventListener("message", onmessage);
     return () => window.removeEventListener("message", onmessage);

src/index.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  @apply overflow-y-hidden;
+}
+
 .ace_editor:hover ~ .buttons,
 .buttons:hover {
   @apply opacity-100;