From ee3e446db79f34828a2db09f0caffa150b141876 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 7 Feb 2024 21:29:07 +0100
Subject: [PATCH] fix: another try at images in next.js

---
 .../contributor-guides/supabase-cloud.mdx     |  90 ++++++++++--------
 apps/docs/pages/quickstart/signup.mdx         |  50 ++++++++--
 .../signup}/dashboard-homepage-signedin.webp  | Bin
 .../signup}/dashboard-homepage-signedout.webp | Bin
 .../signup}/onboarding-page1.webp             | Bin
 .../signup}/onboarding-page2.webp             | Bin
 .../images => public/signup}/signup-page.webp | Bin
 .../auth-settings.webp                        | Bin
 .../db-push-result.webp                       | Bin
 .../{docs => supabase-cloud}/db-url.webp      | Bin
 .../{docs => supabase-cloud}/match-env.webp   | Bin
 .../{docs => supabase-cloud}/new-project.webp | Bin
 12 files changed, 90 insertions(+), 50 deletions(-)
 rename apps/docs/{pages/quickstart/images => public/signup}/dashboard-homepage-signedin.webp (100%)
 rename apps/docs/{pages/quickstart/images => public/signup}/dashboard-homepage-signedout.webp (100%)
 rename apps/docs/{pages/quickstart/images => public/signup}/onboarding-page1.webp (100%)
 rename apps/docs/{pages/quickstart/images => public/signup}/onboarding-page2.webp (100%)
 rename apps/docs/{pages/quickstart/images => public/signup}/signup-page.webp (100%)
 rename apps/docs/public/{docs => supabase-cloud}/auth-settings.webp (100%)
 rename apps/docs/public/{docs => supabase-cloud}/db-push-result.webp (100%)
 rename apps/docs/public/{docs => supabase-cloud}/db-url.webp (100%)
 rename apps/docs/public/{docs => supabase-cloud}/match-env.webp (100%)
 rename apps/docs/public/{docs => supabase-cloud}/new-project.webp (100%)

diff --git a/apps/docs/pages/contributor-guides/supabase-cloud.mdx b/apps/docs/pages/contributor-guides/supabase-cloud.mdx
index fba4f778..09af27cc 100644
--- a/apps/docs/pages/contributor-guides/supabase-cloud.mdx
+++ b/apps/docs/pages/contributor-guides/supabase-cloud.mdx
@@ -40,14 +40,16 @@ For this step you need to have signed up for supabase and create an account, jus
 
 Once you have an account just click on the _New Project_ on your dashboard. After that you should see a similar screen to the below, fill in the fields.
 
-<Image
-  src="/docs/new-project.webp"
-  alt="New project in supabase"
-  quality="100"
-  width={500}
-  height={500}
-  className="nx-rounded-md nx-my-4"
-/>
+<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
+  <Image
+    src={`${process.env.imagePath}/supabase-cloud/new-project.webp`}
+    alt="New project in supabase"
+    quality="100"
+    width={500}
+    height={500}
+    className="nx-rounded-md nx-my-4"
+  />
+</div>
 
 <Callout>
   Make sure you save your database password somewhere, else you won't be able to get it back
@@ -68,14 +70,16 @@ Follow the instruction in your terminal to generate your access token. Paste the
 
 - Go to the supabase dashboard, go to your project, click on the settings icon on the left side bar
 
-<Image
-  src="/docs/db-url.webp"
-  alt="DB URL in the supabase dashboard"
-  quality="100"
-  width={500}
-  height={500}
-  className="nx-rounded-md nx-my-4"
-/>
+<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
+  <Image
+    src={`${process.env.imagePath}/supabase-cloud/db-url.webp`}
+    alt="DB URL in the supabase dashboard"
+    quality="100"
+    width={500}
+    height={500}
+    className="nx-rounded-md nx-my-4"
+  />
+</div>
 
 - Copy the URL in the image above for your `db url`
 - Paste it somewhere
@@ -93,27 +97,31 @@ pnpm supabase db push --db-url "URL HERE"
 
 #### Result
 
