Feat/website setup (DulLabs#41)

* feat:basic editor

* feat: initial website setup

* feat: design changes

* feat:add docs

* refactor: format code

* fix: package dependencies

* feat: add turbo.json

* feat: add packageManager in package.json

* feat: add missing dependencies

apps/docs/components/Code/CodeEditor/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import dynamic from "next/dynamic";
+import { highlight } from "prismjs";
+
+import { bhaiLangSyntax } from "../../common/syntax";
+
+import "prismjs/themes/prism-tomorrow.css";
+
+const Editor = dynamic(() => import("react-simple-code-editor"), {
+  ssr: false,
+});
+
+const CodeEditor = (props: Props) => {
+  const { handleChange, code } = props;
+
+  const highlightWithLineNumbers = (input: string) =>
+    highlight(input, bhaiLangSyntax, "bhaiLang")
+      .split("\n")
+      .map((line, i) => `<span class='editorLineNumber'>${i + 1}</span>${line}`)
+      .join("\n");
+
+  return (
+    <div className="editorContainer">
+      <Editor
+        value={code}
+        onValueChange={(code) => handleChange(code)}
+        highlight={(code) => highlightWithLineNumbers(code)}
+        padding={10}
+        textareaClassName="codeArea"
+        className="editor"
+        id="codeEditor"
+        style={{
+          fontFamily: "monospace",
+          fontSize: 16,
+        }}
+      />
+    </div>
+  );
+};
+type Props = {
+  handleChange: (newCode: string) => void;
+  code: string;
+};
+export default React.memo(CodeEditor);

apps/docs/components/Code/Terminal/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+const Terminal = (props: Props) => {
+  const { output, isSuccess } = props;
+  return (
+    <div
+      className={`${
+        isSuccess !== null ? "terminal" : "terminal-collapsed"
+      } bg-black text-white my-6`}
+    >
+      {isSuccess !== null && !isSuccess ? (
+        <div className="text-red-700 output opacity-0">❌ Execution Failed</div>
+      ) : (
+        <div className="text-green-700 output opacity-0">Shandaar bhai 🎉</div>
+      )}
+      {output.map((line) => {
+        return (
+          <div
+            key={line.value}
+            className={`${line.isError ? "text-red-500" : ""} output opacity-0`}
+          >
+            &gt; {line.value}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+type Props = {
+  output: {
+    value: string;
+    isError: boolean;
+  }[];
+  isSuccess: boolean | null;
+};
+export default React.memo(Terminal);

apps/docs/components/Code/index.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+
+import interpreter from "bhai-lang-interpreter";
+
+import CodeEditor from "./CodeEditor";
+import Terminal from "./Terminal";
+
+const initialCode = `
+hi bhai
+bol bhai "Hello World";
+bye bhai
+`;
+
+const Code = (props: Props) => {
+  const {} = props;
+  const [code, setCode] = useState(initialCode);
+  const [output, setOutput] = useState<{ value: string; isError: boolean }[]>(
+    []
+  );
+  const [isSuccess, setIsSuccess] = useState<boolean | null>(null);
+
+  const handleChange = (newCode: string) => {
+    setCode(newCode);
+  };
+
+  const executeCode = () => {
+    let orignalConsoleLog = console.log;
+    const outputList = [];
+    let isExecusionSuccess = true;
+    console.log = function (...args) {
+      outputList.push({ value: args.join("\n"), isError: false });
+    };
+
+    try {
+      interpreter.interpret(code);
+    } catch (e) {
+      if (e instanceof Error) {
+        isExecusionSuccess = false;
+        outputList.push({ value: e.message, isError: true });
+      } else {
+        console.error(e);
+      }
+    }
+
+    setIsSuccess(isExecusionSuccess);
+    setOutput(outputList);
+    console.log = orignalConsoleLog;
+  };
+
+  const clearCode = () => {
+    setCode("");
+    setIsSuccess(null);
+    setOutput([]);
+  };
+
+  return (
+    <div id="playground" className="mx-4 sm:mx-12">
+      <div className="sm:flex justify-between items-center">
+        <h2 className="text-3xl font-extrabold tracking-tight text-gray-100 sm:text-4xl my-4">
+          Playground
+        </h2>
+        <div className="flex">
+          <button
+            disabled={!code}
+            onClick={executeCode}
+            className="mx-2 flex items-center justify-center px-8 border border-transparent text-base font-medium rounded-md text-white bg-bhagwa-600 hover:bg-bhagwa-700 md:text-lg md:px-10 my-4 sm:my-8 sm:py-3 disabled:opacity-40"
+          >
+            Run
+          </button>
+
+          <button
+            onClick={clearCode}
+            className="mx-2 flex items-center justify-center px-8 border border-transparent text-base font-medium rounded-md text-bhagwa-700 bg-bhagwa-300 hover:bg-bhagwa-400 md:text-lg md:px-10 my-4 sm:my-8 sm:py-3"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+      <CodeEditor handleChange={handleChange} code={code} />
+      <Terminal output={output} isSuccess={isSuccess} />
+    </div>
+  );
+};
+type Props = {};
+export default React.memo(Code);

apps/docs/components/Documentation/Snippet.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { highlight } from "prismjs";
+
+import { bhaiLangSyntax } from "../common/syntax";
+
+const Snippet = (props: Props) => {
+  const { code } = props;
+
+  return (
+    <div
+      className="bg-editorBackground py-2 px-2 my-6 text-sm text-white"
+      dangerouslySetInnerHTML={{
+        __html: highlight(code, bhaiLangSyntax, "bhaiLang").replaceAll(
+          "\n",
+          "<br/>"
+        ),
+      }}
+    ></div>
+  );
+};
+type Props = { code: string };
+export default React.memo(Snippet);

apps/docs/components/Documentation/index.tsx

@@ -0,0 +1,112 @@
+import Snippet from "./Snippet";
+
+/* This example requires Tailwind CSS v2.0+ */
+const features = [
+  {
+    name: "General",
+    description: (
+      <>
+        <code className="language-cpp">hi bhai</code> is the entrypoint for the
+        program and all program must end with{" "}
+        <code className="language-cpp">bye bhai</code>. Anything outside of it
+        will be ignored.
+      </>
+    ),
+    code: `This will be ignored
+
+    hi bhai
+    // Write code here
+    bye bhai
+
+    This too
+    `,
+  },
+  {
+    name: "Variables",
+    description: (
+      <>
+        Variables can be declared using{" "}
+        <code className="language-cpp">bhai ye hai</code>.
+      </>
+    ),
+    code: `hi bhai
+    bhai ye hai a = 10;
+    bhai ye hai b = "two";
+    bhai ye hai c = 15;
+    a = a + 1;
+    b = 21;
+    c *= 2;
+    bye bhai
+    `,
+  },
+  {
+    name: "Types",
+    description: (
+      <>
+        Numbers and strings are like other languages. Null values can be denoted
+        using <code className="language-cpp">nulla</code>.{" "}
+        <code className="language-cpp">sahi</code> and{" "}
+        <code className="language-cpp">galat</code> are the boolean values.
+      </>
+    ),
+    code: `hi bhai
+    bhai ye hai a = 10;
+    bhai ye hai b = 10 + (15*20);
+    bhai ye hai c = "two";
+    bhai ye hai d = 'ok';
+    bhai ye hai e = nulla;
+    bhai ye hai f = sahi;
+    bhai ye hai g = galat;
+    bye bhai
+    `,
+  },
+  {
+    name: "Built-ins",
+    description: (
+      <>
+        Use <code className="language-cpp">bol bhai</code> to print anything to
+        console.
+      </>
+    ),
+    code: `hi bhai
+    bol bhai "Hello World";
+    bhai ye hai a = 10;
+    {
+      bhai ye hai b = 20;
+      bol bhai a + b;
+    }
+    bol bhai 5, 'ok', nulla , sahi , galat;
+    bye bhai
+    `,
+  },
+];
+
+export default function Documentation() {
+  return (
+    <div>
+      <div className="max-w-2xl mx-auto py-24 px-4 grid items-center grid-cols-1 gap-y-16 gap-x-8 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8">
+        <div>
+          <h2 className="text-3xl font-extrabold tracking-tight text-gray-100 sm:text-4xl">
+            Documentation
+          </h2>
+          <p className="mt-4 text-gray-300">
+            Bhailang is dynamically typed toy programming language, based on an
+            inside joke, written in Typescript.
+          </p>
+
+          <dl className="mt-16 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:gap-x-8">
+            {features.map((feature) => (
+              <div key={feature.name} className="border-t border-gray-200 pt-4">
+                <dt className="font-medium text-gray-300">{feature.name}</dt>
+                <dd className="mt-2 text-sm text-gray-200">
+                  {feature.description}
+                </dd>
+                <Snippet code={feature.code} />
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/docs/components/Footer/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+const Footer = (props: Props) => {
+  const {} = props;
+  return (
+    <footer>
+      <div className="text-white text-sm text-center">
+        &copy; 2022{" "}
+        <a className="hover:text-bhagwa-600" href="https://tripathi.dev">
+          Rishabh Tripathi
+        </a>
+        ,{" "}
+        <a
+          className="hover:text-bhagwa-600"
+          href="https://github.com/aniketsingh0104"
+        >
+          Aniket Singh
+        </a>
+      </div>
+    </footer>
+  );
+};
+type Props = {};
+export default React.memo(Footer);