update docs, correct Docusaurus command, update readmes (#5412)

README.md

@@ -94,6 +94,8 @@ We hope you're excited by the possibilities that FAST presents. But, you may be
 
 Looking to get answers to questions or engage with us in realtime? Our community is most active [on Discord](https://discord.gg/FcSNfg4). Submit requests and issues on [GitHub](https://github.com/Microsoft/fast/issues/new/choose), or join us by contributing on [some good first issues via GitHub](https://github.com/Microsoft/fast/labels/community:good-first-issue).
 
+Get started here with the [Contributor Guide](https://www.fast.design/docs/community/contributor-guide).
+
 We look forward to building an amazing open source community with you!
 
 ## Features & benefits

sites/website/README.md

@@ -11,7 +11,7 @@ $ yarn
 ### Local Development
 
 ```
-$ yarn dev
+$ yarn start
 ```
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

sites/website/src/docs/community/writing-documentation.md

@@ -31,7 +31,7 @@ The required fields are:
 * **sidebar_label**: The label displayed in the table of contents.
 * **custom_edit_url**: A URL where the document source can be edited.
 
-Beneath the YAML metadata block, the article's body is written with [GitHub-flavored Markdown syntax](https://github.github.com/gfm/). Since our documentation system will turn the `title` metadata into the article header, the content should begin with a short introductory paragraph, followed by an h2 header for each section of the document. You may use h3 headers beneath h2 headers but avoid deeper sub-sections.
+Beneath the YAML metadata block, the article's body is written with [GitHub-flavored Markdown syntax](https://github.github.com/gfm/). Since our documentation system will turn the `title` metadata into the article header, the content should begin with a short introductory paragraph, followed by an h2 header for each section of the document. You may use h3 headers beneath h2 headers, but avoid deeper sub-sections.
 
 In addition to [GitHub-flavored Markdown syntax](https://github.github.com/gfm/), you may use the admonitions `note`, `tip`, `important`, `caution`, and `warning`. Here's an example of the syntax for a `note`:
 
@@ -77,7 +77,7 @@ export class Statistics {
 
 ## Building and testing the docs
 
-To test documentation changes, clone and build the documentation as described in [the contributor guide](./contributor-guide). Next, open a terminal and navigate to `sites/website` and run the documentation site with `yarn dev` to preview the site and validate that your changes are rendering.
+To test documentation changes, clone and build the documentation as described in [the contributor guide](./contributor-guide). Next, open a terminal and navigate to `sites/website` and run the documentation site with `yarn start`. This will allow you to preview the site at `localhost:3000` and validate that your changes are rendering.
 
 ## Style guide
 

sites/website/src/docs/introduction.md

@@ -17,13 +17,13 @@ FAST is a collection of technologies built on Web Components and modern Web Stan
 
 ### How does FAST leverage Web Components?
 
-One of FAST's driving principals is "strive to adopt open, web standards-based approaches as much as possible." To that end, FAST is built directly on the W3C Web Component standards mentioned above, and does not create its own component model. This allows components built with FAST to function the same as built-in, native HTML elements. You do not need a framework to use FAST components but you can use them in combination with any framework or library of your choice.
+One of FAST's driving principals is "strive to adopt open, web standards-based approaches as much as possible." To that end, FAST is built directly on the W3C Web Component standards mentioned above, and does not create its own component model. This allows components built with FAST to function the same as built-in, native HTML elements. You do not need a framework to use FAST components, but you can use them in combination with any framework or library of your choice.
 
 ### How can FAST help me?
 
 To understand how FAST can help you, let's take a look at the FAST tech stack from top to bottom.
 
-At the top of the stack FAST provides two sets of Web Components: `@fluentui/web-components` and `@microsoft/fast-components`. Both of these libraries include a common set of components found in many websites and apps. Example components include button, menu, tree-view, tab, card, modal, and more. So, what is the difference between these two libraries? The answer is that each library implements a different *design system*. `@fluentui/web-components` implements Microsoft's Fluent Design System. They look and feel like the components found in products like Windows, Office, Teams, and Edge. If you like the Fluent Design System or are building experiences designed to fit naturally into the Microsoft ecosystem, this is the component set you'll want to use. Alternatively, `@microsoft/fast-components` provides an industry-focused design system with more customization options. We call this system "FAST Frame". If you're looking to integrate FAST components into an existing site or app, or if you need more control over the theme of the components, this is the option you'll want to start with.
+At the top of the stack, FAST provides two sets of Web Components: `@fluentui/web-components` and `@microsoft/fast-components`. Both of these libraries include a common set of components found in many websites and apps. Example components include button, menu, tree-view, tab, card, modal, and more. So, what is the difference between these two libraries? The answer is that each library implements a different *design system*. `@fluentui/web-components` implements Microsoft's Fluent Design System. They look and feel like the components found in products like Windows, Office, Teams, and Edge. If you like the Fluent Design System or are building experiences designed to fit naturally into the Microsoft ecosystem, this is the component set you'll want to use. Alternatively, `@microsoft/fast-components` provides an industry-focused design system with more customization options. We call this system "FAST Frame". If you're looking to integrate FAST components into an existing site or app, or if you need more control over the theme of the components, this is the option you'll want to start with.
 
 What if you're not just looking for a set of components to use, but you also need to implement a custom *design system*? This is where the second level of the stack comes into play. `@microsoft/fast-foundation` provides foundational building blocks that can be assembled to create new design systems and component libraries. For example, if you wanted to implement Google's Material Design, you could do that using `@microsoft/fast-foundation`. You could also implement something like Twitter Bootstrap. Both `@fluentui/web-components` and `@microsoft/fast-components` assemble the building blocks of `@microsoft/fast-foundation` to create their component sets. What types of building blocks are we talking about though? Perhaps the most valuable feature of the foundation is that it provides base component behaviors and templates for the standard components. So, if you want to implement a tree-view in your design system, for example, you would use the foundation base component behavior and template, but combine it with your own styles. The foundation components implement the state management, accessibility, keyboard navigation, and extensibility/composition model so you don't have to write that code. Additionally, foundation provides facilities for dynamic style behaviors, CSS property management, algorithmic color, RTL, high contrast, and more. You don't have to write any of that. Just assemble the building blocks and add your styles to create your own component library, expressing your own design system.