docs(vscode-ext): add links to vs-code extension

Author: 4drianMatei

.gitignore

@@ -1,3 +1,4 @@
 /.idea/
 /node_modules/
 /frontend/src/environments/version.ts
+dist.zip

README.md

@@ -14,10 +14,10 @@ your bookmarks and code snippets. The following helpers and extensions will assi
 
 ## Extensions
 
-| [![Bookmarklet](documentation/img/bookmark-24.png)](https://www.codever.land/howto/bookmarklets) | [![Chrome](documentation/img/chrome-24.png)](https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb) | [![Firefox](documentation/img/fx-24.png)](https://addons.mozilla.org/addon/codever/) | [![IntelliJ Plugin](documentation/img/intellij-24.png)](https://plugins.jetbrains.com/plugin/14456-codever-snippets/) |
-|:---:|:---:|:---:|:---:|
-| [Bookmarklet](https://www.codever.land/howto/bookmarklets) |  [Extension](https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb) |  [Addon](https://addons.mozilla.org/addon/codever/) | [Plugin](https://plugins.jetbrains.com/plugin/14456-codever-snippets/) |
-
+| [![Bookmarklet](documentation/img/bookmark-24.png)](https://www.codever.land/howto/bookmarklets) | [![Chrome](documentation/img/chrome-24.png)](https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb) | [![Firefox](documentation/img/fx-24.png)](https://addons.mozilla.org/addon/codever/) | [![IntelliJ Plugin](documentation/img/intellij-24.png)](https://plugins.jetbrains.com/plugin/14456-codever-snippets/) | [![VSCode extension](documentation/img/vscode-24.png)](https://marketplace.visualstudio.com/items?itemName=codever.vscode-codever) |
+|:---:|:---:|:---:|:---:|:---:|
+| [Bookmarklet](https://www.codever.land/howto/bookmarklets) |  [Chromium Extension](https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb) |  [Firefox Addon](https://addons.mozilla.org/addon/codever/) | [IntelliJ Plugin](https://plugins.jetbrains.com/plugin/14456-codever-snippets/) | [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=codever.vscode-codever) |
+    
 ### Chrome extension usage example - save snippet
 
  ![Save to Codever chrome extension usage](documentation/gif/codever-browser-extension-save-snippet-800x454.gif)

documentation/img/vscode-24.png

@@ -87,10 +87,12 @@ <h4>Welcome to Codever 🙏 !!!</h4>
               <li>👉 &nbsp;Go to <a [routerLink]="['/dashboard']"><i class="fas fa-tachometer-alt"></i> My Dashboard</a>
                 where you can <strong>import</strong> your browser bookmarks, view your latest activity and your used
               tags or searches</li>
-              <li class="mt-1">👉 &nbsp;See our <a [routerLink]="['/howto']"><i class="fas fa-info-circle"></i> HowTo Guides</a> and use <a [routerLink]="['/extensions']">one of our many extensions <i class="fas fa-wrench"></i></a> to help you easily manage your bookmarks and snippets
+              <li class="mt-1">👉 &nbsp;See our <a [routerLink]="['/howto']"><i class="fas fa-info-circle"></i> HowTo Guides</a>
+                and use <a [routerLink]="['/extensions']">one of our extensions <i class="fas fa-wrench"></i></a> to help you easily manage your bookmarks and snippets
                 from your favorite browser or IDE </li>
             </ul>
           </div>
+          <app-extensions [logoSize]="32" [showEntryParagraph]="false"></app-extensions>
 
           <button class="ml-2 btn btn-primary btn-sm" (click)="acknowledgeWelcomeMessage()">Got it <i class="fas fa-check-circle"></i></button>
         </div>

documentation/img/vscode-48.png

@@ -119,7 +119,7 @@ <h3>Save snippet via bookmarklet demo</h3>
                   href="https://plugins.jetbrains.com/plugin/14456-save-to-bookmarks-dev"
                   target="_blank"
                   title="Plugin to save code snippets from IntelliJ">
-                  Save to Codever plugin
+                  Codever snippets plugin
                   <sup class="external-link-hint">
                     <i class="fas fa-external-link-alt" style="font-size: smaller"></i>
                   </sup>
@@ -134,6 +134,32 @@ <h3 class="mt-2">Search snippet</h3>
               </div>
             </ng-template>
           </mat-tab>
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <span class="app-tab-label">VSCode Extension</span>
+            </ng-template>
+            <ng-template matTabContent>
+              <div class="mt-3">
+                If your favorite IDE is Visual Studio Code you can use extension
+                <a
+                  href="https://marketplace.visualstudio.com/items?itemName=codever.vscode-codever"
+                  target="_blank"
+                  title="VS Code Extension marketplace url">
+                  Codever Snippets
+                  <sup class="external-link-hint">
+                    <i class="fas fa-external-link-alt" style="font-size: smaller"></i>
+                  </sup>
+                </a>
+                <h3 class="mt-2">Save snippet</h3>
+                <img class="mt-2 mb-2 img-fluid" src="https://raw.githubusercontent.com/codeverland/codever-vscode/main/resources/gif/codever-vscode-extension-save-snippet-800x457.gif"
+                     alt="How to save snippet with VSCode extension"/>
+
+                <h3 class="mt-2">Search snippet</h3>
+                <img class="mt-2 img-fluid" src="https://raw.githubusercontent.com/codeverland/codever-vscode/main/resources/gif/codever-vscode-extension-search-snippet-800x457.gif"
+                     alt="How to save snippet with VSCode extension"/>
+              </div>
+            </ng-template>
+          </mat-tab>
         </mat-tab-group>
 
         <div class="mt-5 lead alert alert-danger mb-2">

frontend/src/app/app.component.html

@@ -1,23 +1,27 @@
-<p class="mb-3">To assist you by the management of bookmarks and code snippets,
+<p class="mb-3" *ngIf="showEntryParagraph">To assist you by the management of bookmarks and code snippets,
   you can use the following helpers and extensions</p>
 <table class="extensions-table">
   <thead>
   <tr>
     <th align="center"><a
       href="https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb"
-      rel="nofollow"><img src="./assets/img/bookmark-48.png" alt="Bookmark"></a>
+      rel="nofollow"><img src="./assets/img/bookmark-{{logoSize}}.png" alt="Bookmark"></a>
     </th>
     <th align="center"><a
       href="https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb"
-      rel="nofollow"><img src="./assets/img/chrome-48.png" alt="Chrome logo"></a>
+      rel="nofollow"><img src="./assets/img/chrome-{{logoSize}}.png" alt="Chrome logo"></a>
     </th>
     <th align="center"><a
       href="https://addons.mozilla.org/addon/codever/"
-      rel="nofollow"><img src="./assets/img/firefox-48.png" alt="Firefox logo"></a>
+      rel="nofollow"><img src="./assets/img/firefox-{{logoSize}}.png" alt="Firefox logo"></a>
     </th>
     <th align="center"><a
-      href="https://addons.mozilla.org/addon/codever/"
-      rel="nofollow"><img src="./assets/img/intellij-48.png" alt="IntelliJ Logo"></a>
+      href="https://plugins.jetbrains.com/plugin/14456-codever-snippets/"
+      rel="nofollow"><img src="./assets/img/intellij-{{logoSize}}.png" alt="IntelliJ Logo"></a>
+    </th>
+    <th align="center"><a
+      href="https://marketplace.visualstudio.com/items?itemName=codever.vscode-codever"
+      rel="nofollow"><img src="./assets/img/vscode-{{logoSize}}.png" alt="VSCode Logo"></a>
     </th>
   </tr>
   </thead>
@@ -35,6 +39,9 @@
     <td align="center" class="ml-2"><a
       href="https://plugins.jetbrains.com/plugin/14456-codever-snippets/"
       rel="nofollow">IntelliJ plugin</a></td>
+    <td align="center" class="ml-2"><a
+      href="https://marketplace.visualstudio.com/items?itemName=codever.vscode-codever"
+      rel="nofollow">VSCode</a></td>
   </tr>
   </tbody>
 </table>

frontend/src/app/public/howto/howto-snippets/how-to-snippet.component.html

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { environment } from '../../../environments/environment';
 
 @Component({
@@ -10,6 +10,12 @@ export class ExtensionsComponent implements OnInit {
 
   environment = environment;
 
+  @Input()
+  logoSize = 48;
+
+  @Input()
+  showEntryParagraph = true;
+
   ngOnInit() {}
 
 }

frontend/src/app/shared/extensions/extensions.component.html

@@ -109,6 +109,17 @@ <h6 class="dropdown-header">Tools
               <i class="fas fa-external-link-alt" style="font-size: smaller"></i>
             </sup>
           </a>
+          <a
+            href="https://marketplace.visualstudio.com/items?itemName=codever.vscode-codever"
+            target="_blank"
+            title="VSCode Extension"
+            class="dropdown-item">
+            <i class="fas fa-laptop-code fa-sm"></i>
+            VSCode Extension
+            <sup class="external-link-hint">
+              <i class="fas fa-external-link-alt" style="font-size: smaller"></i>
+            </sup>
+          </a>
         </div>
       </li>
       <li class="nav-item dropdown large-displays">