[FIX] Fixed Search Bar Query navigation and Formatted code

.github/workflows/lint.yml

@@ -2,7 +2,7 @@ name: lint
 on:
   push:
     branches:
-      - main 
+      - main
   pull_request:
 
 jobs:
@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "18"
       - name: Install dependencies
         run: yarn
       - name: Fetch Algorithms

components/codePreview/index.tsx

@@ -73,6 +73,15 @@ export default function CodePreview({ algorithm }: { algorithm: Algorithm }) {
               onClose={() => setMobileMoreMenuOpen(false)}
               className={classes.mobileMenu}
             >
+              <NextLink
+                href={`/playground?algorithm=${algorithm.slug}&language=${selectedLanguague}`}
+                passHref
+              >
+                <MenuItem>
+                  <PlayArrow />
+                  <Typography>{t("playgroundTryCode")}</Typography>
+                </MenuItem>
+              </NextLink>
               <MenuItem onClick={() => setFullScreen(true)}>
                 <Fullscreen />
                 <Typography>{t("fullscreen")}</Typography>

components/footer/index.tsx

@@ -38,15 +38,41 @@ export default function Footer() {
           <Link href="/#donate">{t("donateTitle")}</Link>
         </div>
         <div className={classes.list}>
-          <a href="https://github.com/TheAlgorithms/" target="_blank" rel="noreferrer">GitHub</a>
-          <a href="https://matrix.to/#/#TheAlgorithms_community:gitter.im" target="_blank" rel="noreferrer">
+          <a
+            href="https://github.com/TheAlgorithms/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            GitHub
+          </a>
+          <a
+            href="https://matrix.to/#/#TheAlgorithms_community:gitter.im"
+            target="_blank"
+            rel="noreferrer"
+          >
             Gitter
           </a>
-          <a href="https://twitter.com/The_Algorithms" target="_blank" rel="noreferrer">X</a>
-          <a href="https://github.com/TheAlgorithms/website" target="_blank" rel="noreferrer">
+          <a
+            href="https://twitter.com/The_Algorithms"
+            target="_blank"
+            rel="noreferrer"
+          >
+            X
+          </a>
+          <a
+            href="https://github.com/TheAlgorithms/website"
+            target="_blank"
+            rel="noreferrer"
+          >
             {t("sourceCodeFooter")}
           </a>
-          <a href="mailto:[email protected]" target="_blank" rel="noreferrer">{t("contact")}</a>
+          <a
+            href="mailto:[email protected]"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t("contact")}
+          </a>
         </div>
         <a
           className={classes.vercelLogo}

components/icon/index.tsx

@@ -49,7 +49,7 @@ export default function LanguageIcon({
             case "go":
               return icon("go", colored ? "original" : "plain");
             case "rust":
-              return icon("rust", "plain");
+              return icon("rust", "original");
             case "aarch64_assembly":
               return icon("aarch64", colored ? "original" : "plain");
             case "c-sharp":

components/navbar/index.tsx

@@ -11,7 +11,6 @@ import {
   SwipeableDrawer,
   ListItem,
 } from "@material-ui/core";
-import NextLink from "next/link";
 import { JumboThemeProvider } from "hooks/themes";
 import Link from "components/link";
 import { useRouter } from "next/router";
@@ -133,7 +132,9 @@ export default function Navbar({
                 <GithubOriginalIcon color="white" />
               </IconButton>
               {menu.map((item) => (
-                  <Button key={item.name} href={item.href} target={item.target}>{item.name}</Button>
+                <Button key={item.name} href={item.href} target={item.target}>
+                  {item.name}
+                </Button>
               ))}
             </div>
           )}
@@ -152,13 +153,24 @@ export default function Navbar({
           </ListItem>
           {menu.map((item) => (
             <MenuItem key={item.name}>
-              <Button href={item.href} target={item.target} className={classes.sidebarLink}>
+              <Button
+                href={item.href}
+                target={item.target}
+                className={classes.sidebarLink}
+              >
                 {item.name}
               </Button>
             </MenuItem>
           ))}
           <MenuItem>
-            <a className={classes.unstyledLink} href="https://github.com/TheAlgorithms" target="_blank" rel="noreferrer">GitHub</a>
+            <a
+              className={classes.unstyledLink}
+              href="https://github.com/TheAlgorithms"
+              target="_blank"
+              rel="noreferrer"
+            >
+              GitHub
+            </a>
           </MenuItem>
           <MenuItem onClick={() => switchTheme()}>
             {darkTheme ? t("lightModeNavbar") : t("darkModeNavbar")}

components/playgroundEditor/LiveCodes.tsx

@@ -0,0 +1,233 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import type { Config, Playground } from "livecodes";
+import LiveCodesPlayground from "livecodes/react";
+import { luaTestRunner, type Language } from "lib/playground/livecodes";
+import { useDarkTheme } from "hooks/darkTheme";
+
+export default function LiveCodes({
+  language,
+  code,
+  setCode,
+  tests,
+}: {
+  language: Language;
+  code: string;
+  setCode: Dispatch<SetStateAction<string>>;
+  tests: string;
+}) {
+  const [playground, setPlayground] = useState<Playground | undefined>();
+  const [darkTheme] = useDarkTheme();
+
+  const onReady = (sdk: Playground) => {
+    setPlayground(sdk);
+    sdk.watch("ready", async () => {
+      await sdk.run();
+      if (language === "javascript" || language === "typescript") {
+        await sdk.runTests();
+      }
+    });
+    sdk.watch("code", (changed) => {
+      setCode(changed.code.script.content);
+    });
+  };
+
+  useEffect(() => {
+    playground?.setConfig({ theme: darkTheme ? "dark" : "light" });
+  }, [playground, darkTheme]);
+
+  const baseConfig: Partial<Config> = {
+    autoupdate: false,
+    languages: [language === "jupyter" ? "python-wasm" : language],
+    script: {
+      language: language === "jupyter" ? "python-wasm" : language,
+      content: code,
+    },
+    tools: {
+      enabled: ["console"],
+      active: "console",
+      status: "full",
+    },
+  };
+
+  const getJSTSConfig = (
+    lang: "javascript" | "typescript",
+    jsCode: string,
+    test: string
+  ): Partial<Config> => {
+    const editTest = (src: string) =>
+      src.replace(
+        /import\s+((?:.|\s)*?)\s+from\s+('|").*?('|")/g,
+        "import $1 from './script'"
+      );
+    return {
+      ...baseConfig,
+      script: {
+        language: lang,
+        content: jsCode,
+      },
+      tests: {
+        language: lang,
+        content: editTest(test),
+      },
+      tools: {
+        enabled: [
+          "console",
+          "tests",
+          ...(lang === "typescript" ? ["compiled"] : []),
+        ] as Config["tools"]["enabled"],
+        active: "tests",
+        status: "full",
+      },
+      autotest: true,
+    };
+  };
+
+  const getPythonConfig = (pyCode: string): Partial<Config> => {
+    const addTestRunner = (src: string) => {
+      const sep = 'if __name__ == "__main__":\n';
+      const [algCode, run] = src.split(sep);
+      const comment =
+        run
+          ?.split("\n")
+          .map((line) => `# ${line}`)
+          .join("\n") || "";
+      const testRunner = `\n    import doctest\n    doctest.testmod(verbose=True)`;
+      return `${algCode}${sep}${comment}${testRunner}`;
+    };
+    return {
+      ...baseConfig,
+      languages: ["python-wasm"],
+      script: {
+        language: "python-wasm",
+        content: addTestRunner(pyCode),
+      },
+    };
+  };
+
+  const getJupyterConfig = (jsonCode: string): Partial<Config> => {
+    const getPyCode = (src: string) => {
+      try {
+        const nb: {
+          cells: Array<{ ["cell_type"]: string; source: string[] }>;
+        } = JSON.parse(src);
+        return nb.cells
+          .filter((c) => c.cell_type === "code")
+          .map((c) => c.source.join(""))
+          .join("\n\n");
+      } catch {
+        return "";
+      }
+    };
+    return {
+      ...baseConfig,
+      languages: ["python-wasm"],
+      script: {
+        language: "python-wasm",
+        content: getPyCode(jsonCode),
+      },
+      tools: {
+        enabled: ["console"],
+        active: "console",
+        status: "open",
+      },
+    };
+  };
+
+  const getRConfig = (rCode: string): Partial<Config> => {
+    const editCode = (src: string) =>
+      src.replace(/# Example:\n# /g, "# Example:\n");
+    return {
+      ...baseConfig,
+      script: {
+        language: "r",
+        content: editCode(rCode),
+      },
+      tools: {
+        enabled: ["console"],
+        active: "console",
+        status: "open",
+      },
+    };
+  };
+
+  const getRubyConfig = (rubyCode: string): Partial<Config> => ({
+    ...baseConfig,
+    script: {
+      language: "ruby",
+      content: rubyCode,
+    },
+  });
+
+  const getLuaConfig = (luaCode: string, test: string): Partial<Config> => {
+    const pattern = /\n\s*local\s+(\S+)\s+=\s+require.*\n/g;
+    const matches = test.matchAll(pattern);
+    const fnName = [...matches][0]?.[1] || "return";
+    const content = `
+${luaCode.replace("return", `local ${fnName} =`)}
+
+
+${test.replace(pattern, "\n")}`.trimStart();
+
+    return {
+      ...baseConfig,
+      languages: ["lua-wasm"],
+      script: {
+        language: "lua-wasm",
+        content,
+        hiddenContent: luaTestRunner,
+      },
+    };
+  };
+
+  const getPhpConfig = (phpCode: string): Partial<Config> => ({
+    ...baseConfig,
+    languages: ["php-wasm"],
+    script: {
+      language: "php-wasm",
+      content: phpCode,
+    },
+    tools: {
+      enabled: ["console"],
+      active: "console",
+      status: "open",
+    },
+  });
+
+  const getCConfig = (cCode: string): Partial<Config> => ({
+    ...baseConfig,
+    languages: ["cpp-wasm"],
+    script: {
+      language: "cpp-wasm",
+      content: cCode,
+    },
+  });
+
+  const config: Partial<Config> =
+    language === "javascript" || language === "typescript"
+      ? getJSTSConfig(language, code, tests)
+      : language === "python"
+      ? getPythonConfig(code)
+      : language === "jupyter"
+      ? getJupyterConfig(code)
+      : language === "r"
+      ? getRConfig(code)
+      : language === "ruby"
+      ? getRubyConfig(code)
+      : language === "lua"
+      ? getLuaConfig(code, tests)
+      : language === "php"
+      ? getPhpConfig(code)
+      : language === "c"
+      ? getCConfig(code)
+      : baseConfig;
+
+  return (
+    <LiveCodesPlayground
+      appUrl="https://v19.livecodes.io/"
+      loading="eager"
+      config={config}
+      style={{ borderRadius: "0", resize: "none" }}
+      sdkReady={onReady}
+    />
+  );
+}