Adds landing page for Journeys & First Journey

packages/@okta/vuepress-site/.vuepress/scripts/build-overview-pages.js

@@ -28,7 +28,11 @@ function sanitizeTitle(el) {
   if (el.guideName) {
     return el.guideName;
   }
-  return el.title.toLowerCase().replace(/ /ig, '-').replace(/\//ig, '-');
+
+  if (el.journeyName) {
+    return el.journeyName;
+  }
+  return el.title.toLowerCase().replace(/ /ig, '-').replace(/\//ig, '-').replace(/[()]/g, '');
 }
 
 let generatedPages = [];
@@ -37,36 +41,44 @@ function generatedLinks(arr, parent = null) {
   if (arr) {
     for (let el of arr) {
       if (el) {
-        if (!el.path && !el.guideName) {
-          const parentTitle = sanitizeTitle(parent);
-          let path = '';
-          if (parentTitle !== 'guides' && parent.path) {
+        if (!el.path && parent && parent.path) {
+          const isGuide = !el.guideName && !parent.path.includes('docs/journeys');
+          const isJourney = !el.journeyName && parent.path.includes('docs/journeys');
+
+          if (isGuide || isJourney) {
+            const parentTitle = sanitizeTitle(parent);
+            const elTitle = sanitizeTitle(el);
             const splittedPath = parent.path.split('/');
-            if (parent.path.indexOf(parentTitle) >= 0) {
-              path = parent.path.replace(parentTitle, sanitizeTitle(el));
-            } else if (parent.path == '/code/') {
-              path = `/${splittedPath[1]}/${sanitizeTitle(el)}/`;
+            let path = '';
+
+            if ((isGuide && parentTitle !== 'guides') || (isJourney && parentTitle !== 'journeys')) {
+              if (parent.path.includes(parentTitle)) {
+                path = parent.path.replace(parentTitle, elTitle);
+              } else if (parent.path === '/code/') {
+                path = `/${splittedPath[1]}/${elTitle}/`;
+              } else {
+                path = `/${splittedPath[1]}/${splittedPath[2]}/${elTitle}/`;
+              }
             } else {
-              path = `/${splittedPath[1]}/${splittedPath[2]}/${sanitizeTitle(el)}/`;
+              path = parent.path + elTitle + "/";
             }
-          } else {
-            path = parent.path + sanitizeTitle(el) + "/";
-          }
-          const page = {
-            path,
-            title: el.title,
-            frontmatter: {}
-          }
-          if (el.customLandingPage) {
-            page.frontmatter.customLandingPage = true;
-          } else {
-            page.frontmatter.generated = true;
-          }
-          if (el.description) {
-            page.description = el.description;
+
+            const page = {
+              path,
+              title: el.title,
+              frontmatter: {}
+            }
+            if (el.customLandingPage) {
+              page.frontmatter.customLandingPage = true;
+            } else {
+              page.frontmatter.generated = true;
+            }
+            if (el.description) {
+              page.description = el.description;
+            }
+            generatedPages.push(page);
+            el.path = path;
           }
-          generatedPages.push(page);
-          el.path = path;
         }
         if (!el.path) {
           el.path = parent.path + sanitizeTitle(el) + "/";

packages/@okta/vuepress-site/docs/journeys/OCI-secure-your-first-web-app/index.md

@@ -3,89 +3,7 @@ title: Secure your first web app
 meta:
   - name: description
     content: Connect a single-page app to Okta and give it sign-in functionality.
-    date-updated: July 25
-    Target persona: Developer
-    Level: Beginner
----
-
-# Secure your first web app
-
-Seamlessly connect your customer-facing app to Okta and configure a secure sign-in experience, using the built-in authentication policies and the Okta hosted sign-in form.
-
-## Introduction
-
-You've built your customer-facing app and now it needs a secure, scalable way to sign users in. Integrate your existing web app with a secure Okta sign-in flow, configure sign-in policies, and brand the experience for your customers.
-
-## Learn
-
-Learn the basics that you need to lay the foundations for your work.
-
-An [Okta org](/docs/concepts/okta-organizations/) serves as your central Okta development hub, encapsulating all configurations, users, groups, policies, and other objects that your app uses.
-
-## Plan
-
-To get the most from your Okta org, secure a custom domain that you can assign to your org. A custom domain isn't just for branding. It also unlocks a full spectrum of customization options for the Okta user interface components and messaging, which ensures your app's brand consistency. A custom domain provides the following enhancements:
-
-* Apply your brand's look and feel to all Okta user interface components and communications.
-
-* Simplify user session management and monitoring.
-
-* Enable cross-app features like Single Logout (SLO)
-
-See [Style the sign-in form to match your brand](#style-the-sign-in-form-to-match-your-brand).
-
-## Build
-
-To integrate your web app with Okta, start by getting an Okta account and org, and then setting up the org. You can then implement a user-friendly sign-in experience using the Okta hosted sign-in form. After that, you can customize the authentication flow to meet your specific security requirements and brand aesthetics.
-
-### Set up your account
-
-Sign up for an Okta account, and then set up your new Okta org to test web apps.
-
-* Get an [Okta account](/docs/reference/org-defaults/).
-* [Set up your org for basic testing](/docs/guides/set-up-org/main/). This involves populating your org with sample users and a user group.
 
-### Add a way for users to sign in
-
-The simplest and Okta-recommended way to sign users in to your app is to redirect them to an Okta-hosted sign-in form. The Okta-hosted sign-in form supports all Okta authentication factors and adapts to any authentication policy modifications that you make. It operates on standard IAM protocols such as SAML, OAuth 2.0, or OpenID Connect (OIDC).
-
-* [Connect your app to Okta](/docs/guides/create-an-app-integration/)
-* [Learn about the Okta Sign-In Widget](waiting)
-* [Sign users in to your SPA by redirecting them to an Okta-hosted sign-in form](/docs/guides/auth-js-redirect/main/)
-
-By default, users are required to sign in with any of two authentication factors: password, email, SMS, and voice. Your org comes with those authenticators pre-configured. Use the Admin Console to enable other factors and change the policy to match your requirements.
-
-* Learn about [preset authentication policies](https://help.okta.com/okta_help.htm?type=oie&id=ext-preset-auth-policies).
-* [Add an authentication factor](https://help.okta.com/okta_help.htm?type=oie&id=csh-about-authenticators)
-
-The Okta-hosted sign-in form changes its behavior automatically to match your updates to the authentication policy.
-
-### Style the sign-in form to match your brand
-
-You can restyle the Okta-hosted sign-in form to match your own brand's look and feel. Assign a custom domain URL to your org to enable these customization features.
-
-* Assign a [custom domain](/docs/guides/custom-url-domain/main/) to your org
-* [Style your Okta org with your brand](/docs/concepts/brands/)
-* [Style the Okta-hosted sign-in form](/docs/guides/custom-widget-gen3/main/)
-
-## Related topics
-
-Congratulations, your app now uses Okta to provide its sign-in services.
-
-Learn how to secure other types of apps:
-
-* [Sign users into a web app using a self-hosted sign-in form with Direct Authentication](/docs/guides/configure-direct-auth-grants/aotp/main/).
-* [Sign users into a mobile app by redirecting them to an Okta-hosted sign-in form](/docs/guides/sign-into-mobile-app-redirect/ios/main/)
-* [Sign users into a mobile app using a self-hosted sign-in form](/docs/guides/)
-
-After a user signs in, Okta returns tokens to identify the user and the user's access levels.
-
-See [Understand the token lifecycle](/docs/concepts/token-lifecycles/index.md).
-
-If you're using the Okta-hosted sign-in form, Okta returns a cookie to identify the user's session. This establishes an active browser session. If you're using a self-hosted form, your app should use the Sessions API to obtain a session token.
-
-Use the following docs to enable sign-out once, sign-out everywhere features:
-
-* [Use the Sessions API](https://developer.okta.com/docs/api/openapi/okta-management/management/tag/Session/).
-* [Learn about Single Logout](/docs/guides/single-logout/openidconnect/main/).
-* [Learn about Universal Logout](/docs/guides/oin-universal-logout-overview/).
+sections:
+- main
+---

packages/@okta/vuepress-site/docs/journeys/OCI-secure-your-first-web-app/main/index.md

@@ -0,0 +1,87 @@
+---
+title: Secure your first web app
+meta:
+  - name: description
+    content: Connect a single-page app to Okta and give it sign-in functionality.
+    date-updated: July 25
+    Target persona: Developer
+    Level: Beginner
+---
+
+# Secure your first web app
+
+Connect your app to Okta and configure a secure sign-in experience.
+
+## Introduction
+
+You've built your customer-facing app and now it needs a secure, scalable way to sign users in. Integrate your existing web app with a secure Okta sign-in flow, configure sign-in policies, and brand the experience for your customers.
+
+## Learn
+
+Learn the basics that you need to lay the foundations for your work.
+
+An [Okta org](/docs/concepts/okta-organizations/) serves as your central Okta development hub, encapsulating all configurations, users, groups, policies, and other objects that your app uses.
+
+## Plan
+
+To get the most from your Okta org, secure a custom domain that you can assign to your org. A custom domain provides the following enhancements:
+
+* Apply your brand's look and feel to all Okta user interface components and communications.
+
+* Simplify user session management and monitoring.
+
+* Enable cross-app features like Single Logout (SLO).
+
+See [Style the sign-in form to match your brand](#style-the-sign-in-form-to-match-your-brand).
+
+## Build
+
+To integrate your web app with Okta, start by getting an Okta account and org, and then setting up the org. You can then implement a user-friendly sign-in experience using the Okta-hosted sign-in form. After that, you can customize the authentication flow to meet your specific security requirements and brand aesthetics.
+
+### Set up your account
+
+Sign up for an Okta account, and then set up your new Okta org to test web apps.
+
+* Get an [Okta account](/docs/reference/org-defaults/).
+* [Set up your org for basic testing](/docs/guides/set-up-org/main/). This involves populating your org with sample users and a user group.
+
+### Add a way for users to sign in
+
+The simplest and Okta-recommended way to sign users in to your app is to redirect them to an Okta-hosted sign-in form.
+
+* [Connect your app to Okta](/docs/guides/create-an-app-integration/openidconnect/main/)
+* [Learn about the Okta Sign-In Widget](/docs/concepts/sign-in-widget/)
+* [Sign users in to your SPA by redirecting them to an Okta-hosted sign-in form](/docs/guides/auth-js-redirect/main/)
+
+By default, users are required to sign in with any two authentication factors: password, email, SMS, and voice. Your org comes with those authenticators pre-configured. Use the Admin Console to enable other factors and change the policy to match your requirements.
+
+* Learn about [preset authentication policies](https://help.okta.com/okta_help.htm?type=oie&id=ext-preset-auth-policies).
+* [Add an authentication factor](https://help.okta.com/okta_help.htm?type=oie&id=csh-about-authenticators).
+
+The Okta-hosted sign-in form changes its behavior automatically to match your updates to the authentication policy.
+
+### Style the sign-in form to match your brand
+
+You can restyle the Okta-hosted sign-in form to match your own brand's look and feel. Assign a custom domain URL to your org to enable these customization features.
+
+* Assign a [custom domain](/docs/guides/custom-url-domain/main/) to your org
+* [Style your Okta org with your brand](/docs/concepts/brands/)
+* [Style the Okta-hosted sign-in form](/docs/guides/custom-widget-gen3/main/)
+
+## Related topics
+
+Congratulations, your app now uses Okta to provide its sign-in services.
+
+Learn how to secure other types of apps:
+
+* [Sign users into a mobile app by redirecting them to an Okta-hosted sign-in form](/docs/guides/sign-into-mobile-app-redirect/ios/main/)
+* [Sign users into a mobile app using a self-hosted sign-in form](/docs/guides/sign-into-mobile-app-embedded/main/)
+
+After a user signs in, Okta returns tokens to identify the user and the user's access levels. See [Understand the token lifecycle](/docs/concepts/token-lifecycles/index.md).
+
+If you're using the Okta-hosted sign-in form, Okta returns a JWT to identify the user, their access, and to give you some information about their session. This proves that they have an active browser session. If you're using a self-hosted form, your app should use the [Authorization Code with PKCE](/docs/guides/implement-grant-type/authcodepkce/main/) authentication flow and `prompt=none` to validate that a session is still active.
+
+Use the following docs to enable sign-out once, sign-out everywhere features:
+
+* [Learn about Single Logout](/docs/guides/single-logout/openidconnect/main/).
+* [Learn about Universal Logout](/docs/guides/oin-universal-logout-overview/).

packages/@okta/vuepress-site/docs/journeys/index.md

@@ -1,6 +1,8 @@
 ---
 layout: Landing
 title: Journeys
+journeys:
+ - OCI-secure-your-first-web-app
 ---
 
 # Journeys
@@ -15,5 +17,5 @@ Journeys break down your development project into consumable steps:
 ## Featured journeys
 
 <Cards>
-  <Card href="/docs/journeys/OCI-secure-your-first-web-app/" cardTitle="Secure your first web app">Seamlessly connect your customer-facing app to Okta and configure a secure sign-in experience, using the built-in authentication policies and the Okta hosted sign-in page.</Card>
+  <Card href="/docs/journeys/OCI-secure-your-first-web-app/main/" cardTitle="Secure your first web app">Seamlessly connect your customer-facing app to Okta and configure a secure sign-in experience, using the built-in authentication policies and the Okta hosted sign-in page.</Card>
 </Cards>

packages/@okta/vuepress-theme-prose/components/Breadcrumb.vue

@@ -93,6 +93,15 @@
             windowPathname = this.$page.regularPath.replace('/-/', `/${menuItem.frameworks[0]}/`);
           }
 
+          if(
+            this.$page.regularPath.indexOf('/-/') > 0 && 
+            journeyFromPath(this.$page.regularPath).journeyName === menuItem.journeyName &&
+            menuItem.frameworks &&
+            menuItem.frameworks.length > 0
+          ) {
+            windowPathname = this.$page.regularPath.replace('/-/', `/${menuItem.frameworks[0]}/`);
+          }
+
           if(menuItem.path != undefined && windowPathname === menuItem.path) {
             //add parent crumbs    
             if (menuItem.parents) {      

packages/@okta/vuepress-theme-prose/const/navbar.const.js

@@ -1031,11 +1031,10 @@ export const journeys = [
       path: "/docs/journeys/",
       subLinks: [
         {
-          title: "Okta Customer Identity (OCI)",
-          path: "/docs/journeys/1",
+          title: "Secure my customer portal",
           subLinks: [
             { title: "Secure your first web app",
-              path: "/docs/journeys/OCI-secure-your-first-web-app"
+              journeyName: "OCI-secure-your-first-web-app"
             },
           ]
         },