Workflow & Guides: Respond to more feedback

src/components/Navigation/Navigation.astro

@@ -20,6 +20,7 @@ interface Props {
       | CollectionEntry<"plugins">
       | CollectionEntry<"ci">
       | CollectionEntry<"account">
+      | CollectionEntry<"guides">
     )[];
     defaultOpen?: boolean;
     timeline?: boolean;

src/components/Navigation/SideNav.tsx

@@ -111,6 +111,7 @@ type Item = (
   | CollectionEntry<"plugins">
   | CollectionEntry<"ci">
   | CollectionEntry<"account">
+  | CollectionEntry<"guides">
 ) & {
   data: {
     sidebar: {

src/content/config.ts

@@ -57,6 +57,11 @@ const account = defineCollection({
   schema,
 });
 
+const guides = defineCollection({
+  type: "content",
+  schema,
+});
+
 export const collections = {
   getStarted,
   workflow,
@@ -67,4 +72,5 @@ export const collections = {
   plugins,
   ci,
   account,
+  guides,
 };

src/content/workflow/quickstart-for-reviewers.md → src/content/guides/guide-for-designers.md

@@ -1,15 +1,15 @@
 ---
 layout: "../../layouts/Layout.astro"
-title: Guide for reviewers
-description: How to use Chromatic for designers and product managers
-sidebar: { order: 6 }
+title: Chromatic for designers
+description: How to use Chromatic for designers
+sidebar: { order: 1, label: For designers }
 ---
 
-# Guide for reviewers
+# Guide for designers
 
-Chromatic is made for designers, product managers, and other stakeholders to collaborate with developers.
+Chromatic helps designers collaborate with developers on UI implementation.
 
-## Chromatic in the design and product process
+## In the design process
 
 Chromatic serves as a library that maps every part of your UI. Use it as a shared reference point to ensure that everyone is referencing the latest UI as they design and spec products.
 
@@ -31,7 +31,7 @@ During the specification process, you often need to describe complex UI behavior
 
 ---
 
-## Chromatic to track changes and sign-off
+## Track changes and sign-off on implementation
 
 [UI Review](/docs/review) is made for designers and product managers. It's a purpose-built tool for discussing implementation details and tracking sign-offs. Chromatic works behind the scenes to make the review process easy for teams by organizing change requests, notifying participants, and syncing with Git providers for pull requests checks. The key features for reviewers are:
 
@@ -43,19 +43,3 @@ During the specification process, you often need to describe complex UI behavior
 - UI checklist to see visualize what needs to be done
 
 ![UI Checklist](../../images/prscreen-ui-checklist.png)
-
----
-
-## Conclusion
-
-You finished touring all the ways Chromatic contributes to your UI development workflow. We look forward to the incredible UIs you’ll build. Continue exploring with our most popular guides and articles:
-
-- [Intro to Storybook](https://storybook.js.org/tutorials/intro-to-storybook/) is the essential guide to learning Storybook.
-- [Design Systems for Developers](https://storybook.js.org/tutorials/design-systems-for-developers/) shares how to build production infrastructure for design systems.
-- [Visual Testing Handbook](https://storybook.js.org/tutorials/visual-testing-handbook/) details how professional frontend teams visual test with Storybook.
-- [Component-Driven Development](https://www.componentdriven.org/) is a "bottoms up" process for building modular UIs starting from components and ending with screens.
-- [UI Testing Handbook](https://storybook.js.org/tutorials/ui-testing-handbook/) highlights testing strategies used by scaled front-end teams
-
-#### How to get support
-
-[Sign in](https://www.chromatic.com/start) to use the in-app chat or <a href="mailto:[email protected]?Subject=Question">email support</a>.

src/content/workflow/in-development.md

@@ -1,8 +1,8 @@
 ---
 layout: "../../layouts/Layout.astro"
-title: In development
+title: In development workflow
 description: How Chromatic helps teams develop applications
-sidebar: { order: 1 }
+sidebar: { order: 1, label: In development }
 ---
 
 # In development workflow

src/content/workflow/in-pull-request.md

@@ -1,8 +1,8 @@
 ---
 layout: "../../layouts/Layout.astro"
-title: In pull request
+title: In pull request workflow
 description: How Chromatic helps you test and review pull requests
-sidebar: { order: 6 }
+sidebar: { order: 2, label: In pull request }
 ---
 
 # In pull request workflow
@@ -79,8 +79,16 @@ The status of UI Tests and UI Review appears on your pull request as a check. Th
 
 ---
 
-## Next: How to get stakeholders involved in review
+## Conclusion
 
-See how Chromatic works from the reviewer point of view. Learn about comments, notifications, and integrations with tools like Figma and Slack.
+You finished touring all the ways Chromatic contributes to your UI development workflow. We look forward to the incredible UIs you’ll build. Continue exploring with our most popular guides and articles:
 
-<a class="btn primary round" href="/docs/guide-for-reviewers">Read next chapter</a>
+- [Intro to Storybook](https://storybook.js.org/tutorials/intro-to-storybook/) is the essential guide to learning Storybook.
+- [Design Systems for Developers](https://storybook.js.org/tutorials/design-systems-for-developers/) shares how to build production infrastructure for design systems.
+- [Visual Testing Handbook](https://storybook.js.org/tutorials/visual-testing-handbook/) details how professional frontend teams visual test with Storybook.
+- [Component-Driven Development](https://www.componentdriven.org/) is a "bottoms up" process for building modular UIs starting from components and ending with screens.
+- [UI Testing Handbook](https://storybook.js.org/tutorials/ui-testing-handbook/) highlights testing strategies used by scaled front-end teams
+
+#### How to get support
+
+[Sign in](https://www.chromatic.com/start) to use the in-app chat or <a href="mailto:[email protected]?Subject=Question">email support</a>.

src/layouts/Layout.astro

@@ -29,6 +29,7 @@ const collaborate = await getCollection("collaborate");
 const plugins = await getCollection("plugins");
 const ci = await getCollection("ci");
 const account = await getCollection("account");
+const guides = await getCollection("guides");
 
 const navItems = [
   // Manually add the introduction page to the top of the list
@@ -72,6 +73,10 @@ const navItems = [
     title: "Account",
     items: account,
   },
+  {
+    title: "Guides",
+    items: guides,
+  },
 ];
 
 const baseUrl = import.meta.env.BASE_URL;

src/pages/[slug].astro

@@ -14,6 +14,7 @@ export async function getStaticPaths() {
   const plugins = await getCollection("plugins");
   const ci = await getCollection("ci");
   const account = await getCollection("account");
+  const guides = await getCollection("guides");
   const notInNavigation = await getCollection("notInNavigation");
   const articles = [
     ...getStarted,
@@ -25,6 +26,7 @@ export async function getStaticPaths() {
     ...plugins,
     ...ci,
     ...account,
+    ...guides,
     ...notInNavigation,
   ];
   return articles.map((article) => ({