From e43700e159bc5c6ba2a8b9def68aabd6bc239c56 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 23 May 2022 14:17:13 -0700
Subject: [PATCH 1/6] Rename OnboardingLayout to ProfileLayout since its only
 used in the profile

---
 .../templates/{OnboardingLayout.tsx => ProfileLayout.tsx}   | 4 ++--
 packages/web/pages/confirm-profile.tsx                      | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/web/components/templates/{OnboardingLayout.tsx => ProfileLayout.tsx} (91%)

diff --git a/packages/web/components/templates/OnboardingLayout.tsx b/packages/web/components/templates/ProfileLayout.tsx
similarity index 91%
rename from packages/web/components/templates/OnboardingLayout.tsx
rename to packages/web/components/templates/ProfileLayout.tsx
index 8112bda34..3e89faa5f 100644
--- a/packages/web/components/templates/OnboardingLayout.tsx
+++ b/packages/web/components/templates/ProfileLayout.tsx
@@ -2,11 +2,11 @@ import { Box, VStack, HStack } from '../elements/LayoutPrimitives'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 import { theme } from '../tokens/stitches.config'
 
-type OnboardingLayoutProps = {
+type ProfileLayoutProps = {
   children: React.ReactNode
 }
 
-export function OnboardingLayout(props: OnboardingLayoutProps): JSX.Element {
+export function ProfileLayout(props: ProfileLayoutProps): JSX.Element {
   return (
     <>
       <VStack
diff --git a/packages/web/pages/confirm-profile.tsx b/packages/web/pages/confirm-profile.tsx
index 0e7c5c5d7..19f1237b7 100644
--- a/packages/web/pages/confirm-profile.tsx
+++ b/packages/web/pages/confirm-profile.tsx
@@ -1,14 +1,14 @@
 import { PageMetaData } from '../components/patterns/PageMetaData'
-import { OnboardingLayout } from '../components/templates/OnboardingLayout'
+import { ProfileLayout } from '../components/templates/ProfileLayout'
 import { ConfirmProfileModal } from '../components/templates/ConfirmProfileModal'
 
 export default function ConfirmProfilePage(): JSX.Element {
   return (
     <>
       <PageMetaData title="Create Profile - Omnivore" path="/confirm-profile" />
-      <OnboardingLayout>
+      <ProfileLayout>
         <ConfirmProfileModal />
-      </OnboardingLayout>
+      </ProfileLayout>
       <div data-testid="confirm-profile-page-tag" />
     </>
   )

From a7e67b4bea4b7f554dddec2c0831586a7e3c05b8 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 23 May 2022 14:23:03 -0700
Subject: [PATCH 2/6] Rename OnboardingLayout2 to OnboardingLayout, dont use
 default export

---
 ...boardingLayout2.tsx => OnboardingLayout.tsx} | 17 ++++++++---------
 .../web/components/templates/onboarding/01.tsx  |  6 +++---
 .../web/components/templates/onboarding/02.tsx  |  6 +++---
 .../web/components/templates/onboarding/03.tsx  |  6 +++---
 .../web/components/templates/onboarding/04.tsx  |  6 +++---
 .../web/components/templates/onboarding/05.tsx  |  6 +++---
 .../web/components/templates/onboarding/06.tsx  |  6 +++---
 7 files changed, 26 insertions(+), 27 deletions(-)
 rename packages/web/components/templates/{OnboardingLayout2.tsx => OnboardingLayout.tsx} (92%)

diff --git a/packages/web/components/templates/OnboardingLayout2.tsx b/packages/web/components/templates/OnboardingLayout.tsx
similarity index 92%
rename from packages/web/components/templates/OnboardingLayout2.tsx
rename to packages/web/components/templates/OnboardingLayout.tsx
index baeb0697d..18632210a 100644
--- a/packages/web/components/templates/OnboardingLayout2.tsx
+++ b/packages/web/components/templates/OnboardingLayout.tsx
@@ -1,13 +1,13 @@
 import React, { ReactNode } from 'react'
-import { PageMetaData } from '../../components/patterns/PageMetaData'
-import { VStack, HStack, Box } from '../../components/elements/LayoutPrimitives'
-import { OmnivoreNameLogo } from '../../components/elements/images/OmnivoreNameLogo'
-import { StyledText } from '../../components/elements/StyledText'
-import { Button } from '../../components/elements/Button'
+import { PageMetaData } from '../patterns/PageMetaData'
+import { VStack, HStack, Box } from '../elements/LayoutPrimitives'
+import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
+import { StyledText } from '../elements/StyledText'
+import { Button } from '../elements/Button'
 
 const TOTAL_ONBOARDING_PAGES = 6
 
-type OnboardingLayout2Props = {
+type OnboardingLayoutProps = {
   pageNumber: number
   title: string
   subTitle: string
@@ -18,7 +18,7 @@ type OnboardingLayout2Props = {
   reduceSpace?: boolean,
 }
 
-const OnboardingLayout2 = ({
+export const OnboardingLayout = ({
   pageNumber,
   title,
   subTitle,
@@ -27,7 +27,7 @@ const OnboardingLayout2 = ({
   children,
   nextPage,
   reduceSpace
-}: OnboardingLayout2Props) => {
+}: OnboardingLayoutProps) => {
   const NextButton = () => (
     <Button
       style="ctaDarkYellow"
@@ -244,4 +244,3 @@ const OnboardingLayout2 = ({
   )
 }
 
-export default OnboardingLayout2
diff --git a/packages/web/components/templates/onboarding/01.tsx b/packages/web/components/templates/onboarding/01.tsx
index e78c504eb..62e5ba531 100644
--- a/packages/web/components/templates/onboarding/01.tsx
+++ b/packages/web/components/templates/onboarding/01.tsx
@@ -1,5 +1,5 @@
 import { SelectionOptionCard } from './SelectOption'
-import OnboardingLayout2 from '../OnboardingLayout2'
+import { OnboardingLayout } from '../OnboardingLayout'
 import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
 
 const articleDetails = [
@@ -39,7 +39,7 @@ const articleDetails = [
 
 const OnboardingPage1 = () => {
   return (
-    <OnboardingLayout2
+    <OnboardingLayout
       pageNumber={1}
       title="Read Distraction Free"
       subTitle="Omnivore's distraction free reader gives you an uncluttered reading experience"
@@ -74,7 +74,7 @@ const OnboardingPage1 = () => {
           </Box>
         </HStack>
       </VStack>
-    </OnboardingLayout2>
+    </OnboardingLayout>
   )
 }
 
diff --git a/packages/web/components/templates/onboarding/02.tsx b/packages/web/components/templates/onboarding/02.tsx
index f089a4639..1772092ef 100644
--- a/packages/web/components/templates/onboarding/02.tsx
+++ b/packages/web/components/templates/onboarding/02.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
-import OnboardingLayout2 from '../OnboardingLayout2'
+import { OnboardingLayout } from '../OnboardingLayout'
 import MobileInstallHelp from '../../elements/MobileInstallHelp'
 import ExtensionsInstallHelp from '../../elements/ExtensionsInstallHelp'
 import { StyledAnchor } from '../../elements/StyledText'
@@ -8,7 +8,7 @@ import { Box } from '../../elements/LayoutPrimitives'
 
 const OnboardingPage2 = () => {
   return (
-    <OnboardingLayout2
+    <OnboardingLayout
       pageNumber={2}
       title="Save links to read later"
       subTitle="Save any link to your library using our apps and browser extensions"
@@ -79,7 +79,7 @@ const OnboardingPage2 = () => {
           </Link>
         </Box>
       </Box>
-    </OnboardingLayout2>
+    </OnboardingLayout>
   )
 }
 
diff --git a/packages/web/components/templates/onboarding/03.tsx b/packages/web/components/templates/onboarding/03.tsx
index dd410e3a3..6d5d9074a 100644
--- a/packages/web/components/templates/onboarding/03.tsx
+++ b/packages/web/components/templates/onboarding/03.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { VStack } from '../../elements/LayoutPrimitives'
-import OnboardingLayout2 from '../OnboardingLayout2'
+import { OnboardingLayout } from '../OnboardingLayout'
 import { SelectOption } from './SelectOption'
 
 const optionDetails = [
@@ -32,7 +32,7 @@ const optionDetails = [
 
 const OnboardingPage3 = () => {
   return (
-    <OnboardingLayout2
+    <OnboardingLayout
       subTitle="Omnivore creates an email address for you to subscribe to newsletters with."
       description="Subscribe to some newsletters now"
       title="Read all your Newsletters in Omnivore"
@@ -47,7 +47,7 @@ const OnboardingPage3 = () => {
           <SelectOption key={idx} {...{ icon, label }} />
         ))}
       </VStack>
-    </OnboardingLayout2>
+    </OnboardingLayout>
   )
 }
 
diff --git a/packages/web/components/templates/onboarding/04.tsx b/packages/web/components/templates/onboarding/04.tsx
index 4e038fb89..c35537a59 100644
--- a/packages/web/components/templates/onboarding/04.tsx
+++ b/packages/web/components/templates/onboarding/04.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import OnboardingLayout2 from '../OnboardingLayout2'
+import { OnboardingLayout } from '../OnboardingLayout'
 import { Box } from '../../elements/LayoutPrimitives'
 import { styled } from '../../tokens/stitches.config'
 
@@ -9,7 +9,7 @@ const StyledImage = styled('img', {
 
 const OnboardingPage4 = () => {
   return (
-    <OnboardingLayout2
+    <OnboardingLayout
       pageNumber={4}
       title="Organize all your content"
       subTitle="Information about archiving and tagging
@@ -48,7 +48,7 @@ const OnboardingPage4 = () => {
           }}
         />
       </Box>
-    </OnboardingLayout2>
+    </OnboardingLayout>
   )
 }
 
diff --git a/packages/web/components/templates/onboarding/05.tsx b/packages/web/components/templates/onboarding/05.tsx
index bc7a910ac..a8d0998ce 100644
--- a/packages/web/components/templates/onboarding/05.tsx
+++ b/packages/web/components/templates/onboarding/05.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import OnboardingLayout2 from '../OnboardingLayout2'
+import { OnboardingLayout } from '../OnboardingLayout'
 import { Box } from '../../elements/LayoutPrimitives'
 import { styled } from '../../tokens/stitches.config'
 
@@ -15,7 +15,7 @@ const StyledImage = styled('img', {
 
 const OnboardingPage5 = () => {
   return (
-    <OnboardingLayout2
+    <OnboardingLayout
       pageNumber={5}
       title="Highlight and share"
       subTitle="Information about creating and sharing highlights Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
@@ -34,7 +34,7 @@ const OnboardingPage5 = () => {
           alt="Highlight And Share"
         />
       </Box>
-    </OnboardingLayout2>
+    </OnboardingLayout>
   )
 }
 
diff --git a/packages/web/components/templates/onboarding/06.tsx b/packages/web/components/templates/onboarding/06.tsx
index 6ec216614..154fafef2 100644
--- a/packages/web/components/templates/onboarding/06.tsx
+++ b/packages/web/components/templates/onboarding/06.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import OnboardingLayout2 from '../OnboardingLayout2'
+import { OnboardingLayout } from '../OnboardingLayout'
 import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
 import { styled } from '../../tokens/stitches.config'
 
@@ -36,7 +36,7 @@ const Container = styled(Box, {
 
 const OnboardingPage6 = () => {
   return (
-    <OnboardingLayout2
+    <OnboardingLayout
       pageNumber={6}
       title="Join our Community"
       subTitle='Omnivore is open source and open community, join us.'
@@ -67,7 +67,7 @@ const OnboardingPage6 = () => {
           </VStack>
         </Container>
       </HStack>
-    </OnboardingLayout2>
+    </OnboardingLayout>
   )
 }
 

From 370a3fc4c0d34ba0745a8ca13648e8eeac31d14f Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 23 May 2022 15:08:13 -0700
Subject: [PATCH 3/6] Rework onboarding code so its a little easier to control
 paths

---
 .../components/templates/OnboardingLayout.tsx | 39 ++++++++++---------
 .../{03.tsx => OnboardingAddNewsletters.tsx}  | 10 +++--
 ...sx => OnboardingHighlightInstructions.tsx} | 10 +++--
 ....tsx => OnboardingInstallInstructions.tsx} |  9 +++--
 .../{06.tsx => OnboardingJoinCommunity.tsx}   |  9 +++--
 ...tsx => OnboardingOrganizeInstructions.tsx} | 10 +++--
 .../{01.tsx => OnboardingReaderPreview.tsx}   | 10 +++--
 packages/web/pages/onboarding/01.tsx          |  5 ---
 packages/web/pages/onboarding/02.tsx          |  5 ---
 packages/web/pages/onboarding/03.tsx          |  5 ---
 packages/web/pages/onboarding/04.tsx          |  5 ---
 packages/web/pages/onboarding/05.tsx          |  5 ---
 packages/web/pages/onboarding/06.tsx          |  5 ---
 packages/web/pages/onboarding/[index].tsx     | 23 +++++++++++
 .../web/stories/OnboardingLayout.stories.tsx  |  2 +-
 .../web/stories/OnboardingPage1.stories.tsx   | 10 ++---
 .../web/stories/OnboardingPage2.stories.tsx   | 10 ++---
 .../web/stories/OnboardingPage3.stories.tsx   | 10 ++---
 .../web/stories/OnboardingPage4.stories.tsx   | 10 ++---
 .../web/stories/OnboardingPage5.stories.tsx   | 10 ++---
 .../web/stories/OnboardingPage6.stories.tsx   | 10 ++---
 21 files changed, 111 insertions(+), 101 deletions(-)
 rename packages/web/components/templates/onboarding/{03.tsx => OnboardingAddNewsletters.tsx} (86%)
 rename packages/web/components/templates/onboarding/{05.tsx => OnboardingHighlightInstructions.tsx} (83%)
 rename packages/web/components/templates/onboarding/{02.tsx => OnboardingInstallInstructions.tsx} (92%)
 rename packages/web/components/templates/onboarding/{06.tsx => OnboardingJoinCommunity.tsx} (91%)
 rename packages/web/components/templates/onboarding/{04.tsx => OnboardingOrganizeInstructions.tsx} (87%)
 rename packages/web/components/templates/onboarding/{01.tsx => OnboardingReaderPreview.tsx} (93%)
 delete mode 100644 packages/web/pages/onboarding/01.tsx
 delete mode 100644 packages/web/pages/onboarding/02.tsx
 delete mode 100644 packages/web/pages/onboarding/03.tsx
 delete mode 100644 packages/web/pages/onboarding/04.tsx
 delete mode 100644 packages/web/pages/onboarding/05.tsx
 delete mode 100644 packages/web/pages/onboarding/06.tsx
 create mode 100644 packages/web/pages/onboarding/[index].tsx

diff --git a/packages/web/components/templates/OnboardingLayout.tsx b/packages/web/components/templates/OnboardingLayout.tsx
index 18632210a..cdc067b12 100644
--- a/packages/web/components/templates/OnboardingLayout.tsx
+++ b/packages/web/components/templates/OnboardingLayout.tsx
@@ -4,6 +4,7 @@ import { VStack, HStack, Box } from '../elements/LayoutPrimitives'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 import { StyledText } from '../elements/StyledText'
 import { Button } from '../elements/Button'
+import Link from 'next/link'
 
 const TOTAL_ONBOARDING_PAGES = 6
 
@@ -29,24 +30,26 @@ export const OnboardingLayout = ({
   reduceSpace
 }: OnboardingLayoutProps) => {
   const NextButton = () => (
-    <Button
-      style="ctaDarkYellow"
-      css={{ 
-        width: '111px',
-        height: '44px',
-        color: 'rgba(10, 8, 6, 0.8)',
-        fontWeight: 600,
-        fontSize: '16px',
-        textDecoration: 'none',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-      as="a"
-      href={nextPage ? nextPage : `/onboarding/0${pageNumber+1}`}
-    >
-      Next
-    </Button>
+    <Link href={nextPage ? nextPage : `/onboarding/0${pageNumber+1}`}>
+      <Button
+        style="ctaDarkYellow"
+        css={{ 
+          width: '111px',
+          height: '44px',
+          color: 'rgba(10, 8, 6, 0.8)',
+          fontWeight: 600,
+          fontSize: '16px',
+          textDecoration: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+        as="a"
+        href={nextPage ? nextPage : `/onboarding/0${pageNumber+1}`}
+      >
+        Next
+      </Button>
+    </Link>
   )
 
   return (
diff --git a/packages/web/components/templates/onboarding/03.tsx b/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx
similarity index 86%
rename from packages/web/components/templates/onboarding/03.tsx
rename to packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx
index 6d5d9074a..ec3e74291 100644
--- a/packages/web/components/templates/onboarding/03.tsx
+++ b/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx
@@ -30,14 +30,17 @@ const optionDetails = [
   },
 ]
 
-const OnboardingPage3 = () => {
+type OnboardingAddNewslettersProps = {
+  pageNumber: number
+}
+
+export const OnboardingAddNewsletters = (props: OnboardingAddNewslettersProps) => {
   return (
     <OnboardingLayout
+      pageNumber={props.pageNumber}
       subTitle="Omnivore creates an email address for you to subscribe to newsletters with."
       description="Subscribe to some newsletters now"
       title="Read all your Newsletters in Omnivore"
-      pageNumber={3}
-      nextPage={'/onboarding/05'}
     >
       <VStack css={{
         marginTop: '$4',
@@ -51,4 +54,3 @@ const OnboardingPage3 = () => {
   )
 }
 
-export default OnboardingPage3
diff --git a/packages/web/components/templates/onboarding/05.tsx b/packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx
similarity index 83%
rename from packages/web/components/templates/onboarding/05.tsx
rename to packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx
index a8d0998ce..fbf3614a9 100644
--- a/packages/web/components/templates/onboarding/05.tsx
+++ b/packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx
@@ -13,10 +13,14 @@ const StyledImage = styled('img', {
   }
 })
 
-const OnboardingPage5 = () => {
+type OnboardingOrganizeInstructionsProps = {
+  pageNumber: number
+}
+
+export const OnboardingHighlightInstructions = (props: OnboardingOrganizeInstructionsProps) => {
   return (
     <OnboardingLayout
-      pageNumber={5}
+      pageNumber={props.pageNumber}
       title="Highlight and share"
       subTitle="Information about creating and sharing highlights Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
       >
@@ -37,5 +41,3 @@ const OnboardingPage5 = () => {
     </OnboardingLayout>
   )
 }
-
-export default OnboardingPage5
diff --git a/packages/web/components/templates/onboarding/02.tsx b/packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx
similarity index 92%
rename from packages/web/components/templates/onboarding/02.tsx
rename to packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx
index 1772092ef..cfc83dc93 100644
--- a/packages/web/components/templates/onboarding/02.tsx
+++ b/packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx
@@ -6,10 +6,14 @@ import ExtensionsInstallHelp from '../../elements/ExtensionsInstallHelp'
 import { StyledAnchor } from '../../elements/StyledText'
 import { Box } from '../../elements/LayoutPrimitives'
 
-const OnboardingPage2 = () => {
+type OnboardingInstallInstructionsProps = {
+  pageNumber: number
+}
+
+export const OnboardingInstallInstructions = (props: OnboardingInstallInstructionsProps) => {
   return (
     <OnboardingLayout
-      pageNumber={2}
+      pageNumber={props.pageNumber}
       title="Save links to read later"
       subTitle="Save any link to your library using our apps and browser extensions"
       description='Install our apps and browser extensions'
@@ -83,4 +87,3 @@ const OnboardingPage2 = () => {
   )
 }
 
-export default OnboardingPage2
diff --git a/packages/web/components/templates/onboarding/06.tsx b/packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx
similarity index 91%
rename from packages/web/components/templates/onboarding/06.tsx
rename to packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx
index 154fafef2..c85711f43 100644
--- a/packages/web/components/templates/onboarding/06.tsx
+++ b/packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx
@@ -34,10 +34,14 @@ const Container = styled(Box, {
   }
 })
 
-const OnboardingPage6 = () => {
+type OnboardingJoinCommunityProps = {
+  pageNumber: number
+}
+
+export const OnboardingJoinCommunity = (props: OnboardingJoinCommunityProps) => {
   return (
     <OnboardingLayout
-      pageNumber={6}
+      pageNumber={props.pageNumber}
       title="Join our Community"
       subTitle='Omnivore is open source and open community, join us.'
       nextPage='/home'
@@ -71,4 +75,3 @@ const OnboardingPage6 = () => {
   )
 }
 
-export default OnboardingPage6
diff --git a/packages/web/components/templates/onboarding/04.tsx b/packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx
similarity index 87%
rename from packages/web/components/templates/onboarding/04.tsx
rename to packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx
index c35537a59..3704732c2 100644
--- a/packages/web/components/templates/onboarding/04.tsx
+++ b/packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx
@@ -7,10 +7,14 @@ const StyledImage = styled('img', {
   position: 'relative',
 })
 
-const OnboardingPage4 = () => {
+type OnboardingOrganizeInstructionsProps = {
+  pageNumber: number
+}
+
+export const OnboardingOrganizeInstructions = (props: OnboardingOrganizeInstructionsProps) => {
   return (
     <OnboardingLayout
-      pageNumber={4}
+      pageNumber={props.pageNumber}
       title="Organize all your content"
       subTitle="Information about archiving and tagging
       Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
@@ -51,5 +55,3 @@ const OnboardingPage4 = () => {
     </OnboardingLayout>
   )
 }
-
-export default OnboardingPage4
diff --git a/packages/web/components/templates/onboarding/01.tsx b/packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx
similarity index 93%
rename from packages/web/components/templates/onboarding/01.tsx
rename to packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx
index 62e5ba531..fac558917 100644
--- a/packages/web/components/templates/onboarding/01.tsx
+++ b/packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx
@@ -37,10 +37,14 @@ const articleDetails = [
   },
 ]
 
-const OnboardingPage1 = () => {
+type OnboardingReaderPreviewProps = {
+  pageNumber: number
+}
+
+export const OnboardingReaderPreview = (props: OnboardingReaderPreviewProps) => {
   return (
     <OnboardingLayout
-      pageNumber={1}
+      pageNumber={props.pageNumber}
       title="Read Distraction Free"
       subTitle="Omnivore's distraction free reader gives you an uncluttered reading experience"
       description='Add some great reads to your library now:'
@@ -77,5 +81,3 @@ const OnboardingPage1 = () => {
     </OnboardingLayout>
   )
 }
-
-export default OnboardingPage1
diff --git a/packages/web/pages/onboarding/01.tsx b/packages/web/pages/onboarding/01.tsx
deleted file mode 100644
index df56ea745..000000000
--- a/packages/web/pages/onboarding/01.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import OnboardingPage1 from "../../components/templates/onboarding/01";
-
-export default function OnboardingPage01() {
-  return <OnboardingPage1 />
-}
diff --git a/packages/web/pages/onboarding/02.tsx b/packages/web/pages/onboarding/02.tsx
deleted file mode 100644
index 07e8adbd4..000000000
--- a/packages/web/pages/onboarding/02.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import OnboardingPage2 from "../../components/templates/onboarding/02";
-
-export default function OnboardingPage02() {
-  return <OnboardingPage2 />
-}
diff --git a/packages/web/pages/onboarding/03.tsx b/packages/web/pages/onboarding/03.tsx
deleted file mode 100644
index d2c16adc8..000000000
--- a/packages/web/pages/onboarding/03.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import OnboardingPage3 from "../../components/templates/onboarding/03";
-
-export default function OnboardingPage03() {
-  return <OnboardingPage3 />
-}
diff --git a/packages/web/pages/onboarding/04.tsx b/packages/web/pages/onboarding/04.tsx
deleted file mode 100644
index 70c2828e5..000000000
--- a/packages/web/pages/onboarding/04.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import OnboardingPage4 from "../../components/templates/onboarding/04";
-
-export default function OnboardingPage04() {
-  return <OnboardingPage4 />
-}
diff --git a/packages/web/pages/onboarding/05.tsx b/packages/web/pages/onboarding/05.tsx
deleted file mode 100644
index a4fa0d597..000000000
--- a/packages/web/pages/onboarding/05.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import OnboardingPage5 from "../../components/templates/onboarding/05";
-
-export default function OnboardingPage05() {
-  return <OnboardingPage5 />
-}
diff --git a/packages/web/pages/onboarding/06.tsx b/packages/web/pages/onboarding/06.tsx
deleted file mode 100644
index 500d3f8d8..000000000
--- a/packages/web/pages/onboarding/06.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import OnboardingPage6 from "../../components/templates/onboarding/06";
-
-export default function OnboardingPage06() {
-  return <OnboardingPage6 />
-}
diff --git a/packages/web/pages/onboarding/[index].tsx b/packages/web/pages/onboarding/[index].tsx
new file mode 100644
index 000000000..b9ca0f7d1
--- /dev/null
+++ b/packages/web/pages/onboarding/[index].tsx
@@ -0,0 +1,23 @@
+import { useRouter } from "next/router";
+import { OnboardingAddNewsletters } from "../../components/templates/onboarding/OnboardingAddNewsletters";
+import { OnboardingInstallInstructions } from "../../components/templates/onboarding/OnboardingInstallInstructions";
+import { OnboardingJoinCommunity } from "../../components/templates/onboarding/OnboardingJoinCommunity";
+import { OnboardingReaderPreview } from "../../components/templates/onboarding/OnboardingReaderPreview";
+
+export default function Onboarding() {
+  const router = useRouter();
+  const { index: pageNumber } = router.query;
+
+  switch (pageNumber) {
+    case "01":
+      return <OnboardingReaderPreview pageNumber={1} />;
+    case "02":
+      return <OnboardingInstallInstructions pageNumber={2} />;
+    case "03":
+      return <OnboardingAddNewsletters pageNumber={3} />;
+    case "04":
+      return <OnboardingJoinCommunity pageNumber={4} />;
+  }
+
+  return <OnboardingReaderPreview pageNumber={1} />
+}
diff --git a/packages/web/stories/OnboardingLayout.stories.tsx b/packages/web/stories/OnboardingLayout.stories.tsx
index d735174d6..0ffb9d79a 100644
--- a/packages/web/stories/OnboardingLayout.stories.tsx
+++ b/packages/web/stories/OnboardingLayout.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingLayout from '../components/templates/OnboardingLayout2'
+import OnboardingLayout from '../components/templates/OnboardingLayout'
 
 export default {
   title: 'Components/OnboardingLayout',
diff --git a/packages/web/stories/OnboardingPage1.stories.tsx b/packages/web/stories/OnboardingPage1.stories.tsx
index 7afa88818..1f7834895 100644
--- a/packages/web/stories/OnboardingPage1.stories.tsx
+++ b/packages/web/stories/OnboardingPage1.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage1 from '../components/templates/onboarding/01'
+import { OnboardingReaderPreview } from '../components/templates/onboarding/OnboardingReaderPreview'
 
 export default {
   title: 'Onboarding-Pages/01',
-  component: OnboardingPage1,
-} as ComponentMeta<typeof OnboardingPage1>
+  component: OnboardingReaderPreview,
+} as ComponentMeta<typeof OnboardingReaderPreview>
 
-export const OnboardingPage1Story: ComponentStory<typeof OnboardingPage1> = (args: any) => {
+export const OnboardingPage1Story: ComponentStory<typeof OnboardingReaderPreview> = (args: any) => {
   return (
-    <OnboardingPage1 />
+    <OnboardingReaderPreview />
   )
 }
diff --git a/packages/web/stories/OnboardingPage2.stories.tsx b/packages/web/stories/OnboardingPage2.stories.tsx
index 90e13abe3..74ec2ef57 100644
--- a/packages/web/stories/OnboardingPage2.stories.tsx
+++ b/packages/web/stories/OnboardingPage2.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage2 from '../components/templates/onboarding/02'
+import { OnboardingInstallInstructions } from '../components/templates/onboarding/OnboardingInstallInstructions'
 
 export default {
   title: 'Onboarding-Pages/02',
-  component: OnboardingPage2,
-} as ComponentMeta<typeof OnboardingPage2>
+  component: OnboardingInstallInstructions,
+} as ComponentMeta<typeof OnboardingInstallInstructions>
 
-export const OnboardingPage2Story: ComponentStory<typeof OnboardingPage2> = (args: any) => {
+export const OnboardingPage2Story: ComponentStory<typeof OnboardingInstallInstructions> = (args: any) => {
   return (
-    <OnboardingPage2 />
+    <OnboardingInstallInstructions />
   )
 }
diff --git a/packages/web/stories/OnboardingPage3.stories.tsx b/packages/web/stories/OnboardingPage3.stories.tsx
index 45ac49ec5..971efabcf 100644
--- a/packages/web/stories/OnboardingPage3.stories.tsx
+++ b/packages/web/stories/OnboardingPage3.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage3 from '../components/templates/onboarding/03'
+import { OnboardingAddNewsletters } from '../components/templates/onboarding/OnboardingAddNewsletters'
 
 export default {
   title: 'Onboarding-Pages/03',
-  component: OnboardingPage3,
-} as ComponentMeta<typeof OnboardingPage3>
+  component: OnboardingAddNewsletters,
+} as ComponentMeta<typeof OnboardingAddNewsletters>
 
-export const OnboardingPage3Story: ComponentStory<typeof OnboardingPage3> = (args: any) => {
+export const OnboardingPage3Story: ComponentStory<typeof OnboardingAddNewsletters> = (args: any) => {
   return (
-    <OnboardingPage3 />
+    <OnboardingAddNewsletters />
   )
 }
diff --git a/packages/web/stories/OnboardingPage4.stories.tsx b/packages/web/stories/OnboardingPage4.stories.tsx
index 1dfda308a..7e251018c 100644
--- a/packages/web/stories/OnboardingPage4.stories.tsx
+++ b/packages/web/stories/OnboardingPage4.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage4 from '../components/templates/onboarding/04'
+import { OnboardingOrganizeInstructions } from '../components/templates/onboarding/OnboardingOrganizeInstructions'
 
 export default {
   title: 'Onboarding-Pages/04',
-  component: OnboardingPage4,
-} as ComponentMeta<typeof OnboardingPage4>
+  component: OnboardingOrganizeInstructions,
+} as ComponentMeta<typeof OnboardingOrganizeInstructions>
 
-export const OnboardingPage4Story: ComponentStory<typeof OnboardingPage4> = (args: any) => {
+export const OnboardingPage4Story: ComponentStory<typeof OnboardingOrganizeInstructions> = (args: any) => {
   return (
-    <OnboardingPage4 />
+    <OnboardingOrganizeInstructions />
   )
 }
diff --git a/packages/web/stories/OnboardingPage5.stories.tsx b/packages/web/stories/OnboardingPage5.stories.tsx
index d54c16322..67debd310 100644
--- a/packages/web/stories/OnboardingPage5.stories.tsx
+++ b/packages/web/stories/OnboardingPage5.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage5 from '../components/templates/onboarding/05'
+import { OnboardingHighlightInstructions } from '../components/templates/onboarding/OnboardingHighlightInstructions'
 
 export default {
   title: 'Onboarding-Pages/05',
-  component: OnboardingPage5,
-} as ComponentMeta<typeof OnboardingPage5>
+  component: OnboardingHighlightInstructions,
+} as ComponentMeta<typeof OnboardingHighlightInstructions>
 
-export const OnboardingPage5Story: ComponentStory<typeof OnboardingPage5> = (args: any) => {
+export const OnboardingPage5Story: ComponentStory<typeof OnboardingHighlightInstructions> = (args: any) => {
   return (
-    <OnboardingPage5 />
+    <OnboardingHighlightInstructions />
   )
 }
diff --git a/packages/web/stories/OnboardingPage6.stories.tsx b/packages/web/stories/OnboardingPage6.stories.tsx
index ef1cef649..c673bc967 100644
--- a/packages/web/stories/OnboardingPage6.stories.tsx
+++ b/packages/web/stories/OnboardingPage6.stories.tsx
@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage6 from '../components/templates/onboarding/06'
+import { OnboardingJoinCommunity } from '../components/templates/onboarding/OnboardingJoinCommunity'
 
 export default {
   title: 'Onboarding-Pages/06',
-  component: OnboardingPage6,
-} as ComponentMeta<typeof OnboardingPage6>
+  component: OnboardingJoinCommunity,
+} as ComponentMeta<typeof OnboardingJoinCommunity>
 
-export const OnboardingPage6Story: ComponentStory<typeof OnboardingPage6> = (args: any) => {
+export const OnboardingPage6Story: ComponentStory<typeof OnboardingJoinCommunity> = (args: any) => {
   return (
-    <OnboardingPage6 />
+    <OnboardingJoinCommunity />
   )
 }

From 0ae63f9da8a696e1266297505908ae80c7dc9329 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 23 May 2022 15:42:30 -0700
Subject: [PATCH 4/6] Fix default import

---
 packages/web/stories/OnboardingLayout.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/stories/OnboardingLayout.stories.tsx b/packages/web/stories/OnboardingLayout.stories.tsx
index 0ffb9d79a..641e594a0 100644
--- a/packages/web/stories/OnboardingLayout.stories.tsx
+++ b/packages/web/stories/OnboardingLayout.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingLayout from '../components/templates/OnboardingLayout'
+import { OnboardingLayout } from '../components/templates/OnboardingLayout'
 
 export default {
   title: 'Components/OnboardingLayout',

From dcd23e6eb24356ecb393724b21341474dfee6df4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 23 May 2022 15:43:06 -0700
Subject: [PATCH 5/6] dos2unix on this file

---
 .../web/stories/OnboardingLayout.stories.tsx  | 88 +++++++++----------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/packages/web/stories/OnboardingLayout.stories.tsx b/packages/web/stories/OnboardingLayout.stories.tsx
index 641e594a0..e801feaaa 100644
--- a/packages/web/stories/OnboardingLayout.stories.tsx
+++ b/packages/web/stories/OnboardingLayout.stories.tsx
@@ -1,44 +1,44 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { OnboardingLayout } from '../components/templates/OnboardingLayout'
-
-export default {
-  title: 'Components/OnboardingLayout',
-  component: OnboardingLayout,
-  argTypes: {
-    pageNumber: {
-      description: 'The current page number of the onboarding process',
-    },
-    title: {
-      description: 'The title of the current onboading screen',
-    },
-    subTitle: {
-      description: 'The subtitle of the current onboading screen',
-    },
-    description: {
-      description: 'The description of the current onboading screen',
-    },
-    children: {
-      description: 'The right column on the page',
-    },
-    image: {
-      description: 'The image on the left column on the page',
-    },
-    nextPage: {
-      description: 'The link to which the user is sent when next button is pressed'
-    }
-  },
-} as ComponentMeta<typeof OnboardingLayout>
-
-const Template: ComponentStory<typeof OnboardingLayout> = (args) => (
-  <OnboardingLayout {...args}>{args.children}</OnboardingLayout>
-)
-
-export const OnboardingLayoutStory = Template.bind({})
-OnboardingLayoutStory.args = {
-  pageNumber: 2,
-  title: 'Save links to read later',
-  subTitle:
-    'Save any link to your library using our apps and browser extensions',
-  description: 'Install our apps and browser extensions',
-  children: <div>This is where the child is rendered.</div>
-}
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { OnboardingLayout } from '../components/templates/OnboardingLayout'
+
+export default {
+  title: 'Components/OnboardingLayout',
+  component: OnboardingLayout,
+  argTypes: {
+    pageNumber: {
+      description: 'The current page number of the onboarding process',
+    },
+    title: {
+      description: 'The title of the current onboading screen',
+    },
+    subTitle: {
+      description: 'The subtitle of the current onboading screen',
+    },
+    description: {
+      description: 'The description of the current onboading screen',
+    },
+    children: {
+      description: 'The right column on the page',
+    },
+    image: {
+      description: 'The image on the left column on the page',
+    },
+    nextPage: {
+      description: 'The link to which the user is sent when next button is pressed'
+    }
+  },
+} as ComponentMeta<typeof OnboardingLayout>
+
+const Template: ComponentStory<typeof OnboardingLayout> = (args) => (
+  <OnboardingLayout {...args}>{args.children}</OnboardingLayout>
+)
+
+export const OnboardingLayoutStory = Template.bind({})
+OnboardingLayoutStory.args = {
+  pageNumber: 2,
+  title: 'Save links to read later',
+  subTitle:
+    'Save any link to your library using our apps and browser extensions',
+  description: 'Install our apps and browser extensions',
+  children: <div>This is where the child is rendered.</div>
+}

From 677d561ab051922c4839615ef0bef9ac93e9e6c3 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 23 May 2022 15:56:52 -0700
Subject: [PATCH 6/6] Add new required pageNumber attribute to onboarding
 stories

---
 packages/web/stories/OnboardingPage1.stories.tsx | 2 +-
 packages/web/stories/OnboardingPage2.stories.tsx | 2 +-
 packages/web/stories/OnboardingPage3.stories.tsx | 2 +-
 packages/web/stories/OnboardingPage4.stories.tsx | 2 +-
 packages/web/stories/OnboardingPage5.stories.tsx | 2 +-
 packages/web/stories/OnboardingPage6.stories.tsx | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web/stories/OnboardingPage1.stories.tsx b/packages/web/stories/OnboardingPage1.stories.tsx
index 1f7834895..44500c9d3 100644
--- a/packages/web/stories/OnboardingPage1.stories.tsx
+++ b/packages/web/stories/OnboardingPage1.stories.tsx
@@ -8,6 +8,6 @@ export default {
 
 export const OnboardingPage1Story: ComponentStory<typeof OnboardingReaderPreview> = (args: any) => {
   return (
-    <OnboardingReaderPreview />
+    <OnboardingReaderPreview pageNumber={1} />
   )
 }
diff --git a/packages/web/stories/OnboardingPage2.stories.tsx b/packages/web/stories/OnboardingPage2.stories.tsx
index 74ec2ef57..8f07d3fcc 100644
--- a/packages/web/stories/OnboardingPage2.stories.tsx
+++ b/packages/web/stories/OnboardingPage2.stories.tsx
@@ -8,6 +8,6 @@ export default {
 
 export const OnboardingPage2Story: ComponentStory<typeof OnboardingInstallInstructions> = (args: any) => {
   return (
-    <OnboardingInstallInstructions />
+    <OnboardingInstallInstructions pageNumber={2} />
   )
 }
diff --git a/packages/web/stories/OnboardingPage3.stories.tsx b/packages/web/stories/OnboardingPage3.stories.tsx
index 971efabcf..e3cbcd66e 100644
--- a/packages/web/stories/OnboardingPage3.stories.tsx
+++ b/packages/web/stories/OnboardingPage3.stories.tsx
@@ -8,6 +8,6 @@ export default {
 
 export const OnboardingPage3Story: ComponentStory<typeof OnboardingAddNewsletters> = (args: any) => {
   return (
-    <OnboardingAddNewsletters />
+    <OnboardingAddNewsletters pageNumber={3} />
   )
 }
diff --git a/packages/web/stories/OnboardingPage4.stories.tsx b/packages/web/stories/OnboardingPage4.stories.tsx
index 7e251018c..59c219f16 100644
--- a/packages/web/stories/OnboardingPage4.stories.tsx
+++ b/packages/web/stories/OnboardingPage4.stories.tsx
@@ -8,6 +8,6 @@ export default {
 
 export const OnboardingPage4Story: ComponentStory<typeof OnboardingOrganizeInstructions> = (args: any) => {
   return (
-    <OnboardingOrganizeInstructions />
+    <OnboardingOrganizeInstructions pageNumber={4} />
   )
 }
diff --git a/packages/web/stories/OnboardingPage5.stories.tsx b/packages/web/stories/OnboardingPage5.stories.tsx
index 67debd310..da2ce728d 100644
--- a/packages/web/stories/OnboardingPage5.stories.tsx
+++ b/packages/web/stories/OnboardingPage5.stories.tsx
@@ -8,6 +8,6 @@ export default {
 
 export const OnboardingPage5Story: ComponentStory<typeof OnboardingHighlightInstructions> = (args: any) => {
   return (
-    <OnboardingHighlightInstructions />
+    <OnboardingHighlightInstructions pageNumber={5} />
   )
 }
diff --git a/packages/web/stories/OnboardingPage6.stories.tsx b/packages/web/stories/OnboardingPage6.stories.tsx
index c673bc967..a35ec04f3 100644
--- a/packages/web/stories/OnboardingPage6.stories.tsx
+++ b/packages/web/stories/OnboardingPage6.stories.tsx
@@ -8,6 +8,6 @@ export default {
 
 export const OnboardingPage6Story: ComponentStory<typeof OnboardingJoinCommunity> = (args: any) => {
   return (
-    <OnboardingJoinCommunity />
+    <OnboardingJoinCommunity pageNumber={6} />
   )
 }