Keyboard Shortcut Article

src/blogComponents/lib/KeyboardShortcut.astro

@@ -0,0 +1,11 @@
+---
+const { keys } = Astro.props
+---
+
+{
+  keys.map((key, i) => {
+    // Having this wrap onto another line causes spaces in the output which is not what we want
+    // prettier-ignore
+    return <><kbd>{key}</kbd>{i < keys.length - 1 && <span>&nbsp;</span>}</>
+  })
+}

src/pages/2020-08/10-best-keyboard-shortcuts/index.mdx

@@ -6,6 +6,8 @@ description: "These are my 10 favorite keyboard shortcuts that I use everyday as
 tags: ["Technical Discussion"]
 ---
 
+import KeyboardShortcut from "@blogComponents/lib/KeyboardShortcut.astro"
+
 As a programmer you spend a lot of time typing on a keyboard, well that is if you aren't stuck in meetings all day :P. In order to optimize the time you spend in front of a keyboard it is best to learn useful keyboard shortcuts that can save you a few seconds every time you use them. That may not sound like a lot, but if you are using these shortcuts hundreds or thousands of times a day you could end up saving yourself hours of work each week.
 
 In this article I will be covering my 10 (it is actually a few more than 10) favorite keyboard shortcuts that work in nearly all text editors. These shortcuts may not work in all editors, though, but they are guaranteed to work in Visual Studio Code. Also, if you are on a Mac computer just replace any use of Ctrl with Cmd and you should be good to go. With that out of the way lets dive into the first set of shortcuts.
@@ -15,57 +17,57 @@ _If you prefer to learn visually, check out the video version of this article._
 
 ## 1. Copy/Cut/Paste Entire Lines
 
-You are probably already familiar with how to cut/copy/paste highlighted sections of code by using `ctrl + x`, `ctrl + c`, and `ctrl + v` respectively, but you can actually take this a step further by copying an entire line at a time. If you just place your cursor on a line without highlighting anything and press `ctrl + c` it will copy the entire line your cursor is on including the line break. Then if you press `ctrl + v` it will paste the entire line directly above the line your cursor is currently on. You can do the same thing with `ctrl + x` to cut a line and paste it somewhere else which is incredibly useful. This is probably the shortcut I use the most.
+You are probably already familiar with how to cut/copy/paste highlighted sections of code by using <KeyboardShortcut keys={["ctrl", "c"]} />, <KeyboardShortcut keys={["ctrl", "x"]} />, and <KeyboardShortcut keys={["ctrl", "v"]} /> respectively, but you can actually take this a step further by copying an entire line at a time. If you just place your cursor on a line without highlighting anything and press <KeyboardShortcut keys={["ctrl", "c"]} /> it will copy the entire line your cursor is on including the line break. Then if you press <KeyboardShortcut keys={["ctrl", "v"]} /> it will paste the entire line directly above the line your cursor is currently on. You can do the same thing with <KeyboardShortcut keys={["ctrl", "x"]} /> to cut a line and paste it somewhere else which is incredibly useful. This is probably the shortcut I use the most.
 
 ## 2. Toggle Comments
 
-When you are writing or debugging code you commonly need to comment out individual sections/lines. This can be tedious to do manually which is why most editors allow you to comment out all of the code on the lines you have highlighted by pressing `ctrl + /`. Also, if you do not have any code highlighted at all when pressing this shortcut it will comment out the line your cursor is on which is really useful for quickly turning on or off logging statements.
+When you are writing or debugging code you commonly need to comment out individual sections/lines. This can be tedious to do manually which is why most editors allow you to comment out all of the code on the lines you have highlighted by pressing <KeyboardShortcut keys={["ctrl", "/"]} />. Also, if you do not have any code highlighted at all when pressing this shortcut it will comment out the line your cursor is on which is really useful for quickly turning on or off logging statements.
 
 ## 3. Open File Within Project
 
-If you spend time searching through the hundreds of nested folders in your sidebar to find a particular file then you are wasting time that can be saved by a keyboard shortcut. By pressing `ctrl + p` you can open up a search box which will search all of the files in your project for whatever you type into it. This makes finding the exact file you are looking for so much quicker since you never need to leave your keyboard to go searching for it.
+If you spend time searching through the hundreds of nested folders in your sidebar to find a particular file then you are wasting time that can be saved by a keyboard shortcut. By pressing <KeyboardShortcut keys={["ctrl", "p"]} /> you can open up a search box which will search all of the files in your project for whatever you type into it. This makes finding the exact file you are looking for so much quicker since you never need to leave your keyboard to go searching for it.
 
 ## 4. Find In File/Project
 
-This next shortcut is one you probably are already aware of, but it is incredibly helpful nonetheless. If you need to search for a particular set of text inside of the file you have open just press `ctrl + f`. This will open a search box that you can type into and it will find all matches to your search within your current file.
+This next shortcut is one you probably are already aware of, but it is incredibly helpful nonetheless. If you need to search for a particular set of text inside of the file you have open just press <KeyboardShortcut keys={["ctrl", "f"]} />. This will open a search box that you can type into and it will find all matches to your search within your current file.
 
