Updates Readme

README.md

@@ -18,7 +18,7 @@
   </a>
 </p>
 
-<p align="center">Viva Connections Toolkit is a Visual Studio Code extension that aims to boost your productivity in developing and managing SharePoint Framework solutions helping at every stage of your development flow, from setting up your development workspace to deploying a solution straight to your tenant without the need to leave VS Code. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready allowing you to create solutions to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook and Microsoft365.com.</p>
+<p align="center">Viva Connections Toolkit (SPFx Toolkit) is a Visual Studio Code extension that aims to boost your productivity in developing and managing SharePoint Framework solutions helping at every stage of your development flow, from setting up your development workspace to deploying a solution straight to your tenant without the need to leave VS Code. With SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready allowing you to create solutions to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook and Microsoft365.com.</p>
 
 <p align="center">
   <a href="#-capabilities">Capabilities</a> |
@@ -40,7 +40,7 @@ The extension provides the following capabilities:
 
 ### 1️⃣ Welcome experience
 
-The extension automatically detects if have a SharePoint Framework project opened. If not, it will start with a welcome experience that will guide you through the process of creating a new project and validating your local environment.
+The extension automatically detects if you have a SharePoint Framework project opened. If not, it will start with a welcome experience that will guide you through the process of creating a new project and validating your local environment.
 
 ![Welcome experience](./assets/images/welcome-experience.png)
 
@@ -50,6 +50,8 @@ It is also possible to open an already existing project using Open folder button
 
 Last but not least it is possible to check your local workspace for the needed global dependencies to develop the SPFx solutions, like the correct Node version, gulp, yeoman etc., and install them if needed with a single click.
 
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/4-Welcome-experience)
+
 ### 2️⃣ Set up your development environment
 
 To ensure that you can develop SPFx solutions, you may use the **check dependencies** functionality. 
@@ -64,21 +66,29 @@ This action will check if you have the required dependencies such as:
   - yo
   - @microsoft/generator-sharepoint
 
-In case you do not have all dependencies installed, or some are in incorrect version, you can use the **install dependencies** action to install them.
+In case you do not have all dependencies installed, or some are incorrect version, you can use the **install dependencies** action to install them.
 
 > **Info**: The list of valid dependencies is based on [set up your development environment recommendations](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment)
 
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.1-Validate-and-set-up-a-local-workspace)
+
 ### 3️⃣ Don't Start from scratch. Reuse an SPFx (web part or extension) or ACE sample
 
 You may kick-start your development with a new project based on an existing ACE or SPFx web part or extension with a click of a button. All of the provided samples are powered by [PnP Samples repositories](https://pnp.github.io/sp-dev-fx-webparts/samples/type/).
 
-Check out how easy it is to create a new project based on a web part sample 👇. 
+![Sample gallery](./assets/images/samples.png)
+
+The extension provides a set of filters to help you find the right sample for your needs. You may search by: author, title, description, SPFx version, and component type. It is also possible browse sample details view directly from VS Code checking all sample details before you create a new project.
+
+Switch between the list and grid view and don't worry about the size of your VS Code as it is fully responsive.
 
-![Create project based on web part sample](./assets/images/create-base-on-spfx-webpart.gif)
+![Sample gallery is responsive](./assets/images/samples-responsive.png)
 
-Or ACE sample 👇.
+Check out how easy it is to create a new project based on a existing sample 👇. 
 
-![Create project based on ace sample](./assets/images/create-base-on-spfx-ace.gif)
+![Create project based on web part sample](./assets/images/sample-gallery.gif)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.2-Scaffolding#2-dont-start-from-scratch---sample-galleries)
 
 ### 4️⃣ Start from an ACE scenario
 
@@ -96,26 +106,34 @@ It's possible to scaffold any kind of SPFx project.
 
 ![Create new project](./assets/images/scaffolding.png)
 
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.2-Scaffolding#1-scaffold-a-new-spfx-project)
+
 ### 6️⃣ Login to your tenant & retrieve environment details
 
 The extension also allows you to login to your Microsoft 365 tenant using CLI for Microsoft 365.
 
 ![login](./assets/images/login.png)
 
-Thanks to that the extension will retrieve helpful URLs from your tenant like the link to SharePoint main site and tenant level App Catalog as well as site level.
+Thanks to that the extension will retrieve helpful URLs from your tenant like the link to SharePoint main site and tenant level as well as site level App Catalog.
 
 ![tenant details](./assets/images/tenant-links.png)
 
-Login-in is also required for some actions to work properly like the deploy action which allows to upload of the .sppkg file to the tenant or site-level App Catalog.
+Login-in is also required for some actions to work properly like the deploy action which allows you to upload of the .sppkg file to the tenant or site-level App Catalog.
+
+Additionally, when an SPFx project is opened the extension will check serve.json file and suggest updating it to set the properties based on the currently logged-in tenant.
 
-Additionally, when an SPFx project is opened the extension will check serve.json file and suggest updating it to set the initialPage property based on the currently logged-in tenant.
+![validate serve](./assets/images/validate-serve-config.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.3-Login-to-your-tenant-&-retrieve-environment-details)
 
 ### 7️⃣ Gulp tasks
 
 The extension shows all possible Gulp tasks one may run on an SPFx project. The tasks allow you to clean, bundle, package, serve the project with a single click.
 
 ![Gulp Tasks](./assets/images/tasks.png)
 
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.4-Gulp-tasks)
+
 ### 8️⃣ Actions
 
 The actions section allows unique functionalities that may significantly boost productivity when working with SPFx projects.
@@ -124,40 +142,64 @@ The actions section allows unique functionalities that may significantly boost p
 
 Currently the extension allows you to:
 
-- **Upgrade project** - Uses CLI for Microsoft 365 to create a .md report with upgrade guidance to the latest supported SPFx version by the extension. [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#upgrade-project)
+- **CI/CD GitHub Workflow** - This action will allow you to generate yaml GitHub workflow that uses CLI for Microsoft 365 GitHub actions to bundle, package, and deploy your project to an app catalog on every code push. 
+
+![CI CD pipeline](./assets/images/CICD-pipeline.png)
+
+Check it out in action 👇
+
+![CI CD pipeline](./assets/images/CICD-pipeline.gif)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#cicd-github-workflow)
+
+- **Upgrade project** - Uses CLI for Microsoft 365 to create a .md report with upgrade guidance to the latest supported SPFx version by the extension. 
 
 ![Upgrade project](./assets/images/upgrade-project.png)
 
-- **Validate current project** - Creates a validation .md report against the currently used SPFx version in the project. The action will automatically detect the SPFx version used and will validate if the project is properly set up. [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#validate-current-project)
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#upgrade-project)
+
+- **Validate current project** - Creates a validation .md report against the currently used SPFx version in the project. The action will automatically detect the SPFx version used and will validate if the project is properly set up. 
+
+![Upgrade project](./assets/images/validate-project.png)
 
-- **Rename current project** - Forget about manual work and let the extension rename your project and generate a new solution ID. [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#rename-current-project)
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#validate-current-project)
+
+- **Rename current project** - Forget about manual work and let the extension rename your project and generate a new solution ID. 
 
 ![Rename](./assets/images/rename.png)
 
-- **Grant API permissions** - The action will Grant all API permissions specified in the package-solution.json of the current project. This is especially helpful if you just want to debug your SPFx solution using Workbench. No longer do you need to bundle, package, and deploy the project to then go to the SharePoint admin portal and consent to the permissions. All of that is now done with just a single click. [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#grant-api-permissions)
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#rename-current-project)
+
+- **Grant API permissions** - The action will Grant all API permissions specified in the package-solution.json of the current project. This is especially helpful if you just want to debug your SPFx solution using Workbench. No longer do you need to bundle, package, and deploy the project to then go to the SharePoint admin portal and consent to the permissions. All of that is now done with just a single click. 
 
 ![Grant permissions](./assets/images/grant-permissions.png)
 
-- **Deploy project** - This action will only work when the user is logged in to tenant and the sppkg file is present. The action will deploy the project to the selected (tenant or site) app catalog. [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#grant-api-permissions)
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#grant-api-permissions)
+
+- **Deploy project** - This action will only work when the user is logged in to tenant and the sppkg file is present. The action will deploy the project to the selected (tenant or site) app catalog. 
 
 ![Deploy](./assets/images/deploy.png)
 
-- **Add new component** - Allows scaffolding a new SPFx project as a new component of the currently opened project. The action under the hood uses the same SharePoint Yeoman generator to scaffold a new project and this feature is an abstraction UI layer. [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#add-new-component)
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#grant-api-permissions)
+
+- **Add new component** - Allows scaffolding a new SPFx project as a new component of the currently opened project. The action under the hood uses the same SharePoint Yeoman generator to scaffold a new project and this feature is an abstraction UI layer. 
 
 ![Add component](./assets/images/add-component.png)
 
-- **CI/CD GitHub Workflow** - This action will allow you to generate yaml GitHub workflow that uses CLI for Microsoft 365 GitHub actions to bundle, package, and deploy your project to an app catalog on every code push. [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#cicd-github-workflow)
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#add-new-component)
 
-![CI CD pipeline](./assets/images/CI_CD-pipeline-gif.gif)
+- **Open sample/scenario galleries of the SPFx web part, extensions, or ACEs projects** - Viva Connections Toolkit supports a couple of sample galleries that may be used to scaffold a new SPFx project. 
 
-- **Open sample/scenario galleries of the SPFx web part, extensions, or ACEs projects** - Viva Connections Toolkit supports a couple of sample galleries that may be used to scaffold a new SPFx project. [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#open-samplescenario-galleries-of-the-spfx-web-part-extensions-or-aces-projects)
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#open-samplescenario-galleries-of-the-spfx-web-part-extensions-or-aces-projects)
 
 ### 9️⃣ Help and feedback section
 
-The help and feedback section is a group of links that will redirect the user to documentation, learning paths, ACE designer, MS Graph Explorer, PnP Discord channel, Viva Connections Toolkit repo, and many more.
+The help and feedback section is a group of links that will direct you to the right Microsoft documentation and learning paths. It also contains links to additional tooling that may be helpful in your development process as well as links to connect with the Microsoft 365 and Power Platform Community. 
 
 ![help and feedback](./assets/images/help-and-feedback.png)
 
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.6-Help-and-feedback-section)
+
 ### 1️⃣0️⃣ Coding Snippets
 
 The Viva Connections Toolkit comes together as a bundle with two other extensions. One of them is [SPFx Snippets](https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-snippets) created by [Elit Struyf](https://www.eliostruyf.com/). 
@@ -180,6 +222,14 @@ Check it out in action 👇
 
 ![code snippets](./assets/images/code-snippets.gif)
 
+### 1️⃣1️⃣ Teams Toolkit Integration
+
+[Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) is a widely used VS Code extension that aims to help you develop solutions that will allow you to extend Microsoft Teams. Viva Connection Toolkit aims to boost your productivity in SharePoint Framework solutions that may be used to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook, and Microsoft365.com. Among many awesome functionalities, Teams Toolkit allows you to create a project to extend Teams Tab with SPFx project, and that’s where both of those extensions may cooperate.
+
+![Teams Toolkit integration](./assets/images/better-together.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/6-Teams-Toolkit-Integration)
+
 ## ⚙️ Architecture
 
 Viva Connections Toolkit for Visual Studio Code is an abstraction layer on top of the [SPFx](https://aka.ms/spfx) Yeoman generator and [CLI for Microsoft 365](https://pnp.github.io/cli-microsoft365/).