Vue tutorial (#1838)

* feat: add vue developer essentials

* chore: correct yarn serve command

* feat: add vue developer essentials

* chore: correct yarn serve command

* fix: overview and wrapping up

* chore: remove react ref in vue overview

* chore: refinements

* chore: remove polyfill bit

* chore: deploy

* chore: test .env.local

* chore: post step 2 run through updates

* chore: remove deploy

* chore: step 3 updates

* feat: update nav for tutorial tabs

* chore: review step 4

* chore: finish up

* chore: undo gatsby gh-pages-config

* chore: undo git ignore change

* fix: skip location during netify build

* fix: previews

* chore: correct type for scss code sample

* fix: next prev in tutorial

* chore: tweak carbon.scss file create wording

* chore: add badge application step

* Propose fixes to finding in Vue tutorial step 1

- Change quotes because of eslint complaints
- Give a bit more context on some occasions
- Outcomment parts that are not applicable for the moment

* Add a forgotten part to outcomment

* chore: update badge

* Update vue.mdx

Review of the review changes ;-)

* chore: updating survey link and ibmcloud cli

* chore: updating vue deadline

* chore: step 1 and step 2 updates

* fix: className and use of term return

* chore: clarify repo-page data update

* fix: paths to repo and landing pages

* fix: typos and mystery

* chore: step 3 updates

* chore: step 4, 5 and wrapping up step  updates

* chore: updating survey link - no shirt

* fix: move updated badge to correct location

* fix: redirect old tutorial paths

* fix: correct typo in redirect

* fix: 404 flash before redirect

* Revert "fix: 404 flash before redirect"

This reverts commit 9215f87.

* Revert "fix: next prev in tutorial"

This reverts commit cb203ef.

* Revert "fix: skip location during netify build"

This reverts commit cff4711.

* Revert "feat: update nav for tutorial tabs"

This reverts commit bcd83b2.

* fix: update navigation patter post review

* chore: update redirect to match new navigation

gatsby-node.js

@@ -7,8 +7,6 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
   const { createNodeField } = actions;
   // If the node type (file) is a markdown file
   if (node.internal.type === 'Mdx') {
-    const dir = path.resolve(__dirname, '');
-    const fileNode = getNode(node.parent);
     const slug = createFilePath({
       node,
       getNode,
@@ -102,10 +100,78 @@ exports.createPages = ({ actions, graphql }) => {
         }
       }
     });
+
+    [
+      {
+        fromPaths: [
+          '/tutorial/overview',
+          '/tutorial/overview/',
+          '/tutorial/overview/index.html',
+        ],
+        toPath: '/tutorial/react/overview',
+      },
+      {
+        fromPaths: [
+          '/tutorial/react-step-1',
+          '/tutorial/react-step-1/',
+          '/tutorial/react-step-1/index.html',
+        ],
+        toPath: '/tutorial/react/step-1',
+      },
+      {
+        fromPaths: [
+          '/tutorial/react-step-2',
+          '/tutorial/react-step-2/',
+          '/tutorial/react-step-2/index.html',
+        ],
+        toPath: '/tutorial/react/step-2',
+      },
+      {
+        fromPaths: [
+          '/tutorial/react-step-3',
+          '/tutorial/react-step-3/',
+          '/tutorial/react-step-3/index.html',
+        ],
+        toPath: '/tutorial/react/step-3',
+      },
+      {
+        fromPaths: [
+          '/tutorial/react-step-4',
+          '/tutorial/react-step-4/',
+          '/tutorial/react-step-4/index.html',
+        ],
+        toPath: '/tutorial/react/step-4',
+      },
+      {
+        fromPaths: [
+          '/tutorial/react-step-5',
+          '/tutorial/react-step-5/',
+          '/tutorial/react-step-5/index.html',
+        ],
+        toPath: '/tutorial/react/step-5',
+      },
+      {
+        fromPaths: [
+          '/tutorial/wrapping-up',
+          '/tutorial/wrapping-up/',
+          '/tutorial/wrapping-up/index.html',
+        ],
+        toPath: '/tutorial/react/wrapping-up',
+      },
+    ].forEach(redirect => {
+      redirect.fromPaths.forEach(fromPath => {
+        createRedirect({
+          redirectInBrowser: true,
+          isPermanent: true,
+          fromPath,
+          toPath: redirect.toPath,
+        });
+      });
+    });
   });
 };
 
-exports.onCreateWebpackConfig = ({ actions, getConfig, stage, loaders }) => {
+exports.onCreateWebpackConfig = ({ actions, loaders }) => {
   actions.setWebpackConfig({
     module: {
       rules: [
@@ -135,6 +201,7 @@ exports.onPostBuild = () => {
   try {
     src = path.resolve(path.dirname(require.resolve('carbon-icons')), 'svg');
   } catch (err) {
+    /* eslint-disable-next-line no-console */
     console.error('Error locating the icons directory', err.stack);
     return;
   }

src/content/tutorial/overview/overview.mdx → src/content/tutorial/react/overview.mdx

@@ -1,6 +1,8 @@
 ---
 title: Tutorial overview
 internal: false
+tabs:
+  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
 ---
 
 ### Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System. We'll teach you the ins and outs of using Carbon components, while introducing web development best practices along the way.
@@ -55,13 +57,13 @@ This tutorial uses [Yarn](https://yarnpkg.com) for dependency management so we c
 
 Each step in this tutorial illustrates a different aspect of developing web applications with Carbon. We recommend starting with step 1, but you can pick up any step and take it from there.
 
-1. [**Installing Carbon**](/tutorial/react-step-1)
+1. [**Installing Carbon**](/tutorial/step-1/react)
    - Create a web app with the UI shell component.
-1. [**Building pages**](/tutorial/react-step-2)
+1. [**Building pages**](/tutorial/step-2/react)
    - Build out pages with the grid and various components.
-1. [**Using APIs**](/tutorial/react-step-3)
+1. [**Using APIs**](/tutorial/step-3/react)
    - Populate the data table with an external data source.
-1. [**Creating components**](/tutorial/react-step-4)
+1. [**Creating components**](/tutorial/step-4/react)
    - Extend Carbon by creating your own components.
-1. [**Deploying to IBM Cloud**](/tutorial/react-step-5)
+1. [**Deploying to IBM Cloud**](/tutorial/step-5/react)
    - Build and host your app in a production environment.

src/content/tutorial/react-step-1/react-step-1.mdx → src/content/tutorial/react/step-1.mdx

@@ -1,6 +1,7 @@
 ---
 title: 1. Installing Carbon
 internal: false
+tabs: ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
 ---
 
 ### Starting with Create React App, let's install Carbon and begin using Carbon components. By the end you will have a React app that uses the UI Shell to navigate between pages.
@@ -589,6 +590,6 @@ _Note: If you receive a_ `non-fast-forward` _error, it's likely that your forked
 
 ### Pull request (PR)
 
-Finally, visit [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) to "Compare & pull request". In doing so, make sure that you are comparing to `react-step-1` into `base: react-step-1`. Take notice of the [Netlify](https://www.netlify.com) bot that deploys a preview of your PR every time that you push new commits. These previews can be shared and viewed by anybody to assist the PR review process.
+Finally, visit [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) to "Compare & pull request". In doing so, make sure that you are comparing your forked repository's `react-step-1` branch into `base: react-step-1`. Take notice of the [Netlify](https://www.netlify.com) bot that deploys a preview of your PR every time that you push new commits. These previews can be shared and viewed by anybody to assist the PR review process.
 
 _Note: Expect your tutorial step PRs to be reviewed by the Carbon team but not merged. We'll close your PR so we can keep the repository's remote branches pristine and ready for the next person!_

src/content/tutorial/react-step-2/react-step-2.mdx → src/content/tutorial/react/step-2.mdx

@@ -1,6 +1,7 @@
 ---
 title: 2. Building pages
 internal: false
+tabs: ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
 ---
 
 ### Now that we have a React app using the UI Shell, it's time to build a few static pages. In this step, we'll become comfortable with the Carbon grid and various Carbon components.
@@ -39,7 +40,7 @@ A [preview](https://react-step-3--carbon-tutorial.netlify.com) of what you'll bu
 
 ## Fork, clone and branch
 
-This tutorial has an accompanying GitHub repository called [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the [step 1 instructions](/tutorial/react-step-1#fork-clone--branch).
+This tutorial has an accompanying GitHub repository called [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the [step 1 instructions](/tutorial/step-1/react#fork-clone--branch).
 
 ### Branch
 
@@ -66,7 +67,7 @@ Then, start the app:
 $ yarn start
 ```
 
-You should see something similar to where the [previous step](/tutorial/react-step-1) left off.
+You should see something similar to where the [previous step](/tutorial/step-1/react) left off.
 
 ### IE11 polyfills
 
@@ -119,7 +120,7 @@ We've included the designs for this tutorial app in the `design.sketch` file fou
 
 <ImageComponent cols="12" caption="Landing page grid">
 
-![Landing page grid](/images/landing-layout.png)
+![Landing page grid](../shared/step-2/images/landing-layout.png)
 
 </ImageComponent>
 
@@ -387,7 +388,7 @@ We've added basic layout styles in `_landing-page.scss`, so now let's add type,
 
 <ImageComponent cols="8" caption="Banner vertical spacing">
 
-![Banner vertical spacing](/images/landing-r1-spacing.png)
+![Banner vertical spacing](../shared/step-2/images/landing-r1-spacing.png)
 
 </ImageComponent>
 
@@ -455,7 +456,7 @@ Next, we can see that the `h1` is using the `heading-05` type token.
 
 <ImageComponent cols="8" caption="Banner heading type">
 
-![Banner heading type](/images/landing-r1-type.png)
+![Banner heading type](../shared/step-2/images/landing-r1-type.png)
 
 </ImageComponent>
 
@@ -485,7 +486,7 @@ We also need to adjust our vertical spacing and type treatment. Like before, it'
 
 <ImageComponent cols="8" caption="Row 2 vertical spacing">
 
-![Row 2 vertical spacing](/images/landing-r2-spacing.png)
+![Row 2 vertical spacing](../shared/step-2/images/landing-r2-spacing.png)
 
 </ImageComponent>
 
@@ -519,7 +520,7 @@ _Note: You may be wondering why there are vertical gaps between the type and spa
 
 <ImageComponent cols="8" caption="Row 3 vertical spacing">
 
-![Row 3 vertical spacing](/images/landing-r3-spacing.png)
+![Row 3 vertical spacing](../shared/step-2/images/landing-r3-spacing.png)
 
 </ImageComponent>
 
@@ -759,7 +760,7 @@ Run the CI check to make sure we're all set to submit a pull request.
 $ yarn ci-check
 ```
 
-_Note: Having issues running the CI check? [Step 1](</tutorial/react-step-1#continuous-integration-(ci)-check>) has troubleshooting notes that may help._
+_Note: Having issues running the CI check? [Step 1](</tutorial/step-1/react#continuous-integration-(ci)-check>) has troubleshooting notes that may help._
 
 ### Git commit and push
 
@@ -775,7 +776,7 @@ Then, push to your repository:
 $ git push origin react-step-2
 ```
 
-_Note: Having issues pushing your changes? [Step 1](/tutorial/react-step-1#git-commit-and-push) has troubleshooting notes that may help._
+_Note: Having issues pushing your changes? [Step 1](/tutorial/step-1/react#git-commit-and-push) has troubleshooting notes that may help._
 
 ### Pull request (PR)
 

src/content/tutorial/react-step-3/react-step-3.mdx → src/content/tutorial/react/step-3.mdx

@@ -1,6 +1,7 @@
 ---
 title: 3. Using APIs
 internal: false
+tabs: ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
 ---
 
 ### This step takes our static components and populates them with data from the GitHub GraphQL API – loading states and all. We'll be displaying Carbon repository information in a data table.
@@ -43,7 +44,7 @@ A [preview](https://react-step-4--carbon-tutorial.netlify.com) of what you will
 
 ## Fork, clone and branch
 
-This tutorial has an accompanying GitHub repository called [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the [step 1 instructions](/tutorial/react-step-1#fork-clone--branch).
+This tutorial has an accompanying GitHub repository called [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the [step 1 instructions](/tutorial/step-1/react#fork-clone--branch).
 
 ### Branch
 
@@ -68,7 +69,7 @@ Then, start the app:
 $ yarn start
 ```
 
-You should see something similar to where the [previous step](/tutorial/react-step-2) left off. Stop your app with `CTRL-C` and let's get everything installed.
+You should see something similar to where the [previous step](/tutorial/step-2/react) left off. Stop your app with `CTRL-C` and let's get everything installed.
 
 ## Install dependencies
 
@@ -487,7 +488,7 @@ Run the CI check to make sure we're all set to submit a pull request.
 $ yarn ci-check
 ```
 
-_Note: Having issues running the CI check? [Step 1](</tutorial/react-step-1#continuous-integration-(ci)-check>) has troubleshooting notes that may help._
+_Note: Having issues running the CI check? [Step 1](</tutorial/step-1/react#continuous-integration-(ci)-check>) has troubleshooting notes that may help._
 
 ### Git commit and push
 
@@ -503,7 +504,7 @@ Then, push to your repository:
 $ git push origin react-step-3
 ```
 
-_Note: Having issues pushing your changes? [Step 1](/tutorial/react-step-1#git-commit-and-push) has troubleshooting notes that may help._
+_Note: Having issues pushing your changes? [Step 1](/tutorial/step-1/react#git-commit-and-push) has troubleshooting notes that may help._
 
 ### Pull request (PR)
 

src/content/tutorial/react-step-4/react-step-4.mdx → src/content/tutorial/react/step-4.mdx

@@ -1,6 +1,7 @@
 ---
 title: 4. Creating components
 internal: false
+tabs: ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
 ---
 
 ### With two pages comprised entirely of Carbon components, let's revisit the landing page and build a couple components of our own by using Carbon icons and tokens.
@@ -41,7 +42,7 @@ A [preview](https://react-step-5--carbon-tutorial.netlify.com) of what you'll bu
 
 ## Fork, clone and branch
 
-This tutorial has an accompanying GitHub repository called [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the [step 1 instructions](/tutorial/react-step-1#fork-clone--branch).
+This tutorial has an accompanying GitHub repository called [carbon-tutorial](https://github.com/carbon-design-system/carbon-tutorial) that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the [step 1 instructions](/tutorial/step-1/react#fork-clone--branch).
 
 ### Branch
 
@@ -68,15 +69,15 @@ Then, start the app:
 $ yarn start
 ```
 
-You should see something similar to where the [previous step](/tutorial/react-step-3) left off.
+You should see something similar to where the [previous step](/tutorial/step-3/react) left off.
 
 ## Review design
 
 Here's what we're building – an informational section that has a heading and three subheadings. Each subheading has accompanying copy and a pictogram. We'll assume that this informational section is used elsewhere on the site, meaning it's a great opportunity to build it as a resusable component. As for naming, we'll call it an `InfoSection` with three `InfoCard`s as children.
 
 <ImageComponent cols="12" caption="Info section layout">
 
-![Info section layout](/images/info-layout.png)
+![Info section layout](../shared/step-4/images/info-layout.png)
 
 </ImageComponent>
 
@@ -265,7 +266,7 @@ Here's our design showing the spacing tokens that we need to add. We also need t
 
 <ImageComponent cols="12" caption="Info section spacing">
 
-![Info section spacing](/images/info-spacing.png)
+![Info section spacing](../shared/step-4/images/info-spacing.png)
 
 </ImageComponent>
 
@@ -385,7 +386,7 @@ With the browser extension installed, Chrome in this example, open Dev Tools and
 
 <ImageComponent cols="12" caption="DAP violations">
 
-![DAP violations](/images/DAP-violations.png)
+![DAP violations](../shared/step-4/images/DAP-violations.png)
 
 </ImageComponent>
 
@@ -407,7 +408,7 @@ Run the CI check to make sure we're all set to submit a pull request.
 $ yarn ci-check
 ```
 
-_Note: Having issues running the CI check? [Step 1](</tutorial/react-step-1#continuous-integration-(ci)-check>) has troubleshooting notes that may help._
+_Note: Having issues running the CI check? [Step 1](</tutorial/step-1/react#continuous-integration-(ci)-check>) has troubleshooting notes that may help._
 
 ### Git commit and push
 
@@ -423,7 +424,7 @@ Then, push to your repository:
 $ git push origin react-step-4
 ```
 
-_Note: Having issues pushing your changes? [Step 1](/tutorial/react-step-1#git-commit-and-push) has troubleshooting notes that may help._
+_Note: Having issues pushing your changes? [Step 1](/tutorial/step-1/react#git-commit-and-push) has troubleshooting notes that may help._
 
 ### Pull request (PR)