Merge pull request #85 from chrisweb/preview

Preview to main

Author: chrisweb

app/web_development/posts/vscode/page.mdx

@@ -177,13 +177,28 @@ The easiest way to save a file in VSCode is to use the keyboard shortcut `Ctrl+S
 > [!MORE]  
 > [VSCode "Editing basics" documentation](https://code.visualstudio.com/docs/editor/codebasics)  
 
+## Comment out / uncomment code
+
+One of the must used shortcuts is probably the **comment out / uncomment toggle shortcut**
+
+* first select the code you want to comment out or uncomment
+* then either use the shortcut `Ctrl+#` (macOS: `⌘#`, Linux: `Ctrl+#`)
+* or if you prefer using the command, [open the commend palette](#vscode-command-palette), start typing `Toggle Line Comment` until the command appears in the list and then select it.
+
+VSCode will **comment out** out the select lines of code if they are NOT commented out yet, if they are commented out VSCode will uncomment them
+
+VSCode will try to use language specific comments, meaning it will for example use `<!-- HTML comments -->` in HTML and `// single-line comments` in javascript (typescript). 
+
+> [!NOTE]  
+> If you prefer using a multi-line comment, then use the related **toggle block comment** command shortcut `Ctrl+Shift+A` (macOS: `⇧⌘A`, Linux: `Ctrl+Shift+A`).
+
 ## Open a VSCode terminal
 
 VSCode has a terminal (command line tool) that, by default, is closed. To open the terminal, click on **View** in the top navigation bar and then **Terminal**
 
 Or use the keyboard shortcut `` Ctrl+` `` (macOS: `` ⌃` ``, Linux: `` Ctrl+` ``)
 
-The third option is to use the command palette by pressing using the keyboard shortcut `Ctrl+Shift+p` (macOS: `⇧⌘P`, Linux: `Ctrl+Shift+P`) and then typing `view: toggle terminal`.
+The third option is to use the command palette, [open the commend palette](#vscode-command-palette), start typing `view toggle terminal` until the command appears in the list and then select it.
 
 > [!MORE]  
 > [VSCode "terminal" documentation](https://code.visualstudio.com/docs/terminal/basics)  

app/web_development/tutorials/next-js-static-first-mdx-starterkit/mdx-plugins/page.mdx

@@ -205,7 +205,9 @@ This is when I bumped into something I assume is a bug on windows:
 Error: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
 ```
 
-Confirmed, on Mac the code works 🎉 but this also confirms there is a windows bug 😭 (TODO: I did not find a ticket for this bug, so I will finish and publish the tutorial, then check again if a ticket exists, if not create one, I found a similar PR but in an other area of Next.js, the solution is probably similar: [use pathToFileUrl to make esm import()s work with absolute windows paths](https://github.com/vercel/next.js/pull/64386/files))
+Confirmed, on Mac the code works 🎉 but this also confirms there is a windows bug 😭
+
+I have opened an [Issue (#74564)](https://github.com/vercel/next.js/issues/74564) on GitHub regarding this problem and I suggested a fix in this [PR #74565](https://github.com/vercel/next.js/pull/74565)
 
 ### tldr
 

next.config.mjs

@@ -26,6 +26,7 @@ const nextConfig = (phase) => {
     })*/
 
     // https://rehype-pretty-code.netlify.app/
+    /** @type {import('rehype-pretty-code').Options} */
     const rehypePrettyCodeOptions = {
         // VSCode "SynthWave '84" theme
         theme: 'synthwave-84',
@@ -44,6 +45,7 @@ const nextConfig = (phase) => {
     }
 
     // https://github.com/chrisweb/remark-table-of-contents#options
+    /** @type {import('remark-table-of-contents').IRemarkTableOfContentsOptions} */
     const remarkTableOfContentsOptions = {
         containerAttributes: {
             id: 'articleToc',
@@ -73,11 +75,13 @@ const nextConfig = (phase) => {
     }
 
     // https://github.com/remarkjs/remark-gfm
+    /** @type {import('remark-gfm').Options} */
     const remarkGfmOptions = {
         singleTilde: false,
     }
 
     // https://github.com/chrisweb/rehype-github-alerts
+    /** @type {import('rehype-github-alerts').DefaultBuildType} */
     const myGithubAlertBuild = (alertOptions, originalChildren) => {
 
         const alert = {
@@ -135,6 +139,7 @@ const nextConfig = (phase) => {
 
     }
 
+    /** @type {import('rehype-github-alerts').IOptions} */
     const rehypeGithubAlertsOptions = {
         supportLegacy: false,
         build: myGithubAlertBuild,
@@ -169,6 +174,7 @@ const nextConfig = (phase) => {
         },
     })
 
+    /** @type {import('next').NextConfig} */
     const nextConfigOptions = {
         reactStrictMode: true,
         poweredByHeader: false,