diff --git a/README.md b/README.md index 81bd729bc98..8c711ca0d14 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,9 @@ ![Deployment status](https://github.com/carbon-design-system/carbon-website/workflows/Deployment%20status/badge.svg) -This is the [Carbon Design System website](http://www.carbondesignsystem.com). It's built using the [gatsby-theme-carbon](https://gatsby-theme-carbon.now.sh/) with [GatsbyJS](https://www.gatsbyjs.org/). +This is the [Carbon Design System website](http://www.carbondesignsystem.com). +It's built using the [gatsby-theme-carbon](https://gatsby-theme-carbon.now.sh/) +with [GatsbyJS](https://www.gatsbyjs.org/). ## ๐Ÿ“‚ Structure @@ -20,8 +22,10 @@ src ## ๐Ÿ‘ฉโ€๐Ÿ’ป Develop - ๐Ÿค [Contribution guidelines](.github/CONTRIBUTING.md) -- ๐Ÿ“š [Content and Markdown guidelines](https://gatsby-theme-carbon.now.sh/components/markdown) -- ๐Ÿ—บ [Navigation guidelines](https://gatsby-theme-carbon.now.sh/guides/navigation/sidebar) +- ๐Ÿ“š + [Content and Markdown guidelines](https://gatsby-theme-carbon.now.sh/components/markdown) +- ๐Ÿ—บ + [Navigation guidelines](https://gatsby-theme-carbon.now.sh/guides/navigation/sidebar) - `yarn install` โ€“ install dependencies - `yarn dev` โ€“ start the development server @@ -29,11 +33,14 @@ src - `lint:js` โ€“ lint your JavaScript files - `format` - run Prettier -If you need more detailed information on how to set up your machine to develop locally, please take a look at our [wiki](https://github.com/carbon-design-system/carbon-website/wiki). +If you need more detailed information on how to set up your machine to develop +locally, please take a look at our +[wiki](https://github.com/carbon-design-system/carbon-website/wiki). ## ๐Ÿš€ Build -Runing the build command generates all the files and places them in the `public` folder. +Running the build command generates all the files and places them in the +`public` folder. ``` yarn build diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index 30e7c23e39e..e0c8653a770 100644 --- a/src/data/nav-items.yaml +++ b/src/data/nav-items.yaml @@ -43,7 +43,7 @@ path: /developing/dev-resources/ - title: Angular tutorial path: /developing/angular-tutorial/overview/ - - title: React tutorial + - title: NextJS tutorial path: /developing/next-tutorial/overview/ - title: Vue tutorial path: /developing/vue-tutorial/overview/ diff --git a/src/pages/all-about-carbon/what-is-carbon.mdx b/src/pages/all-about-carbon/what-is-carbon.mdx index 473106c5f62..2900488ce18 100755 --- a/src/pages/all-about-carbon/what-is-carbon.mdx +++ b/src/pages/all-about-carbon/what-is-carbon.mdx @@ -112,9 +112,10 @@ work and contribute patterns back to the system. ### We support adoption **We conduct training classes, run meetups, and offer certifications.**ย We offer -tutorials in Angular, React, and Vue. We run [meetups](/whats-happening/meetups) -and design reviews on a regular basis. We're also available to teach at -conferences, bootcamp labs, and wherever else we're needed. +tutorials in Angular, React using NextJS, and Vue. We run +[meetups](/whats-happening/meetups) and design reviews on a regular basis. We're +also available to teach at conferences, bootcamp labs, and wherever else we're +needed. **We engage the community.**ย We strive to be one of the world's best design systems and weโ€™re diff --git a/src/pages/all-about-carbon/who-uses-carbon.mdx b/src/pages/all-about-carbon/who-uses-carbon.mdx index 978a11831b5..d43ef3a0f23 100755 --- a/src/pages/all-about-carbon/who-uses-carbon.mdx +++ b/src/pages/all-about-carbon/who-uses-carbon.mdx @@ -133,7 +133,7 @@ Here are some ways developers can begin engaging with Carbon. [design principles](https://www.ibm.com/design/language/). - Check out a tutorial in your framework of choice - ([React](/developing/next-tutorial/overview/), + ([React using NextJS](/developing/next-tutorial/overview/), [Angular (community)](/developing/angular-tutorial/overview/) or [Vue (community)](/developing/vue-tutorial/overview/)). diff --git a/src/pages/developing/get-started.mdx b/src/pages/developing/get-started.mdx index 43bfd39857a..3b606641674 100644 --- a/src/pages/developing/get-started.mdx +++ b/src/pages/developing/get-started.mdx @@ -41,14 +41,15 @@ as well as our GitHub repos and Storybooks for your framework of choice. ### Take a tutorial -We offer tutorials in Angular, React, and Vue to guide you in creating an app -with the Carbon Design System. Weโ€™ll teach you the ins and outs of using Carbon -components, and introduce web development best practices along the way. +We offer tutorials in Angular, React using NextJS, and Vue to guide you in +creating an app with the Carbon Design System. Weโ€™ll teach you the ins and outs +of using Carbon components, and introduce web development best practices along +the way. diff --git a/src/pages/developing/next-tutorial/faq.mdx b/src/pages/developing/next-tutorial/faq.mdx index aecaa1242a8..821d81371c0 100644 --- a/src/pages/developing/next-tutorial/faq.mdx +++ b/src/pages/developing/next-tutorial/faq.mdx @@ -16,23 +16,6 @@ tabs: ] --- -### I am getting an error that says `failed to find manifest for cf`. What do I do? - -- The 5th step assumes your spaces are in the US South region. To successfully - deploy, you might need to update the region code (e.g. - `api.[REGION].cf.cloud.ibm.com`) to the region where your spaces were created, - or create a space in the US South region. - -- If you don't have an org, create one - [here](https://cloud.ibm.com/account/cloud-foundry). - - In the top nav go to Manage > Account > Account resources > Cloud Foundry - orgs - - The name you give it doesn't matter, just take note of the region you - select, and use that region's API endpoint (e.g. - `api.[REGION].cf.cloud.ibm.com`) - - Find regions and endpoints - [here](https://cloud.ibm.com/docs/cloud-foundry-public?topic=cloud-foundry-public-endpoints). - ### I am getting an error that says `yarn lockfile missing`. How do I fix this? - This error can occur when the `yarn.lock` file is either missing or differs @@ -48,16 +31,6 @@ tabs: and push up any changes. If this still does not work, ensure your `yarn.lock` file matches the one at the start of the tutorial step -### When will my PR be reviewed? - -- If your PR is passing, it will automatically get approved and closed by a bot. - After it's closed, you can move on to the next step. - -- If your PR is failing, try out the troubleshooting tips on this page first to - fix it. If it's still failing, reach out for help in our slack channel - `#carbon-react` or tag `@carbon-design-system/developers` in a comment on your - PR for help. - ### How can I show others my completion status? - Proof of your completion of the tutorial can be seen by filtering the PR list @@ -68,3 +41,7 @@ tabs: link: - https://github.com/carbon-design-system/carbon-tutorial-nextjs/pulls?q=author%3AYOURUSERNAMEHERE + +-It can also be demonstrated by deploying your app. Please see further +documentation +[here](/developing/next-tutorial/step-5#build-for-production-and-deploy). diff --git a/src/pages/developing/next-tutorial/wrapping-up.mdx b/src/pages/developing/next-tutorial/wrapping-up.mdx new file mode 100644 index 00000000000..ff43bc6420f --- /dev/null +++ b/src/pages/developing/next-tutorial/wrapping-up.mdx @@ -0,0 +1,28 @@ +--- +title: Wrapping up +description: + Welcome to Carbon! This tutorial will guide you in creating a Vue app with the + Carbon Design System. +tabs: + ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] +--- + + + +Thanks for completing our tutorial and helping us improve it along the way. If +you want to show the world your new skills, you can share your deployed +application and showcase the five pull requests you have completed with the +green `status: approved` label. + + + +### How can I show others my completion status? + +- Proof of your completion of the tutorial can be seen by filtering the PR list + to show your five PRs with the `status: approved` label. + +- You can filter the pull request list to show only pull requests authored by + your username. Replace `YOURUSERNAMEHERE` with your username in the following + link: + + - https://github.com/carbon-design-system/carbon-tutorial-nextjs/pulls?q=author%3AYOURUSERNAMEHERE