-Sometimes you need to search across your entire project, though. To do that you can just press `ctrl + shift + f` and that will open a search box that will search for the entered text across all files in your current project. This is incredibly useful when refactoring code.
+Sometimes you need to search across your entire project, though. To do that you can just press <KeyboardShortcut keys={["ctrl", "shift", "f"]} /> and that will open a search box that will search for the entered text across all files in your current project. This is incredibly useful when refactoring code.
 
 ## 5. Indent/Un-Indent Lines
 
-Keeping consistent indentation in your code is a pain since indentation is so easy to mess up and fixing it by always placing your cursor at the start of the line is annoying. Luckily, you can easily indent a group of code by highlighting multiple lines of code and pressing `tab`. This will indent all the lines of code by one tab. If you need to un-indent code it is as easy as pressing `shift + tab` and now all the selected lines of code will un-indent by one tab.
+Keeping consistent indentation in your code is a pain since indentation is so easy to mess up and fixing it by always placing your cursor at the start of the line is annoying. Luckily, you can easily indent a group of code by highlighting multiple lines of code and pressing <KeyboardShortcut keys={["tab"]} />. This will indent all the lines of code by one tab. If you need to un-indent code it is as easy as pressing <KeyboardShortcut keys={["shift", "tab"]} /> and now all the selected lines of code will un-indent by one tab.
 
 ## 6. Create New File
 
-While programming a new feature you are sure to create many new files. Normally this is done with the mouse by selecting the new file button, but you can actually create a new file just by typing the shortcut `ctrl + n`. This will immediately open a new file for you to work in.
+While programming a new feature you are sure to create many new files. Normally this is done with the mouse by selecting the new file button, but you can actually create a new file just by typing the shortcut <KeyboardShortcut keys={["ctrl", "n"]} />. This will immediately open a new file for you to work in.
 
 ## 7. Create A New Line Below The Current Line
 
-This is an incredibly useful trick. Normally if you want to add a new line below your current line you need to move your cursor to the end of the current line and press enter. This is a bit of a pain to do so instead you can just press the shortcut `ctrl + enter` and a new line will be added below your current line without needing to move your cursor to the end of the line.
+This is an incredibly useful trick. Normally if you want to add a new line below your current line you need to move your cursor to the end of the current line and press enter. This is a bit of a pain to do so instead you can just press the shortcut <KeyboardShortcut keys={["ctrl", "enter"]} /> and a new line will be added below your current line without needing to move your cursor to the end of the line.
 
 ## 8. Move Cursor Whole Words At A Time
 
-Moving your cursor through code is incredibly important since you commonly need to change code in different parts of the same file. Doing this with the mouse is slow and cumbersome so instead use the shortcut of `ctrl + left arrow` and `ctrl + right arrow` to move your cursor to the left or right by an entire word at a time. This is great for quickly moving across a line of code or getting to the end of a long word. This shortcut becomes even more useful when combined with the next shortcut.
+Moving your cursor through code is incredibly important since you commonly need to change code in different parts of the same file. Doing this with the mouse is slow and cumbersome so instead use the shortcut of <KeyboardShortcut keys={["ctrl", "←"]} /> and <KeyboardShortcut keys={["ctrl", "→"]} /> to move your cursor to the left or right by an entire word at a time. This is great for quickly moving across a line of code or getting to the end of a long word. This shortcut becomes even more useful when combined with the next shortcut.
 
 ## 9. Highlight Characters Of Code
 
-If you want to highlight a section of code next to your cursor you can use `shift + left arrow` and `shift + right arrow` to move your cursor one character at a time to the left or right and also highlight the character you move over at the same time. This is great for selecting small typos in your code to fix or to select small sections of code to copy and paste. You can even combine this with the previous shortcut by pressing `ctrl + shift + left/right arrow` to highlight entire words at a time instead of just one character.
+If you want to highlight a section of code next to your cursor you can use <KeyboardShortcut keys={["shift", "←"]} /> and <KeyboardShortcut keys={["shift", "→"]} /> to move your cursor one character at a time to the left or right and also highlight the character you move over at the same time. This is great for selecting small typos in your code to fix or to select small sections of code to copy and paste. You can even combine this with the previous shortcut by pressing <KeyboardShortcut keys={["ctrl", "shift", "←/→"]} /> to highlight entire words at a time instead of just one character.
 
 ## 10. Everything Else
 
 As I said at the start of this article I actually have a few more than 10 shortcuts, so here are the last few shortcuts that you need to know. They are all fairly common and you most likely know them all already.
 
 ### Save File
 
-Use the shortcut `ctrl + s` to save your currently open file.
+Use the shortcut <KeyboardShortcut keys={["ctrl", "s"]} /> to save your currently open file.
 
 ### Select Entire File
 
-By pressing `ctrl + a` you can highlight all of the code inside a single file.
+By pressing <KeyboardShortcut keys={["ctrl", "a"]} /> you can highlight all of the code inside a single file.
 
 ### Undo/Redo
 
-If you need to undo a change you made just press `ctrl + z`. In order to redo the change you just undid you can press `ctrl + shift + z` or `ctrl + y`. They will both do the same thing.
+If you need to undo a change you made just press <KeyboardShortcut keys={["ctrl", "z"]} />. In order to redo the change you just undid you can press <KeyboardShortcut keys={["ctrl", "shift", "z"]} /> or <KeyboardShortcut keys={["ctrl", "y"]} />. They will both do the same thing.
 
 ## Conclusion