Add a getting started section

3 files changed, 100 insertions, 2 deletions

diff --git a/packages/bun-landing/index.css b/packages/bun-landing/index.css
index 58dbd0c32..25a7d1382 100644
--- a/packages/bun-landing/index.css
+++ b/packages/bun-landing/index.css
@@ -712,3 +712,21 @@ li {
 .Zig {
   transform: translateY(15%);
 }
+
+.CodeBlock .shiki {
+  padding: 1rem;
+  border-radius: 8px;
+  font-family: var(--monospace-font);
+  font-size: 1rem;
+}
+
+.Identifier {
+  font-family: var(--monospace-font);
+  font-size: 1rem;
+  color: #50fa7b !important;
+  background-color: #282a36;
+  padding: 0.25rem;
+  border-radius: 8px;
+  text-decoration: none !important;
+  margin-right: 0.2rem;
+}
diff --git a/packages/bun-landing/package.json b/packages/bun-landing/package.json
index 46cd7e98c..e71b0db13 100644
--- a/packages/bun-landing/package.json
+++ b/packages/bun-landing/package.json
@@ -3,6 +3,7 @@
     "bun-livereload": "1.0.2",
     "bun-types": "latest",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "shiki": "^0.10.1"
   }
 }
\ No newline at end of file
diff --git a/packages/bun-landing/page.jsx b/packages/bun-landing/page.tsx
index 6370fbd8f..b04709c2f 100644
--- a/packages/bun-landing/page.jsx
+++ b/packages/bun-landing/page.tsx
@@ -1,3 +1,18 @@
+import * as shiki from "shiki";
+
+globalThis._highlighter ||= await shiki.getHighlighter({
+  theme: "dracula",
+});
+
+const highlighter = globalThis._highlighter as shiki.Highlighter;
+
+const CodeBlock = ({ children, lang = "js" }) => {
+  const html = highlighter.codeToHtml(children.trim(), { lang });
+  return (
+    <div className="CodeBlock" dangerouslySetInnerHTML={{ __html: html }} />
+  );
+};
+
 const Command = ({ children, href, Tag = href ? "a" : "span" }) => (
   <Tag target="_blank" href={href} className="Tag Tag--Command">
     {children}
@@ -371,7 +386,71 @@ export default () => (
             </li>
           </ul>
 
-          <h1>How it works</h1>
+          <h1>Getting started</h1>
+
+          <p>
+            To install bun, run this{" "}
+            <a target="_blank" href="https://bun.sh/install">
+              install script
+            </a>{" "}
+            in your terminal. It downloads Bun from GitHub.
+          </p>
+
+          <CodeBlock lang="shell">{`
+curl https://bun.sh/install | bash
+          `}</CodeBlock>
+
+          <p>
+            {" "}
+            Bun's HTTP server is built on the{" "}
+            <a
+              className="Identifier"
+              href="https://developer.mozilla.org/en-US/docs/Web/API/Request"
+            >
+              Request
+            </a>
+            and{" "}
+            <a
+              className="Identifier"
+              href="https://developer.mozilla.org/en-US/docs/Web/API/Response"
+            >
+              Response
+            </a>
+            web standards
+          </p>
+
+          <CodeBlock lang="js">{`
+// http.js
+export default {
+  port: 3000,
+  fetch(request) {
+    return new Response("Welcome to Bun!");
+  },
+};
+          `}</CodeBlock>
+
+          <p>Run it with bun:</p>
+
+          <CodeBlock lang="shell">{`bun run http.js`}</CodeBlock>
+
+          <p>
+            Then open{" "}
+            <a target="_blank" href="http://localhost:3000">
+              http://localhost:3000
+            </a>{" "}
+            in your browser
+            <br />
+            <br />
+            See{" "}
+            <a href="https://github.com/Jarred-Sumner/bun/tree/main/examples">
+              more examples
+            </a>{" "}
+            and check out <a href="/docs">the docs</a>. If you have any
+            questions or want help, join{" "}
+            <a href="https://bun.sh/discord">Bun's Discord</a>
+          </p>
+
+          <h1>How does Bun work?</h1>
 
           <p>
             Bun.js uses the{" "}