Merge branch 'main' into patch-2

Author: ramyaparimi

.github/actions-scripts/enterprise-server-issue-templates/deprecation-issue.md

@@ -15,6 +15,11 @@ The day after a GHES version's [deprecation date](https://github.com/github/docs
 
 - [ ] In your checkout of the [repo with archived GHES content](https://github.com/github/help-docs-archived-enterprise-versions), create a new branch: `git checkout -b deprecate-<version>`
 - [ ] In your `docs-internal` checkout, download the static files for the oldest supported version into your archival checkout:
+    The archive script depends on an optional dependency so install optional dependencies first:
+    ```
+    $ npm ci --include-optional
+    ```
+    Then run the archive script:
     ```
     $ script/enterprise-server-deprecations/archive-version.js -p <path-to-archive-repo-checkout>
     ```
@@ -26,52 +31,50 @@ The day after a GHES version's [deprecation date](https://github.com/github/docs
   
 ## Step 2: Upload the assets directory to Azure storage
 
-- [ ] Log in to the Azure portal from Okta. Navigate to the [githubdocs Azure Storage Blob resoruce](https://portal.azure.com/#@githubazure.onmicrosoft.com/resource/subscriptions/fa6134a7-f27e-4972-8e9f-0cedffa328f1/resourceGroups/docs-production/providers/Microsoft.Storage/storageAccounts/githubdocs/overview).
+- [ ] Log in to the Azure portal from Okta. Navigate to the [githubdocs Azure Storage Blob resource](https://portal.azure.com/#@githubazure.onmicrosoft.com/resource/subscriptions/fa6134a7-f27e-4972-8e9f-0cedffa328f1/resourceGroups/docs-production/providers/Microsoft.Storage/storageAccounts/githubdocs/overview).
 - [ ] Click the "Open in Explorer" button to the right of search box.If you haven't already, click the download link to download "Microsoft Azure Storage Explorer." To login to the app, click the plug icon in the left sidebar and click the option to "add an azure account." When you login, you'll need a yubikey to authenticate through Okta.
 - [ ] From the Microsoft Azure Storage Explorer app, select the `githubdocs` storage account resource and navigate to the `github-images` blob container. 
 - [ ] Click "Upload" and select "Upload folder." Click the "Selected folder" input to navigate to the `help-docs-archived-enterprise-versions` repository and select the `assets` directory for the version you just generated. In the "Destination folder" input, add the version number. For example, `/enterprise/2.22/`.
 - [ ] Check the log to ensure all files were uploaded successfully.
-- [ ] Removed the `assets` directory from the `/help-docsc-archived-enterprise-versions` repository.
+- [ ] Remove the `assets` directory from your `help-docsc-archived-enterprise-versions` repository, we don't want to commit that directory in the next step.
 
 ## Step 3: Commit and push changes to help-docs-archived-enterprise-versions repo
 
-- [ ] Search for `site-search-input` in the compressed Javascript files. When you find it, use something like https://beautifier.io/ to reformat it to be readable. Find `site-search-input` in the file, there will be something like... `1125: function () { return [SearchReactComponent] },` Delete the innards of this function, but leave the `function() {}` part.
+- [ ] Search for `site-search-input` in the compressed Javascript files (should find the file in the `_next` directory). When you find it, use something like https://beautifier.io/ to reformat it to be readable. Find `site-search-input` in the file, the result will be enclosed in a function that looks something like... `1125: function () { ... },` Delete the innards of this function, but leave the `function() {}` part.
+- [ ] Copy, paste, and save the updated file back into your local `help-docs-archived-enterprise-versions` repository.
 - [ ] In your archival checkout, `git add <version>`, commit, and push.
 - [ ] Open a PR and merge it in. Note that the version will _not_ be deprecated on the docs site until you do the next step.
 
 ## Step 4: Deprecate the version in docs-internal
 
 In your `docs-internal` checkout:
 - [ ] Create a new branch: `git checkout -b deprecate-<version>`.
-- [ ] Edit `lib/enterprise-server-releases.js` by moving the number to be deprecated into the `deprecated` array.
+- [ ] Edit `lib/enterprise-server-releases.js` by removing the version number to be deprecated from the `supported` array and move it to the `deprecated` array.
 - [ ] Open a new PR. Make sure to check the following:
-    - [ ] Tests are passing.
-    - [ ] The deprecated version renders on staging as expected. You should be able to navigate to docs.github.com/enterprise/<DEPRECATED VERSION> to access the docs. You should also be able to navigate to a page that is available in the deprecated version and change the version in the URL to the deprecated version, to test redirects.
+    - [ ] Tests are passing (you may need to include the changes in step 6 to get tests to pass).
+    - [ ] The deprecated version renders in preview as expected. You should be able to navigate to `docs.github.com/enterprise/<DEPRECATED VERSION>` to access the docs. You should also be able to navigate to a page that is available in the deprecated version and change the version in the URL to the deprecated version, to test redirects.
     - [ ] The new oldest supported version renders on staging as expected. You should see a banner on the top of every page for the oldest supported version that notes when the version will be deprecated.
     
-You may need to include the changes in step 6 to get tests to pass.
-
 ## Step 5: Remove static files for the version
 
-- [ ] In your `docs-internal` checkout, from your `remove-<version>-static-files` branch: `git checkout -b remove-<version>-static-files`
+- [ ] In your `docs-internal` checkout, create a new branch `remove-<version>-static-files` branch: `git checkout -b remove-<version>-static-files` (you can branch off of `main` or from your `deprecate-<version>` branch, up to you).
 - [ ] Run `script/enterprise-server-deprecations/remove-static-files.js` and commit results.
 - [ ] Run `script/enterprise-server-deprecations/remove-redirects.js` and commit results.
-- [ ] `lib/rest/static` directory has deferenced and decorated directory underneath, remove the numbered version and all below from the list
 - [ ] Open a new PR.
 - [ ] Get a review from docs-engineering and merge. This step can be merged independently from step 6. The purpose of splitting up steps 5 and 6 is to focus the review on specific files.
 
 ## Step 6: Remove the liquid conditionals and content for the version
 
-- [ ] In your `docs-internal` checkout, from your `remove-<version>-markup` branch: `git checkout -b remove-<version>-markup`
+- [ ] In your `docs-internal` checkout, create a new branch `remove-<version>-markup` branch: `git checkout -b remove-<version>-markup` (you can branch off of `main` or from your `deprecate-<version>` branch, up to you).
 - [ ] Remove the outdated Liquid markup and frontmatter.
     - [ ] Run the script: `script/enterprise-server-deprecations/remove-version-markup.js --release <number>`.
     - [ ] Spot check a few changes. Content, frontmatter, and data files should all have been updated.
     - [ ] Open a PR with the results. The diff may be large and complex, so make sure to get a review from `@github/docs-content`.
-    - [ ] Debug any test failures or unexpected results. 
+    - [ ] Debug any test failures or unexpected results -- it's very likely manual updates will be necessary, the script does a lot of work but doesn't automate everything and can't 100% replace human intent.
 - [ ] When the PR is approved, merge it in to complete the deprecation. This can be merged independently from step 5. 
 
 ## Step 7: Deprecate the OpenAPI description in `github/github`
     
 - [ ] In `github/github`, edit the release's config file in `app/api/description/config/releases/`, and change `deprecated: false` to `deprecated: true`.
 - [ ] Open a new PR, and get the required code owner approvals. A docs-content team member can approve it for the docs team.
-- [ ] When the PR is approved, merge the `github/github` PR.
+- [ ] When the PR is approved, [deploy the `github/github` PR](https://thehub.github.com/engineering/devops/deployment/deploying-dotcom/).  If you haven't deployed a `github/github` PR before, work with someone that has -- the process isn't too involved depending on how you deploy, but there are a lot of details that can potentially be confusing as you can see from the documentation.

components/article/ClientSideHighlightJS.tsx

@@ -1,11 +1,16 @@
 import { useEffect } from 'react'
+import { useRouter } from 'next/router'
 import hljs from 'highlight.js/lib/core'
 import json from 'highlight.js/lib/languages/json'
+import javascript from 'highlight.js/lib/languages/javascript'
+import hljsCurl from 'highlightjs-curl'
 
 // Add as needed. It's pretty cheap to add but please don't use
 // highlight.js import that loads all and everything.
 hljs.registerLanguage('json', json)
-const SUPPORTED_LANGUAGES = ['json']
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('curl', hljsCurl)
+const SUPPORTED_LANGUAGES = ['json', 'javascript', 'curl']
 
 // This is the selector we use for the first document.querySelectorAll()
 // to find the containers for `<code>` tags. Because it's s dataset
@@ -24,6 +29,8 @@ const CODE_ELEMENTS_PARENT_SELECTOR = '[data-highlight]'
 const CODE_SELECTOR = 'pre code'
 
 export default function ClientSideHighlightJS() {
+  const { asPath } = useRouter()
+
   useEffect(() => {
     // Hi Internet Explorer!
     // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#browser_compatibility
@@ -59,7 +66,7 @@ export default function ClientSideHighlightJS() {
         intersectionObserver.observe(element)
       }
     }
-  }, [])
+  }, [asPath])
 
   return null
 }

components/declarations.d.ts

@@ -2,3 +2,5 @@ declare module '*.scss' {
   const content: Record<string, string>
   export default content
 }
+
+declare module 'highlightjs-curl'

components/page-header/LanguagePicker.tsx

@@ -1,14 +1,9 @@
 import { useRouter } from 'next/router'
-import Cookies from 'js-cookie'
-
 import { Link } from 'components/Link'
 import { useLanguages } from 'components/context/LanguagesContext'
 import { Picker } from 'components/ui/Picker'
 import { useTranslation } from 'components/hooks/useTranslation'
 
-// This value is replicated in two places! See middleware/detect-language.js
-const PREFERRED_LOCALE_COOKIE_NAME = 'preferredlang'
-
 type Props = {
   variant?: 'inline'
 }
@@ -27,22 +22,6 @@ export const LanguagePicker = ({ variant }: Props) => {
   // in a "denormalized" way.
   const routerPath = router.asPath.split('#')[0]
 
-  function rememberPreferredLanguage(code: string) {
-    try {
-      Cookies.set(PREFERRED_LOCALE_COOKIE_NAME, code, {
-        expires: 365,
-        secure: document.location.protocol !== 'http:',
-      })
-    } catch (err) {
-      // You can never be too careful because setting a cookie
-      // can fail. For example, some browser
-      // extensions disallow all setting of cookies and attempts
-      // at the `document.cookie` setter could throw. Just swallow
-      // and move on.
-      console.warn('Unable to set preferred language cookie', err)
-    }
-  }
-
   return (
     <Picker
       variant={variant}
@@ -54,13 +33,7 @@ export const LanguagePicker = ({ variant }: Props) => {
           text: lang.nativeName || lang.name,
           selected: lang === selectedLang,
           item: (
-            <Link
-              href={routerPath}
-              locale={lang.code}
-              onClick={() => {
-                rememberPreferredLanguage(lang.code)
-              }}
-            >
+            <Link href={routerPath} locale={lang.code}>
               {lang.nativeName ? (
                 <>
                   <span lang={lang.code}>{lang.nativeName}</span> (

components/rest/CodeBlock.tsx

@@ -5,17 +5,12 @@ import styles from './CodeBlock.module.scss'
 type Props = {
   verb?: string
   codeBlock: string
-  setHTML?: boolean
+  highlight?: string
 }
 
-export function CodeBlock({ verb, codeBlock, setHTML = false }: Props) {
-  return setHTML ? (
-    <div
-      className={cx(styles.codeBlock, 'rounded')}
-      dangerouslySetInnerHTML={{ __html: codeBlock }}
-    />
-  ) : (
-    <pre className={cx(styles.methodCodeBlock, 'rounded-1 border')}>
+export function CodeBlock({ verb, codeBlock, highlight }: Props) {
+  return (
+    <pre className={cx(styles.methodCodeBlock, 'rounded-1 border')} data-highlight={highlight}>
       <code>
         {verb && (
           <span className="color-bg-accent-emphasis color-fg-on-emphasis rounded-1 text-uppercase">

components/rest/RestCodeSamples.tsx

@@ -1,4 +1,4 @@
-import { xCodeSample } from './types'
+import type { xCodeSample } from './types'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { CodeBlock } from './CodeBlock'
 
@@ -34,8 +34,8 @@ export function RestCodeSamples({ slug, xCodeSamples }: Props) {
           sampleElements.push(
             <CodeBlock
               key={sample.lang + index}
-              codeBlock={sample.sourceHTML}
-              setHTML={true}
+              codeBlock={sample.source}
+              highlight={sample.lang === 'JavaScript' ? 'javascript' : 'curl'}
             ></CodeBlock>
           )
         }

components/rest/RestResponse.tsx

@@ -15,7 +15,7 @@ export function RestResponse({ responses }: Props) {
             <CodeBlock
               codeBlock={`Status: ${response.httpStatusCode} ${response.httpStatusMessage}`}
             />
-            <CodeBlock codeBlock={response.payload} setHTML={true} />
+            {response.payload ? <CodeBlock codeBlock={response.payload} highlight="json" /> : null}
           </div>
         )
       })}

components/rest/types.ts

@@ -39,7 +39,7 @@ export interface CodeResponse {
 
 export interface xCodeSample {
   lang: string
-  sourceHTML: string
+  source: string
 }
 
 export interface Preview {

lib/get-link-data.js

@@ -17,21 +17,14 @@ export default async (
     return await processLink(rawLinks, context, option)
   }
 
-  const links = []
-
-  for (const link of rawLinks) {
-    const linkObj = await processLink(link, context, option)
-    if (!linkObj) {
-      continue
-    } else {
-      links.push(linkObj)
-    }
-  }
+  const links = (
+    await Promise.all(rawLinks.map((link) => processLink(link, context, option)))
+  ).filter(Boolean)
 
   return links
 }
 
-const processLink = async (link, context, option) => {
+async function processLink(link, context, option) {
   const opts = { textOnly: true, encodeEntities: true }
   // Parse the link in case it includes Liquid conditionals
   const linkPath = await renderContent(link.href || link, context, opts)

lib/get-redirect.js

@@ -9,9 +9,9 @@ const nonEnterpriseDefaultVersionPrefix = `/${nonEnterpriseDefaultVersion}`
 
 // Return the new URI if there is one, otherwise return undefined.
 export default function getRedirect(uri, context) {
-  const { redirects, userLanguage } = context
+  const { redirects, pages } = context
 
-  let language = userLanguage || 'en'
+  let language = 'en'
   let withoutLanguage = uri
   if (languagePrefixRegex.test(uri)) {
     language = uri.match(languagePrefixRegex)[1]
@@ -109,7 +109,12 @@ export default function getRedirect(uri, context) {
   }
 
   if (basicCorrection) {
-    return getRedirect(basicCorrection, context) || basicCorrection
+    return (
+      getRedirect(basicCorrection, {
+        redirects,
+        pages,
+      }) || basicCorrection
+    )
   }
 
   if (withoutLanguage.startsWith('/admin/')) {