Add 2 pane layout to "Setting up Codespaces" docs and update IA (gith…

…ub#21700)

components/article/ArticlePage.tsx

@@ -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 = () => {

components/context/PlaygroundContext.tsx

@@ -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,
   }
 

components/playground/PlaygroundArticlePage.tsx

@@ -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),
+    },
+  }
+}

components/playground/content/building-and-testing/nodejs.tsx → components/playground/content/actions/guides/building-and-testing-nodejs-or-python/nodejs.tsx

@@ -6,7 +6,7 @@ const article: PlaygroundArticleT = {
   shortTitle: 'Build & test Node.js',
   topics: ['CI', 'Node', 'JavaScript'],
   type: 'tutorial',
-  slug: 'building-and-testing-nodejs',
+  slug: '/actions/automating-builds-and-tests/building-and-testing-nodejs-or-python',
   originalArticle: '/actions/automating-builds-and-tests/building-and-testing-nodejs',
   codeLanguageId: 'nodejs',
   intro: dedent`

components/playground/content/building-and-testing/python.tsx → components/playground/content/actions/guides/building-and-testing-nodejs-or-python/python.tsx

@@ -6,7 +6,7 @@ const article: PlaygroundArticleT = {
   shortTitle: 'Build & test Python',
   topics: ['CI', 'Python'],
   type: 'tutorial',
-  slug: 'building-and-testing-python',
+  slug: '/actions/automating-builds-and-tests/building-and-testing-nodejs-or-python',
   originalArticle: '/actions/automating-builds-and-tests/building-and-testing-python',
   codeLanguageId: 'py',
   intro: dedent`