Add vscode as an option for the application selector (#21798)

* adding switcher to creating a codespace guide

* adding additional switcher for vscode and updating codespaces name

* using webui in codespaces coontext

* updating internal documentation

* remove default tool

Co-authored-by: hubwriter <hubwriter@github.com>

Author: timeyoutakeit

components/lib/display-tool-specific-content.ts

@@ -3,7 +3,7 @@ import { preserveAnchorNodePosition } from 'scroll-anchoring'
 
 import { sendEvent, EventType } from './events'
 
-const supportedTools = ['cli', 'desktop', 'webui', 'curl', 'codespaces']
+const supportedTools = ['cli', 'desktop', 'webui', 'curl', 'codespaces', 'vscode']
 
 export default function displayToolSpecificContent() {
   const toolElements = Array.from(document.querySelectorAll('.extended-markdown')).filter((el) =>

content/README.md

@@ -220,7 +220,7 @@ defaultPlatform: linux
 ### `defaultTool`
 
 - Purpose: Override the initial tool selection for a page, where tool refers to the application the reader is using to work with GitHub (such as GitHub.com's web UI, the GitHub CLI, or GitHub Desktop) or the GitHub APIs (such as cURL or the GitHub CLI). If this frontmatter is omitted, then the tool-specific content matching the GitHub web UI is shown by default. This behavior can be changed for individual pages, for which a manual selection is more reasonable.
-- Type: `String`, one of: `webui`, `cli`, `desktop`, `curl`.
+- Type: `String`, one of: `webui`, `cli`, `desktop`, `curl`, `codespaces`, `vscode`.
 - Optional.
 
 ```yaml

contributing/content-markup-reference.md

@@ -10,6 +10,8 @@
   - [Usage](#usage-2)
 - [Operating system tags](#operating-system-tags)
   - [Usage](#usage-3)
+- [Tool tags](#tool-tags)
+  - [Usage](#usage-4)
 - [Reusable and variable strings of text](#reusable-and-variable-strings-of-text)
 
 ## Writing in Markdown
@@ -102,7 +104,7 @@ You can define a default platform in the frontmatter. For more information, see
 
 ## Tool tags
 
-We occasionally need to write documentation for different tools (GitHub UI, GitHub CLI, GitHub Desktop, cURL). Each tool may require a different set of instructions. We use tool tags to demarcate information for each tool.
+We occasionally need to write documentation for different tools (GitHub UI, GitHub CLI, GitHub Desktop, cURL, Codespaces, VS Code). Each tool may require a different set of instructions. We use tool tags to demarcate information for each tool.
 
 ### Usage
 
@@ -138,6 +140,22 @@ These instructions are pertinent to cURL users.
 {% endcurl %}
 ```
 
+```
+{% codespaces %}
+
+These instructions are pertinent to Codespaces users. They are mostly used outside the Codespaces docset, when we want to refer to how to do something inside Codespaces. Otherwise `webui` or `vscode` may be used.
+
+{% endcodespaces %}
+```
+
+```
+{% vscode %}
+
+These instructions are pertinent to VS Code users.
+
+{% endvscode %}
+```
+
 Unlike [operating system tags](#operating-system-tags), which will automatically add tabs to select the operating system at the top of the article, you must add `{% include tool-switcher %}` wherever you want to display tabs to select the tool. This allows you to display the tabs at the top of the article or immediately before a relevant section.
 
 You can define a default tool in the frontmatter. For more information, see the [content README](../content/README.md#defaulttool).

includes/tool-switcher.html

@@ -6,5 +6,6 @@
     <a href="#" class="UnderlineNav-item tool-switcher" data-tool="curl">cURL</a>
     <a href="#" class="UnderlineNav-item tool-switcher" data-tool="desktop">Desktop</a>
     <a href="#" class="UnderlineNav-item tool-switcher" data-tool="codespaces">Codespaces</a>
+    <a href="#" class="UnderlineNav-item tool-switcher" data-tool="vscode">Visual Studio Code</a>
   </div>
 </nav>

lib/frontmatter.js

@@ -157,7 +157,7 @@ export const schema = {
     // Tool-specific content preference
     defaultTool: {
       type: 'string',
-      enum: ['webui', 'cli', 'desktop', 'curl', 'codespaces'],
+      enum: ['webui', 'cli', 'desktop', 'curl', 'codespaces', 'vscode'],
     },
     // Documentation contributed by a third party, such as a GitHub Partner
     contributor: {

lib/liquid-tags/extended-markdown.js

@@ -7,6 +7,7 @@ export const tags = {
   webui: '',
   curl: '',
   codespaces: '',
+  vscode: '',
   all: '',
   tip: 'border rounded-1 mb-4 p-3 color-border-info color-bg-info f5',
   note: 'border rounded-1 mb-4 p-3 color-border-info color-bg-info f5',

lib/schema-event.js

@@ -146,7 +146,7 @@ const context = {
     },
     application_preference: {
       type: 'string',
-      enum: ['webui', 'cli', 'desktop', 'curl', 'codespaces'],
+      enum: ['webui', 'cli', 'desktop', 'curl', 'codespaces', 'vscode'],
       description: 'The application selected by the user.',
     },
     color_mode_preference: {
@@ -404,6 +404,7 @@ const preferenceSchema = {
         'desktop',
         'curl',
         'codespaces',
+        'vscode',
         'dark',
         'light',
         'auto',