Release 0.0.3

Author: estruyf

.github/workflows/release.yml

@@ -19,6 +19,11 @@ jobs:
 
       - name: Install the dependencies
         run: npm i
+        
+      - name: Clone the toolkit
+        run: |
+          git clone https://github.com/microsoftgraph/microsoft-graph-toolkit
+          npm run snippets
 
       - name: Install vsce
         run: npm i -g vsce

.gitignore

@@ -4,3 +4,5 @@ node_modules
 .vscode-test/
 *.vsix
 .DS_Store
+
+microsoft-graph-toolkit

.vscode/launch.json

@@ -5,6 +5,15 @@
 {
 	"version": "0.2.0",
 	"configurations": [
+		{
+			"name": "Run CSS Snippet",
+			"program": "${workspaceFolder}/scripts/generate-css-snippets.js",
+			"request": "launch",
+			"skipFiles": [
+				"<node_internals>/**"
+			],
+			"type": "pwa-node"
+		},
 		{
 			"name": "Run Extension",
 			"type": "extensionHost",

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to the "vscode-msgraph-essentials" extension will be documented in this file.
 
+## [0.0.3]
+
+- CSS snippets added for quickly changing component styles
+- HTML snippets added for easy insert of the MGT components in HTML
+- Autocompletion added for all the CSS variables which can be used to change the styling of the components
+
 ## [0.0.2]
 
 - Update to the `mgt-react-tmp` snippet

README.md

@@ -18,6 +18,24 @@
 
 The Microsoft Graph Essentials extension helps you developing with the Microsoft Graph Toolkit & API.
 
+## Autocompletion for CSS variabls
+
+The extension gives you autocompletion for all the CSS variables which are used to customize the styling of the MGT web components.
+
+Example:
+
+```CSS
+mgt-person {
+  --person-card-display-name-font-size: 40px;
+  --person-card-display-name-color: #ffffff;
+  --person-card-title-font-size: 20px;
+}
+```
+
+Using is as simple as starting to type `--`, and the extension will show you all the options.
+
+![](./assets/css-variables.png)
+
 ## Snippets
 
 ### React
@@ -26,6 +44,36 @@ The Microsoft Graph Essentials extension helps you developing with the Microsoft
 |---------|---------|
 | `mgt-react-tmp` | Create a new MGT React template component. |
 
+### HTML
+
+Snippets to insert the MGT web component in HTML:
+
+| Snippet |
+|---------|
+| mgt-agenda |
+| mgt-people |
+| mgt-login |
+| mgt-people-picker |
+| mgt-person |
+| mgt-person-card |
+| mgt-tasks |
+| mgt-teams-channel-picker |
+
+### CSS
+
+Snippets to quickly modify the component styles:
+
+| Snippet |
+|---------|
+| mgt-agenda |
+| mgt-people |
+| mgt-login |
+| mgt-people-picker |
+| mgt-person |
+| mgt-person-card |
+| mgt-tasks |
+| mgt-teams-channel-picker |
+
 ## Changelog
 
 See the [changelog](./CHANGELOG.md) for the latest changes.

README_TMPL.md

@@ -0,0 +1,69 @@
+<p align="center">
+  <a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-msgraph-autocomplete">
+    <img alt="Microsoft Graph Essentials" src="./assets/logo-big.png" height="200">
+  </a>
+</p>
+
+<h1 align="center">Microsoft Graph Essentials - Visual Studio Code Extension</h1>
+
+<p align="center">
+  <a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-msgraph-essentials" title="Check it out on the Visual Studio Marketplace">
+    <img src="https://vsmarketplacebadge.apphb.com/version/eliostruyf.vscode-msgraph-essentials.svg" alt="Visual Studio Marketplace" style="display: inline-block" />
+  </a>
+
+  <img src="https://vsmarketplacebadge.apphb.com/installs/eliostruyf.vscode-msgraph-essentials.svg" alt="Number of installs"  style="display: inline-block;margin-left:10px" />
+  
+  <img src="https://vsmarketplacebadge.apphb.com/rating/eliostruyf.vscode-msgraph-essentials.svg" alt="Ratings" style="display: inline-block;margin-left:10px" />
+</p>
+
+The Microsoft Graph Essentials extension helps you developing with the Microsoft Graph Toolkit & API.
+
+## Autocompletion for CSS variabls
+
+The extension gives you autocompletion for all the CSS variables which are used to customize the styling of the MGT web components.
+
+Example:
+
+```CSS
+mgt-person {
+  --person-card-display-name-font-size: 40px;
+  --person-card-display-name-color: #ffffff;
+  --person-card-title-font-size: 20px;
+}
+```
+
+Using is as simple as starting to type `--`, and the extension will show you all the options.
+
+![](./assets/css-variables.png)
+
+## Snippets
+
+### React
+
+| Snippet | Purpose |
+|---------|---------|
+| `mgt-react-tmp` | Create a new MGT React template component. |
+
+### HTML
+
+Snippets to insert the MGT web component in HTML:
+
+| Snippet |
+|---------|
+{HTML_SNIPPETS}
+
+### CSS
+
+Snippets to quickly modify the component styles:
+
+| Snippet |
+|---------|
+{CSS_SNIPPETS}
+
+## Changelog
+
+See the [changelog](./CHANGELOG.md) for the latest changes.
+
+## Feedback and snippet ideas
+
+Feedback and/or ideas are always welcome. Please submit them via creating an issue in the extension repository: [issue list](https://github.com/estruyf/vscode-msgraph-essentials/issues).