Update README and doc intro to be consistent with each other (#1954)

README.md

@@ -44,14 +44,22 @@ OpenDevin agents collaborate with human developers to write code, fix bugs, and
 
 ![App screenshot](./docs/static/img/screenshot.png)
 
-## ⚡ Quick Start
-You can run OpenDevin with Docker. It works best with the most recent
-version of Docker, `26.0.0`.
+## ⚡ Getting Started
+The easiest way to run OpenDevin is inside a Docker container. It works best with the most recent version of Docker, `26.0.0`.
+You must be using Linux, Mac OS, or WSL on Windows.
+
+To start the app, run these commands, replacing `$(pwd)/workspace` with the directory you want OpenDevin to work with.
 
 ```bash
-#The directory you want OpenDevin to modify. MUST be an absolute path!
+# The directory you want OpenDevin to work with. MUST be an absolute path!
 export WORKSPACE_BASE=$(pwd)/workspace;
+```
+
+> [!WARNING]  
+> OpenDevin runs bash commands within a Docker sandbox, so it should not affect your machine. 
+> But your workspace directory will be attached to that sandbox, and files in the directory may be modified or deleted.
 
+```bash
 docker run \
     -it \
     --pull=always \
@@ -64,6 +72,8 @@ docker run \
     ghcr.io/opendevin/opendevin:0.5
 ```
 
+You'll find OpenDevin running at [http://localhost:3000](http://localhost:3000).
+
 ## 🚀 Documentation
 
 To learn more about the project, and for tips on using OpenDevin,

docs/modules/usage/intro.mdx

@@ -58,18 +58,13 @@ Explore the codebase of OpenDevin on [GitHub](https://github.com/OpenDevin/OpenD
 
 ## 🛠️ Getting Started
 
-The easiest way to run OpenDevin is inside a Docker container.
+The easiest way to run OpenDevin is inside a Docker container. It works best with the most recent version of Docker, `26.0.0`.
+You must be using Linux, Mac OS, or WSL on Windows.
 
 To start the app, run these commands, replacing `$(pwd)/workspace` with the directory you want OpenDevin to work with.
 
 ```
-# Your OpenAI API key, or any other LLM API key
-export LLM_API_KEY="sk-..."
-```
-
-```
-# The directory you want OpenDevin to modify.
-# MUST be an absolute path!
+# The directory you want OpenDevin to work with. MUST be an absolute path!
 export WORKSPACE_BASE=$(pwd)/workspace
 ```
 
@@ -91,7 +86,7 @@ docker run \
     ghcr.io/opendevin/opendevin:0.5
 ```
 
-You'll find opendevin running at [http://localhost:3000](http://localhost:3000).
+You'll find OpenDevin running at [http://localhost:3000](http://localhost:3000).
 
 :::tip
 If you want to use the **(unstable!)** bleeding edge, you can use `ghcr.io/opendevin/opendevin:main` as the image (last line).

docs/src/components/Code/Code.tsx

@@ -1,45 +0,0 @@
-import Link from "@docusaurus/Link";
-import { Header } from "@site/src/pages";
-import { CodeBlock } from "./CodeBlock";
-import styles from "./styles.module.css";
-
-export function Code() {
-  const workspaceCode = `# The directory you want OpenDevin to modify. MUST be an absolute path!
-export WORKSPACE_BASE=$(pwd)/workspace`;
-
-  const dockerCode = `docker run \\
-    -it \\
-    --pull=always \\
-    -e SANDBOX_USER_ID=$(id -u) \\
-    -e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \\
-    -v $WORKSPACE_BASE:/opt/workspace_base \\
-    -v /var/run/docker.sock:/var/run/docker.sock \\
-    -p 3000:3000 \\
-    --add-host host.docker.internal:host-gateway \\
-    ghcr.io/opendevin/opendevin:0.5`;
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.innerContainer}>
-        <div className={styles.header}>
-          <Header
-            title="Getting Started"
-            summary="Getting Started"
-            description="Get started using OpenDevin in just a few lines of code"
-          ></Header>
-          <div className={styles.buttons}>
-            <Link
-              className="button button--secondary button--lg"
-              to="/modules/usage/intro"
-            >
-              Learn More
-            </Link>
-          </div>
-        </div>
-        <br />
-        <CodeBlock language="python" code={workspaceCode} />
-        <CodeBlock language="python" code={dockerCode} />
-      </div>
-    </div>
-  );
-}

docs/src/components/Code/CodeBlock.tsx

@@ -1,63 +0,0 @@
-import { useColorMode } from "@docusaurus/theme-common";
-import { Highlight, themes } from "prism-react-renderer";
-import { useCopyToClipboard } from "react-use";
-
-interface CodeBlockProps {
-  language: string;
-  code: string;
-}
-
-export function CodeBlock({ language, code }: CodeBlockProps) {
-  const [state, copyToClipboard] = useCopyToClipboard();
-  const { isDarkTheme } = useColorMode();
-
-  const copyCode = () => {
-    copyToClipboard(code);
-  };
-
-  return (
-    <div
-      style={{
-        position: "relative",
-      }}
-    >
-      <Highlight
-        theme={isDarkTheme ? themes.vsLight : themes.vsDark}
-        code={code}
-        language={language}
-      >
-        {({ style, tokens, getLineProps, getTokenProps }) => (
-          <pre style={style}>
-            {tokens.map((line, i) => (
-              <div key={i} {...getLineProps({ line })}>
-                <span
-                  style={{
-                    display: "inline-block",
-                    width: "3em",
-                    color: "var(--gray)",
-                  }}
-                >
-                  {i + 1}
-                </span>
-                {line.map((token, key) => (
-                  <span key={key} {...getTokenProps({ token })} />
-                ))}
-              </div>
-            ))}
-          </pre>
-        )}
-      </Highlight>
-      <button
-        className="button button--secondary"
-        style={{
-          position: "absolute",
-          top: "10px",
-          right: "10px",
-        }}
-        onClick={copyCode}
-      >
-        {state.value ? "Copied!" : "Copy"}
-      </button>
-    </div>
-  );
-}

docs/src/components/Code/styles.module.css

@@ -1,26 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  padding-top: 25px;
-  padding-bottom: 25px;
-  width: 100%;
-}
-
-.innerContainer {
-  padding: 50px;
-  width: 100%;
-  max-width: 1300px;
-  padding-top: 30px;
-  margin: auto;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-}
-
-@media (max-width: 768px) {
-  .header {
-    flex-direction: column;
-  }
-}

docs/src/pages/index.tsx

@@ -1,7 +1,6 @@
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 
-import { Code } from "../components/Code/Code";
 import { HomepageHeader } from "../components/HomepageHeader/HomepageHeader";
 import { Welcome } from "../components/Welcome/Welcome";
 
@@ -25,7 +24,6 @@ export default function Home(): JSX.Element {
         <HomepageHeader />
         <div>
           <Welcome />
-          <Code />
         </div>
       </div>
     </Layout>