docs: clarify yarn install purpose in README

README.md

@@ -1,17 +1,12 @@
-TEST
-
 # Carbon Design System
 
 ![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.carbondesignsystem.com/) 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.carbondesignsystem.com/) with [GatsbyJS](https://www.gatsbyjs.org/).
 
 ## 📂 Structure
 
-```
 src
 ├── components
 ├── data
@@ -20,31 +15,25 @@ src
 ├── pages
 ├── styles
 ├── util
-```
+
 
 ## 👩‍💻 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 install` – installs all project dependencies listed in `package.json`
 - `yarn dev` – start the development server
 - `yarn dev:clean` – use this if you have cache issues
 - `lint:js` – lint your JavaScript files
-- `format` - run Prettier
+- `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
 
-Running 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
-```
+

gatsby-config.js

@@ -74,4 +74,4 @@ module.exports = {
       },
     },
   ],
-};
+};

gatsby-node.js

@@ -1,7 +1,6 @@
 const path = require('path');
 
 exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
-  // Allows importing html files for component code examples
   actions.setWebpackConfig({
     module: {
       rules: [
@@ -19,15 +18,25 @@ exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
       ],
     },
     resolve: {
+      // Ensure node_modules are in the path for resolution
       modules: [path.resolve(__dirname, 'src'), 'node_modules'],
       alias: {
-        // light-weight fork of buble compiler from react-live team
         buble: path.resolve(__dirname, 'node_modules', '@philpl/buble'),
+        // Explicitly resolve @carbon packages to their node_modules path
+        '@carbon/react': path.resolve(__dirname, 'node_modules/@carbon/react'),
+        '@carbon/icons-react': path.resolve(__dirname, 'node_modules/@carbon/icons-react'),
+        '@carbon/styles': path.resolve(__dirname, 'node_modules/@carbon/styles'), // Keep for Sass if needed
       },
+      // Fallback for older module resolution patterns
+      fallback: {
+        'crypto': false, // Example of adding fallbacks if needed for older modules
+        'stream': false,
+        'path': require.resolve('path-browserify'), // Ensure path resolves correctly
+        // You might need more if other 'cannot resolve' errors appear for node built-ins
+      }
     },
   });
 
-  // Disable sourcemaps in production
   if (getConfig().mode === 'production') {
     actions.setWebpackConfig({
       devtool: false,
@@ -38,7 +47,6 @@ exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
 exports.createPages = ({ actions }) => {
   const { createRedirect } = actions;
 
-  // Community index
   createRedirect({
     fromPath: '/community/components',
     toPath: '/community/component-index',
@@ -50,7 +58,6 @@ exports.createPages = ({ actions }) => {
     isPermanent: true,
   });
 
-  // Developing
   createRedirect({
     fromPath: '/resources',
     toPath: '/developing/developer-resources',
@@ -97,7 +104,6 @@ exports.createPages = ({ actions }) => {
     isPermanent: true,
   });
 
-  // Case studies
   createRedirect({
     fromPath: ' /case-studies/overview',
     toPath: '/all-about-carbon/who-uses-carbon/',
@@ -114,7 +120,6 @@ exports.createPages = ({ actions }) => {
     isPermanent: true,
   });
 
-  // Data-visualization
   createRedirect({
     fromPath: '/data-visualization/basic-charts',
     toPath: '/data-visualization/simple-charts',
@@ -126,7 +131,6 @@ exports.createPages = ({ actions }) => {
     isPermanent: true,
   });
 
-  // Elements L0 - 2022/02
   createRedirect({
     fromPath: '/guidelines/2x-grid/overview',
     toPath: '/elements/2x-grid/overview',
@@ -247,4 +251,4 @@ exports.createPages = ({ actions }) => {
     toPath: '/elements/typography/code',
     isPermanent: true,
   });
-};
+};

package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbondesignsystem",
   "private": true,
-  "version": "2.0,0",
+  "version": "2.0.0",
   "license": "MIT",
   "workspaces": {
     "packages": [
@@ -10,6 +10,7 @@
   },
   "scripts": {
     "dev": "NODE_OPTIONS='--max-old-space-size=8192' gatsby develop -H 0.0.0.0",
+    "develop": "yarn dev",
     "dev:clean": "gatsby clean && yarn dev",
     "clean": "gatsby clean",
     "build": "node --max-old-space-size=8192 ./node_modules/.bin/gatsby build",
@@ -46,9 +47,11 @@
     "codesandbox": "^2.2.3",
     "d3": "^7.9.0",
     "gatsby": "^5.13.5",
+    "gatsby-plugin-sass": "^6.14.0",
     "gatsby-plugin-sharp": "^5.13.1",
     "gatsby-theme-carbon": "^4.3.10",
     "markdown-it": "^14.1.0",
+    "path-browserify": "^1.0.1",
     "prettier-config-carbon": "^0.11.0",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
@@ -69,6 +72,7 @@
     "markdown-loader": "^8.0.0",
     "netlify-cli": "^18.1.0",
     "prettier": "^2.0.2",
+    "sass": "^1.89.2",
     "typescript": "^4.8.4"
   },
   "lint-staged": {

src/gatsby-theme-carbon/components/ArticleCard/index.js

@@ -1,3 +1,3 @@
 import ArticleCard from './ArticleCard';
 
-export default ArticleCard;
+export default ArticleCard;

yarn.lock

@@ -8687,6 +8687,7 @@ __metadata:
     eslint-config-carbon: "npm:3.15.0"
     gatsby: "npm:^5.13.5"
     gatsby-plugin-lodash: "npm:^6.13.1"
+    gatsby-plugin-sass: "npm:^6.14.0"
     gatsby-plugin-sharp: "npm:^5.13.1"
     gatsby-plugin-sitemap: "npm:^6.13.1"
     gatsby-source-filesystem: "npm:^5.13.1"
@@ -8698,11 +8699,13 @@ __metadata:
     markdown-it: "npm:^14.1.0"
     markdown-loader: "npm:^8.0.0"
     netlify-cli: "npm:^18.1.0"
+    path-browserify: "npm:^1.0.1"
     prettier: "npm:^2.0.2"
     prettier-config-carbon: "npm:^0.11.0"
     react: "npm:^18.2.0"
     react-copy-to-clipboard: "npm:^5.1.0"
     react-dom: "npm:^18.2.0"
+    sass: "npm:^1.89.2"
     typescript: "npm:^4.8.4"
   languageName: unknown
   linkType: soft
@@ -21987,6 +21990,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-browserify@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "path-browserify@npm:1.0.1"
+  checksum: 10c0/8b8c3fd5c66bd340272180590ae4ff139769e9ab79522e2eb82e3d571a89b8117c04147f65ad066dccfb42fcad902e5b7d794b3d35e0fd840491a8ddbedf8c66
+  languageName: node
+  linkType: hard
+
 "path-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "path-case@npm:3.0.4"
@@ -24661,6 +24671,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass@npm:^1.89.2":
+  version: 1.89.2
+  resolution: "sass@npm:1.89.2"
+  dependencies:
+    "@parcel/watcher": "npm:^2.4.1"
+    chokidar: "npm:^4.0.0"
+    immutable: "npm:^5.0.2"
+    source-map-js: "npm:>=0.6.2 <2.0.0"
+  dependenciesMeta:
+    "@parcel/watcher":
+      optional: true
+  bin:
+    sass: sass.js
+  checksum: 10c0/752ccc7581b0c6395f63918116c20924e99943a86d79e94f5c4a0d41b1e981fe1f0ecd1ee82fff21496f81dbc91f68fb35a498166562ec8ec53e7aad7c3dbd9d
+  languageName: node
+  linkType: hard
+
 "sax@npm:>=0.6.0, sax@npm:^1.2.4":
   version: 1.4.1
   resolution: "sax@npm:1.4.1"