Merge branch 'main' into main

.github/actions-scripts/content-changes-table-comment.js

@@ -28,50 +28,58 @@ const MAX_COMMENT_SIZE = 125000
 
 const PROD_URL = 'https://docs.github.com'
 
-run()
+// When this file is invoked directly from action as opposed to being imported
+if (import.meta.url.endsWith(process.argv[1])) {
+  const owner = context.repo.owner
+  const repo = context.payload.repository.name
+  const baseSHA = context.payload.pull_request.base.sha
+  const headSHA = context.payload.pull_request.head.sha
 
-async function run() {
   const isHealthy = await waitUntilUrlIsHealthy(new URL('/healthz', APP_URL).toString())
   if (!isHealthy) {
-    return core.setFailed(`Timeout waiting for preview environment: ${APP_URL}`)
+    core.setFailed(`Timeout waiting for preview environment: ${APP_URL}`)
+  } else {
+    const markdownTable = await main(owner, repo, baseSHA, headSHA)
+    core.setOutput('changesTable', markdownTable)
   }
+}
 
+async function main(owner, repo, baseSHA, headSHA) {
   const octokit = github.getOctokit(GITHUB_TOKEN)
   // get the list of file changes from the PR
   const response = await octokit.rest.repos.compareCommitsWithBasehead({
-    owner: context.repo.owner,
-    repo: context.payload.repository.name,
-    basehead: `${context.payload.pull_request.base.sha}...${context.payload.pull_request.head.sha}`,
+    owner,
+    repo,
+    basehead: `${baseSHA}...${headSHA}`,
   })
 
   const { files } = response.data
 
-  let markdownTable =
-    '| **Source** | **Preview** | **Production** | **What Changed** |\n|:----------- |:----------- |:----------- |:----------- |\n'
+  const markdownTableHead = [
+    '| **Source** | **Preview** | **Production** | **What Changed** |',
+    '|:----------- |:----------- |:----------- |:----------- |',
+  ]
+  let markdownTable = ''
 
   const pathPrefix = 'content/'
-  const articleFiles = files.filter(
-    ({ filename }) => filename.startsWith(pathPrefix) && !filename.endsWith('/index.md')
-  )
+  const articleFiles = files.filter(({ filename }) => filename.startsWith(pathPrefix))
 
   const lines = await Promise.all(
     articleFiles.map(async (file) => {
       const sourceUrl = file.blob_url
       const fileName = file.filename.slice(pathPrefix.length)
-      const fileUrl = fileName.slice(0, fileName.lastIndexOf('.'))
+      const fileUrl = fileName.replace('/index.md', '').replace(/\.md$/, '')
 
       // get the file contents and decode them
       // this script is called from the main branch, so we need the API call to get the contents from the branch, instead
       const fileContents = await getContents(
-        context.repo.owner,
-        context.payload.repository.name,
+        owner,
+        repo,
         // Can't get its content if it no longer exists.
         // Meaning, you'd get a 404 on the `getContents()` utility function.
         // So, to be able to get necessary meta data about what it *was*,
         // if it was removed, fall back to the 'base'.
-        file.status === 'removed'
-          ? context.payload.pull_request.base.sha
-          : context.payload.pull_request.head.sha,
+        file.status === 'removed' ? baseSHA : headSHA,
         file.filename
       )
 
@@ -164,7 +172,13 @@ async function run() {
     return previous
   }, markdownTable.length)
 
+  if (cappedLines.length) {
+    cappedLines.unshift(...markdownTableHead)
+  }
+
   markdownTable += cappedLines.join('\n')
 
-  core.setOutput('changesTable', markdownTable)
+  return markdownTable
 }
+
+export default main

.github/actions/clone-translations/action.yml

@@ -0,0 +1,67 @@
+name: Clone translations
+
+description: Clone all remote translations so they're available
+
+inputs:
+  token:
+    description: PAT
+    required: true
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Clone Simplified Chinese
+      uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+      with:
+        repository: github/docs-internal.zh-cn
+        token: ${{ inputs.token }}
+        path: translations/zh-cn
+
+    - name: Clone Japanese
+      uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+      with:
+        repository: github/docs-internal.ja-jp
+        token: ${{ inputs.token }}
+        path: translations/ja-jp
+
+    - name: Clone Spanish
+      uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+      with:
+        repository: github/docs-internal.es-es
+        token: ${{ inputs.token }}
+        path: translations/es-es
+
+    - name: Clone Portuguese
+      uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+      with:
+        repository: github/docs-internal.pt-br
+        token: ${{ inputs.token }}
+        path: translations/pt-br
+
+    - name: Clone German
+      uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+      with:
+        repository: github/docs-internal.de-de
+        token: ${{ inputs.token }}
+        path: translations/de-de
+
+    - name: Clone French
+      uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+      with:
+        repository: github/docs-internal.fr-fr
+        token: ${{ inputs.token }}
+        path: translations/fr-fr
+
+    - name: Clone Russian
+      uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+      with:
+        repository: github/docs-internal.ru-ru
+        token: ${{ inputs.token }}
+        path: translations/ru-ru
+
+    - name: Clone Korean
+      uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+      with:
+        repository: github/docs-internal.ko-kr
+        token: ${{ inputs.token }}
+        path: translations/ko-kr

.github/workflows/azure-prod-build-deploy.yml

@@ -71,61 +71,9 @@ jobs:
       - name: Merge docs-early-access repo's folders
         run: .github/actions-scripts/merge-early-access.sh
 
-      - name: Clone Simplified Chinese
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+      - uses: ./.github/actions/clone-translations
         with:
-          repository: github/docs-internal.zh-cn
           token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/zh-cn
-
-      - name: Clone Japanese
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.ja-jp
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/ja-jp
-
-      - name: Clone Spanish
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.es-es
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/es-es
-
-      - name: Clone Portuguese
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.pt-br
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/pt-br
-
-      - name: Clone German
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.de-de
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/de-de
-
-      - name: Clone French
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.fr-fr
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/fr-fr
-
-      - name: Clone Russian
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.ru-ru
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/ru-ru
-
-      - name: Clone Korean
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.ko-kr
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/ko-kr
 
       - name: 'Build and push image'
         uses: docker/build-push-action@1cb9d22b932e4832bb29793b7777ec860fc1cde0
@@ -194,13 +142,8 @@ jobs:
         run: |
           az webapp deployment slot swap --slot canary --target-slot production -n ghdocs-prod -g docs-prod
 
-  send-slack-notification-on-failure:
-    needs: [azure-prod-build-and-deploy]
-    runs-on: ubuntu-latest
-    if: ${{ failure() }}
-    steps:
       - name: Send Slack notification if workflow failed
-        uses: someimportantcompany/github-actions-slack-message@f8d28715e7b8a4717047d23f48c39827cacad340
+        uses: someimportantcompany/github-actions-slack-message@1d367080235edfa53df415bd8e0bbab480f29bad
         if: ${{ failure() }}
         with:
           channel: ${{ secrets.DOCS_ALERTS_SLACK_CHANNEL_ID }}

.github/workflows/confirm-internal-staff-work-in-docs.yml

@@ -74,7 +74,7 @@ jobs:
 
       - name: Send Slack notification if a GitHub employee who isn't on the docs team opens an issue in public
         if: ${{ steps.membership_check.outputs.did_warn && github.repository == 'github/docs' }}
-        uses: someimportantcompany/github-actions-slack-message@f8d28715e7b8a4717047d23f48c39827cacad340
+        uses: someimportantcompany/github-actions-slack-message@1d367080235edfa53df415bd8e0bbab480f29bad
         with:
           channel: ${{ secrets.DOCS_OPEN_SOURCE_SLACK_CHANNEL_ID }}
           bot-token: ${{ secrets.SLACK_DOCS_BOT_TOKEN }}

.github/workflows/content-changes-table-comment.yml

@@ -83,6 +83,7 @@ jobs:
           body-includes: '<!-- MODIFIED_CONTENT_LINKING_COMMENT -->'
 
       - name: Update comment
+        if: ${{ steps.changes.outputs.changesTable != '' }}
         uses: peter-evans/create-or-update-comment@c9fcb64660bc90ec1cc535646af190c992007c32
         with:
           comment-id: ${{ steps.findComment.outputs.comment-id }}

.github/workflows/enterprise-dates.yml

@@ -86,7 +86,7 @@ jobs:
           number: ${{ steps.create-pull-request.outputs.pull-request-number }}
 
       - name: Send Slack notification if workflow fails
-        uses: someimportantcompany/github-actions-slack-message@f8d28715e7b8a4717047d23f48c39827cacad340
+        uses: someimportantcompany/github-actions-slack-message@1d367080235edfa53df415bd8e0bbab480f29bad
         if: ${{ failure() && env.FREEZE != 'true' }}
         with:
           channel: ${{ secrets.DOCS_ALERTS_SLACK_CHANNEL_ID }}

.github/workflows/openapi-decorate.yml

@@ -1,15 +1,19 @@
-name: OpenAPI generate decorated schema files
+name: Sync OpenAPI schema
 
-# **What it does**: On 'Update OpenAPI Descriptions' PRs opened by github-openapi-bot, this workflow runs the script to generate the decorated OpenAPI files and commit them to the PR.
-# **Why we have it**: So we can consume OpenAPI changes, decorate them, and publish them to the REST API docs.
+# **What it does**: Once a day, this workflow syncs the dereferenced files from github/rest-api-description and creates a pull request if there are updates to any of the static files we generate from the OpenAPI.
+# **Why we have it**: So we can consume OpenAPI changes.
 # **Who does it impact**: Anyone making OpenAPI changes in `github/github`, and wanting to get them published on the docs site.
 
 on:
-  pull_request:
-    # This prevents the workflow from running continuously. We only want
-    # this workflow to run once on the initial open.
-    types:
-      - opened
+  workflow_dispatch:
+    inputs:
+      SOURCE_BRANCH:
+        description: 'Branch to pull the dereferenced OpenAPI source files from in the github/rest-api-descriptions repo.'
+        type: string
+        required: true
+        default: 'main'
+  schedule:
+    - cron: '20 16 * * *' # Run every day at 16:20 UTC / 8:20 PST
 
 permissions:
   contents: write
@@ -22,75 +26,86 @@ concurrency:
 
 jobs:
   generate-decorated-files:
-    if: >-
-      ${{
-        github.repository == 'github/docs-internal' &&
-        github.event.pull_request.user.login == 'github-openapi-bot'
-      }}
+    if: github.repository == 'github/docs-internal'
     runs-on: ubuntu-latest
     steps:
-      - name: Label pull requests with 'github-openapi-bot'
-        uses: andymckay/labeler@e6c4322d0397f3240f0e7e30a33b5c5df2d39e90
-        with:
-          add-labels: 'github-openapi-bot'
+      - if: ${{ env.FREEZE == 'true' }}
+        run: |
+          echo 'The repo is currently frozen! Exiting this workflow.'
+          exit 1 # prevents further steps from running
 
       - name: Checkout repository code
         uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+
+        # Check out a nested repository inside of previous checkout
+      - name: Checkout rest-api-description repo
+        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
         with:
-          # actions/checkout by default will leave you in a detached head state
-          # so we need to specify the PR head ref explicitly since we're making
-          # changes that we want to commit to the branch.
-          ref: ${{ github.event.pull_request.head.ref }}
-          # Using a PAT is necessary so that the new commit will trigger the
-          # CI in the PR. (Events from GITHUB_TOKEN don't trigger new workflows.)
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
+          # By default, only the most recent commit of the `main` branch
+          # will be checked out
+          repository: github/rest-api-description
+          path: rest-api-description
+          ref: ${{ github.event.inputs.SOURCE_BRANCH }}
 
       - uses: ./.github/actions/node-npm-setup
 
-      - name: Decorate the dereferenced OpenAPI schemas
-        run: script/rest/update-files.js --decorate-only
-
-      - name: Check if pull request should be closed
-        id: close-pr
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PR_URL: ${{ github.event.pull_request.html_url }}
+      - name: Copy dereferenced OpenAPI files
+        id: rest-api-description
         run: |
-          echo "If there are no changes, exit"
-          NUM_FILES_CHANGED=$(git diff --name-only -- lib/rest/static/decorated | wc -l)
-          if [[ $NUM_FILES_CHANGED -eq 0 ]]
-            then
-              echo "No decorated file changes found"
-              gh pr comment "$PR_URL" --body "🤖 This pull request has no changes to lib/rest/static/decorated, so it is being closed automatically."
-              gh pr close "$PR_URL" --delete-branch
-              echo "NO_DECORATED=true" >> $GITHUB_OUTPUT
-              exit 0
+          mkdir ./lib/rest/static/dereferenced
+          find rest-api-description/descriptions-next -type f -name "*.deref.json" -exec sh -c 'cp $1 ./lib/rest/static/dereferenced' sh {} \;
+          cd rest-api-description
+          OPENAPI_COMMIT_SHA=$(git rev-parse HEAD)
+          echo "OPENAPI_COMMIT_SHA=$OPENAPI_COMMIT_SHA" >> $GITHUB_OUTPUT
+          echo "Copied files from github/rest-api-description repo. Commit SHA: $OPENAPI_COMMIT_SHA"
+
+      - name: Decorate the dereferenced OpenAPI schemas
+        run: |
+          script/rest/update-files.js --decorate-only --open-source
+          git status
+          echo "Deleting the cloned github/rest-api-description repo..."
+          rm -rf rest-api-description
+
+      - name: Create pull request
+        env:
+          # Needed for gh
+          GITHUB_TOKEN: ${{ secrets.DOCUBOT_REPO_PAT }}
+        run: |
+          # If nothing to commit, exit now. It's fine. No orphans.
+          changes=$(git diff --name-only | wc -l)
+          if [[ $changes -eq 0 ]]; then
+            echo "There are no changes to commit after running lib/rest/update-files.js. Exiting..."
+            exit 0
           fi
 
-      - name: Check in the decorated files
-        if: ${{ steps.close-pr.outputs.NO_DECORATED != 'true' }}
-        uses: EndBug/add-and-commit@050a66787244b10a4874a2a5f682130263edc192
+          git config --global user.name "docubot"
+          git config --global user.email "67483024+docubot@users.noreply.github.com"
+
+          branchname=openapi-update-${{ steps.rest-api-description.outputs.OPENAPI_COMMIT_SHA }}
+
+          branchCheckout=$(git checkout -b $branchname)
+          if [[! $? -eq 0 ]]; then
+            echo "Branch $branchname already exists in `github/docs-internal`. Exiting..."
+            exit 0
+          fi
+          git add .
+          git commit -m "Add decorated OpenAPI schema files"
+          git push origin $branchname
+
+          echo "Creating pull request..."
+          gh pr create \
+            --title "Update OpenAPI Description" \
+            --body '👋 humans. This PR updates the OpenAPI description with the latest changes. (Synced from github/rest-api-description@${{ steps.rest-api-description.outputs.OPENAPI_COMMIT_SHA }})
+
+            If CI does not pass or other problems arise, contact #docs-engineering on slack.' \
+            --repo github/docs-internal \
+            --label github-openapi-bot
+
+      - name: Send Slack notification if workflow fails
+        uses: someimportantcompany/github-actions-slack-message@1d367080235edfa53df415bd8e0bbab480f29bad
+        if: ${{ failure() && env.FREEZE != 'true' }}
         with:
-          # The arguments for the `git add` command
-          add: '["lib/rest/static/apps", "lib/rest/static/decorated", "lib/webhooks/static/decorated", "lib/redirects/static/client-side-rest-api-redirects.json"]'
-
-          # The message for the commit
-          message: 'Add decorated OpenAPI schema files'
-
-        env:
-          # Disable pre-commit hooks; they don't play nicely with add-and-commit
-          HUSKY: '0'
-
-      - name: Remove the dereferenced files
-        if: ${{ steps.close-pr.outputs.NO_DECORATED != 'true' }}
-        uses: EndBug/add-and-commit@050a66787244b10a4874a2a5f682130263edc192
-        with:
-          # The arguments for the `git add` command
-          remove: '["lib/rest/static/dereferenced/*"]'
-
-          # The message for the commit
-          message: 'Removed dereferenced OpenAPI schema files'
-
-        env:
-          # Disable pre-commit hooks; they don't play nicely with add-and-commit
-          HUSKY: '0'
+          channel: ${{ secrets.DOCS_ALERTS_SLACK_CHANNEL_ID }}
+          bot-token: ${{ secrets.SLACK_DOCS_BOT_TOKEN }}
+          color: failure
+          text: The last Sync OpenAPI schema run for ${{github.repository}} failed. See https://github.com/${{github.repository}}/actions/workflows/sync-openapi.yml

.github/workflows/repo-sync-stalls.yml

@@ -52,7 +52,7 @@ jobs:
               }
             })
       - name: Send Slack notification if workflow fails