-<Image
-  src="/docs/db-push-result.webp"
-  alt="Result of supabase db push"
-  quality="100"
-  width={500}
-  height={500}
-  className="nx-rounded-md nx-my-4"
-/>
+<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
+  <Image
+    src={`${process.env.imagePath}/supabase-cloud/db-push-result.webp`}
+    alt="Result of supabase db push"
+    quality="100"
+    width={500}
+    height={500}
+    className="nx-rounded-md nx-my-4"
+  />
+</div>
 
 ### Configure Auth in your Supabase project
 
 Here we will update our email configurations, to prevent supabase from sending confirmation emails on signup. This is because we don't have email confirmation setup on ClassroomIO, this feature will come later. If you don't disable it, you won't be able to signup into the application.
 
-<Image
-  src="/docs/auth-settings.webp"
-  alt="Authentication configuration"
-  quality="100"
-  width={500}
-  height={500}
-  className="nx-rounded-md nx-my-4"
-/>
+<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
+  <Image
+    src={`${process.env.imagePath}/supabase-cloud/auth-settings.webp`}
+    alt="Authentication configuration"
+    quality="100"
+    width={500}
+    height={500}
+    className="nx-rounded-md nx-my-4"
+  />
+</div>
 
 ### Add configurations to your environment variables
 
@@ -127,14 +135,16 @@ PUBLIC_SUPABASE_ANON_KEY=
 
 To get the correct environment variables, follow the instructions in this image
 
-<Image
-  src="/docs/match-env.webp"
-  alt="Source of supabase environment variables"
-  quality="100"
-  width={500}
-  height={500}
-  className="nx-rounded-md nx-my-4"
-/>
+<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
+  <Image
+    src={`${process.env.imagePath}/supabase-cloud/match-env.webp`}
+    alt="Source of supabase environment variables"
+    quality="100"
+    width={500}
+    height={500}
+    className="nx-rounded-md nx-my-4"
+  />
+</div>
 
 ### Tada - That's all
 
diff --git a/apps/docs/pages/quickstart/signup.mdx b/apps/docs/pages/quickstart/signup.mdx
index 24221c31..5ef6ad43 100644
--- a/apps/docs/pages/quickstart/signup.mdx
+++ b/apps/docs/pages/quickstart/signup.mdx
@@ -1,10 +1,5 @@
 import Image from 'next/image';
 import { Steps } from 'nextra/components';
-import DashboardHomePageSignedin from './images/dashboard-homepage-signedin.webp';
-import DashboardHomePageSignedout from './images/dashboard-homepage-signedout.webp';
-import DashboardOnboardingPage1 from './images/onboarding-page1.webp';
-import DashboardOnboardingPage2 from './images/onboarding-page2.webp';
-import DashboardSignupPage from './images/signup-page.webp';
 
 # Signing Up for ClassroomIO
 
