Merge branch 'main' into update-deployments-dashboard

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

components/DefaultLayout.tsx

@@ -1,7 +1,7 @@
 import Head from 'next/head'
 
 // import { Sidebar } from 'components/Sidebar'
-// import { Header } from 'components/Header'
+import { Header } from 'components/Header'
 import { SmallFooter } from 'components/SmallFooter'
 import { ScrollButton } from 'components/ScrollButton'
 import { SupportSection } from 'components/SupportSection'
@@ -21,7 +21,7 @@ export const DefaultLayout = (props: Props) => {
       {/* <Sidebar /> */}
 
       <main className="width-full">
-        {/* <Header /> */}
+        <Header />
         <DeprecationBanner />
 
         {props.children}

components/Header.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react'
+import Link from 'next/link'
+import cx from 'classnames'
+import { css } from 'styled-components'
+import { useRouter } from 'next/router'
+import { ChevronDownIcon, MarkGithubIcon, ThreeBarsIcon, XIcon } from '@primer/octicons-react'
+import { ButtonOutline } from '@primer/components'
+
+import { useMainContext } from './context/MainContext'
+import { LanguagePicker } from './LanguagePicker'
+import { HeaderNotifications } from 'components/HeaderNotifications'
+import { MobileProductDropdown } from 'components/MobileProductDropdown'
+import { useTranslation } from 'components/hooks/useTranslation'
+
+export const Header = () => {
+  const router = useRouter()
+  const { currentProduct, relativePath, error } = useMainContext()
+  const { t } = useTranslation(['header', 'homepage'])
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  return (
+    <div className="border-bottom color-border-secondary no-print">
+      {error !== '404' && <HeaderNotifications />}
+
+      <header className="container-xl px-3 px-md-6 pt-3 pb-2 position-relative d-flex flex-justify-between width-full">
+        <div
+          className="d-flex flex-items-center d-lg-none"
+          style={{ zIndex: 3 }}
+          id="github-logo-mobile"
+          role="banner"
+        >
+          <Link href={`/${router.locale}`}>
+            <a aria-hidden="true" tabIndex={-1}>
+              <MarkGithubIcon size={32} className="color-icon-primary" />
+            </a>
+          </Link>
+
+          <Link href={`/${router.locale}`}>
+            <a className="h4-mktg color-text-primary no-underline no-wrap pl-2">
+              {t('github_docs')}
+            </a>
+          </Link>
+        </div>
+
+        <div className="width-full">
+          <div className="d-inline-block width-full d-md-flex" style={{ zIndex: 1 }}>
+            <div className="float-right d-md-none position-relative" style={{ zIndex: 3 }}>
+              <ButtonOutline css onClick={() => setIsMenuOpen(!isMenuOpen)}>
+                {isMenuOpen ? <XIcon size="small" /> : <ThreeBarsIcon size="small" />}
+              </ButtonOutline>
+            </div>
+            <div
+              style={{ zIndex: 2 }}
+              className={cx('nav-mobile-dropdown width-full', isMenuOpen && 'js-open')}
+            >
+              <div className="d-md-flex flex-justify-between flex-items-center">
+                <div className="py-2 py-md-0 d-md-inline-block">
+                  <h4 className="text-mono f5 text-normal color-text-secondary d-md-none">
+                    {t('explore_by_product')}
+                  </h4>
+                  <details className="dropdown-withArrow position-relative details details-reset d-md-none close-when-clicked-outside">
+                    <summary
+                      className="nav-desktop-productDropdownButton color-text-link py-2"
+                      role="button"
+                      aria-label="Toggle products list"
+                    >
+                      <div
+                        id="current-product"
+                        className="d-flex flex-items-center flex-justify-between"
+                        style={{ paddingTop: 2 }}
+                      >
+                        {/* <!-- Product switcher - GitHub.com, Enterprise Server, etc -->
+                    <!-- 404 and 500 error layouts are not real pages so we need to hardcode the name for those --> */}
+                        {currentProduct.name}
+                        <ChevronDownIcon size={24} className="arrow ml-md-1" />
+                      </div>
+                    </summary>
+
+                    <MobileProductDropdown />
+                  </details>
+                </div>
+
+                {/* <!-- Versions picker that only appears in the header on landing pages --> */}
+                {/* {% include header-version-switcher %} */}
+
+                <div className="d-md-inline-block">
+                  {/* <!-- Language picker - 'English', 'Japanese', etc --> */}
+                  <div className="border-top border-md-top-0 py-2 py-md-0 d-md-inline-block">
+                    <LanguagePicker />
+                  </div>
+
+                  {/* <!-- GitHub.com homepage and 404 page has a stylized search; Enterprise homepages do not --> */}
+                  {relativePath !== 'index.md' && error !== '404'}
+                  <div
+                    className="pt-3 pt-md-0 d-md-inline-block ml-md-3 border-top border-md-top-0"
+                    dangerouslySetInnerHTML={{
+                      __html: `
+                    <div id="search-input-container" aria-hidden="true"></div>
+                    <div id="search-results-container"></div>
+                    <div class="search-overlay-desktop"></div>
+                  `,
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+    </div>
+  )
+}

components/HeaderNotifications.tsx

@@ -0,0 +1,89 @@
+import { useRouter } from 'next/router'
+import cx from 'classnames'
+
+import { useMainContext } from 'components/context/MainContext'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { ExcludesNull } from 'components/lib/ExcludesNull'
+import { useVersion } from './hooks/useVersion'
+
+enum NotificationType {
+  RELEASE = 'RELEASE',
+  TRANSLATION = 'TRANSLATION',
+  EARLY_ACCESS = 'EARLY_ACCESS',
+}
+
+type Notif = {
+  content: string
+  type: NotificationType
+}
+export const HeaderNotifications = () => {
+  const router = useRouter()
+  const { currentVersion } = useVersion()
+  const { relativePath, allVersions, data, languages, currentLanguage } = useMainContext()
+  const { t } = useTranslation('header')
+
+  const translationNotices: Array<Notif> = []
+  if (router.locale !== 'en') {
+    if (relativePath?.includes('/site-policy')) {
+      translationNotices.push({
+        type: NotificationType.TRANSLATION,
+        content: data.reusables.policies.translation,
+      })
+    } else if (languages[currentLanguage].wip !== true) {
+      translationNotices.push({
+        type: NotificationType.TRANSLATION,
+        content: t('notices.localization_complete'),
+      })
+    } else if (languages[currentLanguage].wip) {
+      translationNotices.push({
+        type: NotificationType.TRANSLATION,
+        content: t('notices.localization_in_progress'),
+      })
+    }
+  }
+
+  const releaseNotices: Array<Notif> = []
+  if (currentVersion === 'github-ae@latest') {
+    releaseNotices.push({
+      type: NotificationType.RELEASE,
+      content: t('notices.ghae_silent_launch'),
+    })
+  } else if (currentVersion === data.variables.release_candidate.version) {
+    releaseNotices.push({
+      type: NotificationType.RELEASE,
+      content: `${allVersions[currentVersion].versionTitle}${t('notices.release_candidate')}`,
+    })
+  }
+
+  const allNotifications: Array<Notif> = [
+    ...translationNotices,
+    ...releaseNotices,
+    // ONEOFF EARLY ACCESS NOTICE
+    (relativePath || '').includes('early-access/')
+      ? {
+          type: NotificationType.EARLY_ACCESS,
+          content: t('notices.early_access'),
+        }
+      : null,
+  ].filter(ExcludesNull)
+
+  return (
+    <>
+      {allNotifications.map(({ type, content }, i) => {
+        const isLast = i !== allNotifications.length - 1
+        return (
+          <div
+            className={cx(
+              'header-notifications text-center f5 color-text-primary py-4 px-6',
+              type === NotificationType.TRANSLATION && 'translation_notice color-bg-info',
+              type === NotificationType.RELEASE && 'release_notice color-bg-info',
+              type === NotificationType.EARLY_ACCESS && 'early_access color-bg-danger',
+              !isLast && 'border-bottom color-border-tertiary'
+            )}
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+        )
+      })}
+    </>
+  )
+}

components/LanguagePicker.tsx

@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Dropdown } from '@primer/components'
+import { useMainContext } from './context/MainContext'
+
+export const LanguagePicker = () => {
+  const router = useRouter()
+  const { languages } = useMainContext()
+  const locale = router.locale || 'en'
+  const langs = Object.values(languages)
+  const selectedLang = languages[locale]
+
+  return (
+    <div className="ml-4 d-flex flex-justify-center flex-items-center">
+      <Dropdown css>
+        <summary>
+          {selectedLang.nativeName || selectedLang.name}
+          <Dropdown.Caret />
+        </summary>
+        <Dropdown.Menu direction="sw">
+          {langs.map((lang) => {
+            return (
+              <Dropdown.Item key={lang.code}>
+                <Link href={router.asPath} locale={lang.hreflang}>
+                  <a>
+                    {lang.nativeName ? (
+                      <>
+                        {lang.nativeName} ({lang.name})
+                      </>
+                    ) : (
+                      lang.name
+                    )}
+                  </a>
+                </Link>
+              </Dropdown.Item>
+            )
+          })}
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  )
+}

components/MobileProductDropdown.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { LinkExternalIcon } from '@primer/octicons-react'
+import cx from 'classnames'
+
+import { useMainContext } from 'components/context/MainContext'
+
+export const MobileProductDropdown = () => {
+  const router = useRouter()
+  const { activeProducts, currentProduct } = useMainContext()
+
+  return (
+    <div
+      id="homepages"
+      className="position-md-absolute nav-desktop-productDropdown p-md-4 left-md-n4 top-md-6"
+      style={{ zIndex: 6 }}
+    >
+      {activeProducts.map((product) => {
+        return (
+          <Link
+            key={product.id}
+            href={`${product.external ? '' : `/${router.locale}`}${product.href}`}
+          >
+            <a
+              className={cx(
+                'd-block py-2',
+                product.id === currentProduct.id
+                  ? 'color-text-link text-underline active'
+                  : 'Link--primary no-underline'
+              )}
+            >
+              {product.name}
+              {product.external && (
+                <span className="ml-1">
+                  <LinkExternalIcon size="small" />
+                </span>
+              )}
+            </a>
+          </Link>
+        )
+      })}
+    </div>
+  )
+}

components/TruncateLines.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode, ReactHTML } from 'react'
+import cx from 'classnames'
+
+type Props = {
+  as?: keyof ReactHTML
+  maxLines: number
+  children: ReactNode
+  className?: string
+}
+export const TruncateLines = (props: Props) => {
+  const Component = props.as || 'div'
+  return (
+    <Component className={cx('root', props.className)}>
+      {props.children}
+      <style jsx>{`
+        .root {
+          display: -webkit-box;
+          -webkit-line-clamp: ${props.maxLines};
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      `}</style>
+    </Component>
+  )
+}

components/VersionPicker.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Dropdown } from '@primer/components'
+import { useMainContext } from './context/MainContext'
+import { useVersion } from './hooks/useVersion'
+
+export const VersionPicker = () => {
+  const router = useRouter()
+  const { currentVersion } = useVersion()
+  const { allVersions } = useMainContext()
+
+  const versions = Object.values(allVersions)
+  const activeVersion = allVersions[currentVersion]
+
+  return (
+    <div className="ml-4 d-flex flex-justify-center flex-items-center">
+      <Dropdown css>
+        <summary>
+          {activeVersion.versionTitle}
+          <Dropdown.Caret />
+        </summary>
+        <Dropdown.Menu direction="sw">
+          {versions.map((version) => {
+            return (
+              <Dropdown.Item key={version.version}>
+                <Link
+                  href={{
+                    pathname: router.pathname,
+                    query: {
+                      ...router.query,
+                      versionId: version.version,
+                    },
+                  }}
+                >
+                  <a>{version.versionTitle}</a>
+                </Link>
+              </Dropdown.Item>
+            )
+          })}
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  )
+}

components/context/MainContext.tsx

@@ -9,6 +9,19 @@ type ProductT = {
   name: string
 }
 
+type LanguageItem = {
+  name: string
+  nativeName: string
+  code: string
+  hreflang: string
+  wip?: boolean
+}
+
+type VersionItem = {
+  version: string
+  versionTitle: string
+}
+
 type DataT = {
   ui: Record<string, any>
   reusables: {
@@ -18,6 +31,12 @@ type DataT = {
       deprecation_details: string
       isOldestReleaseDeprecated: boolean
     }
+    policies: {
+      translation: string
+    }
+  }
+  variables: {
+    release_candidate: { version: string }
   }
 }
 type EnterpriseServerReleases = {
@@ -34,9 +53,13 @@ export type MainContextT = {
   currentLayoutName: string
   data: DataT
   airGap?: boolean
+  error: string
   currentCategory?: string
   relativePath?: string
   enterpriseServerReleases: EnterpriseServerReleases
+  currentLanguage: string
+  languages: Record<string, LanguageItem>
+  allVersions: Record<string, VersionItem>
 }
 
 export const getMainContextFromRequest = (req: any): MainContextT => {
@@ -47,16 +70,36 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
     activeProducts: req.context.activeProducts,
     currentProduct: req.context.productMap[req.context.currentProduct],
     currentLayoutName: req.context.currentLayoutName,
+    error: req.context.error || '',
     data: {
       ui: req.context.site.data.ui,
       reusables: {
         enterprise_deprecation: req.context.site.data.reusables.enterprise_deprecation,
+        policies: req.context.site.data.reusables.policies,
+      },
+      variables: {
+        release_candidate: req.context.site.data.variables.release_candidate,
       },
     },
     airGap: req.context.AIRGAP || false,
     currentCategory: req.context.currentCategory || '',
     relativePath: req.context.page.relativePath,
     enterpriseServerReleases: req.context.enterpriseServerReleases,
+    currentLanguage: req.context.currentLanguage,
+    languages: Object.fromEntries(
+      Object.entries(req.context.languages).map(([key, entry]: any) => {
+        return [
+          key,
+          {
+            name: entry.name,
+            nativeName: entry.nativeName || '',
+            code: entry.code,
+            hreflang: entry.hreflang,
+          },
+        ]
+      })
+    ),
+    allVersions: req.context.allVersions,
   }
 }
 

components/context/ProductLandingContext.tsx

@@ -0,0 +1,126 @@
+import { createContext, useContext } from 'react'
+import pick from 'lodash/pick'
+
+export type FeaturedLink = {
+  title: string
+  href: string
+  intro?: string
+  authors?: Array<string>
+  hideIntro?: boolean
+  date?: string
+}
+export type CodeExample = {
+  title: string
+  description: string
+  languages: string // single comma separated string
+  href: string
+  tags: Array<string>
+}
+
+export type ProductLandingContextT = {
+  title: string
+  introPlainText: string
+  shortTitle: string
+  intro: string
+  beta_product: boolean
+  // primaryAction: LinkButtonT
+  // secondaryAction?: LinkButtonT
+  introLinks: {
+    quickstart?: string
+    reference?: string
+    overview?: string
+  }
+  product_video?: string
+  // featuredLinks?: {
+  //   guides: Array<FeaturedLink>
+  //   popular: Array<FeaturedLink>
+  //   guideCards: Array<FeaturedLink>
+  // }
+  guideCards: Array<FeaturedLink>
+  productCodeExamples: Array<CodeExample>
+  productUserExamples: Array<{ username: string; description: string }>
+  productCommunityExamples: Array<{ repo: string; description: string }>
+  featuredArticles: Array<{
+    label: string // Guides
+    viewAllHref?: string // If provided, adds a "View All ->" to the header
+    articles: Array<FeaturedLink>
+  }>
+  changelog: { label: string; prefix: string }
+  changelogUrl?: string
+  whatsNewChangelog?: Array<{ href: string; title: string; date: string }>
+}
+
+export const ProductLandingContext = createContext<ProductLandingContextT | null>(null)
+
+export const useProductLandingContext = (): ProductLandingContextT => {
+  const context = useContext(ProductLandingContext)
+
+  if (!context) {
+    throw new Error(
+      '"useProductLandingContext" may only be used inside "ProductLandingContext.Provider"'
+    )
+  }
+
+  return context
+}
+
+export const getProductLandingContextFromRequest = (req: any): ProductLandingContextT => {
+  const { currentCategory, currentPath, data } = req.context
+  return {
+    ...pick(req.context.page, [
+      'title',
+      'shortTitle',
+      'introPlainText',
+      'beta_product',
+      'intro',
+      'product_video',
+      'changelog',
+    ]),
+    whatsNewChangelog: req.context.whatsNewChangelog,
+    changelogUrl: req.context.changelogUrl,
+
+    productCodeExamples: req.context.productCodeExamples || [],
+
+    productCommunityExamples: req.context.productCommunityExamples || [],
+
+    productUserExamples: (req.context.productUserExamples || []).map(
+      ({ user, description }: any) => ({
+        username: user,
+        description,
+      })
+    ),
+
+    introLinks: Object.fromEntries(
+      Object.entries(req.context.page.introLinks || {}).filter(([key, val]) => !!val)
+    ),
+
+    guideCards: (req.context.featuredLinks.guideCards || []).map((link: any) => {
+      return {
+        href: link.href,
+        title: link.title,
+        intro: link.intro,
+        authors: link.page.authors || [],
+      }
+    }),
+
+    featuredArticles: Object.entries(req.context.featuredLinks)
+      .filter(([key]) => {
+        return key === 'guides' || key === 'popular'
+      })
+      .map(([key, links]: any) => {
+        return {
+          label: req.context.site.data.ui.toc[key],
+          viewAllHref: key === 'guides' && !currentCategory ? `${currentPath}/${key}` : '',
+          articles: links.map((link: any) => {
+            return {
+              hideIntro: key === 'popular',
+              href: link.href,
+              title: link.title,
+              intro: link.intro,
+              authors: link.page.authors || [],
+            }
+          }),
+        }
+      }),
+  }
+}