-        uses: someimportantcompany/github-actions-slack-message@f8d28715e7b8a4717047d23f48c39827cacad340
+        uses: someimportantcompany/github-actions-slack-message@1d367080235edfa53df415bd8e0bbab480f29bad
         if: ${{ failure() }}
         with:
           channel: ${{ secrets.DOCS_ALERTS_SLACK_CHANNEL_ID }}

.github/workflows/repo-sync.yml

@@ -256,7 +256,7 @@ jobs:
           gh pr merge $PR_NUMBER --admin --merge
 
       - name: Send Slack notification if workflow fails
-        uses: someimportantcompany/github-actions-slack-message@f8d28715e7b8a4717047d23f48c39827cacad340
+        uses: someimportantcompany/github-actions-slack-message@1d367080235edfa53df415bd8e0bbab480f29bad
         if: failure()
         with:
           channel: ${{ secrets.DOCS_ALERTS_SLACK_CHANNEL_ID }}

.github/workflows/sync-search-elasticsearch.yml

@@ -35,18 +35,6 @@ env:
   FREEZE: ${{ secrets.FREEZE }}
   ELASTICSEARCH_URL: ${{ secrets.ELASTICSEARCH_URL }}
 
-  # This might seem a bit strange, but it's clever. Since this action
-  # uses a matrix to deal with one language at a time, we can use this
-  # to pretend it's always the same directory.
-  TRANSLATIONS_ROOT_ES_ES: translation
-  TRANSLATIONS_ROOT_ZH_CN: translation
-  TRANSLATIONS_ROOT_JA_JP: translation
-  TRANSLATIONS_ROOT_PT_BR: translation
-  TRANSLATIONS_ROOT_FR_FR: translation
-  TRANSLATIONS_ROOT_RU_RU: translation
-  TRANSLATIONS_ROOT_KO_KR: translation
-  TRANSLATIONS_ROOT_DE_DE: translation
-
 jobs:
   figureOutMatrix:
     runs-on: ubuntu-latest
@@ -110,13 +98,11 @@ jobs:
       - name: Check out repo
         uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
 
-      - name: Checkout the non-English repo
+      - name: Clone all translations
         if: ${{ matrix.language != 'en' }}
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+        uses: ./.github/actions/clone-translations
         with:
-          repository: github/docs-internal.${{ fromJSON('{"zh":"zh-cn","es":"es-es","ru":"ru-ru","ja":"ja-jp","pt":"pt-br","de":"de-de","fr":"fr-fr","ko":"ko-kr"}')[matrix.language] }}
-          token: ${{ secrets.DOCUBOT_READORG_REPO_WORKFLOW_SCOPES }}
-          path: translation
+          token: ${{ secrets.DOCUBOT_REPO_PAT }}
 
       - uses: ./.github/actions/node-npm-setup
 
@@ -199,7 +185,7 @@ jobs:
         run: .github/actions-scripts/purge-fastly-edge-cache.js
 
       - name: Send Slack notification if workflow fails
-        uses: someimportantcompany/github-actions-slack-message@f8d28715e7b8a4717047d23f48c39827cacad340
+        uses: someimportantcompany/github-actions-slack-message@1d367080235edfa53df415bd8e0bbab480f29bad
         if: failure()
         with:
           channel: ${{ secrets.DOCS_ALERTS_SLACK_CHANNEL_ID }}

.github/workflows/test.yml

@@ -27,8 +27,36 @@ env:
   ENABLE_SEARCH_RESULTS_PAGE: true
 
 jobs:
-  test:
+  figureOutMatrix:
     if: github.repository == 'github/docs-internal' || github.repository == 'github/docs'
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.result }}
+    steps:
+      - uses: actions/github-script@d556feaca394842dc55e4734bf3bb9f685482fa0
+        id: set-matrix
+        with:
+          script: |
+            // We only want to run the 'translations' suite when we know
+            // we're on the private docs-internal repo because only that
+            // one has ability to clone the remote (private) translations
+            // repos.
+            const all = [
+              'content',
+              'graphql',
+              'meta',
+              'rendering',
+              'routing',
+              'unit',
+              'linting',
+            ];
+            if (context.payload.repository.full_name === 'github/docs-internal') {
+              all.push('translations');
+            }
+            return all;
+
+  test:
+    needs: figureOutMatrix
     # Run on ubuntu-20.04-xl if the private repo or ubuntu-latest if the public repo
     # See pull # 17442 in the private repo for context
     runs-on: ${{ fromJSON('["ubuntu-latest", "ubuntu-20.04-xl"]')[github.repository == 'github/docs-internal'] }}
@@ -36,17 +64,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        test-group:
-          [
-            content,
-            graphql,
-            meta,
-            rendering,
-            routing,
-            unit,
-            linting,
-            translations,
-          ]
+        test-group: ${{ fromJSON(needs.figureOutMatrix.outputs.matrix) }}
     steps:
       - name: Install a local Elasticsearch for testing
         # For the sake of saving time, only run this step if the test-group
@@ -92,69 +110,11 @@ jobs:
           .github/actions-scripts/merge-early-access.sh
           rm -fr docs-early-access
 
-      - name: Clone Simplified Chinese
+      - name: Clone all translations
         if: ${{ matrix.test-group == 'translations' }}
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+        uses: ./.github/actions/clone-translations
         with:
-          repository: github/docs-internal.zh-cn
           token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/zh-cn
-
-      - name: Clone Japanese
-        if: ${{ matrix.test-group == 'translations' }}
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.ja-jp
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/ja-jp
-
-      - name: Clone Spanish
-        if: ${{ matrix.test-group == 'translations' }}
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.es-es
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/es-es
-
-      - name: Clone Portuguese
-        if: ${{ matrix.test-group == 'translations' }}
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.pt-br
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/pt-br
-
-      - name: Clone German
-        if: ${{ matrix.test-group == 'translations' }}
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.de-de
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/de-de
-
-      - name: Clone French
-        if: ${{ matrix.test-group == 'translations' }}
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.fr-fr
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/fr-fr
-
-      - name: Clone Russian
-        if: ${{ matrix.test-group == 'translations' }}
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.ru-ru
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/ru-ru
-
-      - name: Clone Korean
-        if: ${{ matrix.test-group == 'translations' }}
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
-        with:
-          repository: github/docs-internal.ko-kr
-          token: ${{ secrets.DOCUBOT_REPO_PAT }}
-          path: translations/ko-kr
 
       - name: Gather files changed
         env:

.github/workflows/translation-health-report.yml

@@ -123,7 +123,7 @@ jobs:
 
       # Emit a notification for the first responder to triage if the workflow failed.
       - name: Send Slack notification if workflow failed
-        uses: someimportantcompany/github-actions-slack-message@f8d28715e7b8a4717047d23f48c39827cacad340
+        uses: someimportantcompany/github-actions-slack-message@1d367080235edfa53df415bd8e0bbab480f29bad
         if: failure()
         with:
           channel: ${{ secrets.DOCS_ALERTS_SLACK_CHANNEL_ID }}

.github/workflows/update-graphql-files.yml

@@ -81,7 +81,7 @@ jobs:
           github-token: ${{ secrets.DOCUBOT_REPO_PAT }}
           number: ${{ steps.create-pull-request.outputs.pull-request-number }}
       - name: Send Slack notification if workflow fails
-        uses: someimportantcompany/github-actions-slack-message@f8d28715e7b8a4717047d23f48c39827cacad340
+        uses: someimportantcompany/github-actions-slack-message@1d367080235edfa53df415bd8e0bbab480f29bad
         if: ${{ failure() && env.FREEZE != 'true' }}
         with:
           channel: ${{ secrets.DOCS_ALERTS_SLACK_CHANNEL_ID }}

components/article/ArticlePage.tsx

