Merge branch 'main' into backtick

.github/workflows/update-status-labels-on-tracking-issues.yml

@@ -17,11 +17,11 @@ jobs:
             const repo = context.payload.repository.name
 
             const allStatusLabels = [
-              'Status: GREEN',
+              'green',
-              'Status: GREY',
+              'grey',
-              'Status: YELLOW',
+              'yellow',
-              'Status: BLACK',
+              'black',
-              'Status: RED'
+              'red'
             ];
 
             const currentLabels = await github.issues.listLabelsOnIssue({
@@ -33,7 +33,7 @@ jobs:
             const newLabels = currentLabels.data.filter( label => allStatusLabels.includes(label.name) === false)
 
             allStatusLabels.forEach( label => {
-              if(context.payload.comment.body.includes(label)) {
+              if(context.payload.comment.body.toLowerCase().includes(`status: ${label}`)) {
                 newLabels.push(label)
               }
             });

components/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useMainContext } from './context/MainContext'
+import { Link } from 'components/Link'
 
 export type BreadcrumbT = {
   title: string
@@ -12,7 +12,7 @@ export type BreadcrumbT = {
 type Props = {}
 export const Breadcrumbs = (props: Props) => {
   const router = useRouter()
-  const pathWithLocale = `/${router.locale}${router.asPath}`
+  const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
   const { breadcrumbs } = useMainContext()
 
   return (
@@ -28,16 +28,16 @@ export const Breadcrumbs = (props: Props) => {
             {breadcrumb.title}
           </span>
         ) : (
-          <Link key={title} href={breadcrumb.href}>
+          <Link
-            <a
+            key={title}
-              title={title}
+            href={breadcrumb.href}
-              className={cx(
+            title={title}
-                'd-inline-block',
+            className={cx(
-                pathWithLocale === breadcrumb.href && 'color-text-tertiary'
+              'd-inline-block',
-              )}
+              pathWithLocale === breadcrumb.href && 'color-text-tertiary'
-            >
+            )}
-              {breadcrumb.title}
+          >
-            </a>
+            {breadcrumb.title}
           </Link>
         )
       })}

components/DefaultLayout.tsx

@@ -24,7 +24,6 @@ export const DefaultLayout = (props: Props) => {
           <title>{page.fullTitle}</title>
         ) : null}
 
-        <link rel="stylesheet" href={builtAssets.main.css} />
         <script id="expose" type="application/json" dangerouslySetInnerHTML={{ __html: expose }} />
         <script src={builtAssets.main.js} />
 

components/Header.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react'
-import Link from 'next/link'
 import cx from 'classnames'
 import { useRouter } from 'next/router'
 import { ChevronDownIcon, MarkGithubIcon, ThreeBarsIcon, XIcon } from '@primer/octicons-react'
 import { ButtonOutline } from '@primer/components'
 
+import { Link } from 'components/Link'
 import { useMainContext } from './context/MainContext'
 import { LanguagePicker } from './LanguagePicker'
 import { HeaderNotifications } from 'components/HeaderNotifications'
@@ -34,16 +34,15 @@ export const Header = () => {
           id="github-logo-mobile"
           role="banner"
         >
-          <Link href={`/${router.locale}`}>
+          <Link aria-hidden="true" tabIndex={-1} href={`/${router.locale}`}>
-            <a aria-hidden="true" tabIndex={-1}>
+            <MarkGithubIcon size={32} className="color-icon-primary" />
-              <MarkGithubIcon size={32} className="color-icon-primary" />
-            </a>
           </Link>
 
-          <Link href={`/${router.locale}`}>
+          <Link
-            <a className="h4-mktg color-text-primary no-underline no-wrap pl-2">
+            href={`/${router.locale}`}
-              {t('github_docs')}
+            className="h4-mktg color-text-primary no-underline no-wrap pl-2"
-            </a>
+          >
+            {t('github_docs')}
           </Link>
         </div>
 

components/HeaderNotifications.tsx

@@ -70,7 +70,7 @@ export const HeaderNotifications = () => {
   return (
     <>
       {allNotifications.map(({ type, content }, i) => {
-        const isLast = i !== allNotifications.length - 1
+        const isLast = i === allNotifications.length - 1
         return (
           <div
             className={cx(

components/LanguagePicker.tsx

@@ -1,6 +1,7 @@
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Dropdown } from '@primer/components'
+
+import { Link } from 'components/Link'
 import { useMainContext } from './context/MainContext'
 
 export const LanguagePicker = () => {
@@ -12,7 +13,13 @@ export const LanguagePicker = () => {
 
   return (
     <div className="ml-4 d-flex flex-justify-center flex-items-center">
-      <Dropdown css>
+      <Dropdown
+        css={`
+          ul {
+            width: unset;
+          }
+        `}
+      >
         <summary>
           {selectedLang.nativeName || selectedLang.name}
           <Dropdown.Caret />
@@ -22,15 +29,13 @@ export const LanguagePicker = () => {
             return (
               <Dropdown.Item key={lang.code}>
                 <Link href={router.asPath} locale={lang.hreflang}>
-                  <a>
+                  {lang.nativeName ? (
-                    {lang.nativeName ? (
+                    <>
-                      <>
+                      {lang.nativeName} ({lang.name})
-                        {lang.nativeName} ({lang.name})
+                    </>
-                      </>
+                  ) : (
-                    ) : (
+                    lang.name
-                      lang.name
+                  )}
-                    )}
-                  </a>
                 </Link>
               </Dropdown.Item>
             )

components/Link.tsx

@@ -0,0 +1,25 @@
+import NextLink from 'next/link'
+import { ComponentProps } from 'react'
+
+const { NODE_ENV } = process.env
+
+const enableNextLinks = false
+
+type Props = { locale?: string } & ComponentProps<'a'>
+export function Link(props: Props) {
+  const { href, locale, ...restProps } = props
+
+  if (!href && NODE_ENV !== 'production') {
+    console.warn('Missing href on Link')
+  }
+
+  if (enableNextLinks) {
+    return (
+      <NextLink href={href || ''} locale={locale}>
+        <a {...restProps} />
+      </NextLink>
+    )
+  }
+
+  return <a href={locale ? `/${locale}${href}` : href} {...restProps} />
+}

components/MobileProductDropdown.tsx

@@ -1,8 +1,8 @@
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { LinkExternalIcon } from '@primer/octicons-react'
 import cx from 'classnames'
 
+import { Link } from 'components/Link'
 import { useMainContext } from 'components/context/MainContext'
 
 export const MobileProductDropdown = () => {
@@ -20,22 +20,19 @@ export const MobileProductDropdown = () => {
           <Link
             key={product.id}
             href={`${product.external ? '' : `/${router.locale}`}${product.href}`}
+            className={cx(
+              'd-block py-2',
+              product.id === currentProduct.id
+                ? 'color-text-link text-underline active'
+                : 'Link--primary no-underline'
+            )}
           >
-            <a
+            {product.name}
-              className={cx(
+            {product.external && (
-                'd-block py-2',
+              <span className="ml-1">
-                product.id === currentProduct.id
+                <LinkExternalIcon size="small" />
-                  ? 'color-text-link text-underline active'
+              </span>
-                  : 'Link--primary no-underline'
+            )}
-              )}
-            >
-              {product.name}
-              {product.external && (
-                <span className="ml-1">
-                  <LinkExternalIcon size="small" />
-                </span>
-              )}
-            </a>
           </Link>
         )
       })}

components/ScrollButton.tsx

@@ -45,17 +45,6 @@ export const ScrollButton = () => {
       >
         <ChevronUpIcon />
       </button>
-      <style jsx>{`
-        .opacity-0 {
-          opacity: 0;
-        }
-        .opacity-100 {
-          opacity: 1;
-        }
-        .transition-200 {
-          transition: 200ms;
-        }
-      `}</style>
     </div>
   )
 }

components/SidebarNav.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router'
-import Link from 'next/link'
 import { LinkExternalIcon, MarkGithubIcon } from '@primer/octicons-react'
+
+import { Link } from 'components/Link'
 import { useTranslation } from './hooks/useTranslation'
 import { useMainContext } from './context/MainContext'
 import { SidebarProduct } from './product/SidebarProduct'
@@ -22,15 +23,19 @@ export const SidebarNav = (props: Props) => {
         id="github-logo"
         role="banner"
       >
-        <Link href={`/${router.locale}`}>
+        <Link
-          <a className="color-text-primary" aria-hidden="true" tabIndex={-1}>
+          href={`/${router.locale}`}
-            <MarkGithubIcon size={32} />
+          className="color-text-primary"
-          </a>
+          aria-hidden="true"
+          tabIndex={-1}
+        >
+          <MarkGithubIcon size={32} />
         </Link>
-        <Link href={`/${router.locale}`}>
+        <Link
-          <a className="h4-mktg color-text-primary no-underline no-wrap pl-2 flex-auto">
+          href={`/${router.locale}`}
-            {t('github_docs')}
+          className="h4-mktg color-text-primary no-underline no-wrap pl-2 flex-auto"
-          </a>
+        >
+          {t('github_docs')}
         </Link>
       </div>
       <nav>

components/SupportSection.tsx

@@ -1,4 +1,4 @@
-import { Helpfulness } from 'components/Helpfulness'
+import { Survey } from 'components/Survey'
 import { Contribution } from 'components/Contribution'
 import { Support } from 'components/Support'
 import { useMainContext } from './context/MainContext'
@@ -16,7 +16,7 @@ export const SupportSection = () => {
     <section className="mt-lg-9 py-7 px-3 px-md-6 no-print color-bg-tertiary">
       <div className="container-xl gutter-lg-spacious clearfix">
         <div className="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0 float-left">
-          {!isDeprecated && <Helpfulness />}
+          {!isDeprecated && <Survey />}
         </div>
         <div className="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0 float-left">
           {!isDeprecated && <Contribution />}

components/Survey.tsx

@@ -1,11 +1,11 @@
 import { ThumbsdownIcon, ThumbsupIcon } from '@primer/octicons-react'
 import { useTranslation } from 'components/hooks/useTranslation'
 
-export const Helpfulness = () => {
+export const Survey = () => {
-  const { t } = useTranslation('helpfulness')
+  const { t } = useTranslation('survey')
 
   return (
-    <form className="js-helpfulness f5">
+    <form className="js-survey f5">
       <h2 data-help-start data-help-yes data-help-no className="mb-1 f4">
         {t`able_to_find`}
       </h2>
@@ -15,24 +15,24 @@ export const Helpfulness = () => {
       <p className="radio-group" data-help-start data-help-yes data-help-no>
         <input
           hidden
-          id="helpfulness-yes"
+          id="survey-yes"
           type="radio"
-          name="helpfulness-vote"
+          name="survey-vote"
           value="Yes"
           aria-label={t('yes')}
         />
-        <label className="btn x-radio-label mr-1" htmlFor="helpfulness-yes">
+        <label className="btn x-radio-label mr-1" htmlFor="survey-yes">
           <ThumbsupIcon size={24} className="color-text-tertiary" />
         </label>
         <input
           hidden
-          id="helpfulness-no"
+          id="survey-no"
           type="radio"
-          name="helpfulness-vote"
+          name="survey-vote"
           value="No"
           aria-label={t`no`}
         />
-        <label className="btn x-radio-label" htmlFor="helpfulness-no">
+        <label className="btn x-radio-label" htmlFor="survey-no">
           <ThumbsdownIcon size={24} className="color-text-tertiary" />
         </label>
       </p>
@@ -42,28 +42,28 @@ export const Helpfulness = () => {
       <p className="color-text-secondary f6" hidden data-help-no>
         {t('no_feedback')}
       </p>
-      <input type="text" className="d-none" name="helpfulness-token" aria-hidden="true" />
+      <input type="text" className="d-none" name="survey-token" aria-hidden="true" />
       <p hidden data-help-no>
-        <label className="d-block mb-1 f6" htmlFor="helpfulness-comment">
+        <label className="d-block mb-1 f6" htmlFor="survey-comment">
           <span>{t('comment_label')}</span>
           <span className="text-normal color-text-tertiary float-right ml-1">{t('optional')}</span>
         </label>
         <textarea
           className="form-control input-sm width-full"
-          name="helpfulness-comment"
+          name="survey-comment"
-          id="helpfulness-comment"
+          id="survey-comment"
         ></textarea>
       </p>
       <p>
-        <label className="d-block mb-1 f6" htmlFor="helpfulness-email" hidden data-help-no>
+        <label className="d-block mb-1 f6" htmlFor="survey-email" hidden data-help-no>
           {t('email_label')}
           <span className="text-normal color-text-tertiary float-right ml-1">{t('optional')}</span>
         </label>
         <input
           type="email"
           className="form-control input-sm width-full"
-          name="helpfulness-email"
+          name="survey-email"
-          id="helpfulness-email"
+          id="survey-email"
           placeholder={t('email_placeholder')}
           hidden
           data-help-yes

components/TruncateLines.tsx

@@ -8,14 +8,15 @@ type Props = {
   className?: string
 }
 export const TruncateLines = (props: Props) => {
-  const Component = props.as || 'div'
+  const { as, maxLines, className, children } = props
+  const Component = as || 'div'
   return (
-    <Component className={cx('root', props.className)}>
+    <Component className={cx('root', className)}>
-      {props.children}
+      {children}
       <style jsx>{`
         .root {
           display: -webkit-box;
-          -webkit-line-clamp: ${props.maxLines};
+          -webkit-line-clamp: ${maxLines};
           -webkit-box-orient: vertical;
           overflow: hidden;
         }

components/VersionPicker.tsx

@@ -1,44 +0,0 @@
-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/article/ArticleTitle.tsx

@@ -0,0 +1,31 @@
+import { Tooltip, Link } from '@primer/components'
+import { PrinterIcon } from './PrinterIcon'
+
+type Props = {
+  children: React.ReactNode
+}
+export const ArticleTitle = ({ children }: Props) => {
+  return (
+    <div className="d-flex flex-items-baseline flex-justify-between">
+      <h1 className="my-4">{children}</h1>
+      <div className="d-none d-lg-block ml-2">
+        <Tooltip aria-label="Print this article" noDelay direction="n">
+          <Link
+            as="button"
+            underline={false}
+            muted
+            onClick={() => {
+              try {
+                document.execCommand('print', false)
+              } catch (e) {
+                window.print()
+              }
+            }}
+          >
+            <PrinterIcon />
+          </Link>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}

components/article/ArticleVersionPicker.tsx

@@ -1,7 +1,7 @@
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Dropdown } from '@primer/components'
 
+import { Link } from 'components/Link'
 import { useMainContext } from 'components/context/MainContext'
 import { useVersion } from 'components/hooks/useVersion'
 import { useTranslation } from 'components/hooks/useTranslation'
@@ -17,42 +17,39 @@ export const ArticleVersionPicker = () => {
   }
 
   return (
-    <div className="d-none d-lg-flex flex-justify-end">
+    <Dropdown
-      <Dropdown
+      css={`
-        css={`
+        ul {
-          ul {
+          width: unset;
-            width: unset;
+        }
+      `}
+    >
+      <summary className="f4 h5-mktg btn-outline-mktg btn-mktg p-2">
+        <span className="d-md-none d-xl-inline-block">{t('article_version')}</span>{' '}
+        {allVersions[currentVersion].versionTitle}
+        <Dropdown.Caret />
+      </summary>
+      <Dropdown.Menu direction="sw">
+        {(page.permalinks || []).map((permalink) => {
+          if (permalink.pageVersion === 'homepage') {
+            return null
           }
-        `}
-      >
-        <summary className="f4 h5-mktg btn-outline-mktg btn-mktg p-2">
-          <span className="d-md-none d-xl-inline-block">{t('article_version')}</span>{' '}
-          {allVersions[currentVersion].versionTitle}
-          <Dropdown.Caret />
-        </summary>
-        <Dropdown.Menu direction="sw">
-          {(page.permalinks || []).map((permalink) => {
-            if (permalink.pageVersion === 'homepage') {
-              return null
-            }
 
-            return (
+          return (
-              <Dropdown.Item key={permalink.href}>
+            <Dropdown.Item key={permalink.href}>
-                <Link href={permalink.href}>
+              <Link href={permalink.href}>{permalink.pageVersionTitle}</Link>
-                  <a>{permalink.pageVersionTitle}</a>
+            </Dropdown.Item>
-                </Link>
+          )
-              </Dropdown.Item>
+        })}
-            )
+        <div className="pb-1">
-          })}
+          <Link
-          <div className="pb-1">
+            href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}
-            <Link href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}>
+            className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap"
-              <a className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap">
+          >
-                See all Enterprise releases
+            See all Enterprise releases
-              </a>
+          </Link>
-            </Link>
+        </div>
-          </div>
+      </Dropdown.Menu>
-        </Dropdown.Menu>
+    </Dropdown>
-      </Dropdown>
-    </div>
   )
 }

components/article/PrinterIcon.tsx

@@ -0,0 +1,20 @@
+// From https://heroicons.com
+export const PrinterIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={18}
+      width={18}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
+      />
+    </svg>
+  )
+}

components/context/MainContext.tsx

@@ -67,7 +67,7 @@ export type MainContextT = {
     maptopic?: BreadcrumbT
     article?: BreadcrumbT
   }
-  builtAssets: { main: { css: string; js: string } }
+  builtAssets: { main: { js: string } }
   expose: string
   activeProducts: Array<ProductT>
   currentProduct: ProductT
@@ -84,6 +84,7 @@ export type MainContextT = {
   currentProductTree?: CurrentProductTree
   featureFlags: FeatureFlags
   page: {
+    documentType: string
     languageVariants: Array<{ name: string; code: string; hreflang: string; href: string }>
     topics: Array<string>
     fullTitle?: string
@@ -104,7 +105,7 @@ export type MainContextT = {
 
 export const getMainContextFromRequest = (req: any): MainContextT => {
   return {
-    builtAssets: req.context.builtAssets,
+    builtAssets: { main: { js: req.context.builtAssets.main.js } },
     expose: req.context.expose,
     breadcrumbs: req.context.breadcrumbs || {},
     activeProducts: req.context.activeProducts,
@@ -126,6 +127,7 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
     relativePath: req.context.page?.relativePath,
     page: {
       languageVariants: req.context.page.languageVariants,
+      documentType: req.context.page.documentType,
       fullTitle: req.context.page.fullTitle,
       topics: req.context.page.topics || [],
       introPlainText: req.context.page?.introPlainText,

components/context/ProductLandingContext.tsx

@@ -70,8 +70,9 @@ export const useProductLandingContext = (): ProductLandingContextT => {
 
 export const getProductLandingContextFromRequest = (req: any): ProductLandingContextT => {
   const productTree = req.context.currentProductTree
+  const page = req.context.page
   return {
-    ...pick(req.context.page, [
+    ...pick(page, [
       'title',
       'shortTitle',
       'introPlainText',
@@ -96,11 +97,11 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
       })
     ),
 
-    introLinks: productTree.page.introLinks
+    introLinks: page.introLinks
       ? {
-          quickstart: productTree.page.introLinks.quickstart,
+          quickstart: page.introLinks.quickstart,
-          reference: productTree.page.introLinks.reference,
+          reference: page.introLinks.reference,
-          overview: productTree.page.introLinks.overview,
+          overview: page.introLinks.overview,
         }
       : null,
 

components/context/TocLandingContext.tsx

@@ -0,0 +1,33 @@
+import { createContext, useContext } from 'react'
+
+export type TocItem = {
+  fullPath: string
+  title: string
+  intro?: string
+}
+
+export type TocLandingContextT = {
+  title: string
+  introPlainText: string
+  tocItems: Array<TocItem>
+}
+
+export const TocLandingContext = createContext<TocLandingContextT | null>(null)
+
+export const useTocLandingContext = (): TocLandingContextT => {
+  const context = useContext(TocLandingContext)
+
+  if (!context) {
+    throw new Error('"useTocLandingContext" may only be used inside "TocLandingContext.Provider"')
+  }
+
+  return context
+}
+
+export const getTocLandingContextFromRequest = (req: any): TocLandingContextT => {
+  return {
+    title: req.context.page.title,
+    introPlainText: req.context.page.introPlainText,
+    tocItems: req.context.tocItems || [],
+  }
+}

components/landing/FeaturedArticles.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames'
-import Link from 'next/link'
 import dayjs from 'dayjs'
 
+import { Link } from 'components/Link'
 import { ArrowRightIcon } from '@primer/octicons-react'
 import { FeaturedLink, useProductLandingContext } from 'components/context/ProductLandingContext'
 import { useTranslation } from 'components/hooks/useTranslation'
@@ -63,10 +63,8 @@ const ArticleList = ({ title, viewAllHref, articles }: ArticleListProps) => {
       <div className="featured-links-heading mb-4 d-flex flex-items-baseline">
         <h3 className="f4 text-normal text-mono text-uppercase">{title}</h3>
         {viewAllHref && (
-          <Link href={viewAllHref}>
+          <Link href={viewAllHref} className="ml-4">
-            <a className="ml-4">
+            View all <ArrowRightIcon size={14} className="v-align-middle" />
-              View all <ArrowRightIcon size={14} className="v-align-middle" />
-            </a>
           </Link>
         )}
       </div>
@@ -75,30 +73,31 @@ const ArticleList = ({ title, viewAllHref, articles }: ArticleListProps) => {
         {articles.map((link, i) => {
           return (
             <li key={link.href} className="border-top">
-              <Link href={link.href}>
+              <Link
-                <a className="link-with-intro Bump-link--hover no-underline d-block py-3">
+                href={link.href}
-                  <h4 className="link-with-intro-title">
+                className="link-with-intro Bump-link--hover no-underline d-block py-3"
-                    {link.title}
+              >
-                    <span className="Bump-link-symbol">→</span>
+                <h4 className="link-with-intro-title">
-                  </h4>
+                  <span dangerouslySetInnerHTML={{ __html: link.title }} />
-                  {!link.hideIntro && link.intro && (
+                  <span className="Bump-link-symbol">→</span>
-                    <TruncateLines
+                </h4>
-                      as="p"
+                {!link.hideIntro && link.intro && (
-                      maxLines={2}
+                  <TruncateLines
-                      className="link-with-intro-intro color-text-secondary mb-0 mt-1"
+                    as="p"
-                    >
+                    maxLines={2}
-                      {link.intro}
+                    className="link-with-intro-intro color-text-secondary mb-0 mt-1"
-                    </TruncateLines>
+                  >
-                  )}
+                    <span dangerouslySetInnerHTML={{ __html: link.intro }} />
-                  {link.date && (
+                  </TruncateLines>
-                    <time
+                )}
-                      className="tooltipped tooltipped-n color-text-tertiary text-mono mt-1"
+                {link.date && (
-                      aria-label={dayjs(link.date).format('LLL')}
+                  <time
-                    >
+                    className="tooltipped tooltipped-n color-text-tertiary text-mono mt-1"
-                      {dayjs(link.date).format('MMMM DD')}
+                    aria-label={dayjs(link.date).format('LLL')}
-                    </time>
+                  >
-                  )}
+                    {dayjs(link.date).format('MMMM DD')}
-                </a>
+                  </time>
+                )}
               </Link>
             </li>
           )

components/landing/GuideCards.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
-import Link from 'next/link'
 
+import { Link } from 'components/Link'
 import { ArrowRightIcon } from '@primer/octicons-react'
 import { useMainContext } from 'components/context/MainContext'
 
@@ -11,6 +11,7 @@ export const GuideCards = () => {
   const router = useRouter()
   const { currentCategory } = useMainContext()
   const { guideCards } = useProductLandingContext()
+  const routePath = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
 
   if (!guideCards) {
     return null
@@ -25,10 +26,8 @@ export const GuideCards = () => {
       </div>
 
       {!currentCategory && (
-        <Link href={`${router.asPath}/guides`}>
+        <Link href={`${routePath}/guides`} className="btn btn-outline float-right">
-          <a className="btn btn-outline float-right">
+          Explore guides <ArrowRightIcon />
-            Explore guides <ArrowRightIcon />
-          </a>
         </Link>
       )}
     </div>

components/landing/HomepageVersionPicker.tsx

@@ -1,7 +1,7 @@
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Dropdown } from '@primer/components'
 
+import { Link } from 'components/Link'
 import { useMainContext } from 'components/context/MainContext'
 import { useVersion } from 'components/hooks/useVersion'
 import { useTranslation } from 'components/hooks/useTranslation'
@@ -41,17 +41,16 @@ export const HomepageVersionPicker = () => {
 
               return (
                 <Dropdown.Item key={permalink.href}>
-                  <Link href={permalink.href}>
+                  <Link href={permalink.href}>{permalink.pageVersionTitle}</Link>
-                    <a>{permalink.pageVersionTitle}</a>
-                  </Link>
                 </Dropdown.Item>
               )
             })}
             <div className="pb-1">
-              <Link href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}>
+              <Link
-                <a className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap">
+                href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}
-                  See all Enterprise releases
+                className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap"
-                </a>
+              >
+                See all Enterprise releases
               </Link>
             </div>
           </Dropdown.Menu>

components/landing/LandingHero.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react'
 import cx from 'classnames'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useMainContext } from 'components/context/MainContext'
 
+import { Link } from 'components/Link'
 import { useProductLandingContext } from 'components/context/ProductLandingContext'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { useVersion } from 'components/hooks/useVersion'
@@ -107,8 +107,8 @@ export const FullLink = ({ href, children, className }: Props) => {
     currentVersion !== 'free-pro-team@latest' ? `/${currentVersion}` : ''
   }${href}`
   return (
-    <Link href={fullyQualifiedHref}>
+    <Link href={fullyQualifiedHref} className={className}>
-      <a className={className}>{children}</a>
+      {children}
     </Link>
   )
 }

components/landing/ProductArticlesList.tsx

@@ -1,9 +1,10 @@
-import Link from 'next/link'
-
 import cx from 'classnames'
 import { useState } from 'react'
+
 import { ChevronUpIcon } from '@primer/octicons-react'
+
 import { CurrentProductTree, useMainContext } from 'components/context/MainContext'
+import { Link } from 'components/Link'
 
 const maxArticles = 10
 
@@ -33,9 +34,7 @@ const ArticleList = ({ page }: { page: CurrentProductTree }) => {
   return (
     <div className="col-12 col-lg-4 mb-6 height-full">
       <h4 className="mb-3">
-        <Link href={page.href}>
+        <Link href={page.href}>{page.page.title}</Link>
-          <a>{page.page.title}</a>
-        </Link>
       </h4>
 
       <ul className="list-style-none">
@@ -47,11 +46,9 @@ const ArticleList = ({ page }: { page: CurrentProductTree }) => {
           return (
             <li
               key={grandchildPage.href + index}
-              className={cx('mb-3', index >= maxArticles ? 'd-none' : null)}
+              className={cx('mb-3', !isShowingMore && index >= maxArticles ? 'd-none' : null)}
             >
-              <Link href={grandchildPage.href}>
+              <Link href={grandchildPage.href}>{grandchildPage.page.title}</Link>
-                <a>{grandchildPage.page.title}</a>
-              </Link>
               {grandchildPage.page.documentType === 'mapTopic' ? (
                 <small className="color-text-secondary d-inline-block">
                   &nbsp;&bull; {page.childPages.length} articles

components/landing/ProductLanding.tsx

@@ -0,0 +1,69 @@
+import { DefaultLayout } from 'components/DefaultLayout'
+import { useProductLandingContext } from 'components/context/ProductLandingContext'
+
+import { LandingHero } from 'components/landing/LandingHero'
+import { FeaturedArticles } from 'components/landing/FeaturedArticles'
+import { GuideCards } from 'components/landing/GuideCards'
+import { SponsorsExamples } from 'components/landing/SponsorsExamples'
+import { CommunityExamples } from 'components/landing/CommunityExamples'
+import { CodeExamples } from 'components/landing/CodeExamples'
+import { LandingSection } from 'components/landing/LandingSection'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { ProductArticlesList } from 'components/landing/ProductArticlesList'
+
+export const ProductLanding = () => {
+  const {
+    shortTitle,
+    guideCards,
+    productUserExamples,
+    productCommunityExamples,
+    productCodeExamples,
+  } = useProductLandingContext()
+  const { t } = useTranslation('product_landing')
+
+  return (
+    <DefaultLayout>
+      <LandingSection className="pt-3">
+        <LandingHero />
+      </LandingSection>
+
+      <LandingSection>
+        <FeaturedArticles />
+      </LandingSection>
+
+      {productCodeExamples.length > 0 && (
+        <LandingSection title={t('code_examples')} className="my-6">
+          <CodeExamples />
+        </LandingSection>
+      )}
+
+      {productCommunityExamples.length > 0 && (
+        <LandingSection title={t('communities_using_discussions')} className="my-6">
+          <CommunityExamples />
+        </LandingSection>
+      )}
+
+      {productUserExamples.length > 0 && (
+        <LandingSection title={t('sponsor_community')} className="my-6">
+          <SponsorsExamples />
+        </LandingSection>
+      )}
+
+      {/* {% if currentVersion contains 'enterprise-server' and currentProduct == 'admin' %}
+      {% include product-releases %}
+      {% endif %} */}
+
+      {guideCards.length > 0 && (
+        <div className="color-bg-tertiary py-6 my-8">
+          <LandingSection title={t('guides')} className="my-6">
+            <GuideCards />
+          </LandingSection>
+        </div>
+      )}
+
+      <LandingSection sectionLink="all-docs" title={`All ${shortTitle} Docs`}>
+        <ProductArticlesList />
+      </LandingSection>
+    </DefaultLayout>
+  )
+}

components/landing/SponsorsExamples.tsx

@@ -1,6 +1,6 @@
-import Link from 'next/link'
 import { ArrowRightIcon } from '@primer/octicons-react'
 
+import { Link } from 'components/Link'
 import { useProductLandingContext } from 'components/context/ProductLandingContext'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { UserCard } from 'components/landing/UserCard'
@@ -24,10 +24,8 @@ export const SponsorsExamples = () => {
           )
         })}
       </div>
-      <Link href={`https://github.com/sponsors/community`}>
+      <Link href={`https://github.com/sponsors/community`} className="btn btn-outline float-right">
-        <a className="btn btn-outline float-right">
+        {t('explore_people_and_projects')} <ArrowRightIcon />
-          {t('explore_people_and_projects')} <ArrowRightIcon />
-        </a>
       </Link>
     </div>
   )

components/landing/TableOfContents.tsx

@@ -1,34 +1,45 @@
 import { useRouter } from 'next/router'
-import Link from 'next/link'
 import cx from 'classnames'
 
-import type { TocItem } from '../context/ProductLandingContext'
+import { Link } from 'components/Link'
+import type { TocItem } from 'components/context/ProductLandingContext'
 
-export const TableOfContents = (props: { items?: Array<TocItem> }) => {
+type Props = {
+  items: Array<TocItem>
+  variant?: 'compact' | 'expanded'
+}
+export const TableOfContents = (props: Props) => {
+  const { items, variant = 'expanded' } = props
   const router = useRouter()
 
   return (
-    <div>
+    <ul className={cx(variant === 'compact' ? 'list-style-inside pl-2' : 'list-style-none')}>
-      {(props.items || []).map((obj) => {
+      {(items || []).map((item) => {
-        if (!obj) {
+        if (!item) {
           return null
         }
-        const { fullPath: href, title, intro } = obj
+
+        const { fullPath: href, title, intro } = item
         const isActive = router.pathname === href
-        return (
+        return variant === 'compact' ? (
-          <div key={href} className={cx('mb-5', isActive && 'color-auto-gray-4')}>
+          <li key={href} className="f4 my-1">
-            <Link href={href}>
+            <Link href={href}>{title}</Link>
-              <a className="Bump-link--hover no-underline d-block py-1 border-bottom color-border-primary">
+          </li>
-                <h4>
+        ) : (
-                  {title}
+          <li key={href} className={cx('mb-5', isActive && 'color-auto-gray-4')}>
-                  <span className="Bump-link-symbol">→</span>
+            <Link
-                </h4>
+              href={href}
-              </a>
+              className="Bump-link--hover no-underline d-block py-1 border-bottom color-border-primary"
+            >
+              <h4>
+                {title}
+                <span className="Bump-link-symbol">→</span>
+              </h4>
             </Link>
             {intro && <p className="f4 mt-3" dangerouslySetInnerHTML={{ __html: intro }} />}
-          </div>
+          </li>
         )
       })}
-    </div>
+    </ul>
   )
 }

components/landing/TocLanding.tsx

@@ -0,0 +1,55 @@
+import { Grid } from '@primer/components'
+
+import { DefaultLayout } from 'components/DefaultLayout'
+import { TableOfContents } from 'components/landing/TableOfContents'
+import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
+import { Breadcrumbs } from 'components/Breadcrumbs'
+import { useTocLandingContext } from 'components/context/TocLandingContext'
+import { ArticleTitle } from 'components/article/ArticleTitle'
+
+type Props = {
+  variant?: 'compact' | 'expanded'
+}
+export const TocLanding = ({ variant = 'expanded' }: Props) => {
+  const { title, introPlainText, tocItems } = useTocLandingContext()
+  return (
+    <DefaultLayout>
+      <div className="container-xl px-3 px-md-6 my-4 my-lg-4">
+        <div className="d-lg-flex flex-justify-between">
+          <div className="d-block d-lg-none">
+            <ArticleVersionPicker />
+          </div>
+          <div className="d-flex flex-items-center">
+            <Breadcrumbs />
+          </div>
+          <div className="d-none d-lg-block">
+            <ArticleVersionPicker />
+          </div>
+        </div>
+
+        <Grid
+          gridTemplateColumns="minmax(500px, 720px) minmax(220px, 1fr)"
+          gridTemplateRows="auto 1fr"
+          gridGap={16}
+        >
+          <div>
+            <div className="mt-8">
+              <ArticleTitle>{title}</ArticleTitle>
+
+              <div className="lead-mktg">
+                <p>{introPlainText}</p>
+              </div>
+            </div>
+
+            <div className="border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0" />
+
+            <div className={variant === 'expanded' ? 'mt-7' : 'mt-2'}>
+              <TableOfContents items={tocItems} variant={variant} />
+            </div>
+          </div>
+          <div></div>
+        </Grid>
+      </div>
+    </DefaultLayout>
+  )
+}

components/product/SidebarProduct.tsx

@@ -1,16 +1,12 @@
 import { useRouter } from 'next/router'
-import Link from 'next/link'
 import cx from 'classnames'
+import { useDetails, Details } from '@primer/components'
+import { ChevronDownIcon } from '@primer/octicons-react'
 
-import { useMainContext } from 'components/context/MainContext'
+import { Link } from 'components/Link'
+import { CurrentProductTree, useMainContext } from 'components/context/MainContext'
 import { AllProductsLink } from 'components/product/AllProductsLink'
-// <!--
-//   Styling note:
 
-//   Categories, Maptopics, and Articles list items get a class of `active` when they correspond to content
-//   hierarchy of the current page. If an item's URL is also the same as the current URL, the item
-//   also gets an `is-current-page` class.
-//  -->
 export const SidebarProduct = () => {
   const router = useRouter()
   const { currentProductTree: currentProductTree } = useMainContext()
@@ -28,8 +24,11 @@ export const SidebarProduct = () => {
       {!currentProductTree.page.hidden && (
         <>
           <li title="" className="sidebar-product mb-2">
-            <Link href={currentProductTree.href}>
+            <Link
-              <a className="pl-4 pr-5 pb-1 f4 color-text-primary">{productTitle}</a>
+              href={currentProductTree.href}
+              className="pl-4 pr-5 pb-1 f4 color-text-primary no-underline"
+            >
+              {productTitle}
             </Link>
           </li>
 
@@ -52,136 +51,19 @@ export const SidebarProduct = () => {
                     )}
                   >
                     {isStandaloneCategory ? (
-                      <Link href={childPage.href}>
+                      <Link
-                        <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">
+                        href={childPage.href}
-                          {childTitle}
+                        className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary no-underline"
-                        </a>
+                      >
+                        {childTitle}
                       </Link>
                     ) : (
-                      <details
+                      <CollapsibleSection
-                        className={cx('dropdown-withArrow details details-reset')}
+                        index={i}
-                        open={routePath.includes(childPage.href) || i < 3}
+                        routePath={routePath}
-                      >
+                        title={childTitle}
-                        <summary>
+                        page={childPage}
-                          <div className="d-flex flex-justify-between">
+                      />
-                            <Link href={childPage.href}>
-                              <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">
-                                {childTitle}
-                              </a>
-                            </Link>
-                            {i < 3 && (
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                className="octicon flex-shrink-0 arrow mr-3"
-                                style={{ marginTop: 7 }}
-                                viewBox="0 0 16 16"
-                                width="16"
-                                height="16"
-                              >
-                                {' '}
-                                <path
-                                  fillRule="evenodd"
-                                  clipRule="evenodd"
-                                  d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"
-                                ></path>
-                              </svg>
-                            )}
-                          </div>
-                        </summary>
-                        {routePath.includes(childPage.href) || i < 3 ? (
-                          <>
-                            {/* <!-- some categories have maptopics with child articles --> */}
-                            {childPage.childPages[0].page.documentType === 'mapTopic' ? (
-                              <ul className="sidebar-topics list-style-none position-relative">
-                                {childPage.childPages.map((grandchildPage, i) => {
-                                  const grandchildTitle =
-                                    grandchildPage.renderedShortTitle ||
-                                    grandchildPage.renderedFullTitle
-                                  const isActive = routePath.includes(grandchildPage.href)
-                                  const isCurrent = routePath === grandchildPage.href
-                                  return (
-                                    <li
-                                      key={childPage.href + i}
-                                      className={cx(
-                                        'sidebar-maptopic',
-                                        isActive && 'active',
-                                        isCurrent && 'is-current-page'
-                                      )}
-                                    >
-                                      <Link href={grandchildPage.href}>
-                                        <a className="pl-4 pr-5 py-2 color-text-primary">{grandchildTitle}</a>
-                                      </Link>
-                                      <ul className="sidebar-articles my-2">
-                                        {grandchildPage.childPages.map(
-                                          (greatgrandchildPage, i, arr) => {
-                                            const greatgrandchildTitle =
-                                              greatgrandchildPage.renderedShortTitle ||
-                                              greatgrandchildPage.renderedFullTitle
-                                            const isLast = i === arr.length - 1
-                                            const isActive = routePath.includes(
-                                              greatgrandchildPage.href
-                                            )
-                                            const isCurrent = routePath === greatgrandchildPage.href
-                                            return (
-                                              <li
-                                                key={greatgrandchildPage.href + i}
-                                                className={cx(
-                                                  'sidebar-article',
-                                                  isActive && 'active',
-                                                  isCurrent && 'is-current-page'
-                                                )}
-                                              >
-                                                <Link href={greatgrandchildPage.href}>
-                                                  <a
-                                                    className={cx(
-                                                      'pl-6 pr-5 py-1 color-text-primary',
-                                                      isLast && 'pb-2'
-                                                    )}
-                                                  >
-                                                    {greatgrandchildTitle}
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            )
-                                          }
-                                        )}
-                                      </ul>
-                                    </li>
-                                  )
-                                })}
-                              </ul>
-                            ) : childPage.childPages[0].page.documentType == 'article' ? (
-                              <ul className="sidebar-articles list-style-none">
-                                {/* <!-- some categories have no maptopics, only articles --> */}
-                                {childPage.childPages.map((grandchildPage, i, arr) => {
-                                  const grandchildTitle =
-                                    grandchildPage.renderedShortTitle ||
-                                    grandchildPage.renderedFullTitle
-                                  const isLast = i === arr.length - 1
-                                  const isActive = routePath.includes(grandchildPage.href)
-                                  const isCurrent = routePath === grandchildPage.href
-                                  return (
-                                    <li
-                                      key={grandchildPage.href + i}
-                                      className={cx(
-                                        'sidebar-article',
-                                        isActive && 'active',
-                                        isCurrent && 'is-current-page'
-                                      )}
-                                    >
-                                      <Link href={grandchildPage.href}>
-                                        <a className={cx('pl-6 pr-5 py-1 color-text-primary', isLast && 'pb-2')}>
-                                          {grandchildTitle}
-                                        </a>
-                                      </Link>
-                                    </li>
-                                  )
-                                })}
-                              </ul>
-                            ) : null}
-                          </>
-                        ) : null}
-                      </details>
                     )}
                   </li>
                 )
@@ -193,3 +75,117 @@ export const SidebarProduct = () => {
     </>
   )
 }
+
+type SectionProps = {
+  index: number
+  routePath: string
+  page: CurrentProductTree
+  title: string
+}
+const CollapsibleSection = (props: SectionProps) => {
+  const { routePath, index, title, page } = props
+  const isDefaultOpen = routePath.includes(page.href) || index < 3
+  const { getDetailsProps, open: isOpen } = useDetails({ defaultOpen: isDefaultOpen })
+  return (
+    <Details {...getDetailsProps()} className="details-reset">
+      <summary>
+        <div className="d-flex flex-justify-between">
+          <Link
+            href={page.href}
+            className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary no-underline"
+          >
+            {title}
+          </Link>
+          {page.childPages.length > 0 && (
+            <span style={{ marginTop: 7 }} className="flex-shrink-0 pr-3">
+              <ChevronDownIcon className={cx('opacity-60', isOpen && 'rotate-180')} />
+            </span>
+          )}
+        </div>
+      </summary>
+      {/* <!-- some categories have maptopics with child articles --> */}
+      {page.childPages[0].page.documentType === 'mapTopic' ? (
+        <ul className="sidebar-topics list-style-none position-relative">
+          {page.childPages.map((childPage, i) => {
+            const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
+            const isActive = routePath.includes(childPage.href)
+            const isCurrent = routePath === childPage.href
+            return (
+              <li
+                key={childPage.href + i}
+                className={cx(
+                  'sidebar-maptopic',
+                  isActive && 'active',
+                  isCurrent && 'is-current-page'
+                )}
+              >
+                <Link
+                  href={childPage.href}
+                  className="pl-4 pr-5 py-2 color-text-primary no-underline"
+                >
+                  {childTitle}
+                </Link>
+                <ul className="sidebar-articles my-2">
+                  {childPage.childPages.map((grandchildPage, i, arr) => {
+                    const grandchildTitle =
+                      grandchildPage.renderedShortTitle || grandchildPage.renderedFullTitle
+                    const isLast = i === arr.length - 1
+                    const isActive = routePath.includes(grandchildPage.href)
+                    const isCurrent = routePath === grandchildPage.href
+                    return (
+                      <li
+                        key={grandchildPage.href + i}
+                        className={cx(
+                          'sidebar-article',
+                          isActive && 'active',
+                          isCurrent && 'is-current-page'
+                        )}
+                      >
+                        <Link
+                          href={grandchildPage.href}
+                          className={cx(
+                            'pl-6 pr-5 py-1 color-text-primary no-underline',
+                            isLast && 'pb-2'
+                          )}
+                        >
+                          {grandchildTitle}
+                        </Link>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </li>
+            )
+          })}
+        </ul>
+      ) : page.childPages[0].page.documentType == 'article' ? (
+        <ul className="sidebar-articles list-style-none">
+          {/* <!-- some categories have no maptopics, only articles --> */}
+          {page.childPages.map((childPage, i, arr) => {
+            const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
+            const isLast = i === arr.length - 1
+            const isActive = routePath.includes(childPage.href)
+            const isCurrent = routePath === childPage.href
+            return (
+              <li
+                key={childPage.href + i}
+                className={cx(
+                  'sidebar-article',
+                  isActive && 'active',
+                  isCurrent && 'is-current-page'
+                )}
+              >
+                <Link
+                  href={childPage.href}
+                  className={cx('pl-6 pr-5 py-1 color-text-primary no-underline', isLast && 'pb-2')}
+                >
+                  {childTitle}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+    </Details>
+  )
+}

content/README.md

@@ -212,8 +212,8 @@ defaultPlatform: linux
 
 ### `defaultTool`
 
-- Purpose: Override the initial tool selection for a page, where tool refers to the application the reader is using to work with GitHub, such as GitHub.com's web UI, the GitHub CLI, or GitHub Desktop. If this frontmatter is omitted, then the tool-specific content matching the GitHub web UI is shown by default. This behavior can be changed for individual pages, for which a manual selection is more reasonable.
+- Purpose: Override the initial tool selection for a page, where tool refers to the application the reader is using to work with GitHub (such as GitHub.com's web UI, the GitHub CLI, or GitHub Desktop) or the GitHub APIs (such as cURL or the GitHub CLI). If this frontmatter is omitted, then the tool-specific content matching the GitHub web UI is shown by default. This behavior can be changed for individual pages, for which a manual selection is more reasonable.
-- Type: `String`, one of: `webui`, `cli`, `desktop`.
+- Type: `String`, one of: `webui`, `cli`, `desktop`, `curl`.
 - Optional.
 
 ```yaml

content/actions/creating-actions/creating-a-javascript-action.md

@@ -35,13 +35,13 @@ Once you complete this project, you should understand how to build your own Java
 
 ### Prerequisites
 
-Before you begin, you'll need to download Node.js and create a GitHub repository.
+Before you begin, you'll need to download Node.js and create a public {% data variables.product.prodname_dotcom %} repository.
 
 1. Download and install Node.js 12.x, which includes npm.
 
   https://nodejs.org/en/download/current/
 
-1. Create a new repository on {% data variables.product.product_location %}. You can choose any repository name or use "hello-world-javascript-action" like this example. You can add these files after your project has been pushed to {% data variables.product.product_name %}. For more information, see "[Create a new repository](/articles/creating-a-new-repository)."
+1. Create a new public repository on {% data variables.product.product_location %} and call it "hello-world-javascript-action". For more information, see "[Create a new repository](/articles/creating-a-new-repository)."
 
 1. Clone your repository to your computer. For more information, see "[Cloning a repository](/articles/cloning-a-repository)."
 
@@ -51,7 +51,7 @@ Before you begin, you'll need to download Node.js and create a GitHub repository
   cd hello-world-javascript-action
   ```
 
-1. From your terminal, initialize the directory with a `package.json` file.
+1. From your terminal, initialize the directory with npm to generate a `package.json` file.
 
   ```shell
   npm init -y
@@ -59,10 +59,8 @@ Before you begin, you'll need to download Node.js and create a GitHub repository
 
 ### Creating an action metadata file
 
-Create a new file `action.yml` in the `hello-world-javascript-action` directory with the following example code. For more information, see "[Metadata syntax for {% data variables.product.prodname_actions %}](/actions/creating-actions/metadata-syntax-for-github-actions)."
+Create a new file named `action.yml` in the `hello-world-javascript-action` directory with the following example code. For more information, see "[Metadata syntax for {% data variables.product.prodname_actions %}](/actions/creating-actions/metadata-syntax-for-github-actions)."
 
-
-**action.yml**
 ```yaml
 name: 'Hello World'
 description: 'Greet someone and record the time'
@@ -108,7 +106,7 @@ GitHub Actions provide context information about the webhook event, Git refs, wo
 
 Add a new file called `index.js`, with the following code.
 
-**index.js**
+{% raw %}
 ```javascript
 const core = require('@actions/core');
 const github = require('@actions/github');
@@ -126,6 +124,7 @@ try {
   core.setFailed(error.message);
 }
 ```
+{% endraw %}
 
 If an error is thrown in the above `index.js` example, `core.setFailed(error.message);` uses the actions toolkit [`@actions/core`](https://github.com/actions/toolkit/tree/main/packages/core) package to log a message and set a failing exit code. For more information, see "[Setting exit codes for actions](/actions/creating-actions/setting-exit-codes-for-actions)."
 
@@ -143,7 +142,6 @@ In your `hello-world-javascript-action` directory, create a `README.md` file tha
 - Environment variables the action uses.
 - An example of how to use your action in a workflow.
 
-**README.md**
 ```markdown
 # Hello world javascript action
 
@@ -180,7 +178,7 @@ It's best practice to also add a version tag for releases of your action. For mo
 ```shell
 git add action.yml index.js node_modules/* package.json package-lock.json README.md
 git commit -m "My first action is ready"
-git tag -a -m "My first action release" v1
+git tag -a -m "My first action release" v1.1
 git push --follow-tags
 ```
 
@@ -205,7 +203,7 @@ Checking in your `node_modules` directory can cause problems. As an alternative,
 ```shell
 git add action.yml dist/index.js node_modules/*
 git commit -m "Use vercel/ncc"
-git tag -a -m "My first action release" v1
+git tag -a -m "My first action release" v1.1
 git push --follow-tags
 ```
 
@@ -217,10 +215,11 @@ Now you're ready to test your action out in a workflow. When an action is in a p
 
 #### Example using a public action
 
-The following workflow code uses the completed hello world action in the `actions/hello-world-javascript-action` repository. Copy the workflow code into a `.github/workflows/main.yml` file, but replace the `actions/hello-world-javascript-action` repository with the repository you created. You can also replace the `who-to-greet` input with your name.
+This example demonstrates how your new public action can be run from within an external repository.
+
+Copy the following YAML into a new file at `.github/workflows/main.yml`, and update the `uses: octocat/hello-world-javascript-action@v1.1` line with your username and the name of the public repository you created above. You can also replace the `who-to-greet` input with your name.
 
 {% raw %}
-**.github/workflows/main.yml**
 ```yaml
 on: [push]
 
@@ -231,7 +230,7 @@ jobs:
     steps:
       - name: Hello world action step
         id: hello
-        uses: actions/hello-world-javascript-action@v1.1
+        uses: octocat/hello-world-javascript-action@v1.1
         with:
           who-to-greet: 'Mona the Octocat'
       # Use the output from the `hello` step
@@ -240,6 +239,8 @@ jobs:
 ```
 {% endraw %}
 
+When this workflow is triggered, the runner will download the `hello-world-javascript-action` action from your public repository and then execute it.
+
 #### Example using a private action
 
 Copy the workflow code into a `.github/workflows/main.yml` file in your action's repository. You can also replace the `who-to-greet` input with your name.

content/actions/guides/building-and-testing-xamarin-applications.md

@@ -24,7 +24,7 @@ topics:
 
 This guide shows you how to create a workflow that performs continuous integration (CI) for your Xamarin project. The workflow you create will allow you to see when commits to a pull request cause build or test failures against your default branch; this approach can help ensure that your code is always healthy.
 
-{% data variables.product.prodname_actions %}-hosted macOS runner stores Xamarin SDK versions and the associated Mono versions as a set of symlinks to Xamarin SDK locations that are available by a single bundle symlink. For a full list of available Xamarin SDK versions and their corresponding bundles, see the runners documentation:
+For a full list of available Xamarin SDK versions on the {% data variables.product.prodname_actions %}-hosted macOS runners, see the documentation:
 
 * [macOS 10.15](https://github.com/actions/virtual-environments/blob/main/images/macos/macos-10.15-Readme.md#xamarin-bundles)
 * [macOS 11](https://github.com/actions/virtual-environments/blob/main/images/macos/macos-11-Readme.md#xamarin-bundles)
@@ -41,7 +41,7 @@ We recommend that you have a basic understanding of Xamarin, .NET Core SDK, YAML
 
 ### Bulding Xamarin.iOS apps
 
-The example below demonstrates how to change the default Xamarin bundle and build  a Xamarin.iOS application.
+The example below demonstrates how to change the default Xamarin SDK versions and build a Xamarin.iOS application.
 
 {% raw %}
 ```yaml
@@ -55,34 +55,33 @@ jobs:
     runs-on: macos-latest
 
     steps:
-      - uses: actions/checkout@v2
+    - uses: actions/checkout@v2
-      - name: Select default Xamarin bundle to 6_12_6
+    - name: Set default Xamarin SDK versions
-        run: |
+      run: |
-          XAMARIN_SDK=6_12_6
+        $VM_ASSETS/select-xamarin-sdk-v2.sh --mono=6.12 --ios=14.10
-          $VM_ASSETS/select-xamarin-sdk.sh $XAMARIN_SDK
     
-      - name: Set default Xcode 12.3
+    - name: Set default Xcode 12.3
-        run: |
+      run: |
-          XCODE_ROOT=/Applications/Xcode_12.3.0.app
+        XCODE_ROOT=/Applications/Xcode_12.3.0.app
-          echo "MD_APPLE_SDK_ROOT=$XCODE_ROOT" >> $GITHUB_ENV
+        echo "MD_APPLE_SDK_ROOT=$XCODE_ROOT" >> $GITHUB_ENV
-          sudo xcode-select -s $XCODE_ROOT
+        sudo xcode-select -s $XCODE_ROOT
 
-      - name: Setup .NET Core SDK 5.0.x
+    - name: Setup .NET Core SDK 5.0.x
-        uses: actions/setup-dotnet@v1
+      uses: actions/setup-dotnet@v1
-        with:
+      with:
-          dotnet-version: '5.0.x'
+        dotnet-version: '5.0.x'
 
-      - name: Install dependencies
+    - name: Install dependencies
-        run: nuget restore <sln_file_path>
+      run: nuget restore <sln_file_path>
 
-      - name: Build
+    - name: Build
-        run: msbuild <csproj_file_path> /p:Configuration=Debug /p:Platform=iPhoneSimulator /t:Rebuild
+      run: msbuild <csproj_file_path> /p:Configuration=Debug /p:Platform=iPhoneSimulator /t:Rebuild
 ```
 {% endraw %}
 
 ### Bulding Xamarin.Android apps
 
-The example below demonstrates how to change default the Xamarin bundle and build a Xamarin.Android application.
+The example below demonstrates how to change default Xamarin SDK versions and build a Xamarin.Android application.
 
 {% raw %}
 ```yaml
@@ -96,22 +95,21 @@ jobs:
     runs-on: macos-latest
 
     steps:
-      - uses: actions/checkout@v2
+    - uses: actions/checkout@v2
-      - name: Select default Xamarin bundle to 6_12_6
+    - name: Set default Xamarin SDK versions
-        run: |
+      run: |
-          XAMARIN_SDK=6_12_6
+        $VM_ASSETS/select-xamarin-sdk-v2.sh --mono=6.10 --android=10.2
-          $VM_ASSETS/select-xamarin-sdk.sh $XAMARIN_SDK
 
-      - name: Setup .NET Core SDK 5.0.x
+    - name: Setup .NET Core SDK 5.0.x
-        uses: actions/setup-dotnet@v1
+      uses: actions/setup-dotnet@v1
-        with:
+      with:
-          dotnet-version: '5.0.x'
+        dotnet-version: '5.0.x'
 
-      - name: Install dependencies
+    - name: Install dependencies
-        run: nuget restore <sln_file_path>
+      run: nuget restore <sln_file_path>
 
-      - name: Build
+    - name: Build
-        run: msbuild <csproj_file_path> /t:PackageForAndroid /p:Configuration=Debug
+      run: msbuild <csproj_file_path> /t:PackageForAndroid /p:Configuration=Debug
 ```
 {% endraw %}
 

content/actions/reference/encrypted-secrets.md

@@ -29,7 +29,9 @@ For secrets stored at the environment level, you can enable required reviewers t
 
 #### Naming your secrets
 
-{% 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. 
+{% 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. 
 
   {% 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 %}
 
@@ -185,7 +187,13 @@ steps:
 
 ### Limits for secrets
 
-You can store up to 1,000 secrets per organization{% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.0" or currentVersion == "github-ae@latest" %}, 100 secrets per repository, and 100 secrets per environment{% else %} and 100 secrets per repository{% endif %}. A workflow may use up to 100 organization secrets and 100 repository secrets.{% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.0" or currentVersion == "github-ae@latest" %} Additionally, a job referencing an environment may use up to 100 environment secrets.{% endif %}
+You can store up to 1,000 organization secrets{% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.0" or currentVersion == "github-ae@latest" %}, 100 repository secrets, and 100 environment secrets{% else %} and 100 repository secrets{% endif %}.
+
+A workflow created in a repository can access the following number of secrets:
+
+* All 100 repository secrets.
+* If the repository is assigned access to more than 100 organization secrets, the workflow can only use the first 100 organization secrets (sorted alphabetically by secret name).
+{% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.0" or currentVersion == "github-ae@latest" %}* All 100 environment secrets.{% endif %}
 
 Secrets are limited to 64 KB in size. To use secrets that are larger than 64 KB, you can store encrypted secrets in your repository and save the decryption passphrase as a secret on {% data variables.product.prodname_dotcom %}. For example, you can use `gpg` to encrypt your credentials locally before checking the file in to your repository on {% data variables.product.prodname_dotcom %}. For more information, see the "[gpg manpage](https://www.gnupg.org/gph/de/manual/r1023.html)."
 

content/admin/installation/setting-up-a-github-enterprise-server-instance/installing-github-enterprise-server-on-xenserver.md

@@ -10,6 +10,13 @@ versions:
 topics:
   - Enterprise
 ---
+
+{% note %}
+
+  **Note:** Support for {% data variables.product.prodname_ghe_server %} on XenServer will be discontinued in {% data variables.product.prodname_ghe_server %} 3.3. For more information, see the [{% data variables.product.prodname_ghe_server %} 3.1 release notes](/admin/release-notes#3.1.0)
+
+{% endnote %}
+
 ### Prerequisites
 
 - {% data reusables.enterprise_installation.software-license %}

content/admin/user-management/monitoring-activity-in-your-enterprise/audited-actions.md

@@ -16,7 +16,8 @@ topics:
   - Enterprise
   - Security
 ---
-#### Authentication
+
+### Authentication
 
 Action                               | Description
 ------------------------------------ | ----------------------------------------
@@ -39,13 +40,13 @@ Action                               | Description
   [2fa]: /articles/about-two-factor-authentication
 
 {% if currentVersion ver_gt "enterprise-server@2.21" %}
-#### {% data variables.product.prodname_actions %}
+### {% data variables.product.prodname_actions %}
 
 {% data reusables.actions.actions-audit-events-for-enterprise %}
 
 {% endif %}
 
-#### Hooks
+### Hooks
 
 Action                            | Description
 --------------------------------- | -------------------------------------------
@@ -54,7 +55,7 @@ Action                            | Description
 `hook.destroy`                    | A hook was deleted.
 `hook.events_changed`             | A hook's configured events were changed.
 
-#### Enterprise configuration settings
+### Enterprise configuration settings
 
 Action                                          | Description
 ----------------------------------------------- | -------------------------------------------{% if currentVersion ver_gt "enterprise-server@3.0" or currentVersion == "github-ae@next" %}
@@ -66,7 +67,7 @@ Action                                          | Description
 
 {% if currentVersion == "github-ae@latest" %}
 
-#### IP allow lists
+### IP allow lists
 
 Name                                 | Description
 ------------------------------------:| -----------------------------------------------------------
@@ -80,7 +81,7 @@ Name                                 | Description
 
 {% endif %}
 
-#### Issues and pull requests
+### Issues and pull requests
 
 Action                               | Description
 ------------------------------------ | -----------------------------------------------------------
@@ -89,7 +90,7 @@ Action                               | Description
 `pull_request_review_comment.delete` | A comment on a pull request was deleted.
 `issue.destroy`                      | An issue was deleted from the repository. For more information, see "[Deleting an issue](/github/managing-your-work-on-github/deleting-an-issue)."
 
-#### Organizations
+### Organizations
 
 Action             | Description
 ------------------ | ----------------------------------------------------------
@@ -97,7 +98,7 @@ Action             | Description
 `org.delete`       | An organization was deleted by a user-initiated background job.{% if currentVersion != "github-ae@latest" %}
 `org.transform`    | A user account was converted into an organization. For more information, see "[Converting a user into an organization](/github/setting-up-and-managing-your-github-user-account/converting-a-user-into-an-organization)."{% endif %}
 
-#### Protected branches
+### Protected branches
 
 Action                     | Description
 -------------------------- | ----------------------------------------------------------
@@ -112,7 +113,7 @@ Action                     | Description
 `protected_branch.rejected_ref_update `     | A branch update attempt is rejected.
 `protected_branch.policy_override `         | A branch protection requirement is overridden by a repository administrator.
 
-#### Repositories
+### Repositories
 
 Action                | Description
 --------------------- | -------------------------------------------------------
@@ -132,7 +133,7 @@ Action                | Description
 `repo.config.lock_anonymous_git_access` | A repository's anonymous Git read access setting is locked, preventing repository administrators from changing (enabling or disabling) this setting. For more information, see "[Preventing users from changing anonymous Git read access](/enterprise/{{ currentVersion }}/admin/guides/user-management/preventing-users-from-changing-anonymous-git-read-access)."
 `repo.config.unlock_anonymous_git_access` | A repository's anonymous Git read access setting is unlocked, allowing repository administrators to change (enable or disable) this setting. For more information, see "[Preventing users from changing anonymous Git read access](/enterprise/{{ currentVersion }}/admin/guides/user-management/preventing-users-from-changing-anonymous-git-read-access)."{% endif %}
 
-#### Site admin tools
+### Site admin tools
 
 Action                        | Description
 ----------------------------- | -----------------------------------------------
@@ -142,7 +143,7 @@ Action                        | Description
 `staff.repo_unlock`           | A site admin unlocked (temporarily gained full access to) one of a user's private repositories.
 `staff.unlock`                | A site admin unlocked (temporarily gained full access to) all of a user's private repositories.
 
-#### Teams
+### Teams
 
 Action                            | Description
 --------------------------------- | -------------------------------------------
@@ -153,7 +154,7 @@ Action                            | Description
 `team.promote_maintainer`         | A user was promoted from a team member to a team maintainer.{% endif %}
 
 
-#### Users
+### Users
 
 Action                            | Description
 --------------------------------- | -------------------------------------------

content/billing/managing-billing-for-your-github-account/how-does-upgrading-or-downgrading-affect-the-billing-process.md

@@ -19,19 +19,19 @@ Changes to your paid user account or organization subscription does not affect s
 
 For more information, see "[{% data variables.product.prodname_dotcom %}'s products](/articles/github-s-products)" and "[About billing on {% data variables.product.prodname_dotcom %}](/articles/about-billing-on-github)."
 
-#### Example of canceling a paid subscription for a personal account or organization
+### Example of canceling a paid subscription for a personal account or organization
 
 Kumiko pays for a monthly subscription on the 5th of every month. If Kumiko downgrades from the paid subscription to {% data variables.product.prodname_free_user %} on October 10th, her paid subscription will remain in effect until the end of her current billing cycle on November 4th. On November 5th, her account will move to {% data variables.product.prodname_free_user %}.
 
-#### Example of changing from a yearly to a monthly subscription for a personal account or organization
+### Example of changing from a yearly to a monthly subscription for a personal account or organization
 
 Ravi pays for a yearly subscription on October 5th every year. If Ravi switches from a yearly to monthly billing on December 10th, his account remains on the yearly subscription until the end of its current billing cycle on October 4th the next year. On October 5th of the next year, Ravi will be charged for a month of service. His next billing date will be November 5th.
 
-#### Example of adding paid seats to your organization
+### Example of adding paid seats to your organization
 
 Mada's organization pays for 25 seats on the 15th of every month. If Mada adds ten paid seats on June 4th, her organization is immediately charged a prorated amount for ten additional seats for the time between June 4th and June 14th, and the seats are available to use immediately. On June 15th, Mada's organization will pay for 35 seats.
 
-#### Example of removing paid seats from your organization
+### Example of removing paid seats from your organization
 
 Stefan's organization pays for 50 seats every year on May 20th. If Stefan removes 20 seats and downgrades to a new total of 30 paid seats on September 30, his organization can still access its 50 paid seats until the end of its current billing cycle on May 19th. On May 20th, the downgrade will take effect - Stefan's organization will pay for 30 seats and will have access to 30 paid seats.
 

content/billing/managing-your-github-billing-settings/viewing-your-subscriptions-and-billing-date.md

@@ -2,13 +2,14 @@
 title: Viewing your subscriptions and billing date
 intro: 'You can view your account''s subscription, your other paid features and products, and your next billing date in your account''s billing settings.'
 redirect_from:
+  - /github/setting-up-and-managing-billing-and-payments-on-github/managing-your-github-billing-settings/viewing-your-subscriptions-and-billing-date
   - /github/setting-up-and-managing-billing-and-payments-on-github/viewing-your-subscriptions-and-billing-date
   - /articles/finding-your-next-billing-date/
   - /articles/finding-your-personal-account-s-next-billing-date/
   - /articles/finding-your-organization-s-next-billing-date/
   - /articles/viewing-your-plans-and-billing-date/
   - /articles/viewing-your-subscriptions-and-billing-date
-  - /github/setting-up-and-managing-billing-and-payments-on-github/viewing-your-subscriptions-and-billing-date
+
 versions:
   free-pro-team: '*'
 type: how_to

content/code-security/getting-started/adding-a-security-policy-to-your-repository.md

@@ -9,8 +9,12 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.1'
   github-ae: 'next'
+type: how_to
 topics:
-  - Security
+  - Security policies
+  - Vulnerabilities
+  - Repositories
+  - Health
 ---
 
 ### About security policies

content/code-security/getting-started/github-security-features.md

@@ -5,8 +5,12 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: overview
 topics:
-  - Security
+  - Repositories
+  - Dependencies
+  - Vulnerabilities
+  - Advanced Security
 ---
 
 ### About {% data variables.product.prodname_dotcom %}'s security features

content/code-security/getting-started/index.md

@@ -7,7 +7,9 @@ versions:
   enterprise-server: '>=3.0'
   github-ae: '*'
 topics:
-  - Security
+  - Repositories
+  - Dependencies
+  - Vulnerabilities
 children:
   - /github-security-features
   - /securing-your-repository

content/code-security/getting-started/securing-your-organization.md

@@ -6,8 +6,12 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
   - Organizations
+  - Dependencies
+  - Vulnerabilities
+  - Advanced Security
 ---
 
 ### Introduction

content/code-security/getting-started/securing-your-repository.md

@@ -9,8 +9,12 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
   - Repositories
+  - Dependencies
+  - Vulnerabilities
+  - Advanced Security
 ---
 
 ### Introduction

content/code-security/index.md

@@ -7,7 +7,9 @@ versions:
   enterprise-server: '>=3.0'
   github-ae: '*'
 topics:
-  - Security
+  - Repositories
+  - Dependencies
+  - Vulnerabilities
 children:
   - /getting-started
   - /secret-security

content/code-security/secret-security/about-secret-scanning.md

@@ -11,8 +11,10 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: overview
 topics:
-  - Repositories
+  - Secret scanning
+  - Advanced Security
 ---
 
 {% data reusables.secret-scanning.beta %}
@@ -47,6 +49,8 @@ When {% data variables.product.prodname_secret_scanning %} detects a set of cred
 
 If you're a repository administrator or an organization owner, you can enable {% data variables.product.prodname_secret_scanning %} for {% if currentVersion == "free-pro-team@latest" %} private{% endif %} repositories that are owned by organizations. You can enable  {% data variables.product.prodname_secret_scanning %} for all your repositories, or for all new repositories within your organization.{% if currentVersion == "free-pro-team@latest" %} {% data variables.product.prodname_secret_scanning_caps %} is not available for user-owned private repositories.{% endif %} For more information, see "[Managing security and analysis settings for your repository](/github/administering-a-repository/managing-security-and-analysis-settings-for-your-repository)" and "[Managing security and analysis settings for your organization](/organizations/keeping-your-organization-secure/managing-security-and-analysis-settings-for-your-organization)."
 
+{% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.1" or currentVersion == "github-ae@next" %}You can also define custom {% data variables.product.prodname_secret_scanning %} patterns that only apply to your repository or organization. For more information, see "[Defining custom patterns for {% data variables.product.prodname_secret_scanning %}](/code-security/secret-security/defining-custom-patterns-for-secret-scanning)."{% endif %}
+
 When you push commits to a{% if currentVersion == "free-pro-team@latest" %} private{% endif %} repository with {% data variables.product.prodname_secret_scanning %} enabled, {% data variables.product.prodname_dotcom %} scans the contents of the commits for secrets.
 
 When {% data variables.product.prodname_secret_scanning %} detects a secret in a{% if currentVersion == "free-pro-team@latest" %} private{% endif %} repository, {% data variables.product.prodname_dotcom %} generates an alert.
@@ -69,11 +73,13 @@ To monitor results from {% data variables.product.prodname_secret_scanning %} ac
 
 {% data reusables.secret-scanning.partner-secret-list-private-repo %}
 
+{% if currentVersion ver_lt "enterprise-server@3.2" or currentVersion == "github-ae@latest" %}
 {% note %}
 
 **Note:** {% data variables.product.prodname_secret_scanning_caps %} does not currently allow you to define your own patterns for detecting secrets.
 
 {% endnote %}
+{% endif %}
 
 ### Further reading
 

content/code-security/secret-security/configuring-secret-scanning-for-your-repositories.md

@@ -10,7 +10,10 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
+  - Secret scanning
+  - Advanced Security
   - Repositories
 ---
 
@@ -29,7 +32,7 @@ topics:
 
 {% if currentVersion ver_gt "enterprise-server@2.22" or currentVersion == "github-ae@next" %}
 You can enable {% data variables.product.prodname_secret_scanning %} for any repository that is owned by an organization. 
-{% endif %} Once enabled, {% data variables.product.prodname_secret_scanning %} will scan for any secrets your entire Git history on all branches present in your {% data variables.product.prodname_dotcom %} repository.
+{% endif %} Once enabled, {% data reusables.secret-scanning.secret-scanning-process %}
 
 {% data reusables.repositories.navigate-to-repo %}
 {% data reusables.repositories.sidebar-settings %}
@@ -82,3 +85,4 @@ You can also ignore individual alerts from {% data variables.product.prodname_se
 ### Further reading
 
 - "[Managing security and analysis settings for your organization](/organizations/keeping-your-organization-secure/managing-security-and-analysis-settings-for-your-organization)"
+{% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.1" or currentVersion == "github-ae@next" %}- "[Defining custom patterns for {% data variables.product.prodname_secret_scanning %}](/code-security/secret-security/defining-custom-patterns-for-secret-scanning)"{% endif %}

content/code-security/secret-security/defining-custom-patterns-for-secret-scanning.md

@@ -0,0 +1,79 @@
+---
+title: Defining custom patterns for secret scanning
+shortTitle: 'Defining custom patterns'
+intro: 'You can define custom patterns for {% data variables.product.prodname_secret_scanning %} in organizations and private repositories.'
+product: '{% data reusables.gated-features.secret-scanning %}'
+versions:
+  free-pro-team: '*'
+  enterprise-server: '>=3.2'
+  github-ae: 'next'
+topics:
+  - Repositories
+---
+
+{% note %}
+
+**Note:** Custom patterns for {% data variables.product.prodname_secret_scanning %} is currently in beta and is subject to change.
+
+{% endnote %}
+
+### About custom patterns for {% data variables.product.prodname_secret_scanning %}
+
+{% data variables.product.company_short %} performs {% data variables.product.prodname_secret_scanning %} on {% if currentVersion == "free-pro-team@latest" %}public and private{% endif %} repositories for secret patterns provided by {% data variables.product.company_short %} and {% data variables.product.company_short %} partners. For more information on the {% data variables.product.prodname_secret_scanning %} partner program, see "<a href="/developers/overview/secret-scanning" class="dotcom-only">Secret scanning</a>."
+
+However, there can be situations where you want to scan for other secret patterns in your {% if currentVersion == "free-pro-team@latest" %}private{% endif %} repositories. For example, you might have a secret pattern that is internal to your organization. For these situations, you can define custom {% data variables.product.prodname_secret_scanning %} patterns in organizations and {% if currentVersion == "free-pro-team@latest" %}private{% endif %} repositories on {% data variables.product.product_name %}. You can define up to 20 custom patterns for each {% if currentVersion == "free-pro-team@latest" %}private{% endif %} repository or organization.
+
+{% note %}
+
+**Note:** During the beta, there are some limitations when using custom patterns for {% data variables.product.prodname_secret_scanning %}:
+
+* There is no dry-run functionality.
+* You cannot edit custom patterns after they're created. To change a pattern, you must delete it and recreate it.
+* There is no API for creating, editing, or deleting custom patterns. However, results for custom patterns are returned in the [secret scanning alerts API](/rest/reference/secret-scanning).
+
+{% endnote %}
+
+### Regular expression syntax for custom patterns
+
+Custom patterns for {% data variables.product.prodname_secret_scanning %} are specified as regular expressions. {% data variables.product.prodname_secret_scanning_caps %} uses the [Hyperscan library](https://github.com/intel/hyperscan) and only supports Hyperscan regex constructs, which are a subset of PCRE syntax. Hyperscan option modifiers are not supported.  For more information on Hyperscan pattern constructs, see "[Pattern support](http://intel.github.io/hyperscan/dev-reference/compilation.html#pattern-support)" in the Hyperscan documentation.
+
+### Defining a custom pattern for a repository
+
+Before defining a custom pattern, you must ensure that {% data variables.product.prodname_secret_scanning %} is enabled on your repository. For more information, see "[Configuring {% data variables.product.prodname_secret_scanning %} for your repositories](/code-security/secret-security/configuring-secret-scanning-for-your-repositories)."
+
+{% data reusables.repositories.navigate-to-repo %}
+{% data reusables.repositories.sidebar-settings %}
+{% data reusables.repositories.navigate-to-security-and-analysis %}
+{% data reusables.repositories.navigate-to-ghas-settings %}
+{% data reusables.repositories.secret-scanning-add-custom-pattern %}
+
+After your pattern is created, {% data reusables.secret-scanning.secret-scanning-process %} For more information on viewing {% data variables.product.prodname_secret_scanning %} alerts, see "[Managing alerts from {% data variables.product.prodname_secret_scanning %}](/code-security/secret-security/managing-alerts-from-secret-scanning)."
+
+### Defining a custom pattern for an organization
+
+Before defining a custom pattern, you must ensure that you enable {% data variables.product.prodname_secret_scanning %} for the {% if currentVersion == "free-pro-team@latest" %}private{% endif %} repositories that you want to scan in your organization. To enable {% data variables.product.prodname_secret_scanning %} on all {% if currentVersion == "free-pro-team@latest" %}private{% endif %} repositories in your organization, see "[Managing security and analysis settings for your organization](/organizations/keeping-your-organization-secure/managing-security-and-analysis-settings-for-your-organization)."
+
+{% note %}
+
+**Note:** There is no dry-run functionality during the custom patterns beta. To avoid excess false-positive {% data variables.product.prodname_secret_scanning %} alerts, we recommend that you test your custom patterns in a repository before defining them for your entire organization.
+
+{% endnote %}
+
+{% data reusables.profile.access_org %}
+{% data reusables.profile.org_settings %}
+{% data reusables.organizations.security-and-analysis %}
+{% data reusables.repositories.navigate-to-ghas-settings %}
+{% data reusables.repositories.secret-scanning-add-custom-pattern %}
+
+After your pattern is created, {% data variables.product.prodname_secret_scanning %} scans for any secrets in {% if currentVersion == "free-pro-team@latest" %}private{% endif %} repositories in your organization, including their entire Git history on all branches. Organization owners and repository administrators will be alerted to any secrets found, and can review the alert in the repository where the secret is found. For more information on viewing {% data variables.product.prodname_secret_scanning %} alerts, see "[Managing alerts from {% data variables.product.prodname_secret_scanning %}](/code-security/secret-security/managing-alerts-from-secret-scanning)."
+
+### Removing a custom pattern
+
+Removing a custom pattern also closes all the {% data variables.product.prodname_secret_scanning %} alerts that the pattern created.
+
+1. Navigate to the **Security & analysis** settings for the repository or organization where the custom pattern was created. For more information, see "[Defining a custom pattern for a repository](#defining-a-custom-pattern-for-a-repository)" or "[Defining a custom pattern for an organization](#defining-a-custom-pattern-for-an-organization)" above.
+{% data reusables.repositories.navigate-to-ghas-settings %}
+1. Under "{% data variables.product.prodname_secret_scanning_caps %}", find the custom pattern you want to remove and click **Remove**.
+
+   ![Remove a custom {% data variables.product.prodname_secret_scanning %}  pattern](/assets/images/help/repository/secret-scanning-remove-custom-pattern.png)
+1. Review the confirmation and click **Remove custom pattern**.

content/code-security/secret-security/index.md

@@ -8,10 +8,13 @@ versions:
   enterprise-server: '>=3.0'
   github-ae: '*'
 topics:
+  - Secret scanning
+  - Advanced Security
   - Repositories
 children:
   - /about-secret-scanning
   - /configuring-secret-scanning-for-your-repositories
+  - /defining-custom-patterns-for-secret-scanning
   - /managing-alerts-from-secret-scanning
 ---
 

content/code-security/secret-security/managing-alerts-from-secret-scanning.md

@@ -8,7 +8,11 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
+  - Secret scanning
+  - Advanced Security
+  - Alerts
   - Repositories
 ---
 

content/code-security/secure-coding/automatically-scanning-your-code-for-vulnerabilities-and-errors/about-code-scanning.md

@@ -10,8 +10,11 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: overview
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - CodeQL
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 

content/code-security/secure-coding/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning.md

@@ -11,8 +11,15 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - Actions
+  - Repositories
+  - Pull requests
+  - JavaScript
+  - Python
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 
@@ -74,6 +81,18 @@ For more information about the `pull_request` event, see "[Workflow syntax for {
 
 If you scan pull requests, then the results appear as alerts in a pull request check. For more information, see "[Triaging code scanning alerts in pull requests](/code-security/secure-coding/triaging-code-scanning-alerts-in-pull-requests)."
 
+{% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.1" or currentVersion == "github-ae@next" %}
+#### Defining the alert severities causing pull request check failure
+
+By default, only alerts with the severity level of `error` will cause a pull request check failure, and a check will still succeed with alerts of lower severities. You can change the levels of alert severities that will cause a pull request check failure in your repository settings.
+
+{% data reusables.repositories.navigate-to-repo %}
+{% data reusables.repositories.sidebar-settings %}
+{% data reusables.repositories.navigate-to-security-and-analysis %}
+1. Under "Code scanning", to the right of "Check Failure", use the drop-down menu to select the level of severity you would like to cause a pull request check failure. 
+![Check failure setting](/assets/images/help/repository/code-scanning-check-failure-setting.png)
+{% endif %}
+
 #### Avoiding unnecessary scans of pull requests
 
 You might want to avoid a code scan being triggered on specific pull requests targeted against the default branch, irrespective of which files have been changed. You can configure this by specifying `on:pull_request:paths-ignore` or `on:pull_request:paths` in the {% data variables.product.prodname_code_scanning %} workflow. For example, if the only changes in a pull request are to files with the file extensions `.md` or `.txt` you can use the following `paths-ignore` array.

content/code-security/secure-coding/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-the-codeql-workflow-for-compiled-languages.md

@@ -13,8 +13,16 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - CodeQL
+  - Actions
+  - Repositories
+  - C/C++
+  - C#
+  - Java
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 

content/code-security/secure-coding/automatically-scanning-your-code-for-vulnerabilities-and-errors/index.md

@@ -10,7 +10,8 @@ versions:
   enterprise-server: '>=3.0'
   github-ae: '*'
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
 children:
   - /about-code-scanning
   - /triaging-code-scanning-alerts-in-pull-requests

content/code-security/secure-coding/automatically-scanning-your-code-for-vulnerabilities-and-errors/managing-code-scanning-alerts-for-your-repository.md

@@ -13,8 +13,12 @@ redirect_from:
   - /github/finding-security-vulnerabilities-and-errors-in-your-code/managing-alerts-from-code-scanning
   - /github/finding-security-vulnerabilities-and-errors-in-your-code/managing-code-scanning-alerts-for-your-repository
   - /code-security/secure-coding/managing-code-scanning-alerts-for-your-repository
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - Alerts
+  - Repositories
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 

content/code-security/secure-coding/automatically-scanning-your-code-for-vulnerabilities-and-errors/running-codeql-code-scanning-in-a-container.md

@@ -10,8 +10,15 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - CodeQL
+  - Actions
+  - Repositories
+  - Containers
+  - Java
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 

content/code-security/secure-coding/automatically-scanning-your-code-for-vulnerabilities-and-errors/setting-up-code-scanning-for-a-repository.md

@@ -14,8 +14,12 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - Actions
+  - Repositories
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 

content/code-security/secure-coding/automatically-scanning-your-code-for-vulnerabilities-and-errors/triaging-code-scanning-alerts-in-pull-requests.md

@@ -11,8 +11,13 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - Pull requests
+  - Alerts
+  - Repositories
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 
@@ -22,7 +27,11 @@ topics:
 
 In repositories where {% data variables.product.prodname_code_scanning %} is configured as a pull request check, {% data variables.product.prodname_code_scanning %} checks the code in the pull request. By default, this is limited to pull requests that target the default branch, but you can change this configuration within {% data variables.product.prodname_actions %} or in a third-party CI/CD system. If merging the changes would introduce new {% data variables.product.prodname_code_scanning %} alerts to the target branch, these are reported as check results in the pull request. The alerts are also shown as annotations in the **Files changed** tab of the pull request. If you have write permission for the repository, you can see any existing {% data variables.product.prodname_code_scanning %} alerts on the **Security** tab. For information about repository alerts, see "[Managing {% data variables.product.prodname_code_scanning %} alerts for your repository](/code-security/secure-coding/managing-code-scanning-alerts-for-your-repository)."
 
-If {% data variables.product.prodname_code_scanning %} has any results with a severity of `error`, the check fails and the error is reported in the check results. If all the results found by {% data variables.product.prodname_code_scanning %} have lower severities, the alerts are treated as warnings or notices and the check succeeds. If your pull request targets a protected branch that uses {% data variables.product.prodname_code_scanning %}, and the repository owner has configured required status checks, then you must either fix or dismiss all error alerts before the pull request can be merged. For more information, see "[About protected branches](/github/administering-a-repository/about-protected-branches#require-status-checks-before-merging)."
+If {% data variables.product.prodname_code_scanning %} has any results with a severity of `error`, the check fails and the error is reported in the check results. If all the results found by {% data variables.product.prodname_code_scanning %} have lower severities, the alerts are treated as warnings or notices and the check succeeds. 
+
+{% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.1" or currentVersion == "github-ae@next" %}You can override the default behavior in your repository settings, by specifying the level of severities that will cause a pull request check failure. For more information, see "[Defining the alert severities causing pull request check failure](/code-security/secure-coding/configuring-code-scanning#defining-the-alert-severities-causing-pull-request-check-failure)".
+
+{% endif %}If your pull request targets a protected branch that uses {% data variables.product.prodname_code_scanning %}, and the repository owner has configured required status checks, then you must either fix or dismiss all error alerts before the pull request can be merged. For more information, see "[About protected branches](/github/administering-a-repository/about-protected-branches#require-status-checks-before-merging)."
 
 ![Failed {% data variables.product.prodname_code_scanning %} check on a pull request](/assets/images/help/repository/code-scanning-check-failure.png)
 

content/code-security/secure-coding/automatically-scanning-your-code-for-vulnerabilities-and-errors/troubleshooting-the-codeql-workflow.md

@@ -11,8 +11,18 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - CodeQL
+  - Actions
+  - Troubleshooting
+  - Repositories
+  - Pull requests
+  - C/C++
+  - C#
+  - Java
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 

content/code-security/secure-coding/index.md

@@ -11,7 +11,9 @@ versions:
   enterprise-server: '>=3.0'
   github-ae: '*'
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - CodeQL
 children:
   - /automatically-scanning-your-code-for-vulnerabilities-and-errors
   - /integrating-with-code-scanning

content/code-security/secure-coding/integrating-with-code-scanning/about-integration-with-code-scanning.md

@@ -10,8 +10,12 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: overview
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - Webhooks
+  - Integration
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 

content/code-security/secure-coding/integrating-with-code-scanning/index.md

@@ -11,7 +11,9 @@ versions:
   enterprise-server: '>=3.0'
   github-ae: '*'
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - Integration
 children:
   - /about-integration-with-code-scanning
   - /uploading-a-sarif-file-to-github

content/code-security/secure-coding/integrating-with-code-scanning/sarif-support-for-code-scanning.md

@@ -12,8 +12,12 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: reference
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - Integration
+  - SARIF
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 

content/code-security/secure-coding/integrating-with-code-scanning/uploading-a-sarif-file-to-github.md

@@ -12,8 +12,15 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - Integration
+  - Actions
+  - Repositories
+  - CI
+  - SARIF
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 

content/code-security/secure-coding/using-codeql-code-scanning-with-your-existing-ci-system/about-codeql-code-scanning-in-your-ci-system.md

@@ -8,7 +8,14 @@ versions:
   enterprise-server: '>=3.0'
   github-ae: '*'
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - CodeQL
+  - Repositories
+  - Pull requests
+  - Integration
+  - CI
+  - SARIF
 redirect_from:
   - /code-security/secure-coding/about-codeql-code-scanning-in-your-ci-system
 ---

content/code-security/secure-coding/using-codeql-code-scanning-with-your-existing-ci-system/configuring-codeql-runner-in-your-ci-system.md

@@ -13,8 +13,18 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - CodeQL
+  - Integration
+  - CI
+  - Repositories
+  - Pull requests
+  - C/C++
+  - C#
+  - Java
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 

content/code-security/secure-coding/using-codeql-code-scanning-with-your-existing-ci-system/index.md

@@ -9,8 +9,13 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - Integration
+  - CI
+  - CodeQL
 children:
   - /about-codeql-code-scanning-in-your-ci-system
   - /running-codeql-cli-in-your-ci-system

content/code-security/secure-coding/using-codeql-code-scanning-with-your-existing-ci-system/running-codeql-cli-in-your-ci-system.md

@@ -7,9 +7,17 @@ miniTocMaxHeadingLevel: 4
 versions:
   free-pro-team: '*'
   enterprise-server: '>=3.1'
-  github-ae: next
+  github-ae: 'next'
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - CodeQL
+  - Repositories
+  - Pull requests
+  - Integration
+  - CI
+  - SARIF
 redirect_from:
   - /code-security/secure-coding/running-codeql-cli-in-your-ci-system
 ---

content/code-security/secure-coding/using-codeql-code-scanning-with-your-existing-ci-system/running-codeql-runner-in-your-ci-system.md

@@ -12,8 +12,16 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - CodeQL
+  - Repositories
+  - Pull requests
+  - Integration
+  - CI
+  - SARIF
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 <!--UI-LINK: When GitHub Enterprise Server doesn't have GitHub Actions set up, the Security > Code scanning alerts view links to this article.-->

content/code-security/secure-coding/using-codeql-code-scanning-with-your-existing-ci-system/troubleshooting-codeql-runner-in-your-ci-system.md

@@ -12,8 +12,14 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
   github-ae: '*'
+type: how_to
 topics:
-  - Security
+  - Advanced Security
+  - Code scanning
+  - CodeQL
+  - Troubleshooting
+  - Integration
+  - CI
 ---
 <!--For this article in earlier GHES versions, see /content/github/finding-security-vulnerabilities-and-errors-in-your-code-->
 

content/code-security/security-advisories/about-coordinated-disclosure-of-security-vulnerabilities.md

@@ -4,6 +4,10 @@ intro: 'Vulnerability disclosure is a coordinated effort between security report
 miniTocMaxHeadingLevel: 4
 versions:
   free-pro-team: '*'
+type: overview
+topics:
+  - Security advisories
+  - Vulnerabilities
 ---
 
 ### About disclosing vulnerabilities in the industry

content/code-security/security-advisories/about-github-security-advisories.md

@@ -7,8 +7,11 @@ redirect_from:
   - /github/managing-security-vulnerabilities/about-github-security-advisories
 versions:
   free-pro-team: '*'
+type: overview
 topics:
-  - Security
+  - Security advisories
+  - Vulnerabilities
+  - CVEs
 ---
 
 {% data reusables.repositories.security-advisory-admin-permissions %}

content/code-security/security-advisories/adding-a-collaborator-to-a-security-advisory.md

@@ -7,8 +7,11 @@ redirect_from:
   - /github/managing-security-vulnerabilities/adding-a-collaborator-to-a-security-advisory
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
-  - Security
+  - Security advisories
+  - Vulnerabilities
+  - Collaboration
 ---
 
 People with admin permissions to a security advisory can add collaborators to the security advisory.

content/code-security/security-advisories/collaborating-in-a-temporary-private-fork-to-resolve-a-security-vulnerability.md

@@ -6,8 +6,12 @@ redirect_from:
   - /github/managing-security-vulnerabilities/collaborating-in-a-temporary-private-fork-to-resolve-a-security-vulnerability
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
-  - Security
+  - Security advisories
+  - Vulnerabilities
+  - Collaboration
+  - Forks
 ---
 
 ### Prerequisites

content/code-security/security-advisories/creating-a-security-advisory.md

@@ -7,8 +7,10 @@ redirect_from:
   - /github/managing-security-vulnerabilities/creating-a-security-advisory
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
-  - Security
+  - Security advisories
+  - Vulnerabilities
 ---
 
 Anyone with admin permissions to a repository can create a security advisory.

content/code-security/security-advisories/editing-a-security-advisory.md

@@ -5,8 +5,10 @@ redirect_from:
   - /github/managing-security-vulnerabilities/editing-a-security-advisory
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
-  - Security
+  - Security advisories
+  - Vulnerabilities
 ---
 
 People with admin permissions to a security advisory can edit the security advisory.

content/code-security/security-advisories/index.md

@@ -8,7 +8,10 @@ redirect_from:
 versions:
   free-pro-team: '*'
 topics:
-  - Security
+  - Security advisories
+  - Vulnerabilities
+  - Repositories
+  - CVEs
 children:
   - /about-coordinated-disclosure-of-security-vulnerabilities
   - /about-github-security-advisories

content/code-security/security-advisories/permission-levels-for-security-advisories.md

@@ -7,8 +7,11 @@ redirect_from:
   - /github/managing-security-vulnerabilities/permission-levels-for-security-advisories
 versions:
   free-pro-team: '*'
+type: reference
 topics:
-  - Security
+  - Security advisories
+  - Vulnerabilities
+  - Permissions
 ---
 
 ### Permissions overview

content/code-security/security-advisories/publishing-a-security-advisory.md

@@ -7,8 +7,12 @@ redirect_from:
   - /github/managing-security-vulnerabilities/publishing-a-security-advisory
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
-  - Security
+  - Security advisories
+  - Vulnerabilities
+  - CVEs
+  - Repositories
 ---
 <!--Marketing-LINK: From /features/security/software-supply-chain page "Publishing a security advisory".-->
 

content/code-security/security-advisories/removing-a-collaborator-from-a-security-advisory.md

@@ -5,8 +5,11 @@ redirect_from:
   - /github/managing-security-vulnerabilities/removing-a-collaborator-from-a-security-advisory
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
-  - Security
+  - Security advisories
+  - Vulnerabilities
+  - Collaboration
 ---
 
 People with admin permissions to a security advisory can remove collaborators from the security advisory.

content/code-security/security-advisories/withdrawing-a-security-advisory.md

@@ -5,8 +5,10 @@ redirect_from:
   - /github/managing-security-vulnerabilities/withdrawing-a-security-advisory
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
-  - Security
+  - Security advisories
+  - Vulnerabilities
 ---
 
 If you publish a security advisory in error, you can withdraw the security advisory by contacting {% data variables.contact.contact_support %}.

content/code-security/security-overview/exploring-security-alerts.md

@@ -5,6 +5,13 @@ product: '{% data reusables.gated-features.security-center %}'
 versions:
   free-pro-team: '*'
   github-ae: 'next'
+type: how_to
+topics:
+  - Security overview
+  - Advanced Security
+  - Alerts
+  - Organizations
+  - Teams
 ---
 
 {% data reusables.security-center.beta %}

content/code-security/security-overview/index.md

@@ -5,7 +5,10 @@ intro: 'View, sort, and filter the security alerts from across your organization
 product: '{% data reusables.gated-features.security-center %}'
 versions:
   free-pro-team: '*'
-  github-ae: next
+  github-ae: 'next'
+topics:
+  - Security overview
+  - Advanced Security
 children:
   - /exploring-security-alerts
 ---

content/code-security/supply-chain-security/index.md

@@ -9,7 +9,9 @@ versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
 topics:
-  - Security
+  - Dependabot
+  - Dependencies
+  - Repositories
 children:
   - /understanding-your-software-supply-chain
   - /keeping-your-dependencies-updated-automatically

content/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/about-dependabot-version-updates.md

@@ -9,8 +9,13 @@ redirect_from:
   - /code-security/supply-chain-security/about-dependabot-version-updates
 versions:
   free-pro-team: '*'
+type: overview
 topics:
+  - Dependabot
+  - Version updates
   - Repositories
+  - Dependencies
+  - Pull requests
 ---
 ### About {% data variables.product.prodname_dependabot_version_updates %}
 

content/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/configuration-options-for-dependency-updates.md

@@ -8,8 +8,13 @@ redirect_from:
 miniTocMaxHeadingLevel: 4
 versions:
   free-pro-team: '*'
+type: reference
 topics:
+  - Dependabot
+  - Version updates
   - Repositories
+  - Dependencies
+  - Pull requests
 ---
 ### About the *dependabot.yml* file
 
@@ -293,7 +298,7 @@ Dependencies ignored by using the `@dependabot ignore` command are stored centra
 
 You can check whether a repository has stored `ignore` preferences by searching the repository for `"@dependabot ignore" in:comments`. If you wish to un-ignore a dependency ignored this way, re-open the pull request.
 
-For more information about the `@dependabot ignore` commands, see "[Managing pull requests for dependency updates](/github/administering-a-repository/managing-pull-requests-for-dependency-updates)."
+For more information about the `@dependabot ignore` commands, see "[Managing pull requests for dependency updates](/github/administering-a-repository/managing-pull-requests-for-dependency-updates#managing-dependabot-pull-requests-with-comment-commands)."
 
 ##### Specifying dependencies and versions to ignore
 

content/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/customizing-dependency-updates.md

@@ -7,8 +7,15 @@ redirect_from:
   - /code-security/supply-chain-security/customizing-dependency-updates
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
+  - Dependabot
+  - Version updates
+  - Security updates
   - Repositories
+  - Dependencies
+  - Pull requests
+  - Vulnerabilities
 ---
 ### About customizing dependency updates
 

content/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/enabling-and-disabling-version-updates.md

@@ -7,8 +7,13 @@ redirect_from:
   - /code-security/supply-chain-security/enabling-and-disabling-version-updates
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
+  - Dependabot
+  - Version updates
   - Repositories
+  - Dependencies
+  - Pull requests
 ---
 <!--Marketing-LINK: From /features/security/software-supply-chain page "About version updates for dependencies".-->
 

content/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/index.md

@@ -7,6 +7,10 @@ versions:
   free-pro-team: '*'
 topics:
   - Repositories
+  - Dependabot
+  - Version updates
+  - Dependencies
+  - Pull requests
 children:
   - /about-dependabot-version-updates
   - /upgrading-from-dependabotcom-to-github-native-dependabot

content/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/keeping-your-actions-up-to-date-with-dependabot.md

@@ -7,8 +7,12 @@ redirect_from:
   - /code-security/supply-chain-security/keeping-your-actions-up-to-date-with-dependabot
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
   - Repositories
+  - Dependabot
+  - Version updates
+  - Actions
 ---
 ### About {% data variables.product.prodname_dependabot_version_updates %} for actions
 

content/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/listing-dependencies-configured-for-version-updates.md

@@ -6,8 +6,12 @@ redirect_from:
   - /code-security/supply-chain-security/listing-dependencies-configured-for-version-updates
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
   - Repositories
+  - Dependabot
+  - Version updates
+  - Dependencies
 ---
 ### Viewing dependencies monitored by {% data variables.product.prodname_dependabot %}
 

content/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/managing-encrypted-secrets-for-dependabot.md

@@ -6,6 +6,13 @@ redirect_from:
   - /code-security/supply-chain-security/managing-encrypted-secrets-for-dependabot
 versions:
   free-pro-team: '*'
+type: how_to
+topics:
+  - Dependabot
+  - Version updates
+  - Secret store
+  - Repositories
+  - Dependencies
 ---
 ### About encrypted secrets for {% data variables.product.prodname_dependabot %}
 

content/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/managing-pull-requests-for-dependency-updates.md

@@ -6,8 +6,14 @@ redirect_from:
   - /code-security/supply-chain-security/managing-pull-requests-for-dependency-updates
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
   - Repositories
+  - Version updates
+  - Security updates
+  - Pull requests
+  - Dependencies
+  - Vulnerabilities
 ---
 ### About {% data variables.product.prodname_dependabot %} pull requests
 
@@ -31,6 +37,21 @@ By default, {% data variables.product.prodname_dependabot %} automatically rebas
 
 ### Managing {% data variables.product.prodname_dependabot %} pull requests with comment commands
 
-{% data variables.product.prodname_dependabot %} responds to simple commands in comments. Each pull request contains details of the commands you can use to process the pull request, for example: to merge, squash, reopen, close, or rebase the pull request. The aim is to make it as easy as possible for you to triage these automatically generated pull requests.
+{% data variables.product.prodname_dependabot %} responds to simple commands in comments. Each pull request contains details of the commands you can use to process the pull request (for example: to merge, squash, reopen, close, or rebase the pull request) under the "{% data variables.product.prodname_dependabot %} commands and options" section. The aim is to make it as easy as possible for you to triage these automatically generated pull requests.
+
+You can use any of the following commands on a {% data variables.product.prodname_dependabot %} pull request.
+
+- `@dependabot cancel merge` cancels a previously requested merge.
+- `@dependabot close` closes the pull request and prevents {% data variables.product.prodname_dependabot %} from recreating that pull request. You can achieve the same result by closing the pull request manually.
+- `@dependabot ignore this dependency` closes the pull request and prevents {% data variables.product.prodname_dependabot %} from creating any more pull requests for this dependency (unless you reopen the pull request or upgrade to the suggested version of the dependency yourself).
+- `@dependabot ignore this major version` closes the pull request and prevents {% data variables.product.prodname_dependabot %} from creating any more pull requests for this major version (unless you reopen the pull request or upgrade to this major version yourself).
+- `@dependabot ignore this minor version` closes the pull request and prevents {% data variables.product.prodname_dependabot %} from creating any more pull requests for this minor version (unless you reopen the pull request or upgrade to this minor version yourself).
+- `@dependabot merge` merges the pull request once your CI tests have passed.
+- `@dependabot rebase` rebases the pull request.
+- `@dependabot recreate` recreates the pull request, overwriting any edits that have been made to the pull request.
+- `@dependabot reopen` reopens the pull request if the pull request is closed.
+- `@dependabot squash and merge` squashes and merges the pull request once your CI tests have passed.
+
+{% data variables.product.prodname_dependabot %} will react with a "thumbs up" emoji to acknowledge the command, and may respond with a comment on the pull request. While {% data variables.product.prodname_dependabot %} usually responds quickly, some commands may take several minutes to complete if {% data variables.product.prodname_dependabot %} is busy processing other updates or commands.
 
 If you run any of the commands for ignoring dependencies or versions, {% data variables.product.prodname_dependabot %} stores the preferences for the repository centrally. While this is a quick solution, for repositories with more than one contributor it is better to explicitly define the dependencies and versions to ignore in the configuration file. This makes it easy for all contributors to see why a particular dependency isn't being updated automatically. For more information, see "[Configuration options for dependency updates](/github/administering-a-repository/configuration-options-for-dependency-updates#ignore)."

content/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/upgrading-from-dependabotcom-to-github-native-dependabot.md

@@ -3,8 +3,12 @@ title: Upgrading from Dependabot.com to GitHub-native Dependabot
 intro: You can upgrade to GitHub-native Dependabot by merging a pull request that will allow your dependencies to continue being updated.
 versions:
   free-pro-team: '*'
+type: how_to
 topics:
   - Repositories
+  - Dependabot
+  - Version updates
+  - Dependencies
 redirect_from:
   - /code-security/supply-chain-security/upgrading-from-dependabotcom-to-github-native-dependabot
 ---

content/code-security/supply-chain-security/managing-vulnerabilities-in-your-projects-dependencies/about-alerts-for-vulnerable-dependencies.md

@@ -9,8 +9,13 @@ redirect_from:
 versions:
   free-pro-team: '*'
   enterprise-server: '>=3.0'
+type: overview
 topics:
-  - Security
+  - Dependabot
+  - Alerts
+  - Vulnerabilities
+  - Repositories
+  - Dependencies
 ---
 <!--For this article in earlier GHES versions, see /content/github/managing-security-vulnerabilities-->
 <!--Marketing-LINK: From /features/security/software-supply-chain page "About alerts for vulnerable dependencies ".-->

content/code-security/supply-chain-security/managing-vulnerabilities-in-your-projects-dependencies/about-dependabot-security-updates.md

@@ -8,8 +8,14 @@ redirect_from:
   - /code-security/supply-chain-security/about-dependabot-security-updates
 versions:
   free-pro-team: '*'
+type: overview
 topics:
-  - Security
+  - Dependabot
+  - Security updates
+  - Vulnerabilities
+  - Repositories
+  - Dependencies
+  - Pull requests
 ---
 <!--Marketing-LINK: From /features/security/software-supply-chain page "About Dependabot security updates".-->
 

content/code-security/supply-chain-security/managing-vulnerabilities-in-your-projects-dependencies/about-managing-vulnerable-dependencies.md

@@ -6,26 +6,30 @@ redirect_from:
   - /code-security/supply-chain-security/about-managing-vulnerable-dependencies
 versions:
   free-pro-team: '*'
+type: overview
 topics:
-  - Security
+  - Dependabot
+  - Vulnerabilities
+  - Repositories
+  - Dependencies
+  - Pull requests
 ---
 <!--Marketing-LINK: From /features/security/software-supply-chain page "Managing vulnerabilities in your project’s dependencies ".-->
 
 {% data variables.product.prodname_dotcom %} provides the following tools for removing and avoiding vulnerable dependencies.
 
-#### Dependency graph
+### Dependency graph
 The dependency graph is a summary of the manifest and lock files stored in a repository. It shows you the ecosystems and packages your codebase depends on (its dependencies) and the repositories and packages that depend on your project (its dependents). The information in the dependency graph is used by dependency review and {% data variables.product.prodname_dependabot %}.
 For more information, see "[About the dependency graph](/github/visualizing-repository-data-with-graphs/about-the-dependency-graph)."
 
-#### Dependency review
+### Dependency review
 By checking the dependency reviews on pull requests you can avoid introducing vulnerabilities from dependencies into your codebase. If the pull requests adds a vulnerable dependency, or changes a dependency to a vulnerable version, this is highlighted in the dependency review. You can change the dependency to a patched version before merging the pull request. For more information, see "[About dependency review](/code-security/supply-chain-security/about-dependency-review)."
 
-#### {% data variables.product.prodname_dependabot_alerts %}
+### {% data variables.product.prodname_dependabot_alerts %}
 {% data variables.product.prodname_dotcom %} can create {% data variables.product.prodname_dependabot_alerts %} when it detects vulnerable dependencies in your repository. The alert is displayed on the Security tab for the repository. The alert includes a link to the affected file in the project, and information about a fixed version. {% data variables.product.prodname_dotcom %} also notifies the maintainers of the repository, according to their notification preferences. For more information, see "[About alerts for vulnerable dependencies](/code-security/supply-chain-security/about-alerts-for-vulnerable-dependencies)."
 
-#### {% data variables.product.prodname_dependabot_security_updates %}
+### {% data variables.product.prodname_dependabot_security_updates %}
 When {% data variables.product.prodname_dotcom %} generates a {% data variables.product.prodname_dependabot %} alert for a vulnerable dependency in your repository, {% data variables.product.prodname_dependabot %} can automatically try to fix it for you. {% data variables.product.prodname_dependabot_security_updates %} are automatically generated pull requests that update a vulnerable dependency to a fixed version. For more information, see "[About {% data variables.product.prodname_dependabot_security_updates %}](/github/managing-security-vulnerabilities/about-dependabot-security-updates)."
 
-
+### {% data variables.product.prodname_dependabot_version_updates %}
-#### {% data variables.product.prodname_dependabot_version_updates %}
 Enabling {% data variables.product.prodname_dependabot_version_updates %} takes the effort out of maintaining your dependencies. With {% data variables.product.prodname_dependabot_version_updates %}, whenever {% data variables.product.prodname_dotcom  %} identifies an outdated dependency, it raises a pull request to update the manifest to the latest version of the dependency. By contrast, {% data variables.product.prodname_dependabot_security_updates %} only raises pull requests to fix vulnerable dependencies. For more information, see "[About Dependabot version updates](/github/administering-a-repository/about-dependabot-version-updates)."