created first page for learning

.eslintrc.js

@@ -152,7 +152,8 @@ module.exports = {
     ],
     "no-with": "warn",
     "no-whitespace-before-property": "warn",
-    "react-hooks/exhaustive-deps": "warn",
+    // Way to many false positive, @see https://github.com/facebook/react/issues/22132
+    "react-hooks/exhaustive-deps": "off",
     "require-yield": "warn",
     "rest-spread-spacing": ["warn", "never"],
     strict: ["warn", "never"],

src/components/vn/learn/LearnLayout.tsx

@@ -0,0 +1,15 @@
+import { PageLayout } from "~/components/layout";
+import { MuiMdxLayout } from "~/components/layout/MuiMdxLayout";
+import { Steps } from "./Steps";
+export const LearnLayout = ({ children, ...props }) => {
+  return (
+    <PageLayout>
+      <MuiMdxLayout {...props}>
+        <nav>
+          <Steps />
+        </nav>
+        <main>{children}</main>
+      </MuiMdxLayout>
+    </PageLayout>
+  );
+};

src/components/vn/learn/Steps.tsx

@@ -0,0 +1,48 @@
+import { List, ListItem, ListItemButton } from "@mui/material";
+import { useEffect, useState } from "react";
+
+/**
+ * @client-only
+ */
+const detectStep = () => {
+  const { host, pathname } = window.location;
+  // Running on vulcan-next.vercel.app => step 0
+  if (host.match(/vulcan-next.vercel.app/) || pathname.match(/intro-online/)) {
+    return 0;
+  }
+  // Vulcan Next installed and running locally => step 1
+  return 1;
+  // If Mongo URL is local => next step
+  // etc.
+};
+const useCurrentStep = () => {
+  const [step, setStep] = useState<number>(-1);
+  useEffect(() => {
+    const nextStep = detectStep();
+    if (nextStep !== step) {
+      setStep(detectStep);
+    }
+  });
+  return step;
+};
+export const Steps = () => {
+  const currentStep = useCurrentStep();
+  // TODO: also associate a link to step
+  // be careful with step 0, that happens online
+  return (
+    <List>
+      {["Step 0", "Step 1"].map((stepName, stepIdx) => {
+        return (
+          <ListItem key={stepName}>
+            <ListItemButton
+              disabled={stepIdx > currentStep}
+              selected={stepIdx === currentStep}
+            >
+              {stepName}
+            </ListItemButton>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+};

src/pages/learn/intro-offline.mdx

@@ -0,0 +1,25 @@
+import { Button } from "@mui/material";
+import { LearnLayout } from "~/components/vn/learn/LearnLayout";
+
+# Step 1: Opening Vulcan locally
+
+Great, you installed and started Vulcan on your own machine!
+
+The "`localhost`" in the url means that Vulcan Next is currently running on your own computer,
+litterally the "local host".
+
+## Go to step 2
+
+<Button>
+  <a target="_blank" rel="noreferrer" href="/learn/mongo">
+    Now, let's setup the database
+  </a>
+</Button>
+
+**Had some trouble with this step?**
+
+[Join us on Slack and ask your questions directly](http://slack.vulcanjs.org/)
+
+export default function IntroOfflinePage(props) {
+  return <LearnLayout {...props} />;
+}

src/pages/learn/intro-online.mdx

@@ -1,8 +1,7 @@
 import { Button } from "@mui/material";
-import { PageLayout } from "~/components/layout";
-import { MuiMdxLayout } from "~/components/layout/MuiMdxLayout";
+import { LearnLayout } from "~/components/vn/learn/LearnLayout";
 
-# Let's install Vulcan
+# Step 0: Let's install Vulcan
 
 ## Already familiar with JavaScript frameworks?
 
@@ -78,7 +77,7 @@ Now, let's run Vulcan:
 yarn run dev
 ```
 
-## Go to step 2
+## Go to step 1
 
 **Congratulation, you beat the first and hardest step!**
 
@@ -97,9 +96,5 @@ yarn run dev
 [Join us on Slack and ask your questions directly](http://slack.vulcanjs.org/)
 
 export default function IntroOnlinePage(props) {
-  return (
-    <PageLayout>
-      <MuiMdxLayout {...props} />
-    </PageLayout>
-  );
+  return <LearnLayout {...props} />;
 }

src/pages/learn/mongo.mdx

@@ -0,0 +1,37 @@
+import { Button } from "@mui/material";
+import { LearnLayout } from "~/components/vn/learn/LearnLayout";
+
+# Step 2: Plug the database
+
+## TL;DR
+
+TODO
+
+## Prerequesites
+
+- Install Docker
+- (Optional) Install Compass
+
+## Hello Mongo
+
+**Congratulation, you beat step 0 and installed Vulcan on your own computer!**
+
+This step is also about configuration. This time, we are going to plug the database
+
+## Go to step 2
+
+**Congratulation, you beat the first and hardest step!**
+
+<Button>
+  <a target="_blank" rel="noreferrer" href="/learn/mongo">
+    Now, click to open your local version of Vulcan
+  </a>
+</Button>
+
+**Had some trouble with this first step?**
+
+[Join us on Slack and ask your questions directly](http://slack.vulcanjs.org/)
+
+export default function IntroOfflinePage(props) {
+  return <LearnLayout {...props} />;
+}