@@ -1,10 +1,9 @@
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 
-import { ZapIcon, InfoIcon } from '@primer/octicons-react'
+import { InfoIcon } from '@primer/octicons-react'
 import { Callout } from 'components/ui/Callout'
 
-import { Link } from 'components/Link'
 import { DefaultLayout } from 'components/DefaultLayout'
 import { ArticleTitle } from 'components/article/ArticleTitle'
 import { useArticleContext } from 'components/context/ArticleContext'
@@ -26,26 +25,6 @@ const ClientSideRefresh = dynamic(() => import('components/ClientSideRefresh'),
 })
 const isDev = process.env.NODE_ENV === 'development'
 
-// Mapping of a "normal" article to it's interactive counterpart
-const interactiveAlternatives: Record<string, { href: string }> = {
-  '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces':
-    {
-      href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=nodejs',
-    },
-  '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces':
-    {
-      href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=dotnet',
-    },
-  '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces':
-    {
-      href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=java',
-    },
-  '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces':
-    {
-      href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=py',
-    },
-}
-
 export const ArticlePage = () => {
   const router = useRouter()
   const {
@@ -62,7 +41,6 @@ export const ArticlePage = () => {
     currentLearningTrack,
   } = useArticleContext()
   const { t } = useTranslation('pages')
-  const currentPath = router.asPath.split('?')[0]
 
   const isLearningPath = !!currentLearningTrack?.trackName
 
@@ -109,14 +87,6 @@ export const ArticlePage = () => {
           }
           toc={
             <>
-              {!!interactiveAlternatives[currentPath] && (
-                <div className="flash mb-3">
-                  <ZapIcon className="mr-2" />
-                  <Link href={interactiveAlternatives[currentPath].href}>
-                    Try the new interactive article
-                  </Link>
-                </div>
-              )}
               {isLearningPath && <LearningTrackCard track={currentLearningTrack} />}
               {miniTocItems.length > 1 && <MiniTocs miniTocItems={miniTocItems} />}
             </>

components/context/ArticleContext.tsx

@@ -62,7 +62,7 @@ export const getArticleContextFromRequest = (req: any): ArticleContextT => {
   }
 
   return {
-    title: page.titlePlainText,
+    title: page.title,
     intro: page.intro,
     effectiveDate: page.effectiveDate || '',
     renderedPage: req.context.renderedPage || '',

components/context/AutomatedPageContext.tsx

@@ -28,7 +28,7 @@ export const getAutomatedPageContextFromRequest = (req: any): AutomatedPageConte
   const page = req.context.page
 
   return {
-    title: page.titlePlainText,
+    title: page.title,
     intro: page.intro,
     renderedPage: req.context.renderedPage || '',
     miniTocItems: req.context.miniTocItems || [],

components/context/PlaygroundContext.tsx

@@ -1,88 +0,0 @@
-import React, { createContext, useContext, useState } from 'react'
-import { CodeLanguage, PlaygroundArticleT } from 'components/playground/types'
-import { useRouter } from 'next/router'
-
-import codespacesJsArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/nodejs'
-import codespacesPyArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/python'
-import codespacesNetArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/dotnet'
-import codespacesJavaArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/java'
-
-const articles = [
-  codespacesJsArticle,
-  codespacesPyArticle,
-  codespacesJavaArticle,
-  codespacesNetArticle,
-]
-
-const codeLanguages: Array<CodeLanguage> = [
-  {
-    id: 'nodejs',
-    label: 'Node.js',
-  },
-  {
-    id: 'py',
-    label: 'Python',
-  },
-  {
-    id: 'dotnet',
-    label: 'C#',
-  },
-  {
-    id: 'java',
-    label: 'Java',
-  },
-]
-
-type PlaygroundContextT = {
-  activeSectionIndex: number
-  setActiveSectionIndex: (sectionIndex: number) => void
-  scrollToSection: number | undefined
-  setScrollToSection: (sectionIndex?: number) => void
-  codeLanguages: Array<CodeLanguage>
-  currentLanguage: CodeLanguage
-  article: PlaygroundArticleT | undefined
-}
-
-export const PlaygroundContext = createContext<PlaygroundContextT | null>(null)
-
-export const usePlaygroundContext = (): PlaygroundContextT => {
-  const context = useContext(PlaygroundContext)
-
-  if (!context) {
-    throw new Error('"usePlaygroundContext" may only be used inside "PlaygroundContext.Provider"')
-  }
-
-  return context
-}
-
-export const PlaygroundContextProvider = (props: { children: React.ReactNode }) => {
-  const router = useRouter()
-  const [activeSectionIndex, setActiveSectionIndex] = useState(0)
-  const [scrollToSection, setScrollToSection] = useState<number>()
-  const path = router.asPath.includes('@latest')
-    ? router.asPath.split('?')[0].split('#')[0].split('@latest')[1]
-    : router.asPath.split('?')[0].split('#')[0]
-  const relevantArticles = articles.filter(({ slug }) => slug === path)
-
-  const { langId } = router.query
-  const availableLanguageIds = relevantArticles.map(({ codeLanguageId }) => codeLanguageId)
-  const currentLanguage =
-    codeLanguages.find(({ id }) => id === langId) ||
-    (codeLanguages.find(({ id }) => id === availableLanguageIds[0]) as CodeLanguage)
-
-  const article = relevantArticles.find(
-    ({ codeLanguageId }) => codeLanguageId === currentLanguage?.id
-  )
-
-  const context = {
-    activeSectionIndex,
-    setActiveSectionIndex,
-    scrollToSection,
-    setScrollToSection,
-    currentLanguage,
-    codeLanguages: codeLanguages.filter(({ id }) => availableLanguageIds.includes(id)),
-    article,
-  }
-
-  return <PlaygroundContext.Provider value={context}>{props.children}</PlaygroundContext.Provider>
-}

components/context/TocLandingContext.tsx

@@ -11,7 +11,7 @@ export type TocItem = {
 
 export type TocLandingContextT = {
   title: string
-  introPlainText: string
+  intro: string
   productCallout: string
   tocItems: Array<TocItem>
   variant?: 'compact' | 'expanded'
@@ -34,9 +34,9 @@ export const useTocLandingContext = (): TocLandingContextT => {
 
 export const getTocLandingContextFromRequest = (req: any): TocLandingContextT => {
   return {
-    title: req.context.page.titlePlainText,
+    title: req.context.page.title,
     productCallout: req.context.page.product || '',
-    introPlainText: req.context.page.introPlainText,
+    intro: req.context.page.intro,
     tocItems: (req.context.genericTocFlat || req.context.genericTocNested || []).map((obj: any) =>
       pick(obj, ['fullPath', 'title', 'intro', 'childTocItems'])
     ),

components/guides/ArticleCard.tsx

@@ -17,11 +17,11 @@ export const ArticleCard = ({ tabIndex, card, typeLabel }: Props) => {
       className="d-flex col-12 col-md-4 pr-0 pr-md-6 pr-lg-8"
     >
       <Link className="no-underline d-flex flex-column py-3 border-bottom" href={card.href}>
-        <h3 className="h4 color-fg-default mb-1" dangerouslySetInnerHTML={{ __html: card.title }} />
+        <h3 className="h4 color-fg-default mb-1">{card.title}</h3>
         <div className="h6 text-uppercase" data-testid="article-card-type">
           {typeLabel}
         </div>
-        <p className="color-fg-muted my-3" dangerouslySetInnerHTML={{ __html: card.intro }} />
+        <p className="color-fg-muted my-3">{card.intro}</p>
         {card.topics.length > 0 && (
           <ul style={{ listStyleType: 'none' }}>
             {card.topics.map((topic) => {

components/landing/ArticleList.tsx

@@ -62,29 +62,18 @@ export const ArticleList = ({
                 title={
                   !link.hideIntro && link.intro ? (
                     <h3 className="f4" data-testid="link-with-intro-title">
-                      <span
-                        dangerouslySetInnerHTML={
-                          link.fullTitle ? { __html: link.fullTitle } : { __html: link.title }
-                        }
-                      />
+                      <span>{link.fullTitle ? link.fullTitle : link.title}</span>
                     </h3>
                   ) : (
-                    <span
-                      className="f4 text-bold d-block"
-                      data-testid="link-with-intro-title"
-                      dangerouslySetInnerHTML={
-                        link.fullTitle ? { __html: link.fullTitle } : { __html: link.title }
-                      }
-                    ></span>
+                    <span className="f4 text-bold d-block" data-testid="link-with-intro-title">
+                      {link.fullTitle ? link.fullTitle : link.title}
+                    </span>
                   )
                 }
               >
                 {!link.hideIntro && link.intro && (
                   <TruncateLines as="p" maxLines={2} className="color-fg-muted mb-0 mt-1">
-                    <span
-                      data-testid="link-with-intro-intro"
-                      dangerouslySetInnerHTML={{ __html: link.intro }}
-                    />
+                    <span data-testid="link-with-intro-intro">{link.intro}</span>
                   </TruncateLines>
                 )}
                 {link.date && (

components/landing/CodeExampleCard.tsx

@@ -14,11 +14,8 @@ export const CodeExampleCard = ({ example }: Props) => {
       href={`https://github.com/${example.href}`}
     >
       <div className="p-4">
-        <h3 className="f4" dangerouslySetInnerHTML={{ __html: example.title }} />
-        <p
-          className="mt-2 mb-4 color-fg-muted"
-          dangerouslySetInnerHTML={{ __html: example.description }}
-        />
+        <h3 className="f4">{example.title}</h3>
+        <p className="mt-2 mb-4 color-fg-muted">{example.description}</p>
         <div className="d-flex flex-wrap">
           {example.tags.map((tag) => {
             return (

components/landing/GuideCard.tsx

@@ -13,11 +13,8 @@ export const GuideCard = ({ guide }: Props) => {
         className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-fg-default p-5"
         href={guide.href}
       >
-        <h3 className="f2" dangerouslySetInnerHTML={{ __html: guide.title }} />
-        <p
-          className="mt-2 mb-4 color-fg-muted"
-          dangerouslySetInnerHTML={{ __html: guide.intro || '' }}
-        />
+        <h3 className="f2">{guide.title}</h3>
+        <p className="mt-2 mb-4 color-fg-muted">{guide.intro || ''}</p>
 
         <footer className="d-flex">
           <div>{authorString}</div>

components/landing/TocLanding.tsx

@@ -18,7 +18,7 @@ export const TocLanding = () => {
   const router = useRouter()
   const {
     title,
-    introPlainText,
+    intro,
     tocItems,
     productCallout,
     variant,
@@ -39,7 +39,7 @@ export const TocLanding = () => {
         <ArticleGridLayout>
           <ArticleTitle>{title}</ArticleTitle>
 
-          {introPlainText && <Lead data-search="lead">{introPlainText}</Lead>}
+          {intro && <Lead data-search="lead">{intro}</Lead>}
 
           {productCallout && (
             <Callout variant="success" dangerouslySetInnerHTML={{ __html: productCallout }} />

components/parameter-table/ParameterRow.tsx

@@ -60,11 +60,22 @@ export function ParameterRow({
             )}
           >
             <div>
-              <code className={`text-bold f5`}>{rowParams.name}</code>
-              <span className="color-fg-muted pl-2 f5">{rowParams.type}</span>
-              {rowParams.isRequired ? (
-                <span className="color-fg-attention f5 pl-3">{t('required')}</span>
-              ) : null}
+              {rowParams.name ? (
+                <>
+                  <code className={`text-bold f5`}>{rowParams.name}</code>
+                  <span className="color-fg-muted pl-2 f5">{rowParams.type}</span>
+                  {rowParams.isRequired ? (
+                    <span className="color-fg-attention f5 pl-3">{t('required')}</span>
+                  ) : null}
+                </>
+              ) : (
+                <>
+                  <span className="color-fg-muted pl-1 f5">{rowParams.type}</span>
+                  {rowParams.isRequired ? (
+                    <span className="color-fg-attention f5 pl-3">{t('required')}</span>
+                  ) : null}
+                </>
+              )}
             </div>
 
             <div className={cx('pl-1 f5', `${rowParams.description ? 'pt-2' : 'pt-0'}`)}>

components/playground/CodeLanguagePicker.tsx

@@ -1,27 +0,0 @@
-import { SubNav } from '@primer/react'
-import { Link } from 'components/Link'
-import { useRouter } from 'next/router'
-import { usePlaygroundContext } from 'components/context/PlaygroundContext'
-
-export const CodeLanguagePicker = () => {
-  const router = useRouter()
-  const { codeLanguages, currentLanguage } = usePlaygroundContext()
-  const routePath = router.asPath.split('?')[0]
-
-  return (
-    <SubNav>
-      <SubNav.Links>
-        {codeLanguages.map((language) => (
-          <SubNav.Link
-            key={language.id}
-            as={Link}
-            href={`/${router.locale}${routePath}?langId=${language.id}`}
-            selected={language.id === currentLanguage.id}
-          >
-            {language.label}
-          </SubNav.Link>
-        ))}
-      </SubNav.Links>
-    </SubNav>
-  )
-}

components/playground/PlaygroundArticle.tsx

@@ -1,104 +0,0 @@
-import React from 'react'
-import cx from 'classnames'
-import { CheckIcon, SearchIcon } from '@primer/octicons-react'
-
-import { PlaygroundContentBlock } from './PlaygroundContentBlock'
-
-import { ArticleMarkdown } from 'components/playground/ArticleMarkdown'
-import { getAnchorLink } from 'components/lib/getAnchorLink'
-import { usePlaygroundContext } from 'components/context/PlaygroundContext'
-
-export const PlaygroundArticle = () => {
-  const { article } = usePlaygroundContext()
-
-  if (!article) {
-    return null
-  }
-
-  return (
-    <div>
-      {/* article header */}
-      <div className="border-bottom py-5">
-        <h1>{article.title}</h1>
-        <h2 className="h3 my-3 text-normal text-gray border-bottom-0" data-search="lead">
-          <ArticleMarkdown className="markdown-body">{article.intro}</ArticleMarkdown>
-        </h2>
-
-        {article.prerequisites && (
-          <div className="mt-4 d-flex">
-            <div className="pr-3 mt-1">
-              <Circle className="color-fg-on-emphasis color-bg-emphasis">
-                <CheckIcon className="" size={15} />
-              </Circle>
-            </div>
-
-            <div className="">
-              <h3>Prerequisites</h3>
-              <ArticleMarkdown className="markdown-body playground">
-                {article.prerequisites}
-              </ArticleMarkdown>
-            </div>
-          </div>
-        )}
-
-        {/* toc */}
-        <div className="mt-4 d-flex">
-          <div className="pr-3 mt-1">
-            <Circle className="color-fg-on-emphasis color-bg-emphasis">
-              <SearchIcon className="" size={15} />
-            </Circle>
-          </div>
-
-          <div>
-            <h3>In this Article</h3>
-            <ul className="list-style-none ml-3 mt-2">
-              {article.contentBlocks.map((block) => {
-                if (!block.title || block.type === 'sub-section-2') {
-                  return null
-                }
-                const anchor = getAnchorLink(block.title)
-
-                if (block.type === 'sub-section') {
-                  return (
-                    <li key={anchor} className="pointer ml-4 my-1">
-                      <a href={`#${anchor}`}>{block.title}</a>
-                    </li>
-                  )
-                }
-
-                return (
-                  <li key={anchor} className="pointer text-bold text-blue my-2">
-                    <a href={`#${anchor}`}>{block.title}</a>
-                  </li>
-                )
-              })}
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      {/* body */}
-      {article.contentBlocks.map((block, index) => (
-        <PlaygroundContentBlock
-          key={`section-${index}`}
-          contentBlock={block}
-          sectionIndex={index}
-        />
-      ))}
-
-      {/* spacer for end of article */}
-      <div style={{ minHeight: '75vh' }} />
-    </div>
-  )
-}
-
-const Circle = ({ className, children }: { className?: string; children?: React.ReactNode }) => {
-  return (
-    <div
-      className={cx('circle d-flex flex-justify-center flex-items-center', className)}
-      style={{ width: 24, height: 24 }}
-    >
-      {children}
-    </div>
-  )
-}

components/playground/PlaygroundArticlePage.tsx

@@ -1,94 +0,0 @@
-import { GetServerSideProps } from 'next'
-import { BeakerIcon, ZapIcon } from '@primer/octicons-react'
-
-import { MainContextT, MainContext, getMainContext } from 'components/context/MainContext'
-
-import {
-  PlaygroundContextProvider,
-  usePlaygroundContext,
-} from 'components/context/PlaygroundContext'
-import { PlaygroundArticle } from 'components/playground/PlaygroundArticle'
-
-import { Editor } from 'components/playground/editor/Editor'
-import { DefaultLayout } from 'components/DefaultLayout'
-import { CodeLanguagePicker } from 'components/playground/CodeLanguagePicker'
-import { Link } from 'components/Link'
-import { useRouter } from 'next/router'
-import { Callout } from 'components/ui/Callout'
-import { GenericError } from 'components/GenericError'
-
-type Props = {
-  mainContext: MainContextT
-}
-export default function PlaygroundArticlePage({ mainContext }: Props) {
-  return (
-    <MainContext.Provider value={mainContext}>
-      <DefaultLayout>
-        <PlaygroundContextProvider>
-          <PageInner />
-        </PlaygroundContextProvider>
-      </DefaultLayout>
-    </MainContext.Provider>
-  )
-}
-
-function PageInner() {
-  const router = useRouter()
-  const { article } = usePlaygroundContext()
-
-  if (!article) {
-    return <GenericError />
-  }
-
-  return (
-    <div className="p-responsive my-5 mx-auto" style={{ maxWidth: 1600, minWidth: 768 }}>
-      <div className="d-flex">
-        <article className="col-6 ml-lg-3 mr-3">
-          <Callout variant="info">
-            <p className="d-flex">
-              <span className="mr-3 mt-1">
-                <BeakerIcon size={18} />
-              </span>
-              <span>
-                You've found one of our experimental articles! Have ideas or feedback for how we can
-                further improve this article? Let us know{' '}
-                <Link href="https://github.com/github/docs/discussions/9369" target="_blank">
-                  in the discussion
-                </Link>
-                .
-              </span>
-            </p>
-          </Callout>
-          <PlaygroundArticle />
-        </article>
-
-        <div className="col-6">
-          <div className="fix position-sticky mt-3" style={{ top: '6.5em' }}>
-            <div className="d-flex flex-justify-between flex-items-center mb-3">
-              <CodeLanguagePicker />
-              <div className="flash">
-                <ZapIcon className="mr-2" />
-                <Link href={`/${router.locale}${article.originalArticle}`}>
-                  Switch to non-interactive article
-                </Link>
-              </div>
-            </div>
-
-            <Editor article={article} />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
-  const req = context.req as any
-  const res = context.res as any
-
-  return {
-    props: {
-      mainContext: await getMainContext(req, res),
-    },
-  }
-}

components/playground/PlaygroundContentBlock.tsx

@@ -1,81 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import cx from 'classnames'
-
-import { usePlaygroundContext } from 'components/context/PlaygroundContext'
-import { useOnScreen } from 'components/hooks/useOnScreen'
-import { getAnchorLink } from 'components/lib/getAnchorLink'
-import { ContentBlock } from './types'
-import { ArticleMarkdown } from 'components/playground/ArticleMarkdown'
-
-interface Props {
-  contentBlock: ContentBlock
-  sectionIndex: number
-}
-
-export const PlaygroundContentBlock = ({ sectionIndex, contentBlock }: Props) => {
-  const { activeSectionIndex, setActiveSectionIndex, scrollToSection, setScrollToSection } =
-    usePlaygroundContext()
-  const containerRef = useRef<HTMLDivElement>(null)
-  const isOnScreen = useOnScreen(containerRef, {
-    threshold: 0,
-    rootMargin: '-25% 0px -75% 0px',
-  })
-
-  useEffect(() => {
-    if (isOnScreen) {
-      setActiveSectionIndex(sectionIndex)
-    }
-  }, [isOnScreen])
-
-  useEffect(() => {
-    if (scrollToSection === sectionIndex) {
-      containerRef.current?.scrollIntoView({
-        block: 'start',
-        inline: 'nearest',
-        behavior: 'smooth',
-      })
-      setScrollToSection()
-    }
-  }, [scrollToSection])
-
-  const isActive = sectionIndex === activeSectionIndex
-  const anchorLink = getAnchorLink(contentBlock.title || '')
-  const showDivider = !isActive && activeSectionIndex - 1 !== sectionIndex
-
-  return (
-    <div
-      className={cx(
-        'root p-4',
-        isActive
-          ? 'color-bg-default color-shadow-medium rounded-2 color-border-accent-emphasis'
-          : '',
-        showDivider && 'border-bottom'
-      )}
-      style={{
-        minHeight: contentBlock.title ? '25.1vh' : 'unset',
-        border: '1px solid transparent',
-      }}
-      ref={containerRef}
-      id={anchorLink}
-    >
-      {contentBlock.title && (
-        <h3
-          className={cx(
-            'anchor mb-4',
-            contentBlock.type === 'default' && 'h3',
-            contentBlock.type === 'sub-section' && 'h4'
-          )}
-        >
-          <a className="d-flex color-fg-default" href={`#${anchorLink}`}>
-            {contentBlock.title}
-          </a>
-        </h3>
-      )}
-      <div data-search="article-body">
-        <ArticleMarkdown className="markdown-body playground">
-          {contentBlock.content}
-        </ArticleMarkdown>
-      </div>
-    </div>
-  )
-}

components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/dotnet.tsx

@@ -1,324 +0,0 @@
-import dedent from 'ts-dedent'
-import { PlaygroundArticleT } from 'components/playground/types'
-
-const article: PlaygroundArticleT = {
-  title: 'Add a dev container configuration to your repository',
-  shortTitle: 'C# codespaces',
-  topics: ['Codespaces', 'Developer', 'Organization'],
-  type: 'tutorial',
-  slug: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces',
-  originalArticle:
-    '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces',
-  codeLanguageId: 'dotnet',
-  intro: dedent`
-  This guide shows you how to add a dev container configuration to your repository to define the GitHub Codespaces development environment for your **C# (.NET)** codebase. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)." 
-
-  To work through the instructions in this guide you will use a codespace, in either the Visual Studio Code desktop application or the VS Code web client.
-  
-  These instructions are for C#. If you want to add a dev container configuration for another programming language, click the language button to the right.
- `,
-  prerequisites: dedent`
-    - You should have an existing C# (.NET) project in a repository on GitHub.com. If you don't have a project, you can try this tutorial with the following example: https://github.com/2percentsilk/python-quickstart.
-    - GitHub Codespaces must be enabled for your organization. For more information, see "[Enabling GitHub Codespaces for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)."
-  `,
-  contentBlocks: [
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 1: Open your project in a codespace',
-      content: dedent`
-        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click the plus sign (+).
-
-            ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
-
-            If you don’t see this option, GitHub Codespaces isn't available for your project. See [Access to GitHub Codespaces](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#access-to-codespaces) for more information.
-
-        When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including .NET. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
-
-        You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
-
-        GitHub Codespaces uses a file called \`devcontainer.json\` to configure the development container that you use when you work in a codespace. Each repository can contain one or more  \`devcontainer.json\` files, to give you exactly the development environment you need to work on your code in a codespace.
-
-        On launch, GitHub Codespaces uses a \`devcontainer.json\` file, and any dependent files that make up the dev container configuration, to install tools and runtimes, and perform other setup tasks that the project requires. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 2: Add a dev container configuration to your repository from a template',
-      content: dedent`
-        The default development container, or "dev container," for GitHub Codespaces comes with the latest .NET version and common tools preinstalled. However, we recommend that you configure your own dev container to include all of the tools and scripts that your project needs. This will ensure a fully reproducible environment for all GitHub Codespaces users in your repository.
-
-        To set up your repository to use a custom dev container, you will need to create one or more \`devcontainer.json\` files. You can add these either from a template, in Visual Studio Code, or you can write your own. For more information on dev container configurations, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
-
-        1. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
-
-           ![Codespaces: Add Development Container Configuration Files... in the Command Palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
-
-        2. For this example, click **C# (.NET)**. If you need additional features you can select any container that’s specific to C# (.NET) or a combination of tools such as C# (.NET) and MS SQL.
-
-           ![Select C# (.NET) option from the list](/assets/images/help/codespaces/add-dotnet-prebuilt-container.png)
-
-        3. Click the recommended version of .NET.
-
-           ![.NET version selection](/assets/images/help/codespaces/add-dotnet-version.png)
-
-        4. Accept the default option to add Node.js to your customization.
-
-           ![Add Node.js selection](/assets/images/help/codespaces/dotnet-options.png)
-
-        5. Select any additional features to install and click **OK**.
-        6. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
-           ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
-
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'sub-section',
-      title: 'Anatomy of your dev container',
-      content: dedent`
-      Adding the C# (.NET) dev container template adds a \`.devcontainer\` directory to the root of your project's repository with the following files:
-
-        - \`devcontainer.json\`
-        - Dockerfile
-
-        The newly added \`devcontainer.json\` file defines a few properties that are described below.
-      `,
-    },
-    {
-      type: 'sub-section-2',
-      codeBlock: {
-        id: '0',
-        highlight: 2,
-      },
-      content: dedent`
-        **\`name\`** - You can name your dev container anything, this is just the default.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: [3, 13],
-      },
-      content: dedent`
-        **\`build\`** - The build properties.
-          - **\`dockerfile\`** - In the \`build\` object, \`dockerfile\` contains the path to the Dockerfile that was also added from the template.
-          - **\`args\`**
-            - **\`VARIANT\`**: This file only contains one build argument, which is the .NET Core version that we want to use.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: [16, 18],
-      },
-      content: dedent`
-        **\`settings\`** - These are Visual Studio Code settings that you can set.
-          - **\`terminal.integrated.shell.linux\`** - While bash is the default here, you could use other terminal shells by modifying this.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: [20, 23],
-      },
-      content: dedent`
-        **\`extensions\`** - These are extensions included by default.
-          - **\`ms-dotnettools.csharp\`** - The Microsoft C# extension provides rich support for developing in C#, including features such as IntelliSense, linting, debugging, code navigation, code formatting, refactoring, variable explorer, test explorer, and more.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: 26,
-      },
-      content: dedent`
-        **\`forwardPorts\`** - Any ports listed here will be forwarded automatically.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: 29,
-      },
-      content: dedent`
-      **\`postCreateCommand\`** - Use this to run commands that aren't defined in the Dockerfile, like \`dotnet restore\`, after your codespace is created.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: 32,
-      },
-      content: dedent`
-        **\`remoteUser\`** - By default, you’re running as the vscode user, but you can optionally set this to root.
-      `,
-    },
-    {
-      codeBlock: {
-        id: '1',
-      },
-      type: 'sub-section',
-      title: 'Dockerfile',
-      content: dedent`
-        You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our container.
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-        highlight: [21, 29],
-      },
-      type: 'default',
-      title: 'Step 3: Modify your devcontainer.json file',
-      content: dedent`
-        With your dev container configuration added and a basic understanding of what everything does, you can now make changes to customize your environment further. In this example, you'll add properties to install extensions and your project dependencies when your codespace launches.
-
-        1. In the Explorer, expand the \`.devcontainer\` folder and select the \`devcontainer.json\` file from the tree to open it.
-
-           ![devcontainer.json file in the Explorer](/assets/images/help/codespaces/devcontainers-options.png)
-
-        2. Update your the \`extensions\` list in your \`devcontainer.json\` file to add a few extensions that are useful when working with your project.
-
-           \`\`\`json{:copy}
-           "extensions": [
-               "ms-dotnettools.csharp",
-               "streetsidesoftware.code-spell-checker"
-             ],
-           \`\`\`
-
-         3. Uncomment the \`postCreateCommand\` to restore dependencies as part of the codespace setup process.
-
-            \`\`\`json{:copy}
-            // Use 'postCreateCommand' to run commands after the container is created.
-            "postCreateCommand": "dotnet restore",
-            \`\`\`
-
-        4. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
-
-           ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
-
-           Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
-
-           You may occasionally want to perform a full rebuild to clear your cache and rebuild your container with fresh images. For more information, see "[Performing a full rebuild of a container](/codespaces/codespaces-reference/performing-a-full-rebuild-of-a-container)."
-
-        5. Check your changes were successfully applied by verifying the "Code Spell Checker" extension was installed.
-
-           ![Extensions list](/assets/images/help/codespaces/dotnet-extensions.png)
-
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 4: Run your application',
-      content: dedent`
-      In the previous section, you used the \`postCreateCommand\` to install a set of packages via the \`dotnet restore\` command. With our dependencies now installed, we can run our application.
-
-      1. Run your application by pressing \`F5\` or entering \`dotnet watch run\` in your terminal.
-
-      2. When your project starts, you should see a message in the bottom right corner with a prompt to connect to the port your project uses.
-
-         ![Port forwarding toast](/assets/images/help/codespaces/python-port-forwarding.png)
-
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 5: Commit your changes',
-      content: dedent`
-      Once you've made changes to your codespace, either new code or configuration changes, you'll want to commit your changes. Committing changes to your repository ensures that anyone else who creates a codespace from this repository has the same configuration. This also means that any customization you do, such as adding Visual Studio Code extensions, will appear for all users.
-
-      For information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#committing-your-changes)."
-      `,
-    },
-  ],
-  codeBlocks: {
-    '0': {
-      fileName: '.devcontainer/devcontainer.json',
-      language: 'json',
-      code: dedent`
-      {
-        "name": "C# (.NET)",
-        "build": {
-          "dockerfile": "Dockerfile",
-          "args": {
-            // Update 'VARIANT' to pick a .NET Core version: 2.1, 3.1, 5.0
-            "VARIANT": "5.0",
-            // Options
-            "INSTALL_NODE": "true",
-            "NODE_VERSION": "lts/*",
-            "INSTALL_AZURE_CLI": "false"
-          }
-        },
-
-        // Set *default* container specific settings.json values on container create.
-        "settings": {
-          "terminal.integrated.shell.linux": "/bin/bash"
-        },
-
-        // Add the IDs of extensions you want installed when the container is created.
-        "extensions": [
-          "ms-dotnettools.csharp"
-        ],
-
-        // Use 'forwardPorts' to make a list of ports inside the container available locally.
-        // "forwardPorts": [5000, 5001],
-
-        // Use 'postCreateCommand' to run commands after the container is created.
-        // "postCreateCommand": "dotnet restore",
-
-        // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-        "remoteUser": "vscode"
-      }
-      `,
-    },
-    '1': {
-      fileName: '.devcontainer/Dockerfile',
-      language: 'bash',
-      code: dedent`
-      # [Choice] .NET version: 5.0, 3.1, 2.1
-      ARG VARIANT="5.0"
-      FROM mcr.microsoft.com/vscode/devcontainers/dotnetcore:0-\${VARIANT}
-
-      # [Option] Install Node.js
-      ARG INSTALL_NODE="true"
-      ARG NODE_VERSION="lts/*"
-      RUN if [ "\${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install \${NODE_VERSION} 2>&1"; fi
-
-      # [Option] Install Azure CLI
-      ARG INSTALL_AZURE_CLI="false"
-      COPY library-scripts/azcli-debian.sh /tmp/library-scripts/
-      RUN if [ "$INSTALL_AZURE_CLI" = "true" ]; then bash /tmp/library-scripts/azcli-debian.sh; fi \
-          && apt-get clean -y && rm -rf /var/lib/apt/lists/* /tmp/library-scripts
-
-      # [Optional] Uncomment this section to install additional OS packages.
-      # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-      #     && apt-get -y install --no-install-recommends <your-package-list-here>
-
-      # [Optional] Uncomment this line to install global node packages.
-      # RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
-      `,
-    },
-  },
-}
-
-export default article

components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/java.tsx

@@ -1,312 +0,0 @@
-import dedent from 'ts-dedent'
-import { PlaygroundArticleT } from 'components/playground/types'
-
-const article: PlaygroundArticleT = {
-  title: 'Add a dev container configuration to your repository',
-  shortTitle: 'Java codespaces',
-  topics: ['Codespaces', 'Developer', 'Organization', 'Java'],
-  type: 'tutorial',
-  slug: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces',
-  originalArticle:
-    '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces',
-  codeLanguageId: 'java',
-  intro: dedent`
-  This guide shows you how to add a dev container configuration to your repository to define the GitHub Codespaces development environment for your **Java** codebase. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)." 
-  
-  To work through the instructions in this guide you will use a codespace, in either the Visual Studio Code desktop application or the VS Code web client.
-  
-  These instructions are for Java. If you want to add a dev container configuration for another programming language, click the language button to the right.
-  `,
-  prerequisites: dedent`
-  - You should have an existing Java project in a repository on GitHub.com. If you don't have a project, you can try this tutorial with the following example: https://github.com/microsoft/vscode-remote-try-java
-  - GitHub Codespaces must be enabled for your organization. For more information, see "[Enabling GitHub Codespaces for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)."
-  `,
-  contentBlocks: [
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 1: Open your project in a codespace',
-      content: dedent`
-        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click the plus sign (+).
-
-            ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
-
-           If you don’t see this option, GitHub Codespaces isn't available for your project. See [Access to GitHub Codespaces](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#access-to-codespaces) for more information.
-
-        When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Java, nvm, npm, and yarn. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
-        
-        GitHub Codespaces uses a file called \`devcontainer.json\` to configure the development container that you use when you work in a codespace. Each repository can contain one or more  \`devcontainer.json\` files, to give you exactly the development environment you need to work on your code in a codespace. 
-        
-        On launch, GitHub Codespaces uses a \`devcontainer.json\` file, and any dependent files that make up the dev container configuration, to install tools and runtimes, and perform other setup tasks that the project requires. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 2: Add a dev container configuration to your repository from a template',
-      content: dedent`
-        The default development container, or "dev container," for GitHub Codespaces comes with the latest Java version, package managers (Maven, Gradle), and other common tools preinstalled. However, we recommend that you configure your own dev container to include all of the tools and scripts that your project needs. This will ensure a fully reproducible environment for all GitHub Codespaces users in your repository.
-
-        To set up your repository to use a custom dev container, you will need to create one or more \`devcontainer.json\` files. You can add these either from a template, in Visual Studio Code, or you can write your own. For more information on dev container configurations, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
-
-        1. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
-        
-           !["Codespaces: Add Development Container Configuration Files..." in the Command Palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
-           
-        2. For this example, click **Java**. In practice, you could select any container that’s specific to Java or a combination of tools such as Java and Azure Functions.
-        
-           ![Select Java option from the list](/assets/images/help/codespaces/add-java-prebuilt-container.png)
-           
-        3. Click the recommended version of Java.
-        
-           ![Java version selection](/assets/images/help/codespaces/add-java-version.png)
-           
-        4. Select any additional features to install and click **OK**.
-        5. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
-        
-           ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
-           
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'sub-section',
-      title: 'Anatomy of your dev container',
-      content: dedent`
-        Adding the Java dev container template adds a .devcontainer directory to the root of your project's repository with the following files:
-
-        - \`devcontainer.json\`
-        - Dockerfile
-
-        The newly added \`devcontainer.json\` file defines a few properties that are described below.
-      `,
-    },
-    {
-      type: 'sub-section-2',
-      codeBlock: {
-        id: '0',
-        highlight: 4,
-      },
-      content: dedent`
-        **\`name\`** - You can name your dev container anything, this is just the default.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: [5, 16],
-      },
-      content: dedent`
-        **\`build\`** - The build properties.
-          - **\`dockerfile\`** - In the \`build\` object, \`dockerfile\` contains the path to the Dockerfile that was also added from the template.
-          - **\`args\`**
-            - **\`VARIANT\`**: This file only contains one build argument, which is the Java version that is passed into the Dockerfile.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: [19, 23],
-      },
-      content: dedent`
-        **\`settings\`** - These are Visual Studio Code settings that you can set.
-          - **\`terminal.integrated.shell.linux\`** - While bash is the default here, you could use other terminal shells by modifying this.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: [26, 28],
-      },
-      content: dedent`
-        **\`extensions\`** - These are extensions included by default.
-          - **\`vscjava.vscode-java-pack\`** - The Java Extension Pack provides popular extensions for Java development to get you started.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: 31,
-      },
-      content: dedent`
-        **\`forwardPorts\`** - Any ports listed here will be forwarded automatically.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: 34,
-      },
-      content: dedent`
-        **\`postCreateCommand\`** - Use this to run commands that aren't defined in the Dockerfile, after your codespace is created.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: 37,
-      },
-      content: dedent`
-        **\`remoteUser\`** - By default, you’re running as the vscode user, but you can optionally set this to root.
-      `,
-    },
-    {
-      codeBlock: {
-        id: '1',
-      },
-      type: 'sub-section',
-      title: 'Dockerfile',
-      content: dedent`
-        You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our container.
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-        highlight: [30, 34],
-      },
-      type: 'default',
-      title: 'Step 3: Modify your devcontainer.json file',
-      content: dedent`
-        With your dev container configuration added and a basic understanding of what everything does, you can now make changes to customize your environment further. In this example, you'll add properties to install extensions and your project dependencies when your codespace launches.
-
-        1. In the Explorer, expand the \`.devcontainer\` folder and select the \`devcontainer.json\` file from the tree to open it.
-
-           ![devcontainer.json file in the Explorer](/assets/images/help/codespaces/devcontainers-options.png)
-
-        2. Add the following lines to your \`devcontainer.json\` file after \`extensions\`.
-
-           \`\`\`json{:copy}
-           "postCreateCommand": "java -version",
-           "forwardPorts": [4000],
-           \`\`\`
-         
-           For more information about \`devcontainer.json\` properties, see the Visual Studio Code documentation: "[devcontainer.json reference](https://code.visualstudio.com/docs/remote/devcontainerjson-reference)."
-
-        4. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
-        
-           ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
-           
-           Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
-
-           You may occasionally want to perform a full rebuild to clear your cache and rebuild your container with fresh images. For more information, see "[Performing a full rebuild of a container](/codespaces/codespaces-reference/performing-a-full-rebuild-of-a-container)."
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 4: Run your application',
-      content: dedent`
-      In the previous section, you used the \`postCreateCommand\` to install a set of packages via npm. You can now use this to run our application with npm.
-
-      1. Run your application by pressing \`F5\`.
-      
-      2. When your project starts, you should see a message in the bottom right corner with a prompt to connect to the port your project uses.
-        ![Port forwarding toast](/assets/images/help/codespaces/codespaces-port-toast.png)
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 5: Commit your changes',
-      content: dedent`
-      Once you've made changes to your codespace, either new code or configuration changes, you'll want to commit your changes. Committing changes to your repository ensures that anyone else who creates a codespace from this repository has the same configuration. This also means that any customization you do, such as adding Visual Studio Code extensions, will appear for all users.
-
-      For information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#committing-your-changes)."
-      `,
-    },
-  ],
-  codeBlocks: {
-    '0': {
-      fileName: '.devcontainer/devcontainer.json',
-      language: 'json',
-      code: dedent`
-      // For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
-      // https://github.com/microsoft/vscode-dev-containers/tree/v0.159.0/containers/java
-      {
-        "name": "Java",
-        "build": {
-          "dockerfile": "Dockerfile",
-          "args": {
-            // Update the VARIANT arg to pick a Java version: 11, 14
-            "VARIANT": "11",
-            // Options
-            "INSTALL_MAVEN": "true",
-            "INSTALL_GRADLE": "false",
-            "INSTALL_NODE": "false",
-            "NODE_VERSION": "lts/*"
-          }
-        },
-      
-        // Set *default* container specific settings.json values on container create.
-        "settings": {
-          "terminal.integrated.shell.linux": "/bin/bash",
-          "java.home": "/docker-java-home",
-          "maven.executable.path": "/usr/local/sdkman/candidates/maven/current/bin/mvn"
-        },
-      
-        // Add the IDs of extensions you want installed when the container is created.
-        "extensions": [
-          "vscjava.vscode-java-pack"
-        ],
-      
-        // Use 'forwardPorts' to make a list of ports inside the container available locally.
-        // "forwardPorts": [],
-      
-        // Use 'postCreateCommand' to run commands after the container is created.
-        // "postCreateCommand": "java -version",
-      
-        // Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
-        "remoteUser": "vscode"
-      }    
-      `,
-    },
-    '1': {
-      fileName: '.devcontainer/Dockerfile',
-      language: 'bash',
-      code: dedent`
-      # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.159.0/containers/java/.devcontainer/base.Dockerfile
-      ARG VARIANT="14"
-      FROM mcr.microsoft.com/vscode/devcontainers/java:0-\${VARIANT}
-      
-      # [Optional] Install Maven or Gradle
-      ARG INSTALL_MAVEN="false"
-      ARG MAVEN_VERSION=3.6.3
-      ARG INSTALL_GRADLE="false"
-      ARG GRADLE_VERSION=5.4.1
-      RUN if [ "\${INSTALL_MAVEN}" = "true" ]; then su vscode -c "source /usr/local/sdkman/bin/sdkman-init.sh && sdk install maven \"\${MAVEN_VERSION}\""; fi \
-          && if [ "\${INSTALL_GRADLE}" = "true" ]; then su vscode -c "source /usr/local/sdkman/bin/sdkman-init.sh && sdk install gradle \"\${GRADLE_VERSION}\""; fi
-      
-      # [Optional] Install a version of Node.js using nvm for front end dev
-      ARG INSTALL_NODE="true"
-      ARG NODE_VERSION="lts/*"
-      RUN if [ "\${INSTALL_NODE}" = "true" ]; then su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install \${NODE_VERSION} 2>&1"; fi
-      
-      # [Optional] Uncomment this section to install additional OS packages.
-      # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-      #     && apt-get -y install --no-install-recommends <your-package-list-here>
-      
-      # [Optional] Uncomment this line to install global node packages.
-      # RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
-      `,
-    },
-  },
-}
-
-export default article

components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/nodejs.tsx

@@ -1,295 +0,0 @@
-import dedent from 'ts-dedent'
-import { PlaygroundArticleT } from 'components/playground/types'
-
-const article: PlaygroundArticleT = {
-  title: 'Add a dev container configuration to your repository',
-  shortTitle: 'Node.js codespaces',
-  topics: ['Codespaces', 'Developer', 'Organization', 'Node', 'JavaScript'],
-  type: 'tutorial',
-  slug: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces',
-  originalArticle:
-    '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces',
-  codeLanguageId: 'nodejs',
-  intro: dedent`
-  This guide shows you how to add a dev container configuration to your repository to define the GitHub Codespaces development environment for your **Node.js** codebase. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)." 
-  
-  To work through the instructions in this guide you will use a codespace, in either the Visual Studio Code desktop application or the VS Code web client.
-  
-  These instructions are for Node.js. If you want to add a dev container configuration for another programming language, click the language button to the right.
-  `,
-  prerequisites: dedent`
-    - You should have an existing JavaScript, Node.js, or TypeScript project in a repository on GitHub.com. If you don't have a project, you can try this tutorial with the following example: https://github.com/microsoft/vscode-remote-try-node
-    - GitHub Codespaces must be enabled for your organization. For more information, see "[Enabling GitHub Codespaces for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)."
-  `,
-  contentBlocks: [
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 1: Open your project in a codespace',
-      content: dedent`
-        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click the plus sign (+).
-
-           ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
-
-           If you don’t see this option, GitHub Codespaces isn't available for your project. See [Access to GitHub Codespaces](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#access-to-codespaces) for more information.
-
-        When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Node.js, JavaScript, Typescript, nvm, npm, and yarn. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
-
-        You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
-
-        GitHub Codespaces uses a file called \`devcontainer.json\` to configure the development container that you use when you work in a codespace. Each repository can contain one or more  \`devcontainer.json\` files, to give you exactly the development environment you need to work on your code in a codespace. On launch, GitHub Codespaces uses a \`devcontainer.json\` file, and any dependent files that make up the dev container configuration, to install tools and runtimes, and perform other setup tasks that the project requires. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 2: Add a dev container configuration to your repository from a template',
-      content: dedent`
-        The default development container, or "dev container," for GitHub Codespaces supports running Node.js projects like [vscode-remote-try-node](https://github.com/microsoft/vscode-remote-try-node) out of the box. However, we recommend that you configure your own dev container to include all of the tools and scripts your project needs. This will ensure a fully reproducible environment for all GitHub Codespaces users in your repository.
-
-        To set up your repository to use a custom dev container, you will need to create one or more \`devcontainer.json\` files. You can add these either from a template, in Visual Studio Code, or you can write your own. For more information on dev container configurations, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
-
-        1. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
-
-           !["Codespaces: Add Development Container Configuration Files..." in the Command Palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
-
-        2. For this example, click **Node.js**.  If you need additional features you can select any container that’s specific to Node or a combination of tools such as Node and MongoDB.
-
-           ![Select Node option from the list](/assets/images/help/codespaces/add-node-prebuilt-container.png)
-
-        3. Click the recommended version of Node.js.
-
-           ![Node.js version selection](/assets/images/help/codespaces/add-node-version.png)
-
-        4. Select any additional features to install and click **OK**.
-        5. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
-
-           ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
-
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'sub-section',
-      title: 'Anatomy of your dev container',
-      content: dedent`
-        Adding the Node.js dev container template adds a \`.devcontainer\` directory to the root of your project's repository with the following files:
-
-        - \`devcontainer.json\`
-        - Dockerfile
-
-        The newly added \`devcontainer.json\` file defines a few properties that are described below.
-      `,
-    },
-    {
-      type: 'sub-section-2',
-      codeBlock: {
-        id: '0',
-        highlight: 4,
-      },
-      content: dedent`
-        **\`name\`** - You can name your dev container anything, this is just the default.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: [5, 9],
-      },
-      content: dedent`
-        **\`build\`** - The build properties.
-          - **\`dockerfile\`** - In the \`build\` object, \`dockerfile\` contains the path to the Dockerfile that was also added from the template.
-          - **\`args\`**
-            - **\`VARIANT\`**: This file only contains one build argument, which is the node variant we want to use that is passed into the Dockerfile.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: [12, 14],
-      },
-      content: dedent`
-        **\`settings\`** - These are Visual Studio Code settings that you can set.
-          - **\`terminal.integrated.shell.linux\`** - While bash is the default here, you could use other terminal shells by modifying this.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: [17, 19],
-      },
-      content: dedent`
-        **\`extensions\`** - These are extensions included by default.
-          - **\`dbaeumer.vscode-eslint\`** - ES lint is a great extension for linting, but for JavaScript there are a number of great Marketplace extensions you could also include.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: 22,
-      },
-      content: dedent`
-        **\`forwardPorts\`** - Any ports listed here will be forwarded automatically.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: 25,
-      },
-      content: dedent`
-        **\`postCreateCommand\`** - Use this to run commands that aren't defined in the Dockerfile, after your codespace is created.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: 28,
-      },
-      content: dedent`
-        **\`remoteUser\`** - By default, you’re running as the vscode user, but you can optionally set this to root.
-      `,
-    },
-    {
-      codeBlock: {
-        id: '1',
-      },
-      type: 'sub-section',
-      title: 'Dockerfile',
-      content: dedent`
-        You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our container.
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-        highlight: [21, 25],
-      },
-      type: 'default',
-      title: 'Step 3: Modify your devcontainer.json file',
-      content: dedent`
-        With your dev container configuration added and a basic understanding of what everything does, you can now make changes to customize your environment further. In this example, you'll add properties to install npm when your codespace launches and make a list of ports inside the container available locally.
-
-        1. In the Explorer, select the \`devcontainer.json\` file from the tree to open it. You might have to expand the \`.devcontainer\` folder to see it.
-
-           ![devcontainer.json file in the Explorer](/assets/images/help/codespaces/devcontainers-options.png)
-
-        2. Add the following lines to your \`devcontainer.json\` file after \`extensions\`:
-
-            \`\`\`js{:copy}
-            "postCreateCommand": "npm install",
-            "forwardPorts": [4000],
-            \`\`\`
-            For more information about \`devcontainer.json\` properties, see the Visual Studio Code documentation: "[devcontainer.json reference](https://code.visualstudio.com/docs/remote/devcontainerjson-reference)."
-
-        3. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
-
-           ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
-
-           Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
-
-           You may occasionally want to perform a full rebuild to clear your cache and rebuild your container with fresh images. For more information, see "[Performing a full rebuild of a container](/codespaces/codespaces-reference/performing-a-full-rebuild-of-a-container)."
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 4: Run your application',
-      content: dedent`
-        In the previous section, you used the \`postCreateCommand\` to installing a set of packages via npm. You can now use this to run our application with npm.
-
-        1. Run your start command in the terminal with \`npm start\`.
-
-            ![npm start in terminal](/assets/images/help/codespaces/codespaces-npmstart.png)
-
-        2. When your project starts, you should see a message in the bottom right corner with a prompt to connect to the port your project uses.
-
-            ![Port forwarding toast](/assets/images/help/codespaces/codespaces-port-toast.png)
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 5: Commit your changes',
-      content: dedent`
-      Once you've made changes to your codespace, either new code or configuration changes, you'll want to commit your changes. Committing changes to your repository ensures that anyone else who creates a codespace from this repository has the same configuration. This also means that any customization you do, such as adding Visual Studio Code extensions, will appear for all users.
-
-      For information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#committing-your-changes)."
-      `,
-    },
-  ],
-  codeBlocks: {
-    '0': {
-      fileName: '.devcontainer/devcontainer.json',
-      language: 'json',
-      code: dedent`
-        // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
-        // https://github.com/microsoft/vscode-dev-containers/tree/v0.162.0/containers/javascript-node
-        {
-          "name": "Node.js",
-          "build": {
-            "dockerfile": "Dockerfile",
-            // Update 'VARIANT' to pick a Node version: 10, 12, 14
-            "args": { "VARIANT": "14" }
-          },
-
-          // Set *default* container specific settings.json values on container create.
-          "settings": {
-            "terminal.integrated.shell.linux": "/bin/bash"
-          },
-
-          // Add the IDs of extensions you want installed when the container is created.
-          "extensions": [
-            "dbaeumer.vscode-eslint"
-          ],
-
-          // Use 'forwardPorts' to make a list of ports inside the container available locally.
-          // "forwardPorts": [],
-
-          // Use 'postCreateCommand' to run commands after the container is created.
-          // "postCreateCommand": "yarn install",
-
-          // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-          "remoteUser": "node"
-        }
-      `,
-    },
-    '1': {
-      fileName: '.devcontainer/Dockerfile',
-      language: 'bash',
-      code: dedent`
-        # [Choice] Node.js version: 14, 12, 10
-        ARG VARIANT="14-buster"
-        FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-\${VARIANT}
-        
-        # [Optional] Uncomment this section to install additional OS packages.
-        # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive && apt-get -y install --no-install-recommends <your-package-list-here>
-        
-        # [Optional] Uncomment if you want to install an additional version of node using nvm
-        # ARG EXTRA_NODE_VERSION=10
-        # RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install \${EXTRA_NODE_VERSION}"
-        
-        # [Optional] Uncomment if you want to install more global node modules
-        # RUN su node -c "npm install -g <your-package-list-here>"
-      `,
-    },
-  },
-}
-
-export default article

components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/python.tsx

@@ -1,336 +0,0 @@
-import dedent from 'ts-dedent'
-import { PlaygroundArticleT } from 'components/playground/types'
-
-const article: PlaygroundArticleT = {
-  title: 'Add a dev container configuration to your repository',
-  shortTitle: 'Python codespaces',
-  topics: ['Codespaces', 'Developer', 'Organization', 'Python'],
-  type: 'tutorial',
-  slug: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces',
-  originalArticle:
-    '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces',
-  codeLanguageId: 'py',
-  intro: dedent`
-  This guide shows you how to add a dev container configuration to your repository to define the GitHub Codespaces development environment for your **Python** codebase. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)." 
-  
-  To work through the instructions in this guide you will use a codespace, in either the Visual Studio Code desktop application or the VS Code web client.
-  
-  These instructions are for Python. If you want to add a dev container configuration for another programming language, click the language button to the right.
-  `,
-  prerequisites: dedent`
-    - You should have an existing Python project in a repository on GitHub.com. If you don't have a project, you can try this tutorial with the following example: https://github.com/2percentsilk/python-quickstart.
-    - GitHub Codespaces must be enabled for your organization. For more information, see "[Enabling GitHub Codespaces for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)."
-  `,
-  contentBlocks: [
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 1: Open your project in a codespace',
-      content: dedent`
-        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click the plus sign (+).
-
-           ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
-
-           If you don’t see this option, GitHub Codespaces isn't available for your project. See [Access to GitHub Codespaces](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#access-to-codespaces) for more information.
-
-        When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Python, pip, and Miniconda. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
-
-        You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
-
-        GitHub Codespaces uses a file called \`devcontainer.json\` to configure the development container that you use when you work in a codespace. Each repository can contain one or more  \`devcontainer.json\` files, to give you exactly the development environment you need to work on your code in a codespace. 
-        
-        On launch, GitHub Codespaces uses a \`devcontainer.json\` file, and any dependent files that make up the dev container configuration, to install tools and runtimes, and perform other setup tasks that the project requires. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 2: Add a dev container configuration to your repository from a template',
-      content: dedent`
-        The default development container, or "dev container," for GitHub Codespaces comes with the latest Python version, package managers (pip, Miniconda), and other common tools preinstalled. However, we recommend that you configure your own dev container to include all of the tools and scripts that your project needs. This will ensure a fully reproducible environment for all GitHub Codespaces users in your repository.
-
-        To set up your repository to use a custom dev container, you will need to create one or more \`devcontainer.json\` files. You can add these either from a template, in Visual Studio Code, or you can write your own. For more information on dev container configurations, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
-
-        1. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
-
-           !["Codespaces: Add Development Container Configuration Files..." in the Command Palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
-
-        2. For this example, click **Python 3**. If you need additional features you can select any container that’s specific to Python or a combination of tools such as Python 3 and PostgreSQL.
-
-           ![Select Python option from the list](/assets/images/help/codespaces/add-python-prebuilt-container.png)
-
-        3. Click the recommended version of Python.
-
-           ![Python version selection](/assets/images/help/codespaces/add-python-version.png)
-
-        4. Accept the default option to add Node.js to your customization.
-
-           ![Add Node.js selection](/assets/images/help/codespaces/add-nodejs-selection.png)
-
-        5. Select any additional features to install and click **OK**.
-        6. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
-
-           ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
-
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'sub-section',
-      title: 'Anatomy of your dev container',
-      content: dedent`
-        Adding the Python dev container template adds a .devcontainer directory to the root of your project's repository with the following files:
-
-        - \`devcontainer.json\`
-        - Dockerfile
-
-        The newly added \`devcontainer.json\` file defines a few properties that are described below.
-      `,
-    },
-    {
-      type: 'sub-section-2',
-      codeBlock: {
-        id: '0',
-        highlight: 2,
-      },
-      content: dedent`
-        **\`name\`** - You can name your dev container anything, this is just the default.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: [3, 12],
-      },
-      content: dedent`
-        **\`build\`** - The build properties.
-          - **\`dockerfile\`** - In the \`build\` object, \`dockerfile\` contains the path to the Dockerfile that was also added from the template.
-          - **\`args\`**
-            - **\`VARIANT\`**: This is the node variant we want to use that is passed into the Dockerfile.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: [16, 30],
-      },
-      content: dedent`
-        **\`settings\`** - These are Visual Studio Code settings that you can set.
-          - **\`terminal.integrated.shell.linux\`** - While bash is the default here, you could use other terminal shells by modifying this.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: [33, 35],
-      },
-      content: dedent`
-        **\`extensions\`** - These are extensions included by default.
-          - **\`ms-python.python\`** - The Microsoft Python extension provides rich support for the Python language (for all actively supported versions of the language: >=3.6), including features such as IntelliSense, linting, debugging, code navigation, code formatting, refactoring, variable explorer, test explorer, and more.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: 38,
-      },
-      content: dedent`
-        **\`forwardPorts\`** - Any ports listed here will be forwarded automatically.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: 41,
-      },
-      content: dedent`
-        **\`postCreateCommand\`** - Use this to run commands that aren't defined in the Dockerfile, like \`pip3 install -r requirements\`, after your codespace is created.
-      `,
-    },
-    {
-      type: 'sub-section',
-      codeBlock: {
-        id: '0',
-        highlight: 44,
-      },
-      content: dedent`
-        **\`remoteUser\`** - By default, you’re running as the vscode user, but you can optionally set this to root.
-      `,
-    },
-    {
-      codeBlock: {
-        id: '1',
-      },
-      type: 'sub-section',
-      title: 'Dockerfile',
-      content: dedent`
-        You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our container.
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-        highlight: [32, 41],
-      },
-      type: 'default',
-      title: 'Step 3: Modify your devcontainer.json file',
-      content: dedent`
-        With your dev container configuration added and a basic understanding of what everything does, you can now make changes to customize your environment further. In this example, you'll add properties to install extensions and your project dependencies when your codespace launches.
-
-        1. In the Explorer, expand the \`.devcontainer\` folder and select the \`devcontainer.json\` file from the tree to open it.
-
-           ![devcontainer.json file in the Explorer](/assets/images/help/codespaces/devcontainers-options.png)
-
-        2. Update the extensions list in your \`devcontainer.json\` file to add a few extensions that are useful when working with your project.
-
-           \`\`\`json{:copy}
-           "extensions": [
-               "ms-python.python",
-               "cstrap.flask-snippets",
-               "streetsidesoftware.code-spell-checker"
-             ],
-           \`\`\`
-
-        3. Uncomment the \`postCreateCommand\` to auto-install requirements as part of the codespaces setup process.
-
-           \`\`\`json{:copy}
-           // Use 'postCreateCommand' to run commands after the container is created.
-           "postCreateCommand": "pip3 install --user -r requirements.txt",
-           \`\`\`
-
-        4. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
-          
-            ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
-          
-             Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
-
-             You may occasionally want to perform a full rebuild to clear your cache and rebuild your container with fresh images. For more information, see "[Performing a full rebuild of a container](/codespaces/codespaces-reference/performing-a-full-rebuild-of-a-container)."
-
-        5. Check your changes were successfully applied by verifying the Code Spell Checker and Flask Snippet extensions were installed.
-
-           ![Extensions list](/assets/images/help/codespaces/python-extensions.png)
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 4: Run your application',
-      content: dedent`
-        In the previous section, you used the \`postCreateCommand\` to install a set of packages with pip3. With your dependencies now installed, you can run your application.
-
-        1. Run your application by pressing F5 or entering \`python -m flask run\` in the codespace terminal.
-
-        2. When your project starts, you should see a message in the bottom right corner with a prompt to connect to the port your project uses.
-
-           ![Port forwarding toast](/assets/images/help/codespaces/python-port-forwarding.png)
-      `,
-    },
-    {
-      codeBlock: {
-        id: '0',
-      },
-      type: 'default',
-      title: 'Step 5: Commit your changes',
-      content: dedent`
-      Once you've made changes to your codespace, either new code or configuration changes, you'll want to commit your changes. Committing changes to your repository ensures that anyone else who creates a codespace from this repository has the same configuration. This also means that any customization you do, such as adding Visual Studio Code extensions, will appear for all users.
-
-      For information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#committing-your-changes)."
-      `,
-    },
-  ],
-  codeBlocks: {
-    '0': {
-      fileName: '.devcontainer/devcontainer.json',
-      language: 'json',
-      code: dedent`
-      {
-        "name": "Python 3",
-        "build": {
-          "dockerfile": "Dockerfile",
-          "context": "..",
-          "args": {
-            // Update 'VARIANT' to pick a Python version: 3, 3.6, 3.7, 3.8, 3.9
-            "VARIANT": "3",
-            // Options
-            "INSTALL_NODE": "true",
-            "NODE_VERSION": "lts/*"
-          }
-        },
-      
-        // Set *default* container specific settings.json values on container create.
-        "settings": {
-          "terminal.integrated.shell.linux": "/bin/bash",
-          "python.pythonPath": "/usr/local/bin/python",
-          "python.linting.enabled": true,
-          "python.linting.pylintEnabled": true,
-          "python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
-          "python.formatting.blackPath": "/usr/local/py-utils/bin/black",
-          "python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
-          "python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
-          "python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
-          "python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
-          "python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
-          "python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
-          "python.linting.pylintPath": "/usr/local/py-utils/bin/pylint"
-        },
-      
-        // Add the IDs of extensions you want installed when the container is created.
-        "extensions": [
-          "ms-python.python"
-        ],
-      
-        // Use 'forwardPorts' to make a list of ports inside the container available locally.
-        // "forwardPorts": [],
-      
-        // Use 'postCreateCommand' to run commands after the container is created.
-        // "postCreateCommand": "pip3 install --user -r requirements.txt",
-      
-        // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-        "remoteUser": "vscode"
-      }      
-      `,
-    },
-    '1': {
-      fileName: '.devcontainer/Dockerfile',
-      language: 'bash',
-      code: dedent`
-      # [Choice] Python version: 3, 3.9, 3.8, 3.7, 3.6
-      ARG VARIANT="3"
-      FROM mcr.microsoft.com/vscode/devcontainers/python:0-\${VARIANT}
-      
-      # [Option] Install Node.js
-      ARG INSTALL_NODE="true"
-      ARG NODE_VERSION="lts/*"
-      RUN if [ "\${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install \${NODE_VERSION} 2>&1"; fi
-      
-      # [Optional] If your pip requirements rarely change, uncomment this section to add them to the image.
-      # COPY requirements.txt /tmp/pip-tmp/
-      # RUN pip3 --disable-pip-version-check --no-cache-dir install -r /tmp/pip-tmp/requirements.txt \
-      #    && rm -rf /tmp/pip-tmp
-      
-      # [Optional] Uncomment this section to install additional OS packages.
-      # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-      #     && apt-get -y install --no-install-recommends <your-package-list-here>
-      
-      # [Optional] Uncomment this line to install global node packages.
-      # RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
-      
-      `,
-    },
-  },
-}
-
-export default article

components/playground/editor/Editor.tsx

@@ -1,118 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import cx from 'classnames'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { vs, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
-
-import { usePlaygroundContext } from 'components/context/PlaygroundContext'
-import { LoadingIndicator } from './LoadingIndicator'
-import { ActionBar } from './ActionBar'
-
-import { CodeBlockRef, PlaygroundArticleT } from '../types'
-import { useTheme } from '@primer/react'
-
-const getNormalizedHighlight = (
-  highlight: Exclude<CodeBlockRef['highlight'], undefined>
-): Array<[number, number]> => {
-  if (typeof highlight === 'number') {
-    return [[highlight, highlight]]
-  } else if (typeof highlight[0] === 'number') {
-    return [highlight as [number, number]]
-  } else {
-    return highlight as Array<[number, number]>
-  }
-}
-interface Props {
-  article: PlaygroundArticleT
-}
-
-export const Editor: React.FC<Props> = ({ article }) => {
-  const theme = useTheme()
-
-  const [isEditorReady, setIsEditorReady] = useState(false)
-  const [selectedFileIndex, setSelectedFileIndex] = useState(0)
-
-  const { activeSectionIndex } = usePlaygroundContext()
-  const normalizedHighlight = getNormalizedHighlight(
-    article.contentBlocks[activeSectionIndex]?.codeBlock.highlight || []
-  )
-
-  useEffect(() => {
-    // Some buffer to load the theme, otherwise it flashes the light theme momentarily
-    const timeout = setTimeout(() => {
-      setIsEditorReady(true)
-    }, 250)
-
-    return () => {
-      clearTimeout(timeout)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (selectedFileIndex !== 0) {
-      setSelectedFileIndex(0)
-    }
-  }, [activeSectionIndex])
-
-  // find the set of files we want displayed in the editor
-  const codeBlockId = article.contentBlocks[activeSectionIndex].codeBlock.id
-
-  let editorFiles = article.codeBlocks[codeBlockId]
-  if (!Array.isArray(editorFiles)) {
-    editorFiles = [editorFiles]
-  }
-  let activeFile = editorFiles[selectedFileIndex]
-  if (!activeFile) {
-    activeFile = editorFiles[0]
-  }
-
-  return (
-    <div className="mx-auto">
-      <div className="text-mono">
-        <ActionBar code={activeFile.code} />
-
-        <div className="d-flex flex-items-center px-3 border-left border-right">
-          {editorFiles.map((file, i) => {
-            return (
-              <button
-                key={file.fileName}
-                className={cx('btn-link Link--secondary no-underline mr-2 f6 py-2 px-3', {
-                  'color-bg-subtle': i === selectedFileIndex,
-                })}
-                onClick={() => setSelectedFileIndex(i)}
-              >
-                {file.fileName}
-              </button>
-            )
-          })}
-        </div>
-
-        <div className="border">
-          {isEditorReady ? (
-            <SyntaxHighlighter
-              style={theme.resolvedColorMode === 'night' ? vscDarkPlus : vs}
-              language={activeFile.language}
-              PreTag="div"
-              customStyle={{ margin: '0', padding: '1rem 0', border: 0 }}
-              showLineNumbers={true}
-              wrapLines={true}
-              lineProps={(lineNumber) => {
-                let className = ''
-                for (const highlight of normalizedHighlight) {
-                  if (lineNumber >= highlight[0] && lineNumber <= highlight[1]) {
-                    className = 'color-bg-accent'
-                  }
-                }
-                return { style: { display: 'block' }, className }
-              }}
-              lineNumberStyle={{ minWidth: '3.25em' }}
-            >
-              {activeFile.code}
-            </SyntaxHighlighter>
-          ) : (
-            <LoadingIndicator />
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

components/playground/types.ts

@@ -1,33 +0,0 @@
-export interface CodeBlockRef {
-  id: string
-  highlight?: Array<[number, number]> | number | [number, number]
-}
-export interface ContentBlock {
-  title?: string
-  type: 'default' | 'sub-section' | 'sub-section-2'
-  content: string
-  codeBlock: CodeBlockRef
-}
-export interface CodeBlock {
-  fileName: string
-  language: string
-  code: string
-}
-export interface PlaygroundArticleT {
-  title: string
-  shortTitle: string
-  topics: Array<string>
-  intro: string
-  slug: string
-  originalArticle: string
-  type: 'tutorial'
-  prerequisites?: string
-  codeLanguageId: string
-  contentBlocks: Array<ContentBlock>
-  codeBlocks: Record<string, CodeBlock | Array<CodeBlock>>
-}
-
-export interface CodeLanguage {
-  id: string
-  label: string
-}

components/search/SearchResults.tsx

@@ -139,7 +139,7 @@ function ResultsPagination({ page, totalPages }: { page: number; totalPages: num
   return (
     <Box borderRadius={2} p={2}>
       <Pagination
-        pageCount={totalPages}
+        pageCount={Math.min(totalPages, 10)}
         currentPage={page}
         hrefBuilder={hrefBuilder}
         onPageChange={(event, page) => {

content/README.md

@@ -227,7 +227,7 @@ defaultPlatform: linux
 
 ### `defaultTool`
 
-- Purpose: Override the initial tool selection for a page, where the 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). For more information about the tool selector, see [Markup reference for GitHub Docs](../contributing/content-markup-reference.md#tool-tags). If this frontmatter is omitted, then the tool-specific content matching the GitHub web UI is shown by default. If a user has indicated a tool preference (by clicking on a tool tab), then the user's preference will be applied instead of the default value.
+- Purpose: Override the initial tool selection for a page, where the 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. For more information about the tool selector, see [Markup reference for GitHub Docs](../contributing/content-markup-reference.md#tool-tags). If this frontmatter is omitted, then the tool-specific content matching the GitHub web UI is shown by default. If a user has indicated a tool preference (by clicking on a tool tab), then the user's preference will be applied instead of the default value.
 - Type: `String`, one of: `webui`, `cli`, `desktop`, `curl`, `codespaces`, `vscode`, `importer_cli`, `graphql`, `powershell`, `bash`, `javascript`.
 - Optional.
 

content/account-and-profile/index.md

@@ -6,21 +6,21 @@ introLinks:
   quickstart: /get-started/onboarding/getting-started-with-your-github-account
 featuredLinks:
   guides:
-    - /account-and-profile/setting-up-and-managing-your-github-user-account/managing-user-account-settings/changing-your-github-username
-    - '{% ifversion ghae %}/account-and-profile/setting-up-and-managing-your-github-user-account/managing-user-account-settings/about-your-personal-dashboard{% endif %}'
+    - /account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-personal-account-settings/changing-your-github-username
+    - '{% ifversion ghae %}/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-personal-account-settings/about-your-personal-dashboard{% endif %}'
     - /account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme
     - '{% ifversion ghae %}/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile{% endif %}'
     - /account-and-profile/managing-subscriptions-and-notifications-on-github/setting-up-notifications/about-notifications
   popular:
-    - /account-and-profile/setting-up-and-managing-your-github-user-account/managing-user-account-settings/managing-your-theme-settings
-    - /account-and-profile/setting-up-and-managing-your-github-user-account/managing-email-preferences/setting-your-commit-email-address
-    - /account-and-profile/setting-up-and-managing-your-github-user-account/managing-access-to-your-personal-repositories/inviting-collaborators-to-a-personal-repository
+    - /account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-personal-account-settings/managing-your-theme-settings
+    - /account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-email-preferences/setting-your-commit-email-address
+    - /account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-access-to-your-personal-repositories/inviting-collaborators-to-a-personal-repository
     - /account-and-profile/managing-subscriptions-and-notifications-on-github/setting-up-notifications/configuring-notifications
   guideCards:
     - /account-and-profile/setting-up-and-managing-your-github-profile/managing-contribution-settings-on-your-profile/why-are-my-contributions-not-showing-up-on-my-profile
     - /account-and-profile/managing-subscriptions-and-notifications-on-github/viewing-and-triaging-notifications/managing-notifications-from-your-inbox
-    - /account-and-profile/setting-up-and-managing-your-github-user-account/managing-email-preferences/blocking-command-line-pushes-that-expose-your-personal-email-address
-    - '{% ifversion ghes or ghae %}/account-and-profile/setting-up-and-managing-your-github-user-account/managing-user-account-settings/managing-the-default-branch-name-for-your-repositories{% endif %}'
+    - /account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-email-preferences/blocking-command-line-pushes-that-expose-your-personal-email-address
+    - '{% ifversion ghes or ghae %}/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-personal-account-settings/managing-the-default-branch-name-for-your-repositories{% endif %}'
 changelog:
   label: 'profiles, github-themes, notifications'
   versions:
@@ -41,4 +41,3 @@ children:
   - /setting-up-and-managing-your-github-profile
   - /managing-subscriptions-and-notifications-on-github
 ---
-

content/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/about-your-organizations-profile.md

@@ -19,7 +19,7 @@ shortTitle: Organization's profile
 You can optionally choose to add a description, location, website, and email address for your organization, and pin important repositories.{% ifversion fpt or ghec or ghes > 3.3 %} You can customize your organization's public profile by adding a README.md file. For more information, see "[Customizing your organization's profile](/organizations/collaborating-with-groups-in-organizations/customizing-your-organizations-profile)."{% endif %}
 
 {% ifversion fpt %}
-Organizations that use {% data variables.product.prodname_ghe_cloud %} can confirm their organization's identity and display a "Verified" badge on their organization's profile page by verifying the organization's domains with {% data variables.product.product_name %}. For more information, see "[Verifying or approving a domain for your organization](/organizations/managing-organization-settings/verifying-or-approving-a-domain-for-your-organization)" in the {% data variables.product.prodname_ghe_cloud %} documenatation.
+Organizations that use {% data variables.product.prodname_ghe_cloud %} can confirm their organization's identity and display a "Verified" badge on their organization's profile page by verifying the organization's domains with {% data variables.product.product_name %}. For more information, see "[Verifying or approving a domain for your organization](/organizations/managing-organization-settings/verifying-or-approving-a-domain-for-your-organization)" in the {% data variables.product.prodname_ghe_cloud %} documentation.
 {% elsif ghec or ghes %}
 To confirm your organization's identity and display a "Verified" badge on your organization profile page, you can verify your organization's domains with {% data variables.product.prodname_dotcom %}. For more information, see "[Verifying or approving a domain for your organization](/organizations/managing-organization-settings/verifying-or-approving-a-domain-for-your-organization)."
 {% endif %}

content/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-your-personal-account/index.md

@@ -14,6 +14,7 @@ children:
   - /merging-multiple-personal-accounts
   - /converting-a-user-into-an-organization
   - /best-practices-for-leaving-your-company
+  - /unlinking-your-email-address-from-a-locked-account
   - /deleting-your-personal-account
 ---