diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro index 8e8db117..b79b8c69 100644 --- a/src/components/Navigation/Navigation.astro +++ b/src/components/Navigation/Navigation.astro @@ -20,6 +20,7 @@ interface Props { | CollectionEntry<"plugins"> | CollectionEntry<"ci"> | CollectionEntry<"account"> + | CollectionEntry<"guides"> )[]; defaultOpen?: boolean; timeline?: boolean; diff --git a/src/components/Navigation/SideNav.tsx b/src/components/Navigation/SideNav.tsx index e2349723..bae98beb 100644 --- a/src/components/Navigation/SideNav.tsx +++ b/src/components/Navigation/SideNav.tsx @@ -111,6 +111,7 @@ type Item = ( | CollectionEntry<"plugins"> | CollectionEntry<"ci"> | CollectionEntry<"account"> + | CollectionEntry<"guides"> ) & { data: { sidebar: { diff --git a/src/content/config.ts b/src/content/config.ts index 5c17c20a..453260c0 100644 --- a/src/content/config.ts +++ b/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, }; diff --git a/src/content/workflow/quickstart-for-reviewers.md b/src/content/guides/guide-for-designers.md similarity index 65% rename from src/content/workflow/quickstart-for-reviewers.md rename to src/content/guides/guide-for-designers.md index 763bafa7..0ddd94d5 100644 --- a/src/content/workflow/quickstart-for-reviewers.md +++ b/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 email support. diff --git a/src/content/workflow/in-development.md b/src/content/workflow/in-development.md index f59ad9f9..acb76542 100644 --- a/src/content/workflow/in-development.md +++ b/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 diff --git a/src/content/workflow/in-pull-request.md b/src/content/workflow/in-pull-request.md index 1fb295ba..51008bb6 100644 --- a/src/content/workflow/in-pull-request.md +++ b/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: -Read next chapter +- [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 email support. diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index cc49c643..6381396a 100644 --- a/src/layouts/Layout.astro +++ b/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; diff --git a/src/pages/[slug].astro b/src/pages/[slug].astro index 7a0a59f0..f41ba5ff 100644 --- a/src/pages/[slug].astro +++ b/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) => ({