Skip to content

Commit c3bc538

Browse files
timeyoutakeittimeyoutakeit
authored
Add 2 pane layout to "Setting up Codespaces" docs and update IA (#21700)
1 parent cfa19c1 commit c3bc538

49 files changed

Lines changed: 1408 additions & 1196 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎components/article/ArticlePage.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,22 @@ const interactiveAlternatives: Record<string, { href: string }> = {
2424
'/actions/automating-builds-and-tests/building-and-testing-python': {
2525
href: '/actions/automating-builds-and-tests/building-and-testing-nodejs-or-python?langId=python',
2626
},
27+
'/codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces':
28+
{
29+
href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=nodejs',
30+
},
31+
'/codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces':
32+
{
33+
href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=dotnet',
34+
},
35+
'/codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces':
36+
{
37+
href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=java',
38+
},
39+
'/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces':
40+
{
41+
href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=py',
42+
},
2743
}
2844

2945
export const ArticlePage = () => {

‎components/context/PlaygroundContext.tsx‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,21 @@ import React, { createContext, useContext, useState } from 'react'
22
import { CodeLanguage, PlaygroundArticleT } from 'components/playground/types'
33
import { useRouter } from 'next/router'
44

5-
import jsArticle from 'components/playground/content/building-and-testing/nodejs'
6-
import pyArticle from 'components/playground/content/building-and-testing/python'
5+
import actionsJsArticle from 'components/playground/content/actions/guides/building-and-testing-nodejs-or-python/nodejs'
6+
import actionsPyArticle from 'components/playground/content/actions/guides/building-and-testing-nodejs-or-python/python'
7+
import codespacesJsArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/nodejs'
8+
import codespacesPyArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/python'
9+
import codespacesNetArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/dotnet'
10+
import codespacesJavaArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/java'
711

8-
const articles = [jsArticle, pyArticle]
9-
const articlesByLangId = articles.reduce((obj, item) => {
10-
obj[item.codeLanguageId] = item
11-
return obj
12-
}, {} as Record<string, PlaygroundArticleT | undefined>)
12+
const articles = [
13+
actionsJsArticle,
14+
actionsPyArticle,
15+
codespacesJsArticle,
16+
codespacesPyArticle,
17+
codespacesJavaArticle,
18+
codespacesNetArticle,
19+
]
1320

1421
const codeLanguages: Array<CodeLanguage> = [
1522
{
@@ -20,6 +27,14 @@ const codeLanguages: Array<CodeLanguage> = [
2027
id: 'py',
2128
label: 'Python',
2229
},
30+
{
31+
id: 'dotnet',
32+
label: 'C#',
33+
},
34+
{
35+
id: 'java',
36+
label: 'Java',
37+
},
2338
]
2439

2540
type PlaygroundContextT = {
@@ -48,19 +63,26 @@ export const PlaygroundContextProvider = (props: { children: React.ReactNode })
4863
const router = useRouter()
4964
const [activeSectionIndex, setActiveSectionIndex] = useState(0)
5065
const [scrollToSection, setScrollToSection] = useState<number>()
66+
const path = router.asPath.split('?')[0]
67+
const relevantArticles = articles.filter(({ slug }) => slug === path)
68+
5169
const { langId } = router.query
52-
const currentLanguage = codeLanguages.find(({ id }) => id === langId) || codeLanguages[0]
53-
const availableLanguages = codeLanguages.filter(({ id }) => !!articlesByLangId[id])
70+
const availableLanguageIds = relevantArticles.map(({ codeLanguageId }) => codeLanguageId)
71+
const currentLanguage =
72+
codeLanguages.find(({ id }) => id === langId) ||
73+
(codeLanguages.find(({ id }) => id === availableLanguageIds[0]) as CodeLanguage)
5474

55-
const article = articlesByLangId[currentLanguage.id]
75+
const article = relevantArticles.find(
76+
({ codeLanguageId }) => codeLanguageId === currentLanguage?.id
77+
)
5678

5779
const context = {
5880
activeSectionIndex,
5981
setActiveSectionIndex,
6082
scrollToSection,
6183
setScrollToSection,
6284
currentLanguage,
63-
codeLanguages: availableLanguages,
85+
codeLanguages: codeLanguages.filter(({ id }) => availableLanguageIds.includes(id)),
6486
article,
6587
}
6688

‎components/playground/PlaygroundArticlePage.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { GetServerSideProps } from 'next'
2+
import { BeakerIcon, ZapIcon } from '@primer/octicons-react'
3+
4+
import { MainContextT, MainContext, getMainContext } from 'components/context/MainContext'
5+
6+
import {
7+
PlaygroundContextProvider,
8+
usePlaygroundContext,
9+
} from 'components/context/PlaygroundContext'
10+
import { PlaygroundArticle } from 'components/playground/PlaygroundArticle'
11+
12+
import { Editor } from 'components/playground/editor/Editor'
13+
import { DefaultLayout } from 'components/DefaultLayout'
14+
import { CodeLanguagePicker } from 'components/playground/CodeLanguagePicker'
15+
import { Link } from 'components/Link'
16+
import { useRouter } from 'next/router'
17+
import { Callout } from 'components/ui/Callout'
18+
import { GenericError } from 'components/GenericError'
19+
20+
type Props = {
21+
mainContext: MainContextT
22+
}
23+
export default function PlaygroundArticlePage({ mainContext }: Props) {
24+
return (
25+
<MainContext.Provider value={mainContext}>
26+
<DefaultLayout>
27+
<PlaygroundContextProvider>
28+
<PageInner />
29+
</PlaygroundContextProvider>
30+
</DefaultLayout>
31+
</MainContext.Provider>
32+
)
33+
}
34+
35+
function PageInner() {
36+
const router = useRouter()
37+
const { article } = usePlaygroundContext()
38+
39+
if (!article) {
40+
return <GenericError />
41+
}
42+
43+
return (
44+
<div className="p-responsive my-5 mx-auto" style={{ maxWidth: 1600, minWidth: 768 }}>
45+
<div className="d-flex">
46+
<article className="col-6 ml-lg-3 mr-3">
47+
<Callout variant="info">
48+
<p className="d-flex">
49+
<span className="mr-3 mt-1">
50+
<BeakerIcon size={18} />
51+
</span>
52+
<span>
53+
You've found one of our experimental articles! Have ideas or feedback for how we can
54+
further improve this article? Let us know{' '}
55+
<Link href="https://github.com/github/docs/discussions/9369" target="_blank">
56+
in the discussion
57+
</Link>
58+
.
59+
</span>
60+
</p>
61+
</Callout>
62+
<PlaygroundArticle />
63+
</article>
64+
65+
<div className="col-6">
66+
<div className="fix position-sticky mt-3" style={{ top: '6.5em' }}>
67+
<div className="d-flex flex-justify-between flex-items-center mb-3">
68+
<CodeLanguagePicker variant="tabs" />
69+
<div className="flash">
70+
<ZapIcon className="mr-2" />
71+
<Link href={`/${router.locale}${article.originalArticle}`}>
72+
Switch to non-interactive article
73+
</Link>
74+
</div>
75+
</div>
76+
77+
<Editor article={article} />
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
)
83+
}
84+
85+
export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
86+
const req = context.req as any
87+
const res = context.res as any
88+
89+
return {
90+
props: {
91+
mainContext: getMainContext(req, res),
92+
},
93+
}
94+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const article: PlaygroundArticleT = {
66
shortTitle: 'Build & test Node.js',
77
topics: ['CI', 'Node', 'JavaScript'],
88
type: 'tutorial',
9-
slug: 'building-and-testing-nodejs',
9+
slug: '/actions/automating-builds-and-tests/building-and-testing-nodejs-or-python',
1010
originalArticle: '/actions/automating-builds-and-tests/building-and-testing-nodejs',
1111
codeLanguageId: 'nodejs',
1212
intro: dedent`

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const article: PlaygroundArticleT = {
66
shortTitle: 'Build & test Python',
77
topics: ['CI', 'Python'],
88
type: 'tutorial',
9-
slug: 'building-and-testing-python',
9+
slug: '/actions/automating-builds-and-tests/building-and-testing-nodejs-or-python',
1010
originalArticle: '/actions/automating-builds-and-tests/building-and-testing-python',
1111
codeLanguageId: 'py',
1212
intro: dedent`

0 commit comments

Comments
 (0)