Merge branch 'github:main' into main

Author: Zedai00

.devcontainer/devcontainer.json

@@ -21,15 +21,16 @@
 		"davidanson.vscode-markdownlint",
 		"bierner.markdown-preview-github-styles",
 		"yzhang.markdown-all-in-one",
-		"streetsidesoftware.code-spell-checker"
+		"streetsidesoftware.code-spell-checker",
+		"hubwriter.open-reusable"
 	],
 
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
 	"forwardPorts": [4000],
 
 	// Use 'postCreateCommand' to run commands after the container is created.
-	 "postCreateCommand": "npm ci && npm run build",
-
+	"postCreateCommand": "npm ci && npm run build",
+		 
 	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
 	"remoteUser": "node"
 }

.github/actions-scripts/fr-add-docs-reviewers-requests.js

@@ -120,7 +120,7 @@ async function run() {
   const featureID = findFieldID('Feature', data)
   const contributorTypeID = findFieldID('Contributor type', data)
   const sizeTypeID = findFieldID('Size', data)
-  const authorID = findFieldID('Author', data)
+  const authorID = findFieldID('Contributor', data)
 
   // Get the ID of the single select values that we want to set
   const readyForReviewID = findSingleSelectID('Ready for review', 'Status', data)

.github/actions-scripts/ready-for-docs-review.js

@@ -60,7 +60,7 @@ async function run() {
   const featureID = findFieldID('Feature', data)
   const contributorTypeID = findFieldID('Contributor type', data)
   const sizeTypeID = findFieldID('Size', data)
-  const authorID = findFieldID('Author', data)
+  const authorID = findFieldID('Contributor', data)
 
   // Get the ID of the single select values that we want to set
   const readyForReviewID = findSingleSelectID('Ready for review', 'Status', data)

.vscode/open-reusable-1.3.0.vsix

@@ -2,4 +2,6 @@
   "files.exclude": {
     "**/translations": true
   }
-}
+  "workbench.editor.enablePreview": false,
+  "workbench.editor.enablePreviewFromQuickOpen": false  
+}

.vscode/settings.json

@@ -24,6 +24,22 @@ const interactiveAlternatives: Record<string, { href: string }> = {
   '/actions/automating-builds-and-tests/building-and-testing-python': {
     href: '/actions/automating-builds-and-tests/building-and-testing-nodejs-or-python?langId=python',
   },
+  '/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 = () => {

assets/images/help/images/reusable-workflows-ci-cd.png

@@ -2,14 +2,21 @@ import React, { createContext, useContext, useState } from 'react'
 import { CodeLanguage, PlaygroundArticleT } from 'components/playground/types'
 import { useRouter } from 'next/router'
 
-import jsArticle from 'components/playground/content/building-and-testing/nodejs'
-import pyArticle from 'components/playground/content/building-and-testing/python'
+import actionsJsArticle from 'components/playground/content/actions/guides/building-and-testing-nodejs-or-python/nodejs'
+import actionsPyArticle from 'components/playground/content/actions/guides/building-and-testing-nodejs-or-python/python'
+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 = [jsArticle, pyArticle]
-const articlesByLangId = articles.reduce((obj, item) => {
-  obj[item.codeLanguageId] = item
-  return obj
-}, {} as Record<string, PlaygroundArticleT | undefined>)
+const articles = [
+  actionsJsArticle,
+  actionsPyArticle,
+  codespacesJsArticle,
+  codespacesPyArticle,
+  codespacesJavaArticle,
+  codespacesNetArticle,
+]
 
 const codeLanguages: Array<CodeLanguage> = [
   {
@@ -20,6 +27,14 @@ const codeLanguages: Array<CodeLanguage> = [
     id: 'py',
     label: 'Python',
   },
+  {
+    id: 'dotnet',
+    label: 'C#',
+  },
+  {
+    id: 'java',
+    label: 'Java',
+  },
 ]
 
 type PlaygroundContextT = {
@@ -48,19 +63,26 @@ export const PlaygroundContextProvider = (props: { children: React.ReactNode })
   const router = useRouter()
   const [activeSectionIndex, setActiveSectionIndex] = useState(0)
   const [scrollToSection, setScrollToSection] = useState<number>()
+  const path = router.asPath.split('?')[0]
+  const relevantArticles = articles.filter(({ slug }) => slug === path)
+
   const { langId } = router.query
-  const currentLanguage = codeLanguages.find(({ id }) => id === langId) || codeLanguages[0]
-  const availableLanguages = codeLanguages.filter(({ id }) => !!articlesByLangId[id])
+  const availableLanguageIds = relevantArticles.map(({ codeLanguageId }) => codeLanguageId)
+  const currentLanguage =
+    codeLanguages.find(({ id }) => id === langId) ||
+    (codeLanguages.find(({ id }) => id === availableLanguageIds[0]) as CodeLanguage)
 
-  const article = articlesByLangId[currentLanguage.id]
+  const article = relevantArticles.find(
+    ({ codeLanguageId }) => codeLanguageId === currentLanguage?.id
+  )
 
   const context = {
     activeSectionIndex,
     setActiveSectionIndex,
     scrollToSection,
     setScrollToSection,
     currentLanguage,
-    codeLanguages: availableLanguages,
+    codeLanguages: codeLanguages.filter(({ id }) => availableLanguageIds.includes(id)),
     article,
   }
 

assets/images/help/projects/unsaved-changes.png

@@ -0,0 +1,94 @@
+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 variant="tabs" />
+              <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: getMainContext(req, res),
+    },
+  }
+}