Updates

Author: madskristensen

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
+        "Cascadia",
         "VSCT",
         "VSIX",
         "VSSDK",

docs/assets/css/style.scss

@@ -84,6 +84,7 @@ pre {
     margin: -1em 0 2em 0;
     font-size: .8em;
     width: 100%;
+    line-height: 1.4;
 }
 
 code {
@@ -99,15 +100,17 @@ code .s {
     color: var(--code-s);
 }
 
-code .n {
+code .n,
+code .na {
     color: var(--code-n);
 }
 
 code .k {
     color: var(--code-k);
 }
 
-code .nf {
+code .nf,
+code .nt {
     color: var(--code-nf);
 }
 
@@ -210,6 +213,16 @@ main .meta {
     right: 0
 }
 
+main > section ol,
+main > section ul {
+    padding-left: 2.5em;
+    margin-bottom: 1em;
+}
+
+main > section li::marker {
+    font-weight: bold;
+}
+
 footer {
     padding: 1em 0;
     text-align: center;

docs/walkthroughs/menus-buttons-commands.md

@@ -1,6 +1,56 @@
 ---
-title: Menus and commands
+title: Menus & commands
 date: 2021-5-24
 ---
 
-TBD
+Commands are most often used as buttons in menus around Visual Studio. To create a command requires two steps:
+
+1. Define the command
+2. Handle the click/invocation
+
+## Define the command
+Every button in every menu is a command. To add a command to your extension, you must define it in the .vsct file first. It could look something like this:
+
+```xml
+<Buttons>
+  <Button guid="MyPackage" id="MyCommand" priority="0x0105" type="Button">
+    <Parent guid="VSMainMenu" id="View.DevWindowsGroup.OtherWindows.Group1"/>
+    <Icon guid="ImageCatalogGuid" id="StatusInformation" />
+    <CommandFlag>IconIsMoniker</CommandFlag>
+    <Strings>
+      <ButtonText>R&amp;unner Window</ButtonText>
+    </Strings>
+  </Button>
+</Buttons>
+```
+
+This button is placed in the parent group located in the **View -> Other Windows** menu as specified in the `Parent` element. 
+
+You can now run the extension now to see if the command shows up in the right location and menu.
+
+## Handle the click/invocations
+Once the button is defined, we need to handle what happens when it is invoked. We do that in a C# class that looks like this:
+
+```csharp
+[Command("489ba882-f600-4c8b-89db-eb366a4ee3b3", 0x0100)]
+public class MyCommand : BaseCommand<TestCommand>
+{
+    protected override Task ExecuteAsync(OleMenuCmdEventArgs e)
+    {
+        // Do something
+    }
+}
+```
+
+Make sure to call it from your `Package` class's `InitializeAsync` method.
+
+```csharp
+protected override async Task InitializeAsync(CancellationToken cancellationToken, IProgress<ServiceProgressData> progress)
+{
+    await JoinableTaskFactory.SwitchToMainThreadAsync(cancellationToken);
+
+    await MyCommand.InitializeAsync(this);
+ }    
+```
+
+The command Guid and ID must match the guid/id pair from `Button` element in the .vsct file