@@ -15,25 +10,60 @@ Signing up is currently disabled on production. Potential customers can only boo
 
 Got to [app.classroomio.com](https://app.classroomio.com). Click on the signup button on the top right to take you to the Sign up page.
 
-<Image src={DashboardHomePageSignedout} alt="Dashboard before signin" quality="100" />
+<Image
+  src={`${process.env.imagePath}/signup/dashboard-homepage-signedout.webp`}
+  alt="Dashboard before signin"
+  quality="100"
+  width={500}
+  height={500}
+  className="nx-rounded-md nx-my-4"
+/>
 
 ### Create an account
 
 Once you are on the signup page, enter your email and a password made up of 6 or more characters.
 
-<Image src={DashboardSignupPage} alt="Dashboard signin page" quality="100" />
+<Image
+  src={`${process.env.imagePath}/signup/signup-page.webp`}
+  alt="Dashboard signin page"
+  quality="100"
+  width={500}
+  height={500}
+  className="nx-rounded-md nx-my-4"
+/>
 
 ### Complete the onboarding
 
 Upon completing the signup flow, you will be redirected to the onboarding page. Here you can enter your fullname and your organization details and next you would share how you heard of ClassroomIO
 
-<Image src={DashboardOnboardingPage1} alt="Dashboard onboarding page 1" quality="100" />
-<Image src={DashboardOnboardingPage2} alt="Dashboard onboarding page 2" quality="100" />
+<Image
+  src={`${process.env.imagePath}/signup/onboarding-page1.webp`}
+  alt="Dashboard onboarding page 1"
+  quality="100"
+  width={500}
+  height={500}
+  className="nx-rounded-md nx-my-4"
+/>
+<Image
+  src={`${process.env.imagePath}/signup/onboarding-page2.webp`}
+  alt="Dashboard onboarding page 2"
+  quality="100"
+  width={500}
+  height={500}
+  className="nx-rounded-md nx-my-4"
+/>
 
 ### Welcome to the dashboard
 
 After you go through the onboarding, you are successfully signed up and you are ready to start using the platform.
 
-<Image src={DashboardHomePageSignedin} alt="Dashboard after signing in" quality="100" />
+<Image
+  src={`${process.env.imagePath}/signup/dashboard-homepage-signedin.webp`}
+  alt="Dashboard after signing in"
+  quality="100"
+  width={500}
+  height={500}
+  className="nx-rounded-md nx-my-4"
+/>
 
 </Steps>
diff --git a/apps/docs/pages/quickstart/images/dashboard-homepage-signedin.webp b/apps/docs/public/signup/dashboard-homepage-signedin.webp
similarity index 100%
rename from apps/docs/pages/quickstart/images/dashboard-homepage-signedin.webp
rename to apps/docs/public/signup/dashboard-homepage-signedin.webp
diff --git a/apps/docs/pages/quickstart/images/dashboard-homepage-signedout.webp b/apps/docs/public/signup/dashboard-homepage-signedout.webp
similarity index 100%
rename from apps/docs/pages/quickstart/images/dashboard-homepage-signedout.webp
rename to apps/docs/public/signup/dashboard-homepage-signedout.webp
diff --git a/apps/docs/pages/quickstart/images/onboarding-page1.webp b/apps/docs/public/signup/onboarding-page1.webp
similarity index 100%
rename from apps/docs/pages/quickstart/images/onboarding-page1.webp
rename to apps/docs/public/signup/onboarding-page1.webp
diff --git a/apps/docs/pages/quickstart/images/onboarding-page2.webp b/apps/docs/public/signup/onboarding-page2.webp
similarity index 100%
rename from apps/docs/pages/quickstart/images/onboarding-page2.webp
rename to apps/docs/public/signup/onboarding-page2.webp
diff --git a/apps/docs/pages/quickstart/images/signup-page.webp b/apps/docs/public/signup/signup-page.webp
similarity index 100%
rename from apps/docs/pages/quickstart/images/signup-page.webp
rename to apps/docs/public/signup/signup-page.webp
diff --git a/apps/docs/public/docs/auth-settings.webp b/apps/docs/public/supabase-cloud/auth-settings.webp
similarity index 100%
rename from apps/docs/public/docs/auth-settings.webp
rename to apps/docs/public/supabase-cloud/auth-settings.webp
diff --git a/apps/docs/public/docs/db-push-result.webp b/apps/docs/public/supabase-cloud/db-push-result.webp
similarity index 100%
rename from apps/docs/public/docs/db-push-result.webp
rename to apps/docs/public/supabase-cloud/db-push-result.webp
diff --git a/apps/docs/public/docs/db-url.webp b/apps/docs/public/supabase-cloud/db-url.webp
similarity index 100%
rename from apps/docs/public/docs/db-url.webp
rename to apps/docs/public/supabase-cloud/db-url.webp
diff --git a/apps/docs/public/docs/match-env.webp b/apps/docs/public/supabase-cloud/match-env.webp
similarity index 100%
rename from apps/docs/public/docs/match-env.webp
rename to apps/docs/public/supabase-cloud/match-env.webp
diff --git a/apps/docs/public/docs/new-project.webp b/apps/docs/public/supabase-cloud/new-project.webp
similarity index 100%
rename from apps/docs/public/docs/new-project.webp
rename to apps/docs/public/supabase-cloud/new-project.webp