mbta · mathcolo · May 31, 2024 · May 30, 2024 · May 30, 2024 · May 30, 2024
diff --git a/.tool-versions b/.tool-versions
@@ -1,2 +1,3 @@
 elixir 1.16.1-otp-26
 erlang 26.2.2
+nodejs 20.14.0
@@ -0,0 +1,7 @@
+import "./phoenix.js";
+import { App } from "./components/app.js";
+import { createRoot } from "react-dom/client";
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = createRoot(document.getElementById("app")!);
+root.render(<App />);
@@ -0,0 +1,18 @@
+import { Help } from "./help";
+import { Home } from "./home";
+import { ReactElement } from "react";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Home />,
+  },
+  {
+    path: "/help",
+    element: <Help />,
+  },
+]);
+export const App = (): ReactElement => {
+  return <RouterProvider router={router}></RouterProvider>;
+};
@@ -0,0 +1,32 @@
+import { ReactElement } from "react";
+
+export const Help = (): ReactElement => {
+  return (
+    <div className="w-1/2 m-10">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Orci eu lobortis
+      elementum nibh tellus. In dictum non consectetur a erat nam at. At in
+      tellus integer feugiat scelerisque varius. Pulvinar etiam non quam lacus
+      suspendisse faucibus interdum posuere. Urna duis convallis convallis
+      tellus id interdum velit laoreet. Sed turpis tincidunt id aliquet risus.
+      Condimentum lacinia quis vel eros donec. Tincidunt augue interdum velit
+      euismod. Metus aliquam eleifend mi in nulla posuere. At ultrices mi tempus
+      imperdiet. Mattis pellentesque id nibh tortor id aliquet. Enim ut tellus
+      elementum sagittis vitae et leo. Sed viverra tellus in hac. Sed sed risus
+      pretium quam vulputate. Diam phasellus vestibulum lorem sed risus
+      ultricies tristique nulla. Habitant morbi tristique senectus et netus et.
+      Diam maecenas sed enim ut sem viverra aliquet. Nunc mi ipsum faucibus
+      vitae aliquet nec. Dictum varius duis at consectetur lorem donec massa
+      sapien faucibus. In dictum non consectetur a erat nam. Massa tempor nec
+      feugiat nisl. Sagittis eu volutpat odio facilisis mauris sit amet. Massa
+      placerat duis ultricies lacus sed turpis tincidunt id. Elit scelerisque
+      mauris pellentesque pulvinar pellentesque habitant morbi tristique
+      senectus. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum.
+      Sit amet luctus venenatis lectus magna. Et netus et malesuada fames ac
+      turpis egestas. Pellentesque id nibh tortor id aliquet. Odio aenean sed
+      adipiscing diam donec adipiscing. Viverra justo nec ultrices dui sapien.
+      Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Lacus
+      suspendisse faucibus interdum posuere lorem.
+    </div>
+  );
+};
@@ -0,0 +1,12 @@
+import { ReactElement } from "react";
+
+export const Home = (): ReactElement => {
+  return (
+    <div className="text-3xl">
+      🪐
+      <span className="text-[#ED8B00]">O</span>
+      <span className="text-[#DA291C]">r</span>
+      <span className="text-[#003DA5]">b</span>it
+    </div>
+  );
+};
@@ -0,0 +1,9 @@
+import { Home } from "../../components/home";
+import { render } from "@testing-library/react";
+
+describe("home", () => {
+  test("loads orbit placeholder", () => {
+    const view = render(<Home />);
+    expect(view.getByText(/🪐/)).toBeInTheDocument();
+  });
+});
@@ -1,15 +1,11 @@
 <!DOCTYPE html>
-<html lang="en" class="[scrollbar-gutter:stable]">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Phoenix Framework">
-      <%= assigns[:page_title] || "Orbit" %>
-    </.live_title>
-    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
-    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
-    </script>
+    <title><%= assigns[:page_title] || "Orbit" %></title>
+    <link rel="stylesheet" href={~p"/assets/app.css"} />
   </head>
   <body class="bg-white antialiased">
     <%= @inner_content %>

@@ -0,0 +1,6 @@
+<noscript>
+  You must enable JavaScript to view this page.
+</noscript>
+<div id="app"></div>
+<script src={~p"/assets/app.js"}>
+</script>
@@ -1,4 +1,4 @@
-defmodule OrbitWeb.PageController do
+defmodule OrbitWeb.FrontendPageController do
   use OrbitWeb, :controller
 
   def home(conn, _params) do

@@ -0,0 +1,5 @@
+defmodule OrbitWeb.FrontendPageHTML do
+  use OrbitWeb, :html
+
+  embed_templates "frontend_html/*"
+end
@@ -17,7 +17,10 @@ defmodule OrbitWeb.Router do
   scope "/", OrbitWeb do
     pipe_through :browser
 
-    get "/", PageController, :home
+    # Routes that should be handled by React
+    # Avoid using a wildcard to prevent invalid 200 responses
+    get "/", FrontendPageController, :home
+    get "/help", FrontendPageController, :home
   end
 
   scope "/", OrbitWeb do

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "orbit",
   "scripts": {
     "build:css": "tailwindcss -i css/app.css -o priv/static/assets/app.css",
-    "build:js": "NODE_PATH=deps/ esbuild js/app.ts --bundle --tsconfig=tsconfig.json --outdir=priv/static/assets --external:/fonts/* --external:/images/*",
+    "build:js": "NODE_PATH=deps/ esbuild js/app.tsx --bundle --tsconfig=tsconfig.json --outdir=priv/static/assets --external:/fonts/* --external:/images/*",
     "format": "prettier . --write",
     "test:eslint": "eslint .",
     "test:format": "prettier . --check",
@@ -13,6 +13,9 @@
   "dependencies": {
     "@tailwindcss/forms": "^0.5.7",
     "esbuild": "^0.21.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1",
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {