Merge branch 'main' into homepage-ideas

.github/CODEOWNERS

@@ -17,3 +17,7 @@ src/pages/data-visualization/* @theiliad # @natashadecoste
 # Lee Chase for Vue tutorial
 
 /src/pages/tutorial/vue/* @lee-chase
+
+# Lee Chase for Web components tutorial
+
+/src/pages/tutorial/web-components/* @lee-chase

.github/workflows/deploy-preview.yml

@@ -16,6 +16,9 @@ jobs:
   netlify:
     if: github.repository == 'carbon-design-system/carbon-website'
     runs-on: ubuntu-latest
+    environment:
+      name: Preview
+      url: ${{ steps.url_preview.outputs.NETLIFY_PREVIEW_URL }}
     steps:
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       - name: Use Node.js 20.x
@@ -41,7 +44,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-public-gatsby
       - name: Build site
-        run: yarn build:clean
+        run: yarn build
         env:
           GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES: true
           NODE_ENV: production
@@ -50,7 +53,7 @@ jobs:
         id: netlify_deploy
         run: |
           yarn netlify deploy \
-            --dir=public \
+            --cwd=public \
             --site=${{ secrets.NETLIFY_SITE_ID }} \
             --auth=${{ secrets.NETLIFY_AUTH_TOKEN }} \
             --alias=${{ github.event.number }} \
@@ -68,6 +71,8 @@ jobs:
             ${{ steps.url_preview.outputs.NETLIFY_PREVIEW_URL }}
         with:
           script: |
+            const { NETLIFY_PREVIEW_URL } = process.env;
+
             // Define a hidden reference we'll put in new comments and also use 
             // to find existing comments
             let hiddenReference = '<!--CarbonWebsiteDeployPreviewComment-DoNotDelete--> '  
@@ -85,27 +90,24 @@ jobs:
             // Craft the comment body
             let comment = hiddenReference + "Deploy preview "
             if (process.env.NETLIFY_PREVIEW_URL) {
-              comment = comment + "successfully published at" + process.env.NETLIFY_PREVIEW_URL + "with commit (${{ github.sha }})"
+              comment = comment + "successfully published at <a href=\"" + NETLIFY_PREVIEW_URL + "\">" + NETLIFY_PREVIEW_URL + "</a> with commit (${{ github.sha }})"
             } else {
               comment = comment + "failed to publish"
             }
 
-            if (context.payload.pull_request.head.repo.full_name !== 'carbon-design-system/carbon-website') {
-              console.log('Not attempting to write comment on PR from fork');
+            // Create or update comment
+            if (deployPreviewComment) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: deployPreviewComment.id,
+                body: comment
+              })
             } else {
-              if (deployPreviewComment) {
-                await github.rest.issues.updateComment({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  comment_id: deployPreviewComment.id,
-                  body: comment
-                })
-              } else {
-                await github.rest.issues.createComment({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  issue_number: context.payload.number,
-                  body: comment
-                })
-              }
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.payload.number,
+                body: comment
+              })
             }

gatsby-node.js

@@ -61,6 +61,11 @@ exports.createPages = ({ actions }) => {
     toPath: '/developing/react-tutorial/overview',
     isPermanent: true,
   });
+  createRedirect({
+    fromPath: '/tutorial/web-components/overview',
+    toPath: '/developing/web-components-tutorial/overview',
+    isPermanent: true,
+  });
   createRedirect({
     fromPath: '/tutorial/angular/overview',
     toPath: '/developing/angular-tutorial/overview',
@@ -192,12 +197,12 @@ exports.createPages = ({ actions }) => {
     toPath: '/elements/motion/overview',
     isPermanent: true,
   });
-   createRedirect({
+  createRedirect({
     fromPath: '/guidelines/motion/choreography',
     toPath: '/elements/motion/choreography',
     isPermanent: true,
   });
-   createRedirect({
+  createRedirect({
     fromPath: '/guidelines/motion/code',
     toPath: '/elements/motion/code',
     isPermanent: true,

package.json

@@ -47,7 +47,7 @@
     "d3": "^7.9.0",
     "gatsby": "^5.13.5",
     "gatsby-plugin-sharp": "^5.13.1",
-    "gatsby-theme-carbon": "^4.2.8",
+    "gatsby-theme-carbon": "^4.2.10",
     "markdown-it": "^14.1.0",
     "prettier-config-carbon": "^0.11.0",
     "react": "^18.2.0",

src/data/nav-items.yaml

@@ -35,6 +35,8 @@
       path: /developing/dev-resources/resources/
     - title: React tutorial
       path: /developing/react-tutorial/overview/
+    - title: Web components tutorial
+      path: /developing/web-components-tutorial/overview/
 - title: Contributing
   pages:
     - title: Get started

src/pages/all-about-carbon/who-uses-carbon.mdx

@@ -134,6 +134,7 @@ Here are some ways developers can begin engaging with Carbon.
 
 - Check out a tutorial in your framework of choice
   ([React using Next.js](/developing/react-tutorial/overview/),
+  ([Web components using Vanilla.js/HTML](/developing/web-components-tutorial/overview/),
   [Angular (community)](/developing/angular-tutorial/overview/) or
   [Vue (community)](/developing/vue-tutorial/overview/)).
 

src/pages/developing/dev-resources/resources.mdx

@@ -114,6 +114,17 @@ your framework of choice.
       <MdxIcon name="react" />
     </ResourceCard>
   </Column>
+
+{' '}
+
+<Column colMd={4} colLg={4} noGutterSm>
+  <ResourceCard
+    subTitle="Web components tutorial using Vanilla.js/HTML"
+    href="/developing/web-components-tutorial/overview">
+    <MdxIcon name="webcomponents" />
+  </ResourceCard>
+</Column>
+
 </Row>
 
 ## Tools

src/pages/developing/get-started.mdx

@@ -125,6 +125,17 @@ introduce web development best practices along the way.
 </Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
+    subTitle="Web components tutorial using Vanilla.js/HTML"
+    href="/developing/web-components-tutorial/overview"
+    >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Angular tutorial"
       subTitle="Angular tutorial (community)"
       href="/developing/angular-tutorial/overview"
       >

src/pages/developing/react-tutorial/wrapping-up.mdx

@@ -4,16 +4,7 @@ description:
   Welcome to Carbon! This tutorial will guide you in creating a React app using
   Next.js with the Carbon Design System.
 tabs:
-  [
-    'Overview',
-    'Step 1',
-    'Step 2',
-    'Step 3',
-    'Step 4',
-    'Step 5',
-    'Wrapping up',
-    'FAQ',
-  ]
+  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
 ---
 
 <PageDescription>

src/pages/developing/web-components-tutorial/overview.mdx

@@ -0,0 +1,105 @@
+---
+title: Web components tutorial
+description:
+  Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML
+  app using Web Components from the Carbon Design System.
+tabs: ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5']
+---
+
+import Preview from 'components/Preview';
+
+<PageDescription>
+
+Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML
+app using Web Components from 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.
+
+Web components are native custom components based on standards that can be used
+in any modern browser with any JavaScript library or framework just like plain
+HTML elements.
+
+For more information
+[see Web Components](https://www.webcomponents.org/introduction).
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Audience</AnchorLink>
+<AnchorLink>Prerequisites</AnchorLink>
+<AnchorLink>Outline</AnchorLink>
+
+</AnchorLinks>
+
+Here's a [preview](https://carbon-tutorial-nextjs.vercel.app/) of what you will
+build:
+
+<Preview
+  height="400"
+  title="Carbon Tutorial"
+  src="https://carbon-tutorial-nextjs.vercel.app/"
+  frameborder="no"
+  allowtransparency="true"
+  allowfullscreen="true"
+/>
+
+## Audience
+
+This tutorial is intended for people with all amounts of web development
+experience. If you want to jump straight to code, you may want to skip this
+tutorial and go to the [developers getting started](/developing/get-started)
+page.
+
+## Prerequisites
+
+### HTML
+
+This is a web development tutorial that uses HTML. If you're not sure that you
+are quite ready then hop over to
+[W3Schools](https://www.w3schools.com/html/default.asp)
+
+### SCSS (CSS preprocessor)
+
+This tutorial uses SASS, or rather the CSS styled flavour called SCSS. If you
+need help with CSS then head to
+[W3Schools](https://www.w3schools.com/css/default.asp). For help with SCSS head
+to [sass-lang.com](https://sass-lang.com/guide/).
+
+### ECMAScript (Javascript)
+
+Javascript is fundemental to adding interaction to your HTML. There are many
+great resources out there, such as
+[W3Schools](https://www.w3schools.com/js/default.asp), which is more than enough
+for everything in this tutorial.
+
+### GitHub
+
+We'll be using GitHub to build an app together, so if you're new to GitHub, make
+sure you've [made an account](https://github.com/join). Their
+[getting started guide](https://guides.github.com/activities/hello-world) is a
+great way to learn GitHub.
+
+### Pnpm
+
+This tutorial uses [Pnpm](https://pnpm.io/) for dependency management as that
+was the default for `create-vite`. Make sure that you have
+[Pnpm installed](https://pnpm.io/installation) prior to starting the tutorial so
+you can follow along step-by-step.
+
+## Outline
+
+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**](/developing/web-components-tutorial/step-1)
+   - Create a web app with the UI shell component.
+2. [**Building pages**](/developing/web-components-tutorial/step-2)
+   - Build pages with the grid and various components.
+3. [**Using APIs**](/developing/web-components-tutorial/step-3)
+   - Populate the data table with an external data source.
+4. [**Creating components**](/developing/web-components-tutorial/step-4)
+   - Extend Carbon by creating your own components.
+5. [**Deploying**](/developing/web-components-tutorial/step-5)
+   - Build and host your app in a production environment.