docs(developer): official vs community content (#4418)

* docs(developer): official vs community content

* docs(developer): fix formatting

* docs(developer): removal of "official" verbiage

src/components/MdxIcon/index.js

@@ -3,41 +3,43 @@ import cx from 'classnames';
 import { LogoGithub, Bee } from '@carbon/icons-react';
 import { mdxIcon, iconInverse } from './MdxIcon.module.scss';
 
-import sketch from './icons/sketch.svg';
+import angular from './icons/angular.png';
 import ase from './icons/ase.png';
-import codesandbox from './icons/codesandbox.svg';
-import stackblitz from './icons/stackblitz.svg';
+import carbon from './icons/carbon.svg';
 import codepen from './icons/codepen.svg';
+import codesandbox from './icons/codesandbox.svg';
+import figma from './icons/figma.svg';
 import illustrator from './icons/illustrator.svg';
+import medium from './icons/medium.svg';
+import npm from './icons/npm.svg';
 import react from './icons/react.png';
+import sass from './icons/sass.png';
+import sketch from './icons/sketch.svg';
+import stackblitz from './icons/stackblitz.svg';
+import storybook from './icons/storybook.svg';
+import svelte from './icons/svelte.png';
 import vue from './icons/vue.png';
-import angular from './icons/angular.png';
 import webcomponents from './icons/webcomponents.png';
-import npm from './icons/npm.svg';
-import storybook from './icons/storybook.svg';
-import medium from './icons/medium.svg';
-import sass from './icons/sass.png';
-import figma from './icons/figma.svg';
 import yourlearning from './icons/yourlearning.svg';
-import carbon from './icons/carbon.svg';
 
 const localIcons = {
-  carbon,
-  sketch,
+  angular,
   ase,
-  codesandbox,
-  stackblitz,
+  carbon,
   codepen,
+  codesandbox,
+  figma,
   illustrator,
+  medium,
+  npm,
   react,
+  sass,
+  sketch,
+  stackblitz,
+  storybook,
+  svelte,
   vue,
-  angular,
   webcomponents,
-  npm,
-  storybook,
-  medium,
-  sass,
-  figma,
   yourlearning,
 };
 

src/data/nav-items.yaml

@@ -29,14 +29,10 @@
       path: /developing/get-started/
     - title: Frameworks
       path: /developing/frameworks/react/
+    - title: Community frameworks
+      path: /developing/community-frameworks/angular/
     - title: Developer resources
-      path: /developing/dev-resources/
-    - title: Angular tutorial
-      path: /developing/angular-tutorial/overview/
-    - title: React tutorial
-      path: /developing/react-tutorial/overview/
-    - title: Vue tutorial
-      path: /developing/vue-tutorial/overview/
+      path: /developing/dev-resources/resources/
 - title: Contributing
   pages:
     - title: Get started

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

@@ -142,8 +142,9 @@ Here are some ways developers can begin engaging with Carbon.
 - Visit [Developing > Get started](/developing/get-started/) and install your
   framework of choice.
 
-- Visit [Developer resources](/developing/dev-resources/) to find Carbon tools,
-  as well as our GitHub repos and Storybooks for your framework of choice.
+- Visit [Developer resources](/developing/dev-resources/resources/) to find
+  Carbon tools, as well as our GitHub repos and Storybooks for your framework of
+  choice.
 
 #### Connect with the team
 

src/pages/developing/frameworks/angular.mdx → src/pages/developing/community-frameworks/angular.mdx

@@ -1,20 +1,10 @@
 ---
-title: Frameworks
+title: Community frameworks
 description:
-  The Carbon Design System is built React first, with official support for Web
-  Components. We also support core parts of the system in Angular, vanilla JS,
-  Vue, Svelte, and Lightning Web Components.
-tabs:
-  [
-    'React',
-    'Web Components',
-    'Angular',
-    'Vue',
-    'Svelte',
-    'LWC',
-    'Vanilla',
-    'Other frameworks',
-  ]
+  The Carbon Design System is built with official support for React and Web
+  Components. Community support exists for other frameworks like Angular,
+  vanilla JS, Vue, Svelte, and Lightning Web Components.
+tabs: ['Angular', 'Vue', 'Svelte', 'LWC', 'Vanilla', 'Other frameworks']
 ---
 
 <PageDescription>
@@ -41,7 +31,7 @@ v11 upgrade for Carbon Angular is coming soon.
 <Row className="resource-card-group">
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-    subTitle="Carbon Components Angular"
+    subTitle="Carbon Components Angular Storybook"
     href="https://angular.carbondesignsystem.com/?path=/story/components-welcome--to-carbon-angular"
     >
 
@@ -57,6 +47,14 @@ v11 upgrade for Carbon Angular is coming soon.
       <MdxIcon name="codesandbox" />
     </ResourceCard>
   </Column>
+
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+        subTitle="Carbon Angular tutorial"
+        href="/developing/angular-tutorial/overview/">
+        <MdxIcon name="angular" />
+    </ResourceCard>
+</Column>
 </Row>
 
 ## Install

src/pages/developing/frameworks/lwc.mdx → src/pages/developing/community-frameworks/lwc.mdx

@@ -1,20 +1,10 @@
 ---
-title: Frameworks
+title: Community frameworks
 description:
-  The Carbon Design System is built React first, with official support for Web
-  Components. We also support core parts of the system in Angular, vanilla JS,
-  Vue, Svelte, and Lightning Web Components.
-tabs:
-  [
-    'React',
-    'Web Components',
-    'Angular',
-    'Vue',
-    'Svelte',
-    'LWC',
-    'Vanilla',
-    'Other frameworks',
-  ]
+  The Carbon Design System is built with official support for React and Web
+  Components. Community support exists for other frameworks like Angular,
+  vanilla JS, Vue, Svelte, and Lightning Web Components.
+tabs: ['Angular', 'Vue', 'Svelte', 'LWC', 'Vanilla', 'Other frameworks']
 ---
 
 <PageDescription>

src/pages/developing/frameworks/other-frameworks.mdx → src/pages/developing/community-frameworks/other-frameworks.mdx

@@ -1,20 +1,10 @@
 ---
-title: Frameworks
+title: Community frameworks
 description:
-  The Carbon Design System is built React first, with official support for Web
-  Components. We also support core parts of the system in Angular, vanilla JS,
-  Vue, Svelte, and Lightning Web Components.
-tabs:
-  [
-    'React',
-    'Web Components',
-    'Angular',
-    'Vue',
-    'Svelte',
-    'LWC',
-    'Vanilla',
-    'Other frameworks',
-  ]
+  The Carbon Design System is built with official support for React and Web
+  Components. Community support exists for other frameworks like Angular,
+  vanilla JS, Vue, Svelte, and Lightning Web Components.
+tabs: ['Angular', 'Vue', 'Svelte', 'LWC', 'Vanilla', 'Other frameworks']
 ---
 
 <PageDescription>

src/pages/developing/frameworks/svelte.mdx → src/pages/developing/community-frameworks/svelte.mdx

@@ -1,20 +1,10 @@
 ---
-title: Frameworks
+title: Community frameworks
 description:
-  The Carbon Design System is built React first, with official support for Web
-  Components. We also support core parts of the system in Angular, vanilla JS,
-  Vue, Svelte, and Lightning Web Components.
-tabs:
-  [
-    'React',
-    'Web Components',
-    'Angular',
-    'Vue',
-    'Svelte',
-    'LWC',
-    'Vanilla',
-    'Other frameworks',
-  ]
+  The Carbon Design System is built with official support for React and Web
+  Components. Community support exists for other frameworks like Angular,
+  vanilla JS, Vue, Svelte, and Lightning Web Components.
+tabs: ['Angular', 'Vue', 'Svelte', 'LWC', 'Vanilla', 'Other frameworks']
 ---
 
 <PageDescription>

src/pages/developing/frameworks/vanilla.mdx → src/pages/developing/community-frameworks/vanilla.mdx

@@ -1,20 +1,10 @@
 ---
-title: Frameworks
+title: Community frameworks
 description:
-  The Carbon Design System is built React first, with official support for Web
-  Components. We also support core parts of the system in Angular, vanilla JS,
-  Vue, Svelte, and Lightning Web Components.
-tabs:
-  [
-    'React',
-    'Web Components',
-    'Angular',
-    'Vue',
-    'Svelte',
-    'LWC',
-    'Vanilla',
-    'Other frameworks',
-  ]
+  The Carbon Design System is built with official support for React and Web
+  Components. Community support exists for other frameworks like Angular,
+  vanilla JS, Vue, Svelte, and Lightning Web Components.
+tabs: ['Angular', 'Vue', 'Svelte', 'LWC', 'Vanilla', 'Other frameworks']
 ---
 
 <PageDescription>

src/pages/developing/frameworks/vue.mdx → src/pages/developing/community-frameworks/vue.mdx

@@ -1,20 +1,10 @@
 ---
-title: Frameworks
+title: Community frameworks
 description:
-  The Carbon Design System is built React first, with official support for Web
-  Components. We also support core parts of the system in Angular, vanilla JS,
-  Vue, Svelte, and Lightning Web Components.
-tabs:
-  [
-    'React',
-    'Web Components',
-    'Angular',
-    'Vue',
-    'Svelte',
-    'LWC',
-    'Vanilla',
-    'Other frameworks',
-  ]
+  The Carbon Design System is built with official support for React and Web
+  Components. Community support exists for other frameworks like Angular,
+  vanilla JS, Vue, Svelte, and Lightning Web Components.
+tabs: ['Angular', 'Vue', 'Svelte', 'LWC', 'Vanilla', 'Other frameworks']
 ---
 
 <PageDescription>
@@ -39,7 +29,7 @@ contact the
 <Row className="resource-card-group">
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-    subTitle="Carbon Components Vue"
+    subTitle="Carbon Components Vue Storybook"
     href="https://vue.carbondesignsystem.com"
     >
 
@@ -55,6 +45,14 @@ contact the
       <MdxIcon name="codesandbox" />
     </ResourceCard>
   </Column>
+
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+        subTitle="Carbon Vue tutorial"
+        href="/developing/vue-tutorial/overview/">
+        <MdxIcon name="vue" />
+    </ResourceCard>
+</Column>
 </Row>
 
 ## Getting started