components/hooks/useTranslation.tsx

@@ -3,13 +3,39 @@ import get from 'lodash/get'
 
 // The idea of this component is to mimic a popular i18n library (i18next)
 // so that we can set ourselves up to transition to it (or a similar library) in the future
-export const useTranslation = (translationGroup: string) => {
+export const useTranslation = (namespaces: string | Array<string>) => {
   const { data } = useMainContext()
 
+  // this can eventually be an object constructed from the input namespaces param above, but for now everything is already loaded
+  const loadedData: any = data.ui
+
   return {
+    // The compiled string supports prefixing with a namespace such as `my-namespace:path.to.value`
     t: (strings: TemplateStringsArray | string, ...values: Array<any>) => {
       const key = typeof strings === 'string' ? strings : String.raw(strings, ...values)
-      return get((data.ui as any)[translationGroup], key)
+
+      const splitKey = key.split(':')
+      if (splitKey.length > 2) {
+        throw new Error('Multiple ":" not allowed in translation lookup path')
+      }
+
+      if (splitKey.length === 2) {
+        const [namespace, path] = splitKey
+        return get(loadedData[namespace], path)
+      }
+
+      const [path] = splitKey
+      if (Array.isArray(namespaces)) {
+        for (const namespace of namespaces) {
+          const val = get(loadedData[namespace], path)
+          if (val !== undefined) {
+            return val
+          }
+        }
+        return undefined
+      } else {
+        return get(loadedData[namespaces], path)
+      }
     },
   }
 }

components/landing/CodeExampleCard.tsx

@@ -0,0 +1,35 @@
+import { RepoIcon } from '@primer/octicons-react'
+import { CodeExample } from 'components/context/ProductLandingContext'
+
+type Props = {
+  example: CodeExample
+}
+export const CodeExampleCard = ({ example }: Props) => {
+  return (
+    <a
+      className="Box d-flex flex-column flex-justify-between height-full color-shadow-medium hover-shadow-large no-underline color-text-primary"
+      href={`https://github.com/${example.href}`}
+    >
+      <div className="p-4">
+        <h4>{example.title}</h4>
+        <p className="mt-2 mb-4 color-text-tertiary">{example.description}</p>
+        <div className="d-flex flex-wrap">
+          {example.tags.map((tag) => {
+            return (
+              <span
+                key={tag}
+                className="IssueLabel color-text-inverse color-bg-info-inverse mr-2 mb-1"
+              >
+                {tag}
+              </span>
+            )
+          })}
+        </div>
+      </div>
+      <footer className="border-top p-4 color-text-secondary d-flex flex-items-center">
+        <RepoIcon className="flex-shrink-0" />
+        <span className="ml-2 text-mono text-small color-text-link">{example.href}</span>
+      </footer>
+    </a>
+  )
+}

components/landing/CodeExamples.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import { ArrowRightIcon, SearchIcon } from '@primer/octicons-react'
+
+import { useProductLandingContext } from 'components/context/ProductLandingContext'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { CodeExampleCard } from 'components/landing/CodeExampleCard'
+
+const PAGE_SIZE = 6
+export const CodeExamples = () => {
+  const { productCodeExamples } = useProductLandingContext()
+  const { t } = useTranslation('product_landing')
+  const [numVisible, setNumVisible] = useState(PAGE_SIZE)
+  const [search, setSearch] = useState('')
+
+  const onSearchChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearch(e.target.value)
+    setNumVisible(PAGE_SIZE) // reset the visible count (only matters after searching)
+  }
+
+  const isSearching = !!search
+  let searchResults: typeof productCodeExamples = []
+  if (isSearching) {
+    const matchReg = new RegExp(search, 'i')
+    searchResults = productCodeExamples.filter((example) => {
+      const searchableStr = `${example.tags.join(' ')} ${example.title} ${example.description}`
+      return matchReg.test(searchableStr)
+    })
+  }
+
+  return (
+    <div>
+      <div className="pr-lg-3 mb-5 mt-3">
+        <input
+          className="input-lg py-2 px-3 col-12 col-lg-8 form-control"
+          placeholder={t('search_code_examples')}
+          type="search"
+          autoComplete="off"
+          aria-label={t('search_code_examples')}
+          onChange={onSearchChange}
+        />
+      </div>
+
+      <div className="d-flex flex-wrap gutter">
+        {(isSearching ? searchResults : productCodeExamples.slice(0, numVisible)).map((example) => {
+          return (
+            <div key={example.href} className="col-12 col-xl-4 col-lg-6 mb-4">
+              <CodeExampleCard example={example} />
+            </div>
+          )
+        })}
+      </div>
+
+      {numVisible < productCodeExamples.length && !isSearching && (
+        <button
+          className="btn btn-outline float-right"
+          onClick={() => setNumVisible(numVisible + PAGE_SIZE)}
+        >
+          {t('show_more')} <ArrowRightIcon />
+        </button>
+      )}
+
+      {isSearching && searchResults.length === 0 && (
+        <div className="d-none py-4 text-center color-text-secondary font-mktg">
+          <div className="mb-3">
+            <SearchIcon size={24} />{' '}
+          </div>
+          <h3 className="text-normal">
+            {t('sorry')} <strong className="js-filter-card-value"></strong>
+          </h3>
+          <p className="my-3 f4">
+            {t('no_example')} <br /> {t('try_another')}
+          </p>
+          <a href="https://github.com/github/docs/blob/main/data/variables/discussions_community_examples.yml">
+            {t('add_your_community')} <ArrowRightIcon />
+          </a>
+        </div>
+      )}
+    </div>
+  )
+}

components/landing/CommunityExamples.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { ArrowRightIcon } from '@primer/octicons-react'
+
+import { useProductLandingContext } from 'components/context/ProductLandingContext'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { RepoCard } from 'components/landing/RepoCard'
+
+export const CommunityExamples = () => {
+  const { productCommunityExamples } = useProductLandingContext()
+  const { t } = useTranslation('product_landing')
+  const [numVisible, setNumVisible] = useState(6)
+
+  if (!productCommunityExamples) {
+    return null
+  }
+
+  return (
+    <div>
+      <div className="d-flex flex-wrap gutter">
+        {productCommunityExamples.slice(0, numVisible).map((repo, i) => {
+          return (
+            <div key={repo.repo} className="col-12 col-xl-4 col-lg-6 mb-4">
+              <RepoCard repo={repo} />
+            </div>
+          )
+        })}
+      </div>
+      {numVisible < productCommunityExamples.length && (
+        <button
+          className="btn btn-outline float-right"
+          onClick={() => setNumVisible(productCommunityExamples.length)}
+        >
+          {t('show_more')} <ArrowRightIcon />
+        </button>
+      )}
+    </div>
+  )
+}

components/landing/FeaturedArticles.tsx

@@ -0,0 +1,109 @@
+import cx from 'classnames'
+import Link from 'next/link'
+import { format } from 'date-fns'
+
+import { ArrowRightIcon } from '@primer/octicons-react'
+import { FeaturedLink, useProductLandingContext } from 'components/context/ProductLandingContext'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { TruncateLines } from 'components/TruncateLines'
+
+export const FeaturedArticles = () => {
+  const {
+    featuredArticles = [],
+    changelog,
+    whatsNewChangelog,
+    changelogUrl,
+  } = useProductLandingContext()
+  const { t } = useTranslation('toc')
+
+  return (
+    <div className="d-lg-flex gutter my-6 py-6">
+      {featuredArticles.map((section, i) => {
+        return (
+          <div
+            key={section.label}
+            className={cx('col-12 mb-4 mb-lg-0', changelog ? 'col-lg-4' : 'col-lg-6')}
+          >
+            <ArticleList
+              title={section.label}
+              viewAllHref={section.viewAllHref}
+              articles={section.articles}
+            />
+          </div>
+        )
+      })}
+
+      {changelog && (
+        <div className={cx('col-12 mb-4 mb-lg-0', changelog ? 'col-lg-4' : 'col-lg-6')}>
+          <ArticleList
+            title={t('whats_new')}
+            viewAllHref={changelogUrl}
+            articles={(whatsNewChangelog || []).map((link) => {
+              return {
+                title: link.title,
+                date: link.date,
+                href: link.href,
+              }
+            })}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+type ArticleListProps = {
+  title: string
+  viewAllHref?: string
+  articles: Array<FeaturedLink>
+}
+const ArticleList = ({ title, viewAllHref, articles }: ArticleListProps) => {
+  return (
+    <>
+      <div className="featured-links-heading mb-4 d-flex flex-items-baseline">
+        <h3 className="f4 text-normal text-mono text-uppercase color-text-secondary">{title}</h3>
+        {viewAllHref && (
+          <Link href={viewAllHref}>
+            <a className="ml-4">
+              View all <ArrowRightIcon size={14} className="v-align-middle" />
+            </a>
+          </Link>
+        )}
+      </div>
+
+      <ul className="list-style-none">
+        {articles.map((link) => {
+          return (
+            <li key={link.href} className="border-top">
+              <Link href={link.href}>
+                <a className="link-with-intro Bump-link--hover no-underline d-block py-3">
+                  <h4 className="link-with-intro-title">
+                    {link.title}
+                    <span className="Bump-link-symbol">→</span>
+                  </h4>
+                  {!link.hideIntro && link.intro && (
+                    <TruncateLines
+                      as="p"
+                      maxLines={2}
+                      className="link-with-intro-intro color-text-secondary mb-0 mt-1"
+                    >
+                      {link.intro}
+                    </TruncateLines>
+                  )}
+                  {link.date && (
+                    <time
+                      className="tooltipped tooltipped-n color-text-tertiary text-mono mt-1"
+                      aria-label={format(new Date(link.date), 'PPP')}
+                    >
+                      {format(new Date(link.date), 'MMMM dd')}
+                    </time>
+                  )}
+                </a>
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </>
+  )
+}

components/landing/GuideCard.tsx

@@ -0,0 +1,52 @@
+import type { FeaturedLink } from 'components/context/ProductLandingContext'
+
+type Props = {
+  guide: FeaturedLink
+}
+export const GuideCard = ({ guide }: Props) => {
+  const authors = guide.authors && guide.authors.length > 0 ? guide.authors : ['GitHub']
+  const authorString = `@${authors.join(', @')}`
+
+  return (
+    <div className="col-lg-4 col-12 mb-3">
+      <a
+        className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-text-primary p-5"
+        href={guide.href}
+      >
+        <h2>{guide.title}</h2>
+        <p className="mt-2 mb-4 color-text-tertiary">{guide.intro}</p>
+
+        <footer className="d-flex">
+          <div className="mr-1">
+            {authors.length === 1 ? (
+              <img
+                className="avatar avatar-2 circle mr-1"
+                src={`https://github.com/${authors[0]}.png`}
+                alt={`@${authors[0]}`}
+              />
+            ) : (
+              <div className="AvatarStack AvatarStack--three-plus">
+                <div
+                  className="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
+                  aria-label={authorString}
+                >
+                  {authors.map((author) => {
+                    return (
+                      <img
+                        className="avatar circle"
+                        alt={`@${author}`}
+                        src={`https://github.com/${author}.png`}
+                      />
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div>{authorString}</div>
+        </footer>
+      </a>
+    </div>
+  )
+}

components/landing/GuideCards.tsx

@@ -0,0 +1,36 @@
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+
+import { ArrowRightIcon } from '@primer/octicons-react'
+import { useMainContext } from 'components/context/MainContext'
+
+import { useProductLandingContext } from 'components/context/ProductLandingContext'
+import { GuideCard } from 'components/landing/GuideCard'
+
+export const GuideCards = () => {
+  const router = useRouter()
+  const { currentCategory } = useMainContext()
+  const { guideCards } = useProductLandingContext()
+
+  if (!guideCards) {
+    return null
+  }
+
+  return (
+    <div>
+      <div className="d-lg-flex gutter-lg flex-items-stretch">
+        {(guideCards || []).map((guide) => {
+          return <GuideCard key={guide.href} guide={guide} />
+        })}
+      </div>
+
+      {!currentCategory && (
+        <Link href={`${router.asPath}/guides`}>
+          <a className="btn btn-outline float-right">
+            Explore guides <ArrowRightIcon />
+          </a>
+        </Link>
+      )}
+    </div>
+  )
+}

components/landing/LandingHero.tsx

@@ -0,0 +1,107 @@
+import cx from 'classnames'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useMainContext } from 'components/context/MainContext'
+
+import { useProductLandingContext } from 'components/context/ProductLandingContext'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { useVersion } from 'components/hooks/useVersion'
+
+export const LandingHero = () => {
+  const { airGap } = useMainContext()
+  const { product_video, shortTitle, beta_product, intro, introLinks } = useProductLandingContext()
+  const { t } = useTranslation('product_landing')
+
+  return (
+    <header className="d-lg-flex gutter-lg mb-6">
+      <div className={cx(product_video && 'col-12 col-lg-6 mb-3 mb-lg-0')}>
+        <span className="text-mono color-text-secondary">Product</span>
+        <h1 className="mb-3 font-mktg">
+          {shortTitle}{' '}
+          {beta_product && <span className="Label Label--success v-align-middle">Beta</span>}
+        </h1>
+
+        <div
+          className="lead-mktg color-text-secondary"
+          dangerouslySetInnerHTML={{ __html: intro }}
+        />
+
+        {/* idea to abstract the introLinks into something more component-like */}
+        {/* {introLinks.map((link) => {
+            return (
+              <FullLink
+                href={link.href}
+                className={cx(
+                  'btn-mktg btn-large f4 mt-3 mr-3',
+                  link.secondary && 'btn-outline-mktg'
+                )}
+              >
+                {t(link.translationKeyLabel)}
+              </FullLink>
+            )
+          })} */}
+
+        {introLinks?.quickstart && (
+          <FullLink href={introLinks.quickstart} className="btn-mktg btn-large f4 mt-3 mr-3">
+            {t('quickstart')}
+          </FullLink>
+        )}
+
+        {introLinks?.reference && (
+          <FullLink
+            href={introLinks.reference}
+            className="btn-mktg btn-outline-mktg btn-large f4 mt-3 mr-3"
+          >
+            {t('reference')}
+          </FullLink>
+        )}
+
+        {introLinks?.overview && (
+          <FullLink
+            href={introLinks.overview}
+            className="btn-mktg btn-outline-mktg btn-large f4 mt-3 mr-3"
+          >
+            {t('overview')}
+          </FullLink>
+        )}
+      </div>
+
+      {product_video && (
+        <div className="col-12 col-lg-6">
+          <div className="position-relative" style={{ paddingBottom: '56.25%' }}>
+            {!airGap && (
+              <iframe
+                title={`${shortTitle} Video`}
+                className="top-0 left-0 position-absolute color-shadow-large rounded-1 width-full height-full"
+                src={product_video}
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+              ></iframe>
+            )}
+          </div>
+        </div>
+      )}
+    </header>
+  )
+}
+
+// Fully Qualified Link - it includes the version and locale in the path
+type Props = {
+  href: string
+  children: React.ReactNode
+  className?: string
+}
+export const FullLink = ({ href, children, className }: Props) => {
+  const router = useRouter()
+  const { currentVersion } = useVersion()
+  const locale = router.locale || 'en'
+  const fullyQualifiedHref = `/${locale}${
+    currentVersion !== 'free-pro-team@latest' ? `/${currentVersion}` : ''
+  }${href}`
+  return (
+    <Link href={fullyQualifiedHref}>
+      <a className={className}>{children}</a>
+    </Link>
+  )
+}

components/landing/LandingSection.tsx

@@ -0,0 +1,15 @@
+import cx from 'classnames'
+
+type Props = {
+  title?: string
+  children?: React.ReactNode
+  className?: string
+}
+export const LandingSection = ({ title, children, className }: Props) => {
+  return (
+    <div className={cx('container-xl px-3 px-md-6', className)}>
+      {title && <h2 className="font-mktg h1 mb-2">{title}</h2>}
+      {children}
+    </div>
+  )
+}

components/landing/RepoCard.tsx

@@ -0,0 +1,27 @@
+type Props = {
+  repo: {
+    repo: string
+    description: string
+  }
+  href?: string
+}
+export const RepoCard = ({ repo, href }: Props) => {
+  return (
+    <a
+      className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-text-primary p-4"
+      href={href || `https://github.com/${repo.repo}`}
+    >
+      <div className="flex-shrink-0 mr-3">
+        <img
+          src={`https://github.com/${repo.repo.split('/')[0]}.png`}
+          alt={repo.repo}
+          className="avatar avatar-8"
+        />
+      </div>
+      <div className="flex-auto">
+        <h4>{repo.repo}</h4>
+        <p className="mt-1 color-text-tertiary">{repo.description}</p>
+      </div>
+    </a>
+  )
+}

components/landing/SponsorsExamples.tsx

@@ -0,0 +1,34 @@
+import Link from 'next/link'
+import { ArrowRightIcon } from '@primer/octicons-react'
+
+import { useProductLandingContext } from 'components/context/ProductLandingContext'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { UserCard } from 'components/landing/UserCard'
+
+export const SponsorsExamples = () => {
+  const { productUserExamples } = useProductLandingContext()
+  const { t } = useTranslation('product_landing')
+
+  if (!productUserExamples) {
+    return null
+  }
+
+  return (
+    <div>
+      <div className="d-flex flex-wrap gutter">
+        {productUserExamples.slice(0, 6).map((user) => {
+          return (
+            <div key={user.username} className="col-12 col-xl-4 col-lg-6 mb-4">
+              <UserCard href={`https://github.com/sponsors/${user.username}`} user={user} />
+            </div>
+          )
+        })}
+      </div>
+      <Link href={`https://github.com/sponsors/community`}>
+        <a className="btn btn-outline float-right">
+          {t('explore_people_and_projects')} <ArrowRightIcon />
+        </a>
+      </Link>
+    </div>
+  )
+}

components/landing/UserCard.tsx

@@ -0,0 +1,27 @@
+type Props = {
+  user: {
+    username: string
+    description: string
+  }
+  href?: string
+}
+export const UserCard = ({ user, href }: Props) => {
+  return (
+    <a
+      className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-text-primary p-4"
+      href={href || `https://github.com/${user.username}`}
+    >
+      <div className="flex-shrink-0 mr-3">
+        <img
+          src={`https://github.com/${user.username}.png`}
+          alt={user.username}
+          className="avatar avatar-8 circle"
+        />
+      </div>
+      <div className="flex-auto">
+        <h4>{user.username}</h4>
+        <p className="mt-1 color-text-tertiary">{user.description}</p>
+      </div>
+    </a>
+  )
+}

components/lib/ExcludesNull.tsx

@@ -0,0 +1,3 @@
+export function ExcludesNull<T>(x: T | null): x is T {
+  return x !== null
+}

content/actions/hosting-your-own-runners/removing-self-hosted-runners.md

@@ -66,7 +66,7 @@ To remove a self-hosted runner from an organization, you must be an organization
 
 {% if currentVersion == "free-pro-team@latest" %}
 To remove a self-hosted runner from an enterprise account, you must be an enterprise owner. We recommend that you also have access to the self-hosted runner machine.
-{% elsif enterpriseServerVersions contains currentVersion and currentVersion ver_gt "enterprise-server@2.21"% or currentVersion == "github-ae@latest" }
+{% elsif enterpriseServerVersions contains currentVersion and currentVersion ver_gt "enterprise-server@2.21" or currentVersion == "github-ae@latest" %}
 To remove a self-hosted runner at the enterprise level of {% data variables.product.product_location %}, you must be a site administrator. We recommend that you also have access to the self-hosted runner machine.
 {% endif %}
 

content/actions/learn-github-actions/security-hardening-for-github-actions.md

@@ -104,7 +104,7 @@ This list describes the recommended approaches for accessing repository data wit
 
 **Self-hosted** runners on {% data variables.product.product_name %} do not have guarantees around running in ephemeral clean virtual machines, and can be persistently compromised by untrusted code in a workflow.
 
-As a result, self-hosted runners should almost [never be used for public repositories](/actions/hosting-your-own-runners/about-self-hosted-runners#self-hosted-runner-security-with-public-repositories) on {% data variables.product.product_name %}, because any user can open pull requests against the repository and compromise the environment. Similarly, be cautious when using self-hosted runners on private repositories, as anyone who can fork the repository and open a pull request (generally those with read-access to the repository) are able to compromise the self-hosted runner environment, including gaining access to secrets and the `GITHUB_TOKEN` which{% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.1" or currentVersion == "github-ae@next" %}, depending on its settings, can grant {% else %} grants {% endif %}write-access permissions on the repository.
+As a result, self-hosted runners should almost [never be used for public repositories](/actions/hosting-your-own-runners/about-self-hosted-runners#self-hosted-runner-security-with-public-repositories) on {% data variables.product.product_name %}, because any user can open pull requests against the repository and compromise the environment. Similarly, be cautious when using self-hosted runners on private repositories, as anyone who can fork the repository and open a pull request (generally those with read-access to the repository) are able to compromise the self-hosted runner environment, including gaining access to secrets and the `GITHUB_TOKEN` which{% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.1" or currentVersion == "github-ae@next" %}, depending on its settings, can grant {% else %} grants {% endif %}write-access permissions on the repository. Although workflows can control access to environment secrets by using environments and required reviews, these workflows are not run in an isolated environment and are still susceptible to the same risks when run on a self-hosted runner.
 
 When a self-hosted runner is defined at the organization or enterprise level, {% data variables.product.product_name %} can schedule workflows from multiple repositories onto the same runner. Consequently, a security compromise of these environments can result in a wide impact. To help reduce the scope of a compromise, you can create boundaries by organizing your self-hosted runners into separate groups. For more information, see "[Managing access to self-hosted runners using groups](/actions/hosting-your-own-runners/managing-access-to-self-hosted-runners-using-groups)."
 

content/actions/reference/encrypted-secrets.md

@@ -29,15 +29,9 @@ For secrets stored at the environment level, you can enable required reviewers t
 
 #### Naming your secrets
 
-The following rules apply to secret names:
+{% data reusables.codespaces.secrets-naming %}. For example, {% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.0" or currentVersion == "github-ae@latest" %}a secret created at the environment level must have a unique name in that environment, {% endif %}a secret created at the repository level must have a unique name in that repository, and a secret created at the organization level must have a unique name at that level. 
-
-* Secret names can only contain alphanumeric characters (`[a-z]`, `[A-Z]`, `[0-9]`) or underscores (`_`). Spaces are not allowed.
-* Secret names must not start with the `GITHUB_` prefix.
-* Secret names must not start with a number.
-* Secret names are not case-sensitive.
-* Secret names must be unique at the level they are created at. For example, {% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.0" or currentVersion == "github-ae@latest" %}a secret created at the environment level must have a unique name in that environment, {% endif %}a secret created at the repository level must have a unique name in that repository, and a secret created at the organization level must have a unique name at that level. 
   
-  If a secret with the same name exists at multiple levels, the secret at the lower level takes precedence. For example, if an organization-level secret has the same name as a repository-level secret, then the repository-level secret takes precedence.{% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.0" or currentVersion == "github-ae@latest" %} Similarly, if an organization, repository, and environment all have a secret with the same name, the environment-level secret takes precedence.{% endif %}
+  {% data reusables.codespaces.secret-precedence %}{% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.0" or currentVersion == "github-ae@latest" %} Similarly, if an organization, repository, and environment all have a secret with the same name, the environment-level secret takes precedence.{% endif %}
 
 To help ensure that {% data variables.product.prodname_dotcom %} redacts your secret in logs, avoid using structured data as the values of secrets. For example, avoid creating secrets that contain JSON or encoded Git blobs.
 
@@ -84,6 +78,7 @@ If your repository {% if currentVersion == "free-pro-team@latest" or currentVers
 {% endnote %}
 
 {% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.0" or currentVersion == "github-ae@latest" %}
+
 ### Creating encrypted secrets for an environment
 
 {% data reusables.github-actions.permissions-statement-secrets-environment %}

content/actions/reference/environment-variables.md

@@ -58,6 +58,7 @@ We strongly recommend that actions use environment variables to access the files
 | `GITHUB_RUN_NUMBER` | {% data reusables.github-actions.run_number_description %} |
 | `GITHUB_JOB` | The [job_id](/actions/reference/workflow-syntax-for-github-actions#jobsjob_id) of the current job. |
 | `GITHUB_ACTION` | The unique identifier (`id`) of the action. |
+| `GITHUB_ACTION_PATH` | The path where your action is located. You can use this path to access files located in the same repository as your action. This variable is only supported in composite run steps actions. |
 | `GITHUB_ACTIONS` | Always set to `true` when {% data variables.product.prodname_actions %} is running the workflow. You can use this variable to differentiate when tests are being run locally or by {% data variables.product.prodname_actions %}.
 | `GITHUB_ACTOR` | The name of the person or app that initiated the workflow. For example, `octocat`. |
 | `GITHUB_REPOSITORY` | The owner and repository name. For example, `octocat/Hello-World`. |

content/actions/reference/environments.md

@@ -48,6 +48,12 @@ Use deployment branches to restrict which branches can deploy to the environment
 
 Secrets stored in an environment are only available to workflow jobs that reference the environment. If the environment requires approval, a job cannot access environment secrets until one of the required reviewers approves it. For more information about secrets, see "[Encrypted secrets](/actions/reference/encrypted-secrets)."
 
+{% note %}
+
+**Note:** Workflows that run on self-hosted runners are not run in an isolated container, even if they use environments. Environment secrets should be treated with the same level as security as repository and organization secrets. For more information, see "[Security hardening for GitHub Actions](/actions/learn-github-actions/security-hardening-for-github-actions#hardening-for-self-hosted-runners)."
+
+{% endnote %}
+
 ### Creating an environment
 
 {% data reusables.github-actions.permissions-statement-environment %}

content/actions/reference/events-that-trigger-workflows.md

@@ -177,16 +177,16 @@ Runs your workflow anytime the `check_run` event occurs. {% data reusables.devel
 
 | Webhook event payload | Activity types | `GITHUB_SHA` | `GITHUB_REF` |
 | --------------------- | -------------- | ------------ | -------------|
-| [`check_run`](/webhooks/event-payloads/#check_run) | - `created`<br/>- `rerequested`<br/>- `completed`<br/>- `requested_action` | Last commit on default branch | Default branch |
+| [`check_run`](/webhooks/event-payloads/#check_run) | - `created`<br/>- `rerequested`<br/>- `completed` | Last commit on default branch | Default branch |
 
 {% data reusables.developer-site.limit_workflow_to_activity_types %}
 
-For example, you can run a workflow when a check run has been `rerequested` or `requested_action`.
+For example, you can run a workflow when a check run has been `rerequested` or `completed`.
 
 ```yaml
 on:
   check_run:
-    types: [rerequested, requested_action]
+    types: [rerequested, completed]
 ```
 
 #### `check_suite`

content/actions/reference/workflow-syntax-for-github-actions.md

@@ -725,7 +725,9 @@ jobs:
 
 #### Example using action inside a different private repository than the workflow
 
-Your workflow must checkout the private repository and reference the action locally.
+Your workflow must checkout the private repository and reference the action locally. Generate a personal access token and add the token as an encrypted secret. For more information, see "[Creating a personal access token](/github/authenticating-to-github/creating-a-personal-access-token)" and "[Encrypted secrets](/actions/reference/encrypted-secrets)."
+
+Replace `PERSONAL_ACCESS_TOKEN` in the example with the name of your secret.
 
 {% raw %}
 ```yaml
@@ -737,7 +739,7 @@ jobs:
         with:
           repository: octocat/my-private-repo
           ref: v1.0
-          token: ${{ secrets.GITHUB_TOKEN }}
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
           path: ./.github/actions/my-private-repo
       - name: Run my action
         uses: ./.github/actions/my-private-repo/my-action

content/codespaces/about-codespaces.md

@@ -1,22 +1,18 @@
 ---
 title: About Codespaces
 intro: '{% data variables.product.prodname_codespaces %} is a configurable online development environment, hosted by {% data variables.product.prodname_dotcom %} and powered by {% data variables.product.prodname_vscode %}, that allows you to develop entirely in the cloud.'
-product: '{% data reusables.gated-features.codespaces %}'
 redirect_from:
   - /github/developing-online-with-github-codespaces/about-github-codespaces
   - /github/developing-online-with-codespaces/about-codespaces
   - /codespaces/getting-started-with-codespaces/about-codespaces
 versions:
   free-pro-team: '*'
+type: overview
 topics:
   - Codespaces
 ---
 
-{% note %}
+{% data reusables.codespaces.release-stage %}
-
-**Note:** {% data variables.product.prodname_codespaces %} is currently in limited public beta and subject to change. During the beta period, {% data variables.product.prodname_dotcom %} does not make any guarantees about the availability of {% data variables.product.prodname_codespaces %}.
-
-{% endnote %}
 
 ### About {% data variables.product.prodname_codespaces %}
 
@@ -50,7 +46,7 @@ Because {% data variables.product.prodname_codespaces %} can be accessed in the
 
 ### A secure environment
 
-{% data variables.product.prodname_codespaces %} allows developers to develop in the cloud instead of locally. This creates one single, trackable, source of truth. Developers can contribute from anywhere, on any machine, including tablets or Chromebooks, and there is no need to maintain local copies of intellectual property. Developers always have to be logged in and provided with access to both {% data variables.product.prodname_codespaces %} and specific repositories. These permissions can be revoked at any time. As soon as you revoke access, those developers will lose all access to protected resources. In addition, authenticated developers create audit trails so you know who is doing what. For more information on access and security, see "[Managing access and security for {% data variables.product.prodname_codespaces %}](/github/developing-online-with-codespaces/managing-access-and-security-for-codespaces)."
+{% data variables.product.prodname_codespaces %} allows developers to develop in the cloud instead of locally. This creates one single, trackable, source of truth. Developers can contribute from anywhere, on any machine, including tablets or Chromebooks, and there is no need to maintain local copies of intellectual property. Developers always have to be logged in and provided with access to both {% data variables.product.prodname_codespaces %} and specific repositories. These permissions can be revoked at any time. As soon as you revoke access, those developers will lose all access to protected resources. In addition, authenticated developers create audit trails so you know who is doing what. For more information on access and security, see "[Managing access and security for your organization's codespaces](/codespaces/managing-codespaces-for-your-organization/managing-access-and-security-for-your-organizations-codespaces)."
 
 Using {% data variables.product.prodname_codespaces %} is the most secure when all members of your team are using it. It means that there is no need to clone the repository onto a local machine and that developers don't need to install locally as `root`.
 

content/codespaces/codespaces-reference/about-billing-for-codespaces.md

@@ -1,12 +1,12 @@
 ---
 title: About billing for Codespaces
 intro: 'When {% data variables.product.prodname_codespaces %} becomes generally available, you will be billed for storage and compute usage.'
-product: '{% data reusables.gated-features.codespaces %}'
 versions:
   free-pro-team: '*'
 redirect_from:
   - /github/developing-online-with-codespaces/about-billing-for-codespaces
   - /codespaces/getting-started-with-codespaces/about-billing-for-codespaces
+type: reference  
 topics:
   - Codespaces
 ---

content/codespaces/codespaces-reference/allowing-your-codespace-to-access-a-private-image-registry.md

@@ -0,0 +1,29 @@
+---
+title: Allowing your codespace to access a private image registry
+intro: 'You can use secrets to allow {% data variables.product.prodname_codespaces %} to access a private image registry'
+versions:
+  free-pro-team: '*'
+topics:
+  - Codespaces
+---
+
+{% data reusables.codespaces.release-stage %}
+
+A registry is a secure space for storing and managing private container images, such as Azure Container Registry or DockerHub. You can create secrets in GitHub to store the access details for a private registry and use them to give your codespace access to images stored in the registry.
+
+When you launch a codespace, {% data variables.product.prodname_codespaces %} checks for three secrets, which define the server name, username, and personal access token (PAT) for a container registry. If these secrets are found, {% data variables.product.prodname_codespaces %} will make the registry available inside your codespace.
+
+- `<*>_CONTAINER_REGISTRY_SERVER`
+- `<*>_CONTAINER_REGISTRY_USER`
+- `<*>_CONTAINER_REGISTRY_PASSWORD`
+
+You can store secrets at the user, repository, or organization-level, allowing you to share them securely between different codespaces. When you create a set of secrets for a private image registry, you need to replace the “<*>” in the name with a consistent identifier. For more information, see "[Managing encrypted secrets for your codespaces](/codespaces/managing-your-codespaces/managing-encrypted-secrets-for-your-codespaces)" and "[Managing encrypted secrets for your repository and organization for Codespaces](/codespaces/managing-codespaces-for-your-organization/managing-encrypted-secrets-for-your-repository-and-organization-for-codespaces)."
+
+For example, if you had a private image registry in Azure, you could create the following secrets:
+
+```
+ACR_CONTAINER_REGISTRY_SERVER = mycompany.azurecr.io
+ACR_CONTAINER_REGISTRY_USER = acr-user-here
+ACR_CONTAINER_REGISTRY_PASSWORD = <PAT>
+```
+![Image registry secret example](/assets/images/help/settings/codespaces-image-registry-secret-example.png)

content/codespaces/codespaces-reference/index.md

@@ -5,5 +5,10 @@ versions:
   free-pro-team: '*'
 ---
 
+{% data reusables.codespaces.release-stage %}
+
 {% link_with_intro /about-billing-for-codespaces %}
 
+{% link_with_intro /troubleshooting-your-codespace %}
+
+{% link_with_intro /allowing-your-codespace-to-access-a-private-image-registry %}

content/codespaces/codespaces-reference/troubleshooting-your-codespace.md

@@ -0,0 +1,68 @@
+---
+title: Troubleshooting your codespace
+intro: Use this guide to help you troubleshoot common issues with your codespace.
+redirect_from:
+  - /github/developing-online-with-github-codespaces/troubleshooting-your-codespace
+  - /github/developing-online-with-codespaces/troubleshooting-your-codespace
+  - /codespaces/working-with-your-codespace/troubleshooting-your-codespace
+versions:
+  free-pro-team: '*'
+type: reference
+topics:
+  - Codespaces
+---
+
+{% data reusables.codespaces.release-stage %}
+
+### Known Limitations
+
+{% data reusables.codespaces.beta-functionality-limited %}
+
+{% data reusables.codespaces.unsupported-repos %}
+
+### {% data variables.product.prodname_vscode %} troubleshooting
+
+Use **Issues** in the [`microsoft/vscode`](https://github.com/microsoft/vscode/issues) repository to check for known issues or to log issues about the {% data variables.product.prodname_vscode %} experience.
+
+
+### Configuration troubleshooting
+
+{% data reusables.codespaces.recovery-mode %}
+
+```
+This codespace is currently running in recovery mode due to a container error.
+```
+
+Review the creation logs, update the configuration as needed, and run **Codespaces: Rebuild Container** in the command palette to retry. For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/github/developing-online-with-codespaces/configuring-codespaces-for-your-project#apply-changes-to-your-configuration)."
+
+### dotfiles troubleshooting
+
+- Make sure your dotfiles repository is public. If you have secrets or sensitive data you want to use in your codespace, use [Codespace secrets](/codespaces/managing-your-codespaces/managing-encrypted-secrets-for-your-codespaces) instead of private dotfiles.
+- Check `/workspaces/.codespaces/.persistedshare/dotfiles` to see if your dotfiles were cloned.
+  - If your dotfiles were cloned, try manually re-running your install script to verify it's executable.
+  - If your dotfiles weren't cloned, check `/workspaces/.codespaces/.persistedshare/EnvironmentLog.txt` to see if there was a problem cloning them.
+- Check `/workspaces/.codespaces/.persistedshare/creation.log` for possible issues. Alternatively, you can view the `creation.log` by navigating to the command palette and entering **Codespaces: View Creation Log**.
+
+
+### Browser troubleshooting
+
+If you encounter issues while using a browser that is not Chromium-based, try switching to a Chromium-based browser, or check for known issues with your browser in the `microsoft/vscode` repository by searching for issues labeled with the name of your browser, such as[`firefox`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+label%3Afirefox) or [`safari`](https://github.com/Microsoft/vscode/issues?q=is%3Aopen+is%3Aissue+label%3Asafari).
+
+If you encounter issues while using a Chromium-based browser, you can check if you're experiencing another known issue with {% data variables.product.prodname_vscode %} in the [`microsoft/vscode`](https://github.com/microsoft/vscode/issues) repository.
+
+### Container storage troubleshooting
+
+When you create a codespace, it has a finite amount of storage and over time it may be necessary for you to free up space. Try any of the following items to free up storage space.
+
+- Remove packages that are no longer by using `sudo apt autoremove`
+- Clean the apt cache by using `sudo apt clean`
+- Delete unneeded files like build artifacts and logs (these are very project-dependent)
+- See the top 10 largest files in the codespace: `sudo find / -printf '%s %p\n'| sort -nr | head -10`
+
+More destructive options:
+- Remove unused Docker images, networks, and containers by using `docker system prune` (append `-a` if you want to remove all images, and `--volumes` if you want to remove all volumes)
+- Remove untracked files from working tree: `git clean -i`
+
+### Contact us
+
+If you still need help, you can contact us. For more information, see "[About {% data variables.product.prodname_codespaces %}](/github/developing-online-with-codespaces/about-codespaces#contacting-us-about-codespaces)."

content/codespaces/developing-in-codespaces/creating-a-codespace.md

@@ -1,32 +1,42 @@
 ---
 title: Creating a codespace
 intro: You can create a codespace for a branch in a repository to develop online.
-product: '{% data reusables.gated-features.codespaces %}'
 permissions: 'Anyone can create a codespace for any public repository, or for any repository owned by their user account.'
 redirect_from:
   - /github/developing-online-with-github-codespaces/creating-a-codespace
   - /github/developing-online-with-codespaces/creating-a-codespace
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
   - Codespaces
+  - Fundamentals
+  - Developer
 ---
 
 {% data reusables.codespaces.release-stage %}
 
 ### About codespace creation
 
-{% data reusables.codespaces.codespaces-are-personal %}
+You can create a codespace on either {% data variables.product.prodname_dotcom_the_website %} or in {% data variables.product.prodname_vscode %}. {% data reusables.codespaces.codespaces-are-personal %}
 
-{% data reusables.codespaces.codespaces-are-per-branch %} {% data reusables.codespaces.concurrent-codespace-limit %} For more information, see "[Deleting a codespace](/github/developing-online-with-codespaces/deleting-a-codespace)."
+Codespaces are associated with a specific branch of a repository and the repository cannot be empty. {% data reusables.codespaces.concurrent-codespace-limit %} For more information, see "[Deleting a codespace](/github/developing-online-with-codespaces/deleting-a-codespace)."
 
-{% data reusables.codespaces.unsupported-repos %}
 
-You cannot create a codespace in an empty repository. If your repository is empty, create a file in the repository before creating a codespace. For more information, see "[Adding a file to a repository](/github/managing-files-in-a-repository/adding-a-file-to-a-repository)" and "[Adding a file to a repository using the command line](/github/managing-files-in-a-repository/adding-a-file-to-a-repository-using-the-command-line)."
+When you create a codespace, a number of steps happen to enable full access to your development environment.
 
-The environment of the codespace you create will be based on the repository's configuration. For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/github/developing-online-with-codespaces/configuring-codespaces-for-your-project)."
+- Resources such as a VM and storage for your container are assigned. A new VM is created every time you create or start a codespace to ensure that you always have the latest versions and security patches.
+- {% data variables.product.prodname_codespaces %} recieves information about your repository, branch, commits, your public dotfiles repository, and any secrets that you have created.
+- {% data variables.product.prodname_codespaces %} executes a shallow clone of the repository.
+- If you have one in your repository, {% data variables.product.prodname_codespaces %} runs the `devcontainer.json` file. For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/github/developing-online-with-codespaces/configuring-codespaces-for-your-project)."
+- Your Docker container, `docker-compose`, or other initialization is run.
+- At this point, the codespace is marked as available and you can connect.
+- Once the codespace is made available, depending on the commands in the devcontainer, the codespace will continue with some set up.
+  - The codespace shares ports added in the `devcontainer.json` file.
+  - The codespace runs anything specified in `postCreateCommand`.
+  - {% data variables.product.prodname_codespaces %} clones your dotfiles repository to the codespaces environment and looks for an install file. For more information, see "[Personalizing {% data variables.product.prodname_codespaces %} for your account](/github/developing-online-with-codespaces/personalizing-codespaces-for-your-account)."
+  - Finally, the codespace does a full clone of the repo so you have full access to it.
 
-{% data reusables.codespaces.about-personalization %} For more information, see "[Personalizing {% data variables.product.prodname_codespaces %} for your account](/github/developing-online-with-codespaces/personalizing-codespaces-for-your-account)."
 
 {% data reusables.codespaces.use-visual-studio-features %}
 
@@ -48,4 +58,4 @@ The environment of the codespace you create will be based on the repository's co
   ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
 
 
-   
+   

content/codespaces/developing-in-codespaces/deleting-a-codespace.md

@@ -1,21 +1,31 @@
 ---
 title: Deleting a codespace
 intro: You can delete a codespace you no longer need.
-product: '{% data reusables.gated-features.codespaces %}'
 permissions: Anyone can delete a codespace owned by their user account.
 redirect_from:
   - /github/developing-online-with-github-codespaces/deleting-a-codespace
   - /github/developing-online-with-codespaces/deleting-a-codespace
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
   - Codespaces
+  - Fundamentals
+  - Developer
 ---
 
 {% data reusables.codespaces.release-stage %}
 
 {% data reusables.codespaces.concurrent-codespace-limit %}
 
-{% data reusables.codespaces.navigate-to-codespaces %}
+1. Navigate to the repository where you created the codespace. Select **{% octicon "codespaces" aria-label="The codespaces icon" %} Codespaces** and then click {% octicon "gear" aria-label="The Settings gear" %}. This will display all {% data variables.product.prodname_codespaces %} that you have created in the repository.
-2. To the right of the codespace you want to delete, click **Delete**.
+  ![Codespaces tab](/assets/images/help/codespaces/codespaces-manage.png)
+  
+  Alternatively, you can see every codespace owned by your user account at [github.com/codespaces](https://github.com/codespaces).
+
+2. To the right of the codespace you want to delete, click {% octicon "kebab-horizontal" aria-label="The horizontal kebab icon" %}, then click **{% octicon "trash" aria-label="The trash icon" %} Delete**
   ![Delete button](/assets/images/help/codespaces/delete-codespace.png)
+
+### Deleting a codespace in {% data variables.product.prodname_vscode %}
+
+For information on deleting a codespace in {% data variables.product.prodname_vscode %}, see "[Using Codespaces in Visual Studio Code](/codespaces/developing-in-codespaces/using-codespaces-in-visual-studio-code#deleting-a-codespace-in-visual-studio-code)."

content/codespaces/developing-in-codespaces/developing-in-a-codespace.md

@@ -1,33 +1,56 @@
 ---
 title: Developing in a codespace
 intro: 'You can open a codespace on {% data variables.product.product_name %}, then develop using {% data variables.product.prodname_vscode %}''s features.'
-product: '{% data reusables.gated-features.codespaces %}'
 permissions: Anyone can develop in a codespace owned by their user account.
 redirect_from:
   - /github/developing-online-with-github-codespaces/developing-in-a-codespace
   - /github/developing-online-with-codespaces/developing-in-a-codespace
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
   - Codespaces
+  - Fundamentals
+  - Developer
 ---
 
-### About development with {% data variables.product.prodname_codespaces %}
-
 {% data reusables.codespaces.release-stage %}
 
-{% data reusables.codespaces.use-visual-studio-features %}
+### About development with {% data variables.product.prodname_codespaces %}
 
-{% data reusables.codespaces.about-port-forwarding %} For more information, see "[Forwarding ports in your codespace](/github/developing-online-with-codespaces/forwarding-ports-in-your-codespace)."
+{% data variables.product.prodname_codespaces %} provides you with the full development experience of {% data variables.product.prodname_vscode %}. {% data reusables.codespaces.use-visual-studio-features %}
 
-{% data reusables.codespaces.apply-devcontainer-changes %} For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/github/developing-online-with-codespaces/configuring-codespaces-for-your-project#apply-changes-to-your-configuration)."
+![Codespace overview with annotations](/assets/images/help/codespaces/codespace-overview-annotated.png)
 
-{% data reusables.codespaces.use-chrome %} For more information, see "[Troubleshooting your codespace](/github/developing-online-with-codespaces/troubleshooting-your-codespace)."
+1. Side Bar - By default, this area shows your project files in the Explorer.
+2. Activity Bar - This displays the Views and provides you with a way to switch between them. You can reorder the Views by dragging and dropping them.
+3. Editor - This is where you edit your files. You can use the tab for each editor to position it exactly where you need it.
+4. Panels - This is where you can see output and debug information, as well as the default place for the integrated Terminal.
+5. Status Bar - This area provides you with useful information about your codespace and project. For example, the branch name, configured ports, and more.
+
+For more information on using {% data variables.product.prodname_vscode %}, see the [User Interface guide](https://code.visualstudio.com/docs/getstarted/userinterface) in the {% data variables.product.prodname_vscode %} documentation.
 
 {% data reusables.codespaces.connect-to-codespace-from-vscode %}
 
-### Navigating to your codespace
+{% data reusables.codespaces.use-chrome %} For more information, see "[Troubleshooting your codespace](/github/developing-online-with-codespaces/troubleshooting-your-codespace)."
 
-{% data reusables.codespaces.navigate-to-codespaces %}
+#### Personalizing your codespace
+
+{% data reusables.codespaces.about-personalization %} For more information, see "[Personalizing {% data variables.product.prodname_codespaces %} for your account](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account)."
+
+{% data reusables.codespaces.apply-devcontainer-changes %} For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/github/developing-online-with-codespaces/configuring-codespaces-for-your-project#apply-changes-to-your-configuration)."
+
+#### Running your app from a codespace
+{% data reusables.codespaces.about-port-forwarding %} For more information, see "[Forwarding ports in your codespace](/github/developing-online-with-codespaces/forwarding-ports-in-your-codespace)."
+
+#### Committing your changes
+
+{% data reusables.codespaces.committing-link-to-procedure %} 
+
+### Navigating to an existing codespace
+
+1. {% data reusables.codespaces.you-can-see-all-your-codespaces %}
 2. Click the name of the codespace you want to develop in.
   ![Name of codespace](/assets/images/help/codespaces/click-name-codespace.png)
+
+Alternatively, you can see any active codespaces for a repository by navigating to the repository in which it was made and selecting **{% octicon "codespaces" aria-label="The codespaces icon" %} Codespaces**.

content/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace.md

@@ -1,15 +1,19 @@
 ---
 title: Forwarding ports in your codespace
 intro: '{% data reusables.codespaces.about-port-forwarding %}'
-product: '{% data reusables.gated-features.codespaces %}'
 versions:
   free-pro-team: '*'
 redirect_from:
   - /github/developing-online-with-codespaces/forwarding-ports-in-your-codespace
+type: how_to
 topics:
   - Codespaces
+  - Fundamentals
+  - Developer
 ---
 
+{% data reusables.codespaces.release-stage %}
+
 ### About forwarded ports
 
 Port forwarding gives you access to TCP ports running within your codespace. For example, if you're running a web application on port 4000, you can access the application from your browser to test and debug the application.
@@ -52,7 +56,7 @@ If you want to share a forwarded port with others, you can make the port public.
 
 ### Adding a port to the codespace configuration
 
-You can add a forwarded port to the {% data variables.product.prodname_codespaces %} configuration for the repository, so the port will automatically be forwarded for all codespaces created from the repository. After you update the configuration, any previously created codespaces must be rebuilt for the change to apply. For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/github/developing-online-with-codespaces#applying-changes-to-your-configuration)."
+You can add a forwarded port to the {% data variables.product.prodname_codespaces %} configuration for the repository, so the port will automatically be forwarded for all codespaces created from the repository. After you update the configuration, any previously created codespaces must be rebuilt for the change to apply. For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project#applying-changes-to-your-configuration)."
 
 You can manually configure fowarded ports in a `.devcontainer.json` file using the `forwardPorts` property, or you can use the "Ports" panel in your codespace.
 

content/codespaces/developing-in-codespaces/index.md

@@ -1,7 +1,6 @@
 ---
 title: Developing in a codespace
 intro: 'Create a codespace to get started with developing your project inside a dedicated cloud environment. You can use forwarded ports to run your application and even use codespaces inside {% data variables.product.prodname_vscode %}'
-product: '{% data reusables.gated-features.codespaces %}'
 versions:
   free-pro-team: '*'
 topics:

content/codespaces/developing-in-codespaces/using-codespaces-in-visual-studio-code.md

@@ -1,15 +1,17 @@
 ---
 title: Using Codespaces in Visual Studio Code
 intro: 'You can develop in your codespace directly in {% data variables.product.prodname_vscode %} by connecting the {% data variables.product.prodname_github_codespaces %} extension with your account on {% data variables.product.product_name %}.'
-product: '{% data reusables.gated-features.codespaces %}'
 redirect_from:
   - /github/developing-online-with-codespaces/using-codespaces-in-visual-studio-code
   - /github/developing-online-with-codespaces/connecting-to-your-codespace-from-visual-studio-code
   - /github/developing-online-with-codespaces/using-codespaces-in-visual-studio
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
   - Codespaces
+  - Visual Studio Code
+  - Developer
 ---
 
 {% data reusables.codespaces.release-stage %}
@@ -18,7 +20,21 @@ topics:
 
 To develop in a codespace directly in {% data variables.product.prodname_vscode %}, you must sign into the {% data variables.product.prodname_github_codespaces %} extension. The {% data variables.product.prodname_github_codespaces %} extension requires {% data variables.product.prodname_vscode %} October 2020 Release 1.51 or later.
 
-1. Use the {% data variables.product.prodname_vs %} Marketplace to install the [{% data variables.product.prodname_github_codespaces %}](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces) extension. For more information, see [Extension Marketplace](https://code.visualstudio.com/docs/editor/extension-gallery) in the {% data variables.product.prodname_vscode %} documentation.
+Use the {% data variables.product.prodname_vs %} Marketplace to install the [{% data variables.product.prodname_github_codespaces %}](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces) extension. For more information, see [Extension Marketplace](https://code.visualstudio.com/docs/editor/extension-gallery) in the {% data variables.product.prodname_vscode %} documentation.
+
+
+{% mac %}
+
+{% data reusables.codespaces.click-remote-explorer-icon-vscode %}
+2. Click **Sign in to view {% data variables.product.prodname_dotcom %}...**.
+   ![Signing in to view {% data variables.product.prodname_codespaces %}](/assets/images/help/codespaces/sign-in-to-view-codespaces-vscode-mac.png)
+3. To authorize {% data variables.product.prodname_vscode %} to access your account on {% data variables.product.product_name %}, click **Allow**.
+4. Sign in to {% data variables.product.product_name %} to approve the extension.
+
+{% endmac %}
+
+{% windows %}
+
 {% data reusables.codespaces.click-remote-explorer-icon-vscode %}
 2. Use the "REMOTE EXPLORER" drop-down, then click **{% data variables.product.prodname_github_codespaces %}**.
    ![The {% data variables.product.prodname_codespaces %} header](/assets/images/help/codespaces/codespaces-header-vscode.png)
@@ -27,6 +43,8 @@ To develop in a codespace directly in {% data variables.product.prodname_vscode
 4. To authorize {% data variables.product.prodname_vscode %} to access your account on {% data variables.product.product_name %}, click **Allow**.
 5. Sign in to {% data variables.product.product_name %} to approve the extension.
 
+{% endwindows %}
+
 ### Creating a codespace in {% data variables.product.prodname_vscode %}
 
 After you connect your {% data variables.product.product_name %} account to the {% data variables.product.prodname_github_codespaces %} extension, you can develop in a codespace that you created on {% data variables.product.product_name %} or in {% data variables.product.prodname_vscode %}.

content/codespaces/developing-in-codespaces/using-source-control-in-your-codespace.md

@@ -1,17 +1,19 @@
 ---
 title: Using source control in your codespace
 intro: 'After making changes to a file in your codespace you can quickly commit the changes and push your update to the remote repository.'
-product: '{% data reusables.gated-features.codespaces %}'
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
   - Codespaces
+  - Fundamentals
+  - Developer
 ---
 
-### About source control in {% data variables.product.prodname_codespaces %}
-
 {% data reusables.codespaces.release-stage %}
 
+### About source control in {% data variables.product.prodname_codespaces %}
+
 You can perform all the Git actions you need directly within your codespace. For example, you can fetch changes from the remote repository, switch branches, create a new branch, commit and push changes, and create a pull request. You can use the integrated terminal within your codespace to enter Git commands, or you can click icons and menu options to complete all the most common Git tasks. This guide explains how to use the graphical user interface for source control.
 
 Source control in {% data variables.product.prodname_github_codespaces %} uses the same workflow as {% data variables.product.prodname_vscode %}. For more information, see the {% data variables.product.prodname_vscode %} documentation "[Using Version Control in VS Code](https://code.visualstudio.com/docs/editor/versioncontrol#_git-support)."

content/codespaces/getting-started-with-codespaces/getting-started-with-your-dotnet-project.md

@@ -0,0 +1,223 @@
+---
+title: Getting started with your C# (.NET) project in Codespaces
+shortTitle: Getting started with your C# (.NET) project
+allowTitleToDifferFromFilename: true
+intro: 'Get started with your C# (.NET) project in {% data variables.product.prodname_codespaces %} by creating a custom dev container.'
+versions:
+  free-pro-team: '*'
+topics:
+  - Codespaces
+---
+
+{% data reusables.codespaces.release-stage %}
+
+### Introduction
+
+This guide shows you how to set up your C# (.NET) project in {% data variables.product.prodname_codespaces %}. It will take you through an example of opening your project in a codespace, and adding and modifying a dev container configuration from a template.
+
+#### Prerequisites 
+
+- You should have an existing C# (.NET) project in a repository on {% data variables.product.prodname_dotcom_the_website %}. If you don't have a project, you can try this tutorial with the following example: https://github.com/2percentsilk/dotnet-quickstart.
+- You must have {% data variables.product.prodname_codespaces %} enabled for your organization.
+
+### Step 1: Open your project in a codespace
+
+1. Navigate to your project's repository. Use the {% octicon "download" aria-label="The download icon" %} **Code** drop-down menu, and select **Open with Codespaces**. If you don’t see this option, your project isn’t available for {% data variables.product.prodname_codespaces %}.
+  
+  ![Open with Codespaces button](/assets/images/help/codespaces/open-with-codespaces-button.png) 
+
+2. To create a new codespace, click {% octicon "plus" aria-label="The plus icon" %} **New codespace**.
+  ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
+
+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. 
+
+{% data variables.product.prodname_codespaces %} uses a file called `devcontainer.json` to store configurations. On launch {% data variables.product.prodname_codespaces %} uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+
+
+### Step 2: Add a dev container to your codespace from a template  
+
+The default codespaces container comes with the latest .NET version and common tools preinstalled. However, we encourage you to set up a custom container so you can tailor the tools and scripts that run as part of codespace creation to your project's needs and ensure a fully reproducible environment for all {% data variables.product.prodname_codespaces %} users in your repository.
+
+To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Configuring Codespaces for your project
+](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+
+
+1. Access the command palette (`shift command P` / `shift control P`), then start typing "dev container". Click **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. To rebuild your container, access the command palette (`shift command P` / `shift control P`), then start typing "rebuild". Click **Codespaces: Rebuild Container**. 
+  ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+
+#### Anatomy of your dev container
+
+Adding the C# (.NET) dev container template adds a `.devcontainer` folder 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 after the sample.
+
+##### devcontainer.json
+
+```json
+{
+	"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],
+
+	// [Optional] To reuse of your local HTTPS dev cert:
+	//
+	// 1. Export it locally using this command:
+	//    * Windows PowerShell:
+	//        dotnet dev-certs https --trust; dotnet dev-certs https -ep "$env:USERPROFILE/.aspnet/https/aspnetapp.pfx" -p "SecurePwdGoesHere"
+	//    * macOS/Linux terminal:
+	//        dotnet dev-certs https --trust; dotnet dev-certs https -ep "${HOME}/.aspnet/https/aspnetapp.pfx" -p "SecurePwdGoesHere"
+	// 
+	// 2. Uncomment these 'remoteEnv' lines:
+	//    "remoteEnv": {
+	// 	      "ASPNETCORE_Kestrel__Certificates__Default__Password": "SecurePwdGoesHere",
+	//        "ASPNETCORE_Kestrel__Certificates__Default__Path": "/home/vscode/.aspnet/https/aspnetapp.pfx",
+	//    },
+	//
+	// 3. Do one of the following depending on your scenario:
+	//    * When using GitHub Codespaces and/or Remote - Containers:
+	//      1. Start the container
+	//      2. Drag ~/.aspnet/https/aspnetapp.pfx into the root of the file explorer
+	//      3. Open a terminal in VS Code and run "mkdir -p /home/vscode/.aspnet/https && mv aspnetapp.pfx /home/vscode/.aspnet/https"
+	//
+	//    * If only using Remote - Containers with a local container, uncomment this line instead:
+	//      "mounts": [ "source=${env:HOME}${env:USERPROFILE}/.aspnet/https,target=/home/vscode/.aspnet/https,type=bind" ],
+
+	// 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"
+}
+```
+
+- **Name** - You can name our dev container anything, this is just the default.
+- **Build** - The build properties.
+  - **Dockerfile** - In the build object, `dockerfile` is a reference 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.
+- **Settings** - These are {% data variables.product.prodname_vscode %} settings.
+  - **Terminal.integrated.shell.linux** - While bash is the default here, you could use other terminal shells by modifying this.
+- **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.
+- **forwardPorts** - Any ports listed here will be forwarded automatically.
+- **postCreateCommand** - If you want to run anything after you land in your codespace that’s not defined in the Dockerfile, like `dotnet restore`, you can do that here.
+- **remoteUser** - By default, you’re running as the vscode user, but you can optionally set this to root.
+
+##### Dockerfile
+
+```bash
+# [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
+```
+
+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.
+
+### Step 3: Modify your devcontainer.json file 
+
+With your dev container added and a basic understanding of what everything does, you can now make changes to configure it for your environment. In this example, you'll add properties to install extensions and restore your project dependancies when your codespace launches.
+
+1. In the Explorer, expand the `.devcontainer` folder and select the `devcontainer.json` file from the tree to open it. 
+
+  !["Codespaces: Rebuild Container" in the command palette](/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. To rebuild your container and apply the devcontainer.json changes, access the command palette (`shift command P` / `shift control P`), then start typing "rebuild". Click **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.
+
+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) 
+   
+### Step 4: Run your application
+
+In the previous section, you used the `postCreateCommand` to installing a set of packages via pip3. 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 toast 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)
+
+### Step 5: Commit your changes
+
+{% data reusables.codespaces.committing-link-to-procedure %} 
+
+### Next steps
+
+You should now be ready start developing your C# (.NET) project in {% data variables.product.prodname_codespaces %}. Here are some additional resources for more advanced scenarios.
+
+- [Managing encrypted secrets for {% data variables.product.prodname_codespaces %}](/codespaces/working-with-your-codespace/managing-encrypted-secrets-for-codespaces)
+- [Managing GPG verification for {% data variables.product.prodname_codespaces %}](/codespaces/working-with-your-codespace/managing-gpg-verification-for-codespaces)
+- [Forwarding ports in your codespace](/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace)

content/codespaces/getting-started-with-codespaces/getting-started-with-your-java-project-in-codespaces.md

@@ -0,0 +1,193 @@
+---
+title: Getting started with your Java project in Codespaces
+shortTitle: Getting started with your Java project
+intro: 'Get started with your Java project in {% data variables.product.prodname_codespaces %} by creating a custom dev container.'
+versions:
+  free-pro-team: '*'
+topics:
+  - Codespaces
+---
+
+{% data reusables.codespaces.release-stage %}
+
+### Introduction
+
+This guide shows you how to set up your Java project in {% data variables.product.prodname_codespaces %}. It will take you through an example of opening your project in a codespace, and adding and modifying a dev container configuration from a template.
+
+#### Prerequisites 
+
+- You should have an existing Java project in a repository on {% data variables.product.prodname_dotcom_the_website %}. If you don't have a project, you can try this tutorial with the following example: https://github.com/microsoft/vscode-remote-try-java
+- You must have {% data variables.product.prodname_codespaces %} enabled for your organization.
+
+### Step 1: Open your project in a codespace
+
+1. Navigate to your project's repository. Use the {% octicon "download" aria-label="The download icon" %} **Code** drop-down menu, and select **Open with Codespaces**. If you don’t see this option, your project isn’t available for {% data variables.product.prodname_codespaces %}.
+  
+  ![Open with Codespaces button](/assets/images/help/codespaces/open-with-codespaces-button.png) 
+
+2. To create a new codespace, click {% octicon "plus" aria-label="The plus icon" %} **New codespace**.
+  ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
+
+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. 
+
+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. 
+
+{% data variables.product.prodname_codespaces %} uses a file called `devcontainer.json` to store configurations. On launch {% data variables.product.prodname_codespaces %} uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+
+
+### Step 2: Add a dev container to your codespace from a template  
+
+The default codespaces container comes with the latest Java version, package managers (Maven, Gradle), and other common tools preinstalled. However, we recommend that you set up a custom container to define the tools and scripts that your project needs. This will ensure a fully reproducible environment for all {% data variables.product.prodname_codespaces %} users in your repository.
+
+To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+
+
+1. Access the command palette (`shift command P` / `shift control P`), then start typing "dev container". Click **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)
+3. 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)
+4. Click the recommended version of Java.
+  ![Java version selection](/assets/images/help/codespaces/add-java-version.png)
+5. To rebuild your container, access the command palette (`shift command P` / `shift control P`), then start typing "rebuild". Click **Codespaces: Rebuild Container**. 
+  ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+
+#### Anatomy of your dev container
+
+Adding the Java dev container template adds a `.devcontainer` folder 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 after the sample.
+
+##### devcontainer.json
+
+```json
+// 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"
+}
+```
+
+- **Name** - You can name your dev container anything, this is just the default.
+- **Build** - The build properties.
+  - **Dockerfile** - In the build object, dockerfile is a reference 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.
+- **Settings** - These are {% data variables.product.prodname_vscode %} settings that you can set.
+  - **Terminal.integrated.shell.linux** - While bash is the default here, you could use other terminal shells by modifying this.
+- **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.
+- **forwardPorts** - Any ports listed here will be forwarded automatically.
+- **postCreateCommand** - If you want to run anything after you land in your codespace that’s not defined in the Dockerfile, you can do that here.
+- **remoteUser** - By default, you’re running as the `vscode` user, but you can optionally set this to `root`.
+
+##### Dockerfile
+
+```bash
+# 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
+```
+
+You can use the Dockerfile to add additional container layers to specify OS packages, Java versions, or global packages we want included in our Dockerfile.
+
+### Step 3: Modify your devcontainer.json file 
+
+With your dev container added and a basic understanding of what everything does, you can now make changes to configure it for your environment. In this example, you'll add properties to install extensions and your project dependencies when your codespace launches.
+
+1. In the Explorer, select the `devcontainer.json` file from the tree to open it. You might have to exand the `.devcontainer` folder to see it. 
+
+  !["Codespaces: Rebuild Container" in the command palette](/assets/images/help/codespaces/devcontainers-options.png)  
+
+2. Add the following lines to your `devcontainer.json` file after `extensions`.
+
+  ```json{:copy}
+  "postCreateCommand": "npm install",
+  "forwardPorts": [4000],
+  ```
+
+  For more information on `devcontainer.json` properties, see the [devcontainer.json reference](https://code.visualstudio.com/docs/remote/devcontainerjson-reference) on the Visual Studio Code docs.
+
+3. To rebuild your container, access the command palette (`shift command P` / `shift control P`), then start typing "rebuild". Click **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.
+
+
+### Step 4: Run your application
+
+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 toast 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)
+
+### Step 5: Commit your changes
+
+{% data reusables.codespaces.committing-link-to-procedure %}
+
+### Next steps
+
+You should now be ready start developing your Java project in {% data variables.product.prodname_codespaces %}. Here are some additional resources for more advanced scenarios.
+
+- [Managing encrypted secrets for {% data variables.product.prodname_codespaces %}](/codespaces/working-with-your-codespace/managing-encrypted-secrets-for-codespaces)
+- [Managing GPG verification for {% data variables.product.prodname_codespaces %}](/codespaces/working-with-your-codespace/managing-gpg-verification-for-codespaces)
+- [Forwarding ports in your codespace](/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace)

content/codespaces/getting-started-with-codespaces/getting-started-with-your-nodejs-project-in-codespaces.md

@@ -1,14 +1,18 @@
 ---
 title: Getting started with your Node.js project in Codespaces
 shortTitle: Getting started with your Node.js project
-intro: 'You can create a custom dev container with all the tools necessary to get started with your JavaScript, Node.js, or TypeScript project in {% data variables.product.prodname_codespaces %}.'
+intro: 'Get started with your JavaScript, Node.js, or TypeScript project in {% data variables.product.prodname_codespaces %} by creating a custom dev container.'
-product: '{% data reusables.gated-features.codespaces %}'
 versions:
   free-pro-team: '*'
+type: tutorial
 topics:
   - Codespaces
+  - Developer
+  - Node
+  - JavaScript
 ---
 
+{% data reusables.codespaces.release-stage %}
 
 ### Introduction
 
@@ -170,7 +174,6 @@ In the previous section, you used the `postCreateCommand` to installing a set of
 
 You should now be ready start developing your JavaScript project in {% data variables.product.prodname_codespaces %}. Here are some additional resources for more advanced scenarios.
 
-- [Managing encrypted secrets for {% data variables.product.prodname_codespaces %}](/codespaces/working-with-your-codespace/managing-encrypted-secrets-for-codespaces)
+- [Managing encrypted secrets for your codespaces](/codespaces/managing-your-codespaces/managing-encrypted-secrets-for-your-codespaces)
-- [Managing GPG verification for {% data variables.product.prodname_codespaces %}](/codespaces/working-with-your-codespace/managing-gpg-verification-for-codespaces)
+- [Managing GPG verification for {% data variables.product.prodname_codespaces %}](/codespaces/managing-your-codespaces/managing-gpg-verification-for-codespaces)
 - [Forwarding ports in your codespace](/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace)
-

content/codespaces/getting-started-with-codespaces/getting-started-with-your-python-project-in-codespaces.md

@@ -1,14 +1,17 @@
 ---
 title: Getting started with your Python project in Codespaces
 shortTitle: Getting started with your Python project
-intro: 'You can create a custom dev container with all the tools necessary to get started with your Python project in {% data variables.product.prodname_codespaces %}.'
+intro: 'Get started with your Python project in {% data variables.product.prodname_codespaces %} by creating a custom dev container.'
-product: '{% data reusables.gated-features.codespaces %}'
 versions:
   free-pro-team: '*'
+type: tutorial
 topics:
   - Codespaces
+  - Developer
+  - Python
 ---
 
+{% data reusables.codespaces.release-stage %}
 
 ### Introduction
 

content/codespaces/getting-started-with-codespaces/index.md

@@ -5,7 +5,13 @@ versions:
   free-pro-team: '*'
 ---
 
+{% data reusables.codespaces.release-stage %}
+
 {% link_with_intro /getting-started-with-your-nodejs-project-in-codespaces %}
 
+{% link_with_intro /getting-started-with-your-dotnet-project %}
+
+{% link_with_intro /getting-started-with-your-java-project-in-codespaces %}
+
 {% link_with_intro /getting-started-with-your-python-project-in-codespaces %}
 

content/codespaces/guides.md

@@ -0,0 +1,27 @@
+---
+title: Codespaces guides
+shortTitle: Guides
+intro: Learn how to make the most of GitHub {% data reusables.gated-features.codespaces %}
+allowTitleToDifferFromFilename: true
+layout: product-sublanding
+versions:
+  free-pro-team: '*'
+includeGuides:
+  - /codespaces/quickstart
+  - /codespaces/getting-started-with-codespaces/getting-started-with-your-nodejs-project-in-codespaces
+  - /codespaces/getting-started-with-codespaces/getting-started-with-your-python-project-in-codespaces
+  - /codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project
+  - /codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account
+  - /codespaces/developing-in-codespaces/creating-a-codespace
+  - /codespaces/developing-in-codespaces/developing-in-a-codespace
+  - /codespaces/developing-in-codespaces/deleting-a-codespace
+  - /codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace
+  - /codespaces/developing-in-codespaces/using-codespaces-in-visual-studio-code
+  - /codespaces/developing-in-codespaces/using-source-control-in-your-codespace
+  - /codespaces/managing-your-codespaces/managing-encrypted-secrets-for-your-codespaces
+  - /codespaces/managing-your-codespaces/managing-access-and-security-for-your-codespaces
+  - /codespaces/managing-your-codespaces/managing-gpg-verification-for-codespaces
+  - /codespaces/managing-codespaces-for-your-organization/managing-access-and-security-for-your-organizations-codespaces
+  - /codespaces/managing-codespaces-for-your-organization/managing-user-permissions-for-your-organization
+  - /codespaces/managing-codespaces-for-your-organization/reviewing-your-organizations-audit-logs-for-codespaces
+---

content/codespaces/index.md

@@ -1,25 +1,42 @@
 ---
-title: 'Developing online with {% data variables.product.prodname_codespaces %}'
+title: GitHub Codespaces Documentation
-shortTitle: Codespaces
+beta_product: true
-intro: 'You can develop entirely in the cloud using {% data variables.product.prodname_codespaces %}, an integrated development environment (IDE) on {% data variables.product.prodname_dotcom %}.'
+shortTitle: GitHub Codespaces
-product: '{% data reusables.gated-features.codespaces %}'
+intro: 'Create a codespace to start developing in a secure, configurable, and dedicated development environment that works how and where you want it to.'
+introLinks:
+  quickstart: /codespaces/quickstart
+  overview: /codespaces/about-codespaces
+featuredLinks:
+  guides:
+    - /codespaces/getting-started-with-codespaces/getting-started-with-your-nodejs-project-in-codespaces
+    - /codespaces/getting-started-with-codespaces/getting-started-with-your-python-project-in-codespaces
+    - /codespaces/getting-started-with-codespaces/getting-started-with-your-java-project-in-codespaces
+    - /codespaces/getting-started-with-codespaces/getting-started-with-your-dotnet-project
+  guideCards:
+    - /codespaces/developing-in-codespaces/creating-a-codespace
+    - /codespaces/developing-in-codespaces/developing-in-a-codespace 
+    - /codespaces/developing-in-codespaces/using-codespaces-in-visual-studio-code
+    - /codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account
+  popular:
+    - /codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project
+    - /codespaces/managing-codespaces-for-your-organization/managing-user-permissions-for-your-organization
+    - /codespaces/managing-codespaces-for-your-organization/managing-access-and-security-for-your-organizations-codespaces
+    - /codespaces/managing-codespaces-for-your-organization/reviewing-your-organizations-audit-logs-for-codespaces
+  popularHeading: Managing GitHub Codespaces
+product_video: https://www.youtube-nocookie.com/embed/_W9B7qc9lVc
 redirect_from:
   - /github/developing-online-with-github-codespaces
   - /github/developing-online-with-codespaces
+layout: product-landing
 versions:
   free-pro-team: '*'
-topics:
-  - Codespaces
 ---
 
-{% data reusables.codespaces.release-stage %}
+<!-- {% link_in_list /about-codespaces %} -->
-
+<!-- {% link_in_list /quickstart %} -->
-### Table of Contents
+<!-- {% link_in_list /getting-started-with-codespaces %} -->
-
+<!-- {% link_in_list /setting-up-your-codespace %} -->
-{% link_in_list /about-codespaces %}
+<!-- {% link_in_list /developing-in-codespaces %} -->
-{% link_in_list /codespaces-quickstart %}
+<!-- {% link_in_list /managing-your-codespaces %} -->
-{% link_in_list /getting-started-with-codespaces %}
+<!-- {% link_in_list /managing-codespaces-for-your-organization %} -->
-{% link_in_list /setting-up-your-codespace %}
+<!-- {% link_in_list /codespaces-reference %} -->
-{% link_in_list /developing-in-codespaces %}
-{% link_in_list /working-with-your-codespace %}
-{% link_in_list /codespaces-reference %}

content/codespaces/managing-codespaces-for-your-organization/index.md

@@ -0,0 +1,20 @@
+---
+title: Managing Codespaces for your organization
+intro: 'You can manange and review how users in your organization can use  {% data variables.product.prodname_github_codespaces %}.'
+versions:
+  free-pro-team: '*'
+topics:
+  - Codespaces
+---
+
+{% data reusables.codespaces.release-stage %}
+
+{% link_with_intro /managing-encrypted-secrets-for-your-repository-and-organization-for-codespaces %}
+
+{% link_with_intro /managing-access-and-security-for-your-organizations-codespaces %}
+
+{% link_with_intro /managing-user-permissions-for-your-organization %}
+
+{% link_with_intro /reviewing-your-organizations-audit-logs-for-codespaces %}
+
+

content/codespaces/managing-codespaces-for-your-organization/managing-access-and-security-for-your-organizations-codespaces.md

@@ -0,0 +1,32 @@
+---
+title: Managing access and security for your organization's codespaces
+shortTitle: Managing access and security for your organization
+intro: You can manage the repositories in your organization that {% data variables.product.prodname_codespaces %} can access.
+permissions: To manage access and security for Codespaces for an organization, you must be an organization owner.
+versions:
+  free-pro-team: '*'
+type: how_to
+topics:
+  - Codespaces
+  - Security
+  - Administrator
+redirect_from:
+  - /github/developing-online-with-codespaces/managing-access-and-security-for-codespaces
+  - /codespaces/working-with-your-codespace/managing-access-and-security-for-codespaces
+---
+
+{% data reusables.codespaces.release-stage %}
+
+Organization owners can manage which repositories a codespace can access.
+
+By default, a codespace can only access the repository where it was created. When you enable access and security for a repository owned by your organization, any codespaces that are created for that repository will also have read and write permissions to all other repositories the organization owns and the codespace creator has permissions to access. If you want to restrict the repositories a codespace can access, you can limit to it to either the repository where the codespace was created, or to specific repositories. You should only enable access and security for repositories you trust.
+
+To manage which users in your organization can use {% data variables.product.prodname_codespaces %}, see "[Managing user permissions for your organization](/codespaces/managing-codespaces-for-your-organization/managing-user-permissions-for-your-organization)."
+
+{% data reusables.profile.access_org %}
+{% data reusables.profile.org_settings %}
+{% data reusables.organizations.click-codespaces %}
+1. Under "Access and security", select the setting you want for your organization.
+  ![Radio buttons to manage trusted repositories](/assets/images/help/settings/codespaces-org-access-and-security-radio-buttons.png)
+1. If you chose "Selected repositories", select the drop-down menu, then click a repository to allow the repository's codespaces to access other repositories owned by your organization. Repeat for all repositories whose codespaces you want to access other repositories.
+    !["Selected repositories" drop-down menu](/assets/images/help/settings/codespaces-access-and-security-repository-drop-down.png)

content/codespaces/managing-codespaces-for-your-organization/managing-encrypted-secrets-for-your-repository-and-organization-for-codespaces.md

@@ -0,0 +1,75 @@
+---
+title: Managing encrypted secrets for your repository and organization for Codespaces
+shortTitle: Managing secrets for your repository and organization
+intro: 'Encrypted secrets allow you to store sensitive information in your organization, repository, or {% data variables.product.prodname_codespaces %}.'
+permissions: To manage secrets for {% data variables.product.prodname_codespaces %} for an organization, you must be an organization owner.
+versions:
+  free-pro-team: '*'
+topics:
+  - Codespaces
+---
+
+{% data reusables.codespaces.release-stage %}
+
+### About secrets
+
+Secrets are encrypted environment variables that you create in an organization or  repository. The secrets that you create are available to use in {% data variables.product.prodname_codespaces %}. GitHub uses a [libsodium sealed box](https://libsodium.gitbook.io/doc/public-key_cryptography/sealed_boxes) to encrypt secrets before they reach GitHub and only decrypts them when you use them in a codespace.
+
+Organization-level secrets let you share secrets between multiple repositories, which reduces the need to create duplicate secrets. You can use access policies to control which repositories can use organization secrets. 
+
+{% data reusables.codespaces.secrets-on-start %}
+
+#### Naming secrets
+
+{% data reusables.codespaces.secrets-naming %} For example, a secret created at the repository level must have a unique name in that repository, and a secret created at the organization level must have a unique name at that level.
+
+  {% data reusables.codespaces.secret-precedence %}
+
+#### Limits for secrets
+
+You can store up to 100 secrets per organization and 100 secrets per repository.
+
+Secrets are limited to 64 KB in size.
+
+### Adding secrets for a repository
+
+To create secrets for an organization repository, you must have administrator access.
+
+{% data reusables.repositories.navigate-to-repo %}
+{% data reusables.repositories.sidebar-settings %}
+{% data reusables.github-actions.sidebar-secret %}
+1. Scroll down the page and under **Secrets**, select **Codespaces**.
+    ![Codespaces option in side bar](/assets/images/help/codespaces/codespaces-option-secrets.png)
+1. At the top of the page, click **New repository secret**.
+1. Type a name for your secret in the **Name** input box.
+1. Enter the value for your secret.
+1. Click **Add secret**.
+
+### Adding secrets for an organization
+
+When creating a secret in an organization, you can use a policy to limit which repositories can access that secret. For example, you can grant access to all repositories, or limit access to only private repositories or a specified list of repositories.
+
+{% data reusables.github-actions.permissions-statement-secrets-organization %}
+
+{% data reusables.organizations.navigate-to-org %}
+{% data reusables.organizations.org_settings %}
+{% data reusables.github-actions.sidebar-secret %}
+1. Scroll down the page and under **Secrets**, select **Codespaces**.
+    ![Codespaces option in side bar](/assets/images/help/codespaces/codespaces-option-secrets-org.png)
+1. At the top of the page, click **New organization secret**.
+1. Type a name for your secret in the **Name** input box.
+1. Enter the **Value** for your secret.
+1. From the **Repository access** dropdown list, choose an access policy.
+    ![Repository Access list with private repositories selected](/assets/images/help/codespaces/secret-repository-access.png)
+1. Click **Add secret**.
+
+### Reviewing access to organization-level secrets
+
+You can check which access policies are applied to a secret in your organization.
+
+{% data reusables.organizations.navigate-to-org %}
+{% data reusables.organizations.org_settings %}
+{% data reusables.github-actions.sidebar-secret %}
+1. The list of secrets includes any configured permissions and policies. For example:
+![Secrets list](/assets/images/help/settings/actions-org-secrets-list.png)
+1. For more details on the configured permissions for each secret, click **Update**.

content/codespaces/managing-codespaces-for-your-organization/managing-user-permissions-for-your-organization.md

@@ -0,0 +1,35 @@
+---
+title: Managing user permissions for your organization
+intro: You can control which users in your organization can use {% data variables.product.prodname_codespaces %}.
+permissions: To manage user permissions for {% data variables.product.prodname_codespaces %} for an organization, you must be an organization owner.
+versions:
+  free-pro-team: '*'
+type: how_to
+topics:
+  - Codespaces
+  - Permissions
+  - Administrator
+---
+
+{% data reusables.codespaces.release-stage %}
+
+### About user permissions for {% data variables.product.prodname_codespaces %}
+
+Organization owners can control which users in your organization can create and use codespaces.
+
+To use codespaces in your organization, your users must have at least write access to the repositories where they want to use a codespace. You can enable codespaces for all users in your organization, or only specific users.
+
+By default, a codespace can only access the repository where it was created. If you want codespaces in your organization to be able to access other organization repositories that the codespace creator can access, see "[Managing access and security for {% data variables.product.prodname_codespaces %}](/codespaces/managing-codespaces-for-your-organization/managing-access-and-security-for-your-organizations-codespaces)."
+
+### Configuring which users in your organization can use {% data variables.product.prodname_codespaces %}
+
+{% data reusables.profile.access_org %}
+{% data reusables.profile.org_settings %}
+{% data reusables.organizations.click-codespaces %}
+1. Under "User permissions", select one of the following options:
+
+   * **Disabled** to not allow any organization members to use {% data variables.product.prodname_codespaces %}.
+   * **Allow for all users** to allow all your organization members to use {% data variables.product.prodname_codespaces %}.
+   * **Selected users** to select specific organization members to use {% data variables.product.prodname_codespaces %}.
+
+   ![Radio buttons for "User permissions"](/assets/images/help/codespaces/organization-user-permission-settings.png)

content/codespaces/managing-codespaces-for-your-organization/reviewing-your-organizations-audit-logs-for-codespaces.md

@@ -0,0 +1,20 @@
+---
+title: Reviewing your organization's audit logs for Codespaces
+shortTitle: Reviewing your organization's audit logs 
+intro: You can use the audit log to review all actions related to {% data variables.product.prodname_codespaces %}.
+versions:
+  free-pro-team: '*'
+type: how_to
+topics:
+  - Codespaces
+  - Security
+  - Administrator
+---
+
+{% data reusables.codespaces.release-stage %}
+
+When any member of your organization performs an action related to {% data variables.product.prodname_codespaces %}, you can review the actions in the audit log. For information about accessing the log, see "[Reviewing your audit log](/organizations/keeping-your-organization-secure/reviewing-the-audit-log-for-your-organization#accessing-the-audit-log)."
+
+![Audit log with Codespaces information](/assets/images/help/settings/codespaces-audit-log-org.png)
+
+The audit log includes details such as who performed the action, what the action was, and when the action was performed. For information on {% data variables.product.prodname_codespaces %} actions, see "[{% data variables.product.prodname_codespaces %} category actions](/organizations/keeping-your-organization-secure/reviewing-the-audit-log-for-your-organization#codespaces-category-actions)."

content/codespaces/managing-your-codespaces/index.md

@@ -1,19 +1,20 @@
 ---
-title: Working with your codespace
+title: Managing your codespaces
 intro: 'You can use {% data variables.product.prodname_github_codespaces %} settings to manage information that your codespace might need.'
-product: '{% data reusables.gated-features.codespaces %}'
 versions:
   free-pro-team: '*'
 topics:
   - Codespaces
+redirect_from:
+  - /codespaces/working-with-your-codespace
 ---
 
 {% data reusables.codespaces.release-stage %}
 
-{% link_with_intro /managing-encrypted-secrets-for-codespaces %}
+{% link_with_intro /managing-encrypted-secrets-for-your-codespaces %}
 
-{% link_with_intro /managing-access-and-security-for-codespaces %}
+{% link_with_intro /managing-access-and-security-for-your-codespaces %}
+
+{% link_with_intro /reviewing-your-security-logs-for-codespaces %}
 
 {% link_with_intro /managing-gpg-verification-for-codespaces %}
-
-{% link_with_intro /troubleshooting-your-codespace %}

content/codespaces/managing-your-codespaces/managing-access-and-security-for-your-codespaces.md

@@ -0,0 +1,19 @@
+---
+title: Managing access and security for your codespaces
+intro: You can manage the repositories that {% data variables.product.prodname_codespaces %} can access.
+versions:
+  free-pro-team: '*'
+topics:
+  - Codespaces
+---
+
+{% data reusables.codespaces.release-stage %}
+
+When you enable access and security for a repository owned by your user account, any codespaces that are created for that repository will have read and write permissions to all other repositories you own. If you want to restrict the repositories a codespace can access, you can limit to it to either the repository the codespace was opened for or specific repositories. You should only enable access and security for repositories you trust. 
+
+{% data reusables.user_settings.access_settings %}
+{% data reusables.user_settings.codespaces-tab %}
+1. Under "Access and security", select the setting you want for your user account.
+  ![Radio buttons to manage trusted repositories](/assets/images/help/settings/codespaces-access-and-security-radio-buttons.png)
+1. If you chose "Selected repositories", select the drop-down menu, then click a repository to allow the repository's codespaces to access other repositories you own. Repeat for all repositories whose codespaces you want to access other repositories you own.
+  !["Selected repositories" drop-down menu](/assets/images/help/settings/codespaces-access-and-security-repository-drop-down.png)

content/codespaces/managing-your-codespaces/managing-encrypted-secrets-for-your-codespaces.md

@@ -1,20 +1,19 @@
 ---
-title: Managing encrypted secrets for Codespaces
+title: Managing encrypted secrets for your codespaces
 intro: 'You can store sensitive information, like tokens, that you want to access in your codespaces via environment variables.'
-product: '{% data reusables.gated-features.codespaces %}'
 versions:
   free-pro-team: '*'
 redirect_from:
   - /github/developing-online-with-codespaces/managing-encrypted-secrets-for-codespaces
+  - /codespaces/working-with-your-codespace/managing-encrypted-secrets-for-codespaces
+type: how_to
 topics:
   - Codespaces
+  - Developer
+  - Security
 ---
 
-{% note %}
+{% data reusables.codespaces.release-stage %}
-
-**Note:** Encrypted secrets for {% data variables.product.prodname_codespaces %} is currently in beta and subject to change.
-
-{% endnote %}
 
 
 ### About encrypted secrets for {% data variables.product.prodname_codespaces %}
@@ -24,18 +23,26 @@ You can add encrypted secrets to your user account that you want to use in your
 - Personal access tokens to cloud services
 - Service principals
 - Subscription identifiers
-- [Credentials for a private image registry](#allowing-your-codespace-to-access-private-images)
+- [Credentials for a private image registry](/codespaces/codespaces-reference/allowing-your-codespace-to-access-a-private-image-registry)
 
 You can choose which repositories should have access to each secret. Then, you can use the secret in any codespace you create for a repository that has access to the secret.
 
+{% data reusables.codespaces.secrets-on-start %}
+
+#### Naming secrets
+
+{% data reusables.codespaces.secrets-naming %} For example, a secret created at the repository level must have a unique name in that repository.
+
+  {% data reusables.codespaces.secret-precedence %}
+
+#### Limits for secrets
+
+You can store up to 100 secrets for {% data variables.product.prodname_codespaces %}.
+
+Secrets are limited to 64 KB in size.
+
 ### Adding a secret
 
-{% note %}
-
-**Note:** Tokens starting with GITHUB_ are reserved
-
-{% endnote %}
-
 {% data reusables.user_settings.access_settings %}
 {% data reusables.user_settings.codespaces-tab %}
 1. To the right of "Codespaces secrets", click **New secret**.
@@ -69,23 +76,4 @@ You can update the value of an existing secret, and you can change which reposit
 1. Under "Codespaces secrets", to the right of the secret you want to delete, click **Delete**.
   !["Delete" button](/assets/images/help/settings/codespaces-secret-delete-button.png)
 1. Read the warning, then click **OK**.
-  ![Confirmation to delete secret](/assets/images/help/settings/codespaces-secret-delete-warning.png)
+  ![Confirmation to delete secret](/assets/images/help/settings/codespaces-secret-delete-warning.png)
-
-### Allowing your codespace to access private images
-
-A registry is a secure space for storing and managing private container images, such as Azure Container Registry or DockerHub. By adding a secret, your codespace can access private images within the registry.
-
-When a codespace launches, {% data variables.product.prodname_codespaces %} will check for the following three secrets, which define the server name, username, and personal access token (PAT) for the container registry. If those secrets are found, {% data variables.product.prodname_codespaces %} will make the registry available inside your codespace.
-
-- `<*>_CONTAINER_REGISTRY_SERVER`
-- `<*>_CONTAINER_REGISTRY_USER`
-- `<*>_CONTAINER_REGISTRY_PASSWORD`
-
-Use the steps in "[Adding a secret](#adding-a-secret)" to add a secret for each of these items. Replace the “<*>” in the name with a consistent identifier. For example, if you had a private image registry in Azure, it might look like the following:
-
-```
-ACR_CONTAINER_REGISTRY_SERVER = mycompany.azurecr.io
-ACR_CONTAINER_REGISTRY_USER = acr-user-here
-ACR_CONTAINER_REGISTRY_PASSWORD = <PAT>
-```
-![Image registry secret example](/assets/images/help/settings/codespaces-image-registry-secret-example.png)

content/codespaces/managing-your-codespaces/managing-gpg-verification-for-codespaces.md

@@ -1,20 +1,19 @@
 ---
 title: Managing GPG verification for Codespaces
 intro: 'You can allow {% data variables.product.company_short %} to automatically use GPG to sign commits you make in your codespaces, so other people can be confident that the changes come from a trusted source.'
-product: '{% data reusables.gated-features.codespaces %}'
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
   - Codespaces
+  - Developer
+  - Security
 redirect_from:
   - /github/developing-online-with-codespaces/managing-gpg-verification-for-codespaces
+  - /codespaces/working-with-your-codespace/managing-gpg-verification-for-codespaces
 ---
 
-{% note %}
+{% data reusables.codespaces.release-stage %}
-
-**Note:** GPG verification for {% data variables.product.prodname_codespaces %} is currently in beta and subject to change.
-
-{% endnote %}
 
 After you enable GPG verification, {% data variables.product.company_short %} will automatically sign commits you make in {% data variables.product.prodname_codespaces %}, and the commits will have a verified status on {% data variables.product.product_name %}. By default, GPG verification is disabled for codespaces you create. You can choose to allow GPG verification for all repositories or specific repositories. Only enable GPG verification for repositories that you trust. For more information about {% data variables.product.product_name %}-signed commits, see "[About commit signature verification](/github/authenticating-to-github/about-commit-signature-verification)."
 

content/codespaces/managing-your-codespaces/reviewing-your-security-logs-for-codespaces.md

@@ -0,0 +1,21 @@
+---
+title: Reviewing your security logs for Codespaces
+shortTitle: Reviewing your security logs 
+intro: You can use the security log to review all actions related to {% data variables.product.prodname_codespaces %}.
+versions:
+  free-pro-team: '*'
+topics:
+  - Codespaces
+  - Developer
+  - Security
+---
+
+{% data reusables.codespaces.release-stage %}
+
+### About security logs for {% data variables.product.prodname_codespaces %}
+
+When you perform an action related to {% data variables.product.prodname_codespaces %} in repositories owned by your user account, you can review the actions in the security log. For information about accessing the log, see "[Reviewing your security log](/github/authenticating-to-github/reviewing-your-security-log#accessing-your-security-log)."
+
+![security log with Codespaces information](/assets/images/help/settings/codespaces-audit-log.png)
+
+The security log includes details on what action occured and when you performed it. For information about {% data variables.product.prodname_codespaces %} actions, see "[{% data variables.product.prodname_codespaces %} category actions](/github/authenticating-to-github/reviewing-your-security-log#codespaces-category-actions)".

content/codespaces/quickstart.md

@@ -1,19 +1,17 @@
 ---
-title: Codespaces quickstart
+title: Quickstart for GitHub Codespaces
 intro: 'Try out {% data variables.product.prodname_codespaces %} in 5 minutes or less.'
-product: '{% data reusables.gated-features.codespaces %}'
+allowTitleToDifferFromFilename: true
 versions:
   free-pro-team: '*'
 type: quick_start
 topics:
   - Codespaces
+redirect_from:
+  - /codespaces/codespaces-quickstart
 ---
 
-{% note %}
+{% data reusables.codespaces.release-stage %}
-
-**Note:** {% data variables.product.prodname_codespaces %} is currently in limited public beta and subject to change. During the beta period, {% data variables.product.prodname_dotcom %} does not make any guarantees about the availability of {% data variables.product.prodname_codespaces %}.
-
-{% endnote %}
 
 ### Introduction
 
@@ -83,4 +81,4 @@ This example guides you through creating a dotfiles repository for your codespac
 
 You've successfully created, personalized, and run your first application within a codespace but there's so much more to explore! Here are some helpful resources for taking your next steps with {% data variables.product.prodname_codespaces %}.
   - "[Getting Started guides](/codespaces/getting-started-with-codespaces)" for using {% data variables.product.prodname_codespaces %} with specific languages
-  - [Create a custom configuration](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project) to configure {% data variables.product.prodname_codespaces %} for your project.
+  - [Create a custom configuration](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project) to configure {% data variables.product.prodname_codespaces %} for your project.

content/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project.md

@@ -1,15 +1,17 @@
 ---
 title: Configuring Codespaces for your project
 intro: You can use a `devcontainer.json` file to define a {% data variables.product.prodname_codespaces %} environment for your repository. 
-product: '{% data reusables.gated-features.codespaces %}'
 permissions: People with write permissions to a repository can create or edit the codespace configuration.
 redirect_from:
   - /github/developing-online-with-github-codespaces/configuring-github-codespaces-for-your-project
   - /github/developing-online-with-codespaces/configuring-codespaces-for-your-project
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
   - Codespaces
+  - Set up
+  - Fundamentals
 ---
 
 {% data reusables.codespaces.release-stage %}
@@ -32,7 +34,7 @@ For information about the settings and properties that you can set in a `devcont
 
 A Dockerfile also lives in the `.devcontainer` folder. 
 
-You can add a Dockerfile to your project to define a container image and install software. In your Dockerfile, use `FROM` to designate the image, and the `RUN` instruction to install any software. For example:
+You can add a Dockerfile to your project to define a container image and install software. In the Dockerfile, you can use `FROM` to specify the container image.
 
 ```Dockerfile
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14
@@ -46,6 +48,8 @@ FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14
 # USER codespace
 ```
 
+You can use the `RUN` instruction to install any software and `&&` to join commands.
+
 Reference your Dockerfile in your `devcontainer.json` file by using the `dockerfile` property.
 
 ```json
@@ -56,13 +60,13 @@ Reference your Dockerfile in your `devcontainer.json` file by using the `dockerf
 }
 ```
 
-For more information on using a Dockerfile in a dev container, see [](https://code.visualstudio.com/docs/remote/create-dev-container#_dockerfile) in the {% data variables.product.prodname_vscode %} documentation. 
+For more information on using a Dockerfile in a dev container, see [Create a development container](https://code.visualstudio.com/docs/remote/create-dev-container#_dockerfile) in the {% data variables.product.prodname_vscode %} documentation. 
 
 ### Using the default configuration
 
-If you don't define a configuration in your repository, {% data variables.product.prodname_dotcom %} creates a codespace with a base Linux image. The base Linux image includes languages and runtimes like Python, Node.js, JavaScript, TypeScript, C++, Java, .NET, PHP, PowerShell, Go, Ruby, and Rust. It also includes other developer tools and utilities like git, GitHub CLI, yarn, openssh, and vim. To see all the languages, runtimes, and tools that are included use the `devcontainer-info content-url` command inside your codespace terminal and follow the url.
+If you don't define a configuration in your repository, {% data variables.product.prodname_dotcom %} creates a codespace with a base Linux image. The base Linux image includes languages and runtimes like Python, Node.js, JavaScript, TypeScript, C++, Java, .NET, PHP, PowerShell, Go, Ruby, and Rust. It also includes other developer tools and utilities like git, GitHub CLI, yarn, openssh, and vim. To see all the languages, runtimes, and tools that are included use the `devcontainer-info content-url` command inside your codespace terminal and follow the url that the command outputs.
 
-For more information about everything that is included in the base Linux image, see the latest file in the [`microsoft/vscode-dev-containers`](https://github.com/microsoft/vscode-dev-containers/tree/master/containers/codespaces-linux/history) repository. 
+Alternatively, for more information about everything that is included in the base Linux image, see the latest file in the [`microsoft/vscode-dev-containers`](https://github.com/microsoft/vscode-dev-containers) repository. 
 
 The default configuration is a good option if you're working on a small project that uses the languages and tools that {% data variables.product.prodname_codespaces %} provides.
 

content/codespaces/setting-up-your-codespace/index.md

@@ -1,7 +1,6 @@
 ---
 title: Setting up your codespace
 intro: '{% data variables.product.prodname_codespaces %} is a dedicated environment for you. You can configure your codespace with a dev container to install your dependencies or you can add a dotfile to personalize the user settings.'
-product: '{% data reusables.gated-features.codespaces %}'
 versions:
   free-pro-team: '*'
 topics:

content/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account.md

@@ -1,27 +1,50 @@
 ---
 title: Personalizing Codespaces for your account
-intro: '{% data variables.product.prodname_codespaces %} uses your `dotfiles` repository on {% data variables.product.product_name %} to personalize every new codespace that you create.'
+intro: 'You can personalize {% data variables.product.prodname_codespaces %} by using a `dotfiles` repository on {% data variables.product.product_name %} or by using Settings Sync.'
-product: '{% data reusables.gated-features.codespaces %}'
+permissions: 'Anyone can personalize {% data variables.product.prodname_codespaces %} for their user account.'
-permissions: 'Anyone can create a `dotfiles` repository to personalize {% data variables.product.prodname_codespaces %} for their user account.'
 redirect_from:
   - /github/developing-online-with-github-codespaces/personalizing-github-codespaces-for-your-account
   - /github/developing-online-with-codespaces/personalizing-codespaces-for-your-account
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
   - Codespaces
+  - Set up
+  - Fundamentals
 ---
 
 {% data reusables.codespaces.release-stage %}
 
+### About personalizing {% data variables.product.prodname_codespaces %}
+ 
+When using any development environment, customizing the settings and tools to your preferences and workflows is an important step. {% data variables.product.prodname_codespaces %} allows for two main ways of personalizing your codespaces. 
+
+- [Settings Sync](#settings-sync) - You can use and share {% data variables.product.prodname_vscode %} settings between {% data variables.product.prodname_codespaces %} and other instances of {% data variables.product.prodname_vscode %}.
+- [Dotfiles](#dotfiles) – You can use a public `dotfiles` repository to specify scripts, shell preferences, and other configurations.
+
+{% data variables.product.prodname_codespaces %} personalization applies to any codespace you create.
+
+Project maintainers can also define a default configuration that applies to every codespace for a repository, created by anyone. For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/github/developing-online-with-codespaces/configuring-codespaces-for-your-project)." 
+
+### Settings Sync
+
+Settings Sync allows you to share configurations such as settings, keyboard shortcuts, snippets, extensions, and UI state across machines and instances of {% data variables.product.prodname_vscode %}.
+
+Settings Sync is on by default. To configure any settings, in the bottom-left corner of the Activity Bar, select {% octicon "gear" aria-label="The gear icon" %} and click **Settings Sync is on**. From the dialog, you can choose to configure, show settings and data, or turn off Settings Sync.
+
+![Setting Sync option in manage menu](/assets/images/help/codespaces/codespaces-manage-settings-sync.png)
+
+For more information, see the [Settings Sync guide](https://code.visualstudio.com/docs/editor/settings-sync) in the {% data variables.product.prodname_vscode %} documentation.
+
+### Dotfiles
+
 Dotfiles are files and folders on Unix-like systems starting with `.` that control the configuration of applications and shells on your system. You can store and manage your dotfiles in a repository on {% data variables.product.prodname_dotcom %}. For advice and tutorials about what to include in your `dotfiles` repository, see [GitHub does dotfiles](https://dotfiles.github.io/).
 
 If your user account on {% data variables.product.prodname_dotcom %} owns a public repository named `dotfiles`, {% data variables.product.prodname_dotcom %} automatically uses this repository to personalize your codespace environment. Private `dotfiles` repositories are not currently supported.
 
 Your `dotfiles` repository might include your shell aliases and preferences, any tools you want to install, or any other codespace personalization you want to make.
 
-Codespace personalization using your `dotfiles` repository applies to any codespace you create. Project maintainers can also define a default configuration that applies to every codespace for a repository, created by anyone. {% data reusables.codespaces.codespace-config-order %} For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/github/developing-online-with-codespaces/configuring-codespaces-for-your-project)." 
-
 When you create a new codespace, {% data variables.product.prodname_dotcom %} clones your `dotfiles` repository to the codespace environment, and looks for one of the following files to set up the environment.
 
 * _install.sh_

content/codespaces/working-with-your-codespace/managing-access-and-security-for-codespaces.md

@@ -1,57 +0,0 @@
----
-title: Managing access and security for Codespaces
-intro: You can manage the repositories that codespaces can access.
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  free-pro-team: '*'
-topics:
-  - Codespaces
-redirect_from:
-  - /github/developing-online-with-codespaces/managing-access-and-security-for-codespaces
----
-
-{% note %}
-
-**Note:** Access and security for {% data variables.product.prodname_codespaces %} is currently in beta and subject to change.
-
-{% endnote %}
-
-### Managing security and access for your user account
-
-When you enable access and security for a repository owned by your user account, any codespaces you create for that repository will have read and write permissions to all other repositories you own. You can enable access and security for none of your repositories, all of your repositories, or specific repositories. You should only enable access and security for repositories you trust.
-
-{% data reusables.user_settings.access_settings %}
-{% data reusables.user_settings.codespaces-tab %}
-1. Under "Access and security", select the setting you want for your user account.
-  ![Radio buttons to manage trusted repositories](/assets/images/help/settings/codespaces-access-and-security-radio-buttons.png)
-1. If you chose "Selected repositories", select the drop-down menu, then click a repository to allow the repository's codespaces to access other repositories you own. Repeat for all repositories whose codespaces you want to access other repositories you own.
-  !["Selected repositories" drop-down menu](/assets/images/help/settings/codespaces-access-and-security-repository-drop-down.png)
-
-### Reviewing your security log for {% data variables.product.prodname_codespaces %}
-
-The security log is where you can review {% data variables.product.prodname_codespaces %} actions that you have performed. For information about accessing the log, see "[Reviewing your security log](/github/authenticating-to-github/reviewing-your-security-log#accessing-your-security-log)."
-
-The security log includes details on what action occured and when you performed it. For information about {% data variables.product.prodname_codespaces %} actions, see "[{% data variables.product.prodname_codespaces %} category actions](/github/authenticating-to-github/reviewing-your-security-log#codespaces-category-actions)".
-
-### Managing security and access for your organization
-
-Organization owners can manage security and access for {% data variables.product.prodname_codespaces %}.
-
-When you enable access and security for a repository owned by your organization, any codespaces that are created for that repository will have read and write permissions to all other repositories the organization owns. You can enable access and security for none of your organization's repositories, all of your organization's repositories, or specific repositories. You should only enable access and security for repositories you trust.
-
-
-{% data reusables.profile.access_org %}
-{% data reusables.profile.org_settings %}
-{% data reusables.organizations.click-codespaces %}
-5. To approve of the [pre-release program terms of service](/github/site-policy/github-pre-release-program) on behalf of your organization and enable {% data variables.product.prodname_codespaces %}, under "User permissions", select **Selected users**, then type the username for each person to grant access to. Repeat for all users who you want to have access to your organization's codespaces.
-  ![Radio button for "Selected users"](/assets/images/help/organizations/select-selected-users-radio-button.png)
-1. Under "Access and security", select the setting you want for your organization.
-  ![Radio buttons to manage trusted repositories](/assets/images/help/settings/codespaces-access-and-security-radio-buttons.png)
-1. If you chose "Selected repositories", select the drop-down menu, then click a repository to allow the repository's codespaces to access other repositories owned by your organization. Repeat for all repositories whose codespaces you want to access other repositories.
-    !["Selected repositories" drop-down menu](/assets/images/help/settings/codespaces-access-and-security-repository-drop-down.png)
-
-### Reviewing your organization's audit logs for {% data variables.product.prodname_codespaces %}
-
-The audit log is where you can review actions related to {% data variables.product.prodname_codespaces %} that have been performed by members of your organization. For information about accessing the log, see "[Reviewing your security log](/organizations/keeping-your-organization-secure/reviewing-the-audit-log-for-your-organization#accessing-the-audit-log)."
-
-The audit log includes details such as who performed the action, what the action was, and when the action was performed. For information on {% data variables.product.prodname_codespaces %} actions, see "[{% data variables.product.prodname_codespaces %} category actions](/organizations/keeping-your-organization-secure/reviewing-the-audit-log-for-your-organization#codespaces-category-actions)."

content/codespaces/working-with-your-codespace/troubleshooting-your-codespace.md

@@ -1,32 +0,0 @@
----
-title: Troubleshooting your codespace
-intro: You can troubleshoot problems with a codespace by checking for known issues in the `microsoft/vscode` repository.
-product: '{% data reusables.gated-features.codespaces %}'
-redirect_from:
-  - /github/developing-online-with-github-codespaces/troubleshooting-your-codespace
-  - /github/developing-online-with-codespaces/troubleshooting-your-codespace
-versions:
-  free-pro-team: '*'
-topics:
-  - Codespaces
----
-
-{% data reusables.codespaces.release-stage %}
-
-{% data reusables.codespaces.beta-functionality-limited %}
-
-{% data reusables.codespaces.unsupported-repos %}
-
-{% data reusables.codespaces.recovery-mode %}
-
-```
-This codespace is currently running in recovery mode due to a container error.
-```
-
-Review the creation logs, update the configuration as needed, and run the "Rebuild Container" command to retry. For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/github/developing-online-with-codespaces/configuring-codespaces-for-your-project#apply-changes-to-your-configuration)."
-
-If you encounter issues while using a browser that is not Chromium-based, try switching to a Chromium-based browser, or check for known issues with your browser in the `microsoft/vscode` repository by searching for issues labeled with the name of your browser, such as[`firefox`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+label%3Afirefox) or [`safari`](https://github.com/Microsoft/vscode/issues?q=is%3Aopen+is%3Aissue+label%3Asafari).
-
-If you encounter issues while using a Chromium-based browser, you can check if you're experiencing another known issue with {% data variables.product.prodname_vscode %} in the [`microsoft/vscode`](https://github.com/microsoft/vscode/issues) repository.
-
-If you still need help, you can contact us. For more information, see "[About {% data variables.product.prodname_codespaces %}](/github/developing-online-with-codespaces/about-codespaces#contacting-us-about-codespaces)."

content/github/collaborating-with-issues-and-pull-requests/github-flow.md

@@ -1,27 +0,0 @@
----
-title: GitHub flow
-intro: 'At GitHub, we use our products every day and have developed a workflow to collaborate on projects. To make it work for teams regardless of their size or technical expertise, we made sure each step in our workflow can be completed within a web-based interface.'
-redirect_from:
-  - /articles/creating-and-editing-files-in-your-repository/
-  - /articles/github-flow-in-the-browser/
-  - /articles/github-flow
-versions:
-  free-pro-team: '*'
-  enterprise-server: '*'
-  github-ae: '*'
-topics:
-  - Pull requests
----
-
-### Following the GitHub flow
-
-1. [Create a branch](/articles/creating-and-deleting-branches-within-your-repository) from the repository.
-2. [Create](/articles/creating-new-files), [edit](/articles/editing-files), [rename](/articles/renaming-a-file), [move](/articles/moving-a-file-to-a-new-location), or [delete](/github/managing-files-in-a-repository/deleting-files-in-a-repository) files.
-3. [Send a pull request](/articles/creating-a-pull-request) from your branch with your proposed changes to kick off a discussion.
-4. Make changes on your branch as needed. Your pull request will update automatically.
-5. [Merge the pull request](/articles/merging-a-pull-request) once the branch is ready to be merged.
-6. [Tidy up](/articles/deleting-unused-branches) your branches using the delete button in the pull request or on the branches page.
-
-### Further reading
-
-- The illustrated guide to "[Understanding the GitHub Flow](https://guides.github.com/introduction/flow/)"

content/github/collaborating-with-issues-and-pull-requests/index.md

@@ -1,6 +1,6 @@
 ---
 title: Collaborating with issues and pull requests
-intro: 'Use the {% data variables.product.prodname_dotcom %} flow to track and discuss changes in issues, then propose and review changes in pull requests.'
+intro: 'Track and discuss changes in issues, then propose and review changes in pull requests.'
 redirect_from:
   - /categories/63/articles/
   - /categories/collaborating/
@@ -20,7 +20,6 @@ topics:
 
 {% topic_link_in_list /getting-started %}
     {% link_in_list /quickstart-for-communicating-on-github %}
-    {% link_in_list /github-flow %}
     {% link_in_list /about-collaborative-development-models %}
 {% topic_link_in_list /working-with-forks %}
     {% link_in_list /about-forks %}

content/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template.md

@@ -24,7 +24,7 @@ Anyone with read permissions to a template repository can create a repository fr
 {% endif %}
 
 {% if currentVersion == "free-pro-team@latest" or currentVersion == "github-ae@latest" or currentVersion ver_gt "enterprise-server@2.20" %}
-You can choose to include the directory structure and files from only the default branch of the template repository or to include all branches.
+You can choose to include the directory structure and files from only the default branch of the template repository or to include all branches. Branches created from a template have unrelated histories, which means you cannot create pull requests or merge between the branches.
 {% endif %}
 
 Creating a repository from a template is similar to forking a repository, but there are important differences:

content/github/creating-cloning-and-archiving-repositories/creating-a-template-repository.md

@@ -20,7 +20,7 @@ topics:
 
 To create a template repository, you must create a repository, then make the repository a template. For more information about creating a repository, see "[Creating a new repository](/articles/creating-a-new-repository)."
 
-After you make your repository a template, anyone with access to the repository can generate a new repository with the same directory structure and files as your default branch.{% if currentVersion == "free-pro-team@latest" or currentVersion == "github-ae@latest" or currentVersion ver_gt "enterprise-server@2.20" %} They can also choose to include all the other branches in your repository.{% endif %} For more information, see "[Creating a repository from a template](/articles/creating-a-repository-from-a-template)."
+After you make your repository a template, anyone with access to the repository can generate a new repository with the same directory structure and files as your default branch.{% if currentVersion == "free-pro-team@latest" or currentVersion == "github-ae@latest" or currentVersion ver_gt "enterprise-server@2.20" %} They can also choose to include all the other branches in your repository. Branches created from a template have unrelated histories, so you cannot create pull requests or merge between the branches.{% endif %} For more information, see "[Creating a repository from a template](/articles/creating-a-repository-from-a-template)."
 
 {% data reusables.repositories.navigate-to-repo %}
 {% data reusables.repositories.sidebar-settings %}

content/github/getting-started-with-github/git-workflows.md

@@ -10,4 +10,4 @@ versions:
   enterprise-server: '*'
   github-ae: '*'
 ---
-You can adopt the {% data variables.product.prodname_dotcom %} flow method to standardize how your team functions and collaborates on {% data variables.product.prodname_dotcom %}. For more information, see "[GitHub flow](/github/collaborating-with-issues-and-pull-requests/github-flow)" and "[Understanding the GitHub flow](http://guides.github.com/overviews/flow/)" in the {% data variables.product.prodname_dotcom %} Guides.
+You can adopt the {% data variables.product.prodname_dotcom %} flow method to standardize how your team functions and collaborates on {% data variables.product.prodname_dotcom %}. For more information, see "[{% data variables.product.prodname_dotcom %} flow](/github/getting-started-with-github/github-flow)."

content/github/getting-started-with-github/github-flow.md

@@ -0,0 +1,99 @@
+---
+title: GitHub flow
+intro: 'Follow {% data variables.product.prodname_dotcom %} flow to collaborate on projects.'
+redirect_from:
+  - /articles/creating-and-editing-files-in-your-repository/
+  - /articles/github-flow-in-the-browser/
+  - /articles/github-flow
+  - /github/collaborating-with-issues-and-pull-requests/github-flow
+versions:
+  free-pro-team: '*'
+  enterprise-server: '*'
+  github-ae: '*'
+topics:
+  - Pull requests
+  - Fundamentals
+miniTocMaxHeadingLevel: 4
+---
+
+### Introduction
+
+{% data variables.product.prodname_dotcom %} flow is a lightweight, branch-based workflow. The {% data variables.product.prodname_dotcom %} flow is useful for everyone, not just developers. For example, here at {% data variables.product.prodname_dotcom %}, we use {% data variables.product.prodname_dotcom %} flow for our [site policy](https://github.com/github/site-policy), [documentation](https://github.com/github/docs), and [roadmap](https://github.com/github/roadmap).
+
+### Prerequisites
+
+To follow {% data variables.product.prodname_dotcom %} flow, you will need {% data variables.product.prodname_dotcom %} account and a repository. For information on how to create an account, see "[Signing up for {% data variables.product.prodname_dotcom %}](/github/getting-started-with-github/signing-up-for-github)." For information on how to create a repository, see "[Create a repo](/github/getting-started-with-github/create-a-repo)."{% if currentVersion == "free-pro-team@latest" %} For information on how to find an existing repository to contribute to, see "[Finding ways to contribute to open source on {% data variables.product.prodname_dotcom %}](/github/getting-started-with-github/finding-ways-to-contribute-to-open-source-on-github)."{% endif %}
+
+### Following {% data variables.product.prodname_dotcom %} flow
+
+{% tip %}
+
+{% if currentVersion == "free-pro-team@latest" %}
+**Tip:** You can complete all steps of {% data variables.product.prodname_dotcom %} flow through {% data variables.product.prodname_dotcom %} web interface, command line and [{% data variables.product.prodname_cli %}](https://cli.github.com), or [{% data variables.product.prodname_desktop %}](/desktop).
+{% else %}
+**Tip:** You can complete all steps of {% data variables.product.prodname_dotcom %} flow through {% data variables.product.prodname_dotcom %} web interface or through the command line and [{% data variables.product.prodname_cli %}](https://cli.github.com).
+{% endif %}
+
+{% endtip %}
+
+#### Create a branch
+
+  Create a branch in your repository. A short, descriptive branch name enables your collaborators to see ongoing work at a glance. For example, `increase-test-timeout` or `add-code-of-conduct`. For more information, see "[Creating and deleting branches within your repository](/github/collaborating-with-issues-and-pull-requests/creating-and-deleting-branches-within-your-repository)."
+
+  By creating a branch, you create a space to work without affecting the default branch. Additionally, you give collaborators a chance to review your work.
+
+#### Make changes
+
+On your branch, make any desired changes to the repository. For more information, see "[Creating new files](/articles/creating-new-files)," "[Editing files](/articles/editing-files)," "[Renaming a file](/articles/renaming-a-file)," "[Moving a file to a new location](/articles/moving-a-file-to-a-new-location)," or "[Deleting files in a repository](/github/managing-files-in-a-repository/deleting-files-in-a-repository)."
+
+Your branch is a safe place to make changes. If you make a mistake, you can revert your changes or push additional changes to fix the mistake. Your changes will not end up on the default branch until you merge your branch.
+
+Commit and push your changes to your branch. Give each commit a descriptive message to help you and future contributors understand what changes the commit contains. For example, `fix typo` or `increase rate limit`.
+
+Ideally, each commit contains an isolated, complete change. This makes it easy to revert your changes if you decide to take a different approach. For example, if you want to rename a variable and add some tests, put the variable rename in one commit and the tests in another commit. Later, if you want to keep the tests but revert the variable rename, you can revert the specific commit that contained the variable rename. If you put the variable rename and tests in the same commit or spread the variable rename across multiple commits, you would spend more effort reverting your changes.
+
+By committing and pushing your changes, you back up your work to remote storage. This means that you can access your work from any device. It also means that your collaborators can see your work, answer questions, and make suggestions or contributions.
+
+Continue to make, commit, and push changes to your branch until you are ready to ask for feedback.
+
+{% tip %}
+
+**Tip:** Make a separate branch for each set of unrelated changes. This makes it easier for reviewers to give feedback. It also makes it easier for you and future collaborators to understand the changes and to revert or build on them. Additionally, if there is a delay in one set of changes, your other changes aren't also delayed.
+
+{% endtip %}
+
+#### Create a pull request
+
+Create a pull request to ask collaborators for feedback on your changes. Pull request review is so valuable that some repositories require an approving review before pull requests can be merged. If you want early feedback or advice before you complete your changes, you can mark your pull request as a draft. For more information, see "[Creating a pull request](/articles/creating-a-pull-request)."
+
+When you create a pull request, include a summary of the changes and what problem they solve. You can include images, links, and tables to help convey this information. If your pull request addresses an issue, link the issue so that issue stakeholders are aware of the pull request and vice versa. If you link with a keyword, the issue will close automatically when the pull request merges. For more information, see "[Basic writing and formatting syntax](/github/writing-on-github/basic-writing-and-formatting-syntax)" and "[Linking a pull request to an issue](/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue)."
+
+![pull request body](../../../assets/images/help/pull_requests/pull-request-body.png)
+
+In addition to filling out the body of the pull request, you can add comments to specific lines of the pull request to explicitly point something out to the reviewers.
+
+![pull request comment](../../../assets/images/help/pull_requests/pull-request-comment.png)
+
+Your repository may be configured to automatically request a review from specific teams or users when a pull request is created. You can also manually @mention or request a review from specific people or teams.
+
+If your repository has checks configured to run on pull requests, you will see any checks that failed on your pull request. This helps you catch errors before merging your branch. For more information, see "[About status checks](/github/collaborating-with-issues-and-pull-requests/about-status-checks)."
+
+#### Address review comments
+
+Reviewers should leave questions, comments, and suggestions. Reviewers can comment on the whole pull request or add comments to specific lines. You and reviewers can insert images or code suggestions to clarify comments. For more information, see "[Reviewing changes in pull requests](/github/collaborating-with-issues-and-pull-requests/reviewing-changes-in-pull-requests)."
+
+You can continue to commit and push changes in response to the reviews. Your pull request will update automatically.
+
+#### Merge your pull request
+
+Once your pull request is approved, merge your pull request. This will automatically merge your branch so that your changes appear on the default branch. {% data variables.product.prodname_dotcom %} retains the history of comments and commits in the pull request to help future contributors understand your changes. For more information, see "[Merging a pull request](/articles/merging-a-pull-request)."
+
+{% data variables.product.prodname_dotcom %} will tell you if your pull request has conflicts that must be resolved before merging. For more information, see "[Addressing merge conflicts](/github/collaborating-with-issues-and-pull-requests/addressing-merge-conflicts)."
+
+Branch protection settings may block merging if your pull request does not meet certain requirements. For example, you need a certain number of approving reviews or an approving review from a specific team. For more information, see "[About protected branches](/github/administering-a-repository/about-protected-branches)."
+
+#### Delete your branch
+
+After you merge your pull request, delete your branch. This indicates that the work on the branch is complete and prevents you or others from accidentally using old branches. For more information, see "[Deleting and restoring branches in a pull request](/github/administering-a-repository/deleting-and-restoring-branches-in-a-pull-request)."
+
+Don't worry about losing information. Your pull request and commit history will not be deleted. You can always restore your deleted branch or revert your pull request if needed.

content/github/getting-started-with-github/index.md

@@ -58,6 +58,7 @@ topics:
     {% link_in_list /set-up-git %}
     {% link_in_list /create-a-repo %}
     {% link_in_list /fork-a-repo %}
+    {% link_in_list /github-flow %}
     {% link_in_list /be-social %}
     {% link_in_list /github-glossary %}
     {% link_in_list /git-cheatsheet %}

content/organizations/managing-access-to-your-organizations-repositories/repository-permission-levels-for-an-organization.md

@@ -132,7 +132,8 @@ In addition to managing organization-level settings, organization owners have ad
 | [Lock and unlock discussions](/discussions/managing-discussions-for-your-community/moderating-discussions) | | **X** | **X** | **X** | **X** |
 | [Individually convert issues to discussions](/discussions/managing-discussions-for-your-community/moderating-discussions) | | **X** | **X** | **X** | **X** |
 | [Create new discussions and comment on existing discussions](/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion) | **X** | **X** | **X** | **X** | **X** |
-| [Delete a discussion](/discussions/managing-discussions-for-your-community/managing-discussions-in-your-repository#deleting-a-discussion) | | | | **X** | **X** |{% endif %}
+| [Delete a discussion](/discussions/managing-discussions-for-your-community/managing-discussions-in-your-repository#deleting-a-discussion) | | | | **X** | **X** |{% endif %}{% if currentVersion == "free-pro-team@latest" %}
+| Create [codespaces](/codespaces/about-codespaces) | | | **X** | **X** | **X** |{% endif %}
 
 {% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@2.21" or currentVersion == "github-ae@latest" %}
 #### Permission requirements for security features