Updated readme

.github/workflows/release.yml

@@ -20,10 +20,10 @@ 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: Clone the toolkit
+      #   run: |
+      #     git clone https://github.com/microsoftgraph/microsoft-graph-toolkit
+      #     npm run snippets
 
       - name: Install vsce
         run: npm i -g vsce

README.md

@@ -50,29 +50,29 @@ 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 |
+| `mgt-agenda` |
+| `mgt-login` |
+| `mgt-people` |
+| `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 |
+| `mgt-agenda` |
+| `mgt-login` |
+| `mgt-people` |
+| `mgt-people-picker` |
+| `mgt-person` |
+| `mgt-person-card` |
+| `mgt-tasks` |
+| `mgt-teams-channel-picker` |
 
 ## Changelog
 

scripts/generate-css-snippets.js

@@ -100,8 +100,8 @@ const readmePath = '../README.md';
     let mdContent = fs.readFileSync(tmplPath, { encoding: "utf-8" });
 
     if (mdContent) {
-      mdContent = mdContent.replace(`{HTML_SNIPPETS}`, uniqComponents.map(c => `| ${c} |`).join(`\n`));
-      mdContent = mdContent.replace(`{CSS_SNIPPETS}`, uniqComponents.map(c => `| ${c} |`).join(`\n`));
+      mdContent = mdContent.replace(`{HTML_SNIPPETS}`, uniqComponents.map(c => `| \`${c}\` |`).join(`\n`));
+      mdContent = mdContent.replace(`{CSS_SNIPPETS}`, uniqComponents.map(c => `| \`${c}\` |`).join(`\n`));
       fs.writeFileSync(mdPath, mdContent, { encoding: "utf-8"})
     }
   }

snippets/css.components.json

@@ -1 +1 @@
-{"mgt-agenda":{"prefix":"mgt-agenda","body":["mgt-agenda${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-agenda\" component."},"mgt-people":{"prefix":"mgt-people","body":["mgt-people${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-people\" component."},"mgt-login":{"prefix":"mgt-login","body":["mgt-login${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-login\" component."},"mgt-people-picker":{"prefix":"mgt-people-picker","body":["mgt-people-picker${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-people-picker\" component."},"mgt-person":{"prefix":"mgt-person","body":["mgt-person${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-person\" component."},"mgt-person-card":{"prefix":"mgt-person-card","body":["mgt-person-card${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-person-card\" component."},"mgt-tasks":{"prefix":"mgt-tasks","body":["mgt-tasks${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-tasks\" component."},"mgt-teams-channel-picker":{"prefix":"mgt-teams-channel-picker","body":["mgt-teams-channel-picker${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-teams-channel-picker\" component."}}
+{"mgt-agenda":{"prefix":"mgt-agenda","body":["mgt-agenda${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-agenda\" component."},"mgt-login":{"prefix":"mgt-login","body":["mgt-login${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-login\" component."},"mgt-people":{"prefix":"mgt-people","body":["mgt-people${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-people\" component."},"mgt-people-picker":{"prefix":"mgt-people-picker","body":["mgt-people-picker${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-people-picker\" component."},"mgt-person":{"prefix":"mgt-person","body":["mgt-person${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-person\" component."},"mgt-person-card":{"prefix":"mgt-person-card","body":["mgt-person-card${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-person-card\" component."},"mgt-tasks":{"prefix":"mgt-tasks","body":["mgt-tasks${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-tasks\" component."},"mgt-teams-channel-picker":{"prefix":"mgt-teams-channel-picker","body":["mgt-teams-channel-picker${1:.custom-class} {","  ${2:}","}"],"description":"Create custom styles for the \"mgt-teams-channel-picker\" component."}}

snippets/html.components.json

@@ -1 +1 @@
-{"mgt-agenda":{"prefix":"mgt-agenda","body":["<mgt-agenda ${1:}></mgt-agenda>"],"description":"Adds the \"mgt-agenda\" component."},"mgt-people":{"prefix":"mgt-people","body":["<mgt-people ${1:}></mgt-people>"],"description":"Adds the \"mgt-people\" component."},"mgt-login":{"prefix":"mgt-login","body":["<mgt-login ${1:}></mgt-login>"],"description":"Adds the \"mgt-login\" component."},"mgt-people-picker":{"prefix":"mgt-people-picker","body":["<mgt-people-picker ${1:}></mgt-people-picker>"],"description":"Adds the \"mgt-people-picker\" component."},"mgt-person":{"prefix":"mgt-person","body":["<mgt-person ${1:}></mgt-person>"],"description":"Adds the \"mgt-person\" component."},"mgt-person-card":{"prefix":"mgt-person-card","body":["<mgt-person-card ${1:}></mgt-person-card>"],"description":"Adds the \"mgt-person-card\" component."},"mgt-tasks":{"prefix":"mgt-tasks","body":["<mgt-tasks ${1:}></mgt-tasks>"],"description":"Adds the \"mgt-tasks\" component."},"mgt-teams-channel-picker":{"prefix":"mgt-teams-channel-picker","body":["<mgt-teams-channel-picker ${1:}></mgt-teams-channel-picker>"],"description":"Adds the \"mgt-teams-channel-picker\" component."}}
+{"mgt-agenda":{"prefix":"mgt-agenda","body":["<mgt-agenda ${1:}></mgt-agenda>"],"description":"Adds the \"mgt-agenda\" component."},"mgt-login":{"prefix":"mgt-login","body":["<mgt-login ${1:}></mgt-login>"],"description":"Adds the \"mgt-login\" component."},"mgt-people":{"prefix":"mgt-people","body":["<mgt-people ${1:}></mgt-people>"],"description":"Adds the \"mgt-people\" component."},"mgt-people-picker":{"prefix":"mgt-people-picker","body":["<mgt-people-picker ${1:}></mgt-people-picker>"],"description":"Adds the \"mgt-people-picker\" component."},"mgt-person":{"prefix":"mgt-person","body":["<mgt-person ${1:}></mgt-person>"],"description":"Adds the \"mgt-person\" component."},"mgt-person-card":{"prefix":"mgt-person-card","body":["<mgt-person-card ${1:}></mgt-person-card>"],"description":"Adds the \"mgt-person-card\" component."},"mgt-tasks":{"prefix":"mgt-tasks","body":["<mgt-tasks ${1:}></mgt-tasks>"],"description":"Adds the \"mgt-tasks\" component."},"mgt-teams-channel-picker":{"prefix":"mgt-teams-channel-picker","body":["<mgt-teams-channel-picker ${1:}></mgt-teams-channel-picker>"],"description":"Adds the \"mgt-teams-channel-picker\" component."}}