add /deploy, consolidate externalLinks

package.json

@@ -1,7 +1,7 @@
 {
   "name": "Rowy",
   "version": "2.0.0-rc.0",
-  "homepage": "https://rowy.io/",
+  "homepage": "https://rowy.io",
   "repository": {
     "type": "git",
     "url": "https://github.com/rowyio/rowy.git"

src/App.tsx

@@ -23,6 +23,7 @@ import routes from "constants/routes";
 import AuthPage from "pages/Auth";
 import SignOutPage from "pages/Auth/SignOut";
 import SignUpPage from "pages/Auth/SignUp";
+import DeployPage from "pages/Deploy";
 import TestPage from "pages/Test";
 import RowyRunTestPage from "pages/RowyRunTest";
 import PageNotFound from "pages/PageNotFound";
@@ -94,6 +95,11 @@ export default function App() {
                           path={routes.setup}
                           render={() => <SetupPage />}
                         />
+                        <Route
+                          exact
+                          path={routes.deploy}
+                          render={() => <DeployPage />}
+                        />
 
                         <Route
                           exact

src/assets/BrandedBackground.tsx

@@ -2,13 +2,13 @@ import Helmet from "react-helmet";
 import { use100vh } from "react-div-100vh";
 
 import { useTheme, alpha } from "@mui/material/styles";
+import { Box, BoxProps } from "@mui/material";
 
 import bgPattern from "assets/bg-pattern.svg";
 import bgPatternDark from "assets/bg-pattern-dark.svg";
 
 export default function BrandedBackground() {
   const theme = useTheme();
-  const fullScreenHeight = use100vh() ?? 0;
 
   return (
     <Helmet>
@@ -55,33 +55,32 @@ export default function BrandedBackground() {
               ].join(", ")
             };
           }
-
-          #root {
-            cursor: default;
-          }
-          
-          .wrapper {
-            display: grid;
-            place-items: center;
-            align-content: center;
-            gap: ${theme.spacing(3)};
-            grid-auto-rows: max-content;
-
-            ${["top", "right", "bottom", "left"]
-              .map(
-                (side) =>
-                  `padding-${side}: max(env(safe-area-inset-${side}), ${theme.spacing(
-                    1
-                  )});`
-              )
-              .join("\n")}
-            
-            min-height: ${
-              fullScreenHeight > 0 ? `${fullScreenHeight}px` : "100vh"
-            };
-          }
           `}
       </style>
     </Helmet>
   );
 }
+
+export function Wrapper(props: BoxProps) {
+  const fullScreenHeight = use100vh() ?? 0;
+
+  return (
+    <Box
+      {...props}
+      sx={{
+        display: "grid",
+        placeItems: "center",
+        alignContent: "center",
+        gap: (theme) => ({ xs: theme.spacing(2), sm: theme.spacing(3) }),
+        gridAutoRows: "max-content",
+        minHeight: fullScreenHeight > 0 ? `${fullScreenHeight}px` : "100vh",
+
+        pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(1)})`,
+        pb: (theme) => `max(env(safe-area-inset-bottom), ${theme.spacing(1)})`,
+        pl: (theme) => `max(env(safe-area-inset-left), ${theme.spacing(1)})`,
+        pr: (theme) => `max(env(safe-area-inset-right), ${theme.spacing(1)})`,
+        ...props.sx,
+      }}
+    />
+  );
+}

src/components/Auth/AuthLayout.tsx

@@ -7,14 +7,15 @@ import {
   LinkProps,
 } from "@mui/material";
 import { alpha } from "@mui/material/styles";
-import BrandedBackground from "assets/BrandedBackground";
+import BrandedBackground, { Wrapper } from "assets/BrandedBackground";
 import Logo from "assets/Logo";
 
 import { useAppContext } from "contexts/AppContext";
-import { homepage } from "@root/package.json";
+import { EXTERNAL_LINKS } from "constants/externalLinks";
 
 export interface IAuthLayoutProps {
   hideLogo?: boolean;
+  hideProject?: boolean;
   title?: React.ReactNode;
   description?: React.ReactNode;
   children: React.ReactNode;
@@ -23,6 +24,7 @@ export interface IAuthLayoutProps {
 
 export default function AuthLayout({
   hideLogo,
+  hideProject,
   title,
   description,
   children,
@@ -39,7 +41,7 @@ export default function AuthLayout({
   };
 
   return (
-    <div className="wrapper">
+    <Wrapper sx={hideLogo ? { gap: (theme) => theme.spacing(2) } : {}}>
       <BrandedBackground />
 
       <div
@@ -49,7 +51,11 @@ export default function AuthLayout({
           visibility: hideLogo ? "hidden" : "visible",
         }}
       >
-        <a href={homepage} target="_blank" rel="noopener noreferrer">
+        <a
+          href={EXTERNAL_LINKS.homepage}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <Logo />
         </a>
       </div>
@@ -115,43 +121,42 @@ export default function AuthLayout({
         <Typography
           variant="caption"
           color="text.secondary"
-          display="block"
           textAlign="center"
-          sx={{ pt: 1 }}
+          sx={{ pt: 1, display: hideProject ? "none" : "block" }}
         >
           Project: <span style={{ userSelect: "all" }}>{projectId}</span>
         </Typography>
       </Paper>
 
       <Stack
-        spacing={1.25}
+        spacing={{ xs: 1.25, sm: 2 }}
         direction="row"
         flexWrap="wrap"
         justifyContent="center"
         style={{ maxWidth: 360, width: "100%", padding: "0 4px" }}
       >
-        <Link href={homepage} {...linkProps}>
-          {homepage.split("//").pop()?.replace(/\//g, "")}
+        <Link href={EXTERNAL_LINKS.homepage} {...linkProps}>
+          {EXTERNAL_LINKS.homepage.split("//").pop()?.replace(/\//g, "")}
         </Link>
-        <Link href={homepage} {...linkProps}>
+        <Link href={EXTERNAL_LINKS.discord} {...linkProps}>
           Discord
         </Link>
-        <Link href={homepage} {...linkProps}>
+        <Link href={EXTERNAL_LINKS.twitter} {...linkProps}>
           Twitter
         </Link>
 
         <div style={{ flexGrow: 1, marginLeft: 0 }} />
 
-        <Link href={homepage} {...linkProps}>
+        <Link href={EXTERNAL_LINKS.docs} {...linkProps}>
           Docs
         </Link>
-        <Link href={homepage} {...linkProps}>
+        <Link href={EXTERNAL_LINKS.privacy} {...linkProps}>
           Privacy
         </Link>
-        <Link href={homepage} {...linkProps}>
+        <Link href={EXTERNAL_LINKS.terms} {...linkProps}>
           Terms
         </Link>
       </Stack>
-    </div>
+    </Wrapper>
   );
 }

src/components/Auth/MarketingBanner.tsx

@@ -0,0 +1,94 @@
+import { Stack, Paper, Typography, Button } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import DiscordIcon from "assets/icons/Discord";
+import TwitterIcon from "@mui/icons-material/Twitter";
+
+import Logo from "assets/Logo";
+import { EXTERNAL_LINKS } from "constants/externalLinks";
+
+export default function MarketingBanner() {
+  return (
+    <Paper
+      elevation={4}
+      square
+      sx={{
+        display: { xs: "none", md: "block" },
+
+        width: 520,
+        gridColumn: 1,
+        gridRow: "1 / 4",
+
+        backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.5),
+        backdropFilter: "blur(20px) saturate(150%)",
+
+        pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(8)})`,
+        pb: (theme) => `max(env(safe-area-inset-bottom), ${theme.spacing(8)})`,
+        pl: (theme) => `max(env(safe-area-inset-left), ${theme.spacing(8)})`,
+        pr: 8,
+      }}
+    >
+      <Stack
+        direction="column"
+        justifyContent="space-between"
+        spacing={4}
+        style={{ height: "100%" }}
+      >
+        <a
+          href={EXTERNAL_LINKS.homepage}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Logo size={2} />
+        </a>
+
+        <div>
+          <Typography
+            component="p"
+            variant="h5"
+            sx={{ fontWeight: "normal", fontSize: 28 / 16 + "rem" }}
+            paragraph
+          >
+            Manage Firestore data in a spreadsheet-like&nbsp;UI
+          </Typography>
+          <Typography
+            component="p"
+            variant="h5"
+            sx={{ fontWeight: "normal", fontSize: 28 / 16 + "rem" }}
+            paragraph
+          >
+            Write Cloud Functions effortlessly&nbsp;in the browser
+          </Typography>
+          <Typography
+            component="p"
+            variant="h5"
+            sx={{ fontWeight: "normal", fontSize: 28 / 16 + "rem" }}
+            paragraph
+          >
+            Connect to your favorite third&nbsp;party platforms
+          </Typography>
+        </div>
+
+        <Stack direction="row" spacing={1}>
+          <Button
+            variant="outlined"
+            startIcon={<DiscordIcon color="action" />}
+            href={EXTERNAL_LINKS.discord}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Join our Community
+          </Button>
+          <Button
+            variant="outlined"
+            startIcon={<TwitterIcon color="action" />}
+            href={EXTERNAL_LINKS.twitter}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Follow on Twitter
+          </Button>
+        </Stack>
+      </Stack>
+    </Paper>
+  );
+}

src/components/Home/AccessDenied.tsx

@@ -5,7 +5,7 @@ import SecurityIcon from "@mui/icons-material/SecurityOutlined";
 
 import EmptyState from "components/EmptyState";
 
-import WIKI_LINKS from "constants/wikiLinks";
+import { WIKI_LINKS } from "constants/externalLinks";
 import routes from "constants/routes";
 import { useAppContext } from "@src/contexts/AppContext";
 

src/components/Settings/ProjectSettings/About.tsx

@@ -4,13 +4,16 @@ import { differenceInDays } from "date-fns";
 
 import { Grid, Typography, Button, Link, Divider } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import DiscordIcon from "assets/icons/Discord";
+import TwitterIcon from "@mui/icons-material/Twitter";
 
 import Logo from "assets/Logo";
 import InlineOpenInNewIcon from "components/InlineOpenInNewIcon";
 
 import { name, version, repository } from "@root/package.json";
 import { useAppContext } from "contexts/AppContext";
-import WIKI_LINKS from "constants/wikiLinks";
+import { EXTERNAL_LINKS, WIKI_LINKS } from "constants/externalLinks";
 
 const useLastCheckedUpdateState = createPersistedState(
   "__ROWY__LAST_CHECKED_UPDATE"
@@ -82,41 +85,44 @@ export default function About() {
       />
 
       <div style={{ marginTop: 12 }}>
-        <Grid container justifyContent="center" spacing={3}>
+        <Grid container justifyContent="center" spacing={1}>
           <Grid item>
-            <Link
-              variant="body2"
-              href={repository.url.replace(".git", "")}
+            <Button
+              variant="outlined"
+              color="secondary"
+              startIcon={<GitHubIcon viewBox="-1 -1 26 26" color="action" />}
+              href={EXTERNAL_LINKS.gitHub}
               target="_blank"
               rel="noopener noreferrer"
             >
               GitHub
-              <InlineOpenInNewIcon />
-            </Link>
+            </Button>
           </Grid>
 
           <Grid item>
-            <Link
-              variant="body2"
-              // href={repository.url.replace(".git", "")}
+            <Button
+              variant="outlined"
+              color="secondary"
+              startIcon={<DiscordIcon color="action" />}
+              href={EXTERNAL_LINKS.discord}
               target="_blank"
               rel="noopener noreferrer"
             >
               Discord
-              <InlineOpenInNewIcon />
-            </Link>
+            </Button>
           </Grid>
 
           <Grid item>
-            <Link
-              variant="body2"
-              // href={repository.url.replace(".git", "")}
+            <Button
+              variant="outlined"
+              color="secondary"
+              startIcon={<TwitterIcon color="action" />}
+              href={EXTERNAL_LINKS.twitter}
               target="_blank"
               rel="noopener noreferrer"
             >
               Twitter
-              <InlineOpenInNewIcon />
-            </Link>
+            </Button>
           </Grid>
         </Grid>
       </div>
@@ -126,29 +132,27 @@ export default function About() {
       <div>
         <Grid container spacing={1} alignItems="center" direction="row">
           <Grid item xs>
-            <Typography display="block">
+            {checkState === "LOADING" ? (
+              <Typography display="block">Checking for updates…</Typography>
+            ) : latestUpdate === null ? (
+              <Typography display="block">Up to date</Typography>
+            ) : (
+              <Typography display="block">
+                Update available:{" "}
+                <Link
+                  href={latestUpdate.html_url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {latestUpdate.tag_name}
+                  <InlineOpenInNewIcon />
+                </Link>
+              </Typography>
+            )}
+
+            <Typography display="block" color="textSecondary">
               {name} v{version}
             </Typography>
-            {checkState === "LOADING" ? (
-              <Typography color="textSecondary" display="block">
-                Checking for updates…
-              </Typography>
-            ) : latestUpdate === null ? (
-              <Typography color="textSecondary" display="block">
-                Up to date
-              </Typography>
-            ) : (
-              <Link
-                href={latestUpdate.html_url}
-                target="_blank"
-                rel="noopener noreferrer"
-                variant="body2"
-                display="block"
-              >
-                Update available: {latestUpdate.tag_name}
-                <InlineOpenInNewIcon />
-              </Link>
-            )}
           </Grid>
 
           <Grid item>

src/components/Settings/ProjectSettings/RowyRun.tsx

@@ -14,9 +14,9 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import InlineOpenInNewIcon from "components/InlineOpenInNewIcon";
 
 import { IProjectSettingsChildProps } from "pages/Settings/ProjectSettings";
-import WIKI_LINKS from "constants/wikiLinks";
+import { EXTERNAL_LINKS } from "constants/externalLinks";
 import { name } from "@root/package.json";
-import { runRoutes, runRepoUrl } from "constants/runRoutes";
+import { runRoutes } from "constants/runRoutes";
 
 const useLastCheckedUpdateState = createPersistedState(
   "__ROWY__RUN_LAST_CHECKED_UPDATE"
@@ -74,8 +74,10 @@ export default function RowyRun({
 
     // https://docs.github.com/en/rest/reference/repos#get-the-latest-release
     const endpoint =
-      runRepoUrl.replace("github.com", "api.github.com/repos") +
-      "/releases/latest";
+      EXTERNAL_LINKS.rowyRunGitHub.replace(
+        "github.com",
+        "api.github.com/repos"
+      ) + "/releases/latest";
     try {
       const versionReq = await fetch(
         settings.rowyRunUrl + runRoutes.version.path,
@@ -121,7 +123,7 @@ export default function RowyRun({
 
   const deployButton = window.location.hostname.includes("rowy.app") ? (
     <LoadingButton
-      href={`https://deploy.cloud.run/?git_repo=${runRepoUrl}.git`}
+      href={EXTERNAL_LINKS.rowyRunDeploy}
       target="_blank"
       rel="noopener noreferrer"
       loading={
@@ -135,7 +137,11 @@ export default function RowyRun({
       One-Click Deploy
     </LoadingButton>
   ) : (
-    <Button href={runRepoUrl} target="_blank" rel="noopener noreferrer">
+    <Button
+      href={EXTERNAL_LINKS.rowyRunDocs}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       Deploy Instructions
     </Button>
   );
@@ -147,7 +153,7 @@ export default function RowyRun({
         such as table action scripts, user management, and easy Cloud Function
         deployment.{" "}
         <Link
-          href={WIKI_LINKS.functions}
+          href={EXTERNAL_LINKS.rowyRun}
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -162,29 +168,27 @@ export default function RowyRun({
         <div>
           <Grid container spacing={1} alignItems="center" direction="row">
             <Grid item xs>
-              <Typography display="block">
+              {checkState === "LOADING" ? (
+                <Typography display="block">Checking for updates…</Typography>
+              ) : latestUpdate === null ? (
+                <Typography display="block">Up to date</Typography>
+              ) : (
+                <Typography display="block">
+                  Update available:{" "}
+                  <Link
+                    href={latestUpdate.html_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {latestUpdate.tag_name}
+                    <InlineOpenInNewIcon />
+                  </Link>
+                </Typography>
+              )}
+
+              <Typography display="block" color="textSecondary">
                 {name} Run v{version}
               </Typography>
-              {checkState === "LOADING" ? (
-                <Typography color="textSecondary" display="block">
-                  Checking for updates…
-                </Typography>
-              ) : latestUpdate === null ? (
-                <Typography color="textSecondary" display="block">
-                  Up to date
-                </Typography>
-              ) : (
-                <Link
-                  href={latestUpdate.html_url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  variant="body2"
-                  display="block"
-                >
-                  Update available: {latestUpdate.tag_name}
-                  <InlineOpenInNewIcon />
-                </Link>
-              )}
             </Grid>
 
             <Grid item>

src/components/Setup/Step1RowyRun.tsx

@@ -11,7 +11,8 @@ import SetupItem from "./SetupItem";
 
 import { name } from "@root/package.json";
 import { rowyRun } from "utils/rowyRun";
-import { runRepoUrl, runRoutes } from "constants/runRoutes";
+import { runRoutes } from "constants/runRoutes";
+import { EXTERNAL_LINKS } from "constants/externalLinks";
 
 export default function Step1RowyRun({
   completion,
@@ -63,7 +64,7 @@ export default function Step1RowyRun({
 
   const deployButton = window.location.hostname.includes("rowy.app") ? (
     <Button
-      href={`https://deploy.cloud.run/?git_repo=${runRepoUrl}.git`}
+      href={EXTERNAL_LINKS.rowyRunDeploy}
       target="_blank"
       rel="noopener noreferrer"
       endIcon={<OpenInNewIcon />}
@@ -72,7 +73,7 @@ export default function Step1RowyRun({
     </Button>
   ) : (
     <Button
-      href={runRepoUrl}
+      href={EXTERNAL_LINKS.rowyRunDocs}
       target="_blank"
       rel="noopener noreferrer"
       endIcon={<OpenInNewIcon />}
@@ -187,8 +188,10 @@ export const checkRowyRun = async (
 
     // https://docs.github.com/en/rest/reference/repos#get-the-latest-release
     const endpoint =
-      runRepoUrl.replace("github.com", "api.github.com/repos") +
-      "/releases/latest";
+      EXTERNAL_LINKS.rowyRunGitHub.replace(
+        "github.com",
+        "api.github.com/repos"
+      ) + "/releases/latest";
     const latestVersionReq = await fetch(endpoint, {
       headers: { Accept: "application/vnd.github.v3+json" },
       signal,

src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx

@@ -13,7 +13,7 @@ import CodeEditorHelper from "components/CodeEditorHelper";
 import CodeEditor from "components/Table/editors/CodeEditor";
 import FormAutosave from "./FormAutosave";
 import { FieldType } from "constants/fields";
-import WIKI_LINKS from "constants/wikiLinks";
+import { WIKI_LINKS } from "constants/externalLinks";
 import { name } from "@root/package.json";
 
 const useStyles = makeStyles((theme) =>

src/components/Table/ColumnMenu/FieldSettings/index.tsx

@@ -23,7 +23,7 @@ import Button from "@mui/material/Button";
 import routes from "constants/routes";
 import { SETTINGS } from "config/dbPaths";
 import { name as appName } from "@root/package.json";
-import { runRoutes } from "@src/constants/runRoutes";
+import { runRoutes } from "constants/runRoutes";
 
 export default function FieldSettings(props: IMenuModalProps) {
   const { name, fieldName, type, open, config, handleClose, handleSave } =

src/components/Table/TableHeader/Extensions/ExtensionMigration.tsx

@@ -11,7 +11,7 @@ import Modal from "components/Modal";
 import { useProjectContext } from "contexts/ProjectContext";
 import { useAppContext } from "contexts/AppContext";
 import { sparkToExtensionObjects } from "./utils";
-import WIKI_LINKS from "constants/wikiLinks";
+import { WIKI_LINKS } from "constants/externalLinks";
 
 export interface IExtensionMigrationProps {
   handleClose: () => void;

src/components/Table/TableHeader/Extensions/ExtensionModal.tsx

@@ -33,7 +33,7 @@ import { useConfirmation } from "components/ConfirmationDialog";
 import { useProjectContext } from "contexts/ProjectContext";
 
 import { IExtension, triggerTypes } from "./utils";
-import WIKI_LINKS from "constants/wikiLinks";
+import { WIKI_LINKS } from "constants/externalLinks";
 
 const additionalVariables = [
   {

src/components/Table/TableHeader/Extensions/index.tsx

@@ -19,7 +19,7 @@ import { useSnackLogContext } from "contexts/SnackLogContext";
 
 import { emptyExtensionObject, IExtension, IExtensionType } from "./utils";
 import { name } from "@root/package.json";
-import { runRoutes } from "@src/constants/runRoutes";
+import { runRoutes } from "constants/runRoutes";
 import { analytics } from "@src/analytics";
 
 export default function ExtensionsEditor() {

src/components/TableSettings/form.tsx

@@ -4,7 +4,7 @@ import { TableSettingsDialogModes } from "./index";
 import { Link, Typography } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
-import WIKI_LINKS from "constants/wikiLinks";
+import { WIKI_LINKS } from "constants/externalLinks";
 import { name } from "@root/package.json";
 
 export const tableSettings = (

src/components/fields/Action/ActionFab.tsx

@@ -12,7 +12,7 @@ import { cloudFunction } from "firebase/callables";
 import { formatPath } from "utils/fns";
 import { useConfirmation } from "components/ConfirmationDialog";
 import { useActionParams } from "./FormDialog/Context";
-import { runRoutes } from "@src/constants/runRoutes";
+import { runRoutes } from "constants/runRoutes";
 
 const replacer = (data: any) => (m: string, key: string) => {
   const objKey = key.split(":")[0];

src/components/fields/Derivative/Settings.tsx

@@ -7,7 +7,7 @@ import FieldsDropdown from "components/Table/ColumnMenu/FieldsDropdown";
 import { useProjectContext } from "contexts/ProjectContext";
 import CodeEditorHelper from "components/CodeEditorHelper";
 
-import WIKI_LINKS from "constants/wikiLinks";
+import { WIKI_LINKS } from "constants/externalLinks";
 
 const CodeEditor = lazy(
   () =>

src/constants/externalLinks.ts

@@ -0,0 +1,34 @@
+import _mapValues from "lodash/mapValues";
+import meta from "@root/package.json";
+
+const WIKI_PATHS = {
+  updating: "/Updating",
+  derivatives: "/Derivative-Fields",
+  defaultValues: "/Default-Values",
+  functions: "/Cloud-Functions",
+  securityRules: "/Role-Based-Security-Rules",
+  setUpAuth: "/Setting-Up-Firebase-Authentication",
+  extensions: "/Extensions",
+};
+const WIKI_LINK_ROOT = meta.repository.url.replace(".git", "/wiki");
+export const WIKI_LINKS = _mapValues(
+  WIKI_PATHS,
+  (path) => WIKI_LINK_ROOT + path
+);
+
+export const EXTERNAL_LINKS = {
+  homepage: meta.homepage,
+  privacy: meta.homepage + "/privacy",
+  terms: meta.homepage + "/terms",
+  docs: meta.homepage.replace("//", "//docs."),
+
+  gitHub: meta.repository.url.replace(".git", ""),
+  discord: "https://discord.gg/B8yAD5PDX4",
+  twitter: "https://twitter.com/rowyio",
+
+  rowyRun: meta.repository.url.replace(".git", "Run"),
+  rowyRunGitHub: meta.repository.url.replace(".git", "Run"),
+  // prettier-ignore
+  rowyRunDeploy: `https://deploy.cloud.run/?git_repo=${meta.repository.url.replace(".git", "Run")}.git`,
+  rowyRunDocs: meta.homepage.replace("//", "//docs.") + "/rowyRun",
+};

src/constants/routes.ts

@@ -9,6 +9,7 @@ export enum routes {
 
   authSetup = "/authSetup",
   setup = "/setup",
+  deploy = "/deploy",
   pageNotFound = "/404",
 
   table = "/table",

src/constants/runRoutes.ts

@@ -1,5 +1,3 @@
-export const runRepoUrl = "https://github.com/rowyio/rowyRun";
-
 export type RunRoute = {
   path: string;
   method: "POST" | "GET" | "DELETE";

src/constants/wikiLinks.ts

@@ -1,20 +0,0 @@
-import _mapValues from "lodash/mapValues";
-import meta from "../../package.json";
-
-const WIKI_PATHS = {
-  updating: "/Updating",
-  derivatives: "/Derivative-Fields",
-  defaultValues: "/Default-Values",
-  functions: "/Cloud-Functions",
-  securityRules: "/Role-Based-Security-Rules",
-  setUpAuth: "/Setting-Up-Firebase-Authentication",
-  extensions: "/Extensions",
-};
-
-const WIKI_LINK_ROOT = meta.repository.url.replace(".git", "/wiki");
-
-export const WIKI_LINKS = _mapValues(
-  WIKI_PATHS,
-  (path) => WIKI_LINK_ROOT + path
-);
-export default WIKI_LINKS;

src/pages/Auth/ImpersonatorAuth.tsx

@@ -9,7 +9,7 @@ import FirebaseUi from "components/Auth/FirebaseUi";
 import { signOut } from "utils/auth";
 import { auth } from "../../firebase";
 import { useProjectContext } from "@src/contexts/ProjectContext";
-import { runRoutes } from "@src/constants/runRoutes";
+import { runRoutes } from "constants/runRoutes";
 import { name } from "@root/package.json";
 
 export default function ImpersonatorAuthPage() {

src/pages/Auth/SetupGuide.tsx

@@ -3,7 +3,7 @@ import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
 import AuthLayout from "components/Auth/AuthLayout";
 
-import WIKI_LINKS from "constants/wikiLinks";
+import { WIKI_LINKS } from "constants/externalLinks";
 import { name } from "@root/package.json";
 
 export default function AuthSetupGuide() {

src/pages/Auth/SignUp.tsx

@@ -1,15 +1,12 @@
 import { useLocation } from "react-router-dom";
 import queryString from "query-string";
 
-import { useMediaQuery, Stack, Paper, Typography, Button } from "@mui/material";
-import { alpha } from "@mui/material/styles";
-import DiscordIcon from "assets/icons/Discord";
-import TwitterIcon from "@mui/icons-material/Twitter";
+import { useMediaQuery, Stack, Typography, Link } from "@mui/material";
 
-import Logo from "assets/Logo";
+import MarketingBanner from "components/Auth/MarketingBanner";
 import AuthLayout from "components/Auth/AuthLayout";
 import FirebaseUi from "components/Auth/FirebaseUi";
-import { homepage } from "@root/package.json";
+import { EXTERNAL_LINKS } from "constants/externalLinks";
 
 export default function SignUpPage() {
   const { search } = useLocation();
@@ -20,86 +17,15 @@ export default function SignUpPage() {
     uiConfig.signInSuccessUrl = parsed.redirect;
   }
 
+  const isMobile = useMediaQuery((theme: any) => theme.breakpoints.down("md"));
+
   return (
     <Stack direction="row">
-      <Paper
-        elevation={4}
-        square
-        sx={{
-          display: { xs: "none", md: "block" },
-
-          width: 520,
-          gridColumn: 1,
-          gridRow: "1 / 4",
-
-          backgroundColor: (theme) =>
-            alpha(theme.palette.background.paper, 0.5),
-          backdropFilter: "blur(20px) saturate(150%)",
-
-          pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(8)})`,
-          pb: (theme) =>
-            `max(env(safe-area-inset-bottom), ${theme.spacing(8)})`,
-          pl: (theme) => `max(env(safe-area-inset-left), ${theme.spacing(8)})`,
-          pr: 8,
-        }}
-      >
-        <Stack
-          direction="column"
-          justifyContent="space-between"
-          spacing={4}
-          style={{ height: "100%" }}
-        >
-          <a href={homepage} target="_blank" rel="noopener noreferrer">
-            <Logo size={2} />
-          </a>
-
-          <div>
-            <Typography
-              component="p"
-              variant="h5"
-              sx={{ fontWeight: "normal", fontSize: 28 / 16 + "rem" }}
-              paragraph
-            >
-              Manage Firestore data in a spreadsheet-like&nbsp;UI
-            </Typography>
-            <Typography
-              component="p"
-              variant="h5"
-              sx={{ fontWeight: "normal", fontSize: 28 / 16 + "rem" }}
-              paragraph
-            >
-              Write Cloud Functions effortlessly&nbsp;in the browser
-            </Typography>
-            <Typography
-              component="p"
-              variant="h5"
-              sx={{ fontWeight: "normal", fontSize: 28 / 16 + "rem" }}
-              paragraph
-            >
-              Connect to your favorite third&nbsp;party platforms
-            </Typography>
-          </div>
-
-          <Stack direction="row" spacing={1}>
-            <Button
-              variant="outlined"
-              startIcon={<DiscordIcon color="action" />}
-            >
-              Join our Community
-            </Button>
-            <Button
-              variant="outlined"
-              startIcon={<TwitterIcon color="action" />}
-            >
-              Follow on Twitter
-            </Button>
-          </Stack>
-        </Stack>
-      </Paper>
+      <MarketingBanner />
 
       <div style={{ flexGrow: 1 }}>
         <AuthLayout
-          hideLogo
+          hideLogo={!isMobile}
           title="Sign Up"
           description={
             <>
@@ -115,6 +41,31 @@ export default function SignUpPage() {
           }
         >
           <FirebaseUi uiConfig={uiConfig} />
+          <Typography
+            variant="caption"
+            color="text.secondary"
+            style={{ marginTop: 16 }}
+          >
+            By signing up, you agree to our{" "}
+            <Link
+              href={EXTERNAL_LINKS.terms}
+              target="_blank"
+              rel="noopener noreferrer"
+              color="text.secondary"
+            >
+              Terms and Conditions
+            </Link>{" "}
+            and{" "}
+            <Link
+              href={EXTERNAL_LINKS.privacy}
+              target="_blank"
+              rel="noopener noreferrer"
+              color="text.secondary"
+            >
+              Privacy Policy
+            </Link>
+            .
+          </Typography>
         </AuthLayout>
       </div>
     </Stack>

src/pages/Deploy.tsx

@@ -0,0 +1,80 @@
+import { useLocation } from "react-router-dom";
+import queryString from "query-string";
+
+import { useMediaQuery, Stack, Typography, Link, Button } from "@mui/material";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+
+import MarketingBanner from "components/Auth/MarketingBanner";
+import AuthLayout from "components/Auth/AuthLayout";
+
+import { EXTERNAL_LINKS } from "constants/externalLinks";
+import { name } from "@root/package.json";
+
+export default function DeployPage() {
+  const { search } = useLocation();
+  const parsed = queryString.parse(search);
+
+  const uiConfig: firebaseui.auth.Config = {};
+  if (typeof parsed.redirect === "string" && parsed.redirect.length > 0) {
+    uiConfig.signInSuccessUrl = parsed.redirect;
+  }
+
+  const isMobile = useMediaQuery((theme: any) => theme.breakpoints.down("md"));
+
+  return (
+    <Stack direction="row">
+      <MarketingBanner />
+
+      <div style={{ flexGrow: 1 }}>
+        <AuthLayout
+          hideLogo={!isMobile}
+          hideProject
+          title="Get Started"
+          description={
+            <>
+              To get started with {name}, set up {name} Run on your Google Cloud
+              Platform project with this one-click deploy button.
+            </>
+          }
+        >
+          <a
+            href={EXTERNAL_LINKS.rowyRunDeploy}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              src="https://deploy.cloud.run/button.svg"
+              alt="Run on Google Cloud"
+            />
+          </a>
+
+          <Typography
+            variant="caption"
+            color="text.secondary"
+            style={{ marginTop: 16 }}
+          >
+            By setting up {name}, you agree to our{" "}
+            <Link
+              href={EXTERNAL_LINKS.terms}
+              target="_blank"
+              rel="noopener noreferrer"
+              color="text.secondary"
+            >
+              Terms and Conditions
+            </Link>{" "}
+            and{" "}
+            <Link
+              href={EXTERNAL_LINKS.privacy}
+              target="_blank"
+              rel="noopener noreferrer"
+              color="text.secondary"
+            >
+              Privacy Policy
+            </Link>
+            .
+          </Typography>
+        </AuthLayout>
+      </div>
+    </Stack>
+  );
+}

src/pages/RowyRunTest.tsx

@@ -18,7 +18,7 @@ import {
 } from "@mui/material";
 import { useConfirmation } from "components/ConfirmationDialog";
 import { useProjectContext } from "@src/contexts/ProjectContext";
-import { runRoutes } from "@src/constants/runRoutes";
+import { runRoutes } from "constants/runRoutes";
 
 const useBodyCacheState = createPersistedState("__ROWY__RR_TEST_REQ_BODY");
 export default function TestView() {

src/pages/Setup.tsx

@@ -23,7 +23,7 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
-import BrandedBackground from "assets/BrandedBackground";
+import BrandedBackground, { Wrapper } from "assets/BrandedBackground";
 import Logo from "assets/Logo";
 import ScrollableDialogContent from "components/Modal/ScrollableDialogContent";
 import { SlideTransition } from "components/Modal/SlideTransition";
@@ -246,7 +246,7 @@ export default function SetupPage() {
   };
 
   return (
-    <div className="wrapper">
+    <Wrapper>
       <BrandedBackground />
       <Paper
         component="main"
@@ -428,6 +428,6 @@ export default function SetupPage() {
           </DialogActions>
         </form>
       </Paper>
-    </div>
+    </Wrapper>
   );
 }

src/theme/components.tsx

@@ -54,6 +54,8 @@ export const components = (theme: Theme): ThemeOptions => {
                 },
             },
 
+          body: { cursor: "default" },
+
           "code, pre, pre.MuiTypography-root": {
             fontFamily: theme.typography.fontFamilyMono,
             letterSpacing: 0,