Merge branch 'main' into lucascosti/runner-latest-note

Author: ramyaparimi

.github/workflows/openapi-schema-check.yml

@@ -21,7 +21,9 @@ on:
     paths:
       - 'lib/rest/static/**'
       - 'script/rest/**/*.js'
+      - 'script/rest/**/*.json'
       - 'package*.json'
+      - 'lib/redirects/static/**/*.json'
 
 permissions:
   contents: read

.github/workflows/optimize-images.yml

@@ -0,0 +1,54 @@
+name: Optimize images
+
+# **What it does**: Optimize images.
+# **Why we have it**: Reduce bandwidth needs.
+# **Who does it impact**: Docs engineering.
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '45 17 * * 2' # Run Tuesdays at 17:45 UTC / 9:45 PST
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  optimize-images:
+    if: github.repository == 'github/docs-internal'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579
+
+      - name: Install the Optipng package
+        run: sudo apt-get update && sudo apt-get -y install optipng
+
+      - name: Run the Optipng package
+        run: find . -name '*.png' -print0 | xargs -0 optipng -nx
+
+      - name: Make a branch, commit, push, and pull request
+        run: |
+          echo "If there's no changes, exit"
+          if [[ `git status --porcelain` ]]
+          then
+          else
+            exit 0
+          fi
+
+          echo "Make a new branch"
+          git checkout -b "optimize-images-$(date +'%Y%m%d%H%M%S')"
+
+          echo "Make a commit"
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          git add "*.png"
+          git commit --message="Optimize images"
+
+          echo "Push up changes"
+          git push
+
+          echo "Open a pull request"
+          gh pr create --title "Optimize images" --body "Optimize images"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/staging-deploy-pr.yml

@@ -71,7 +71,7 @@ jobs:
             // the API for more info based on the originating workflow run
             const { BUILD_ACTIONS_RUN_ID } = process.env
             const { owner, repo } = context.repo
-            const { data: run } = await github.rest.actions.getWorkflowRun({
+            const { data: run } = await github.actions.getWorkflowRun({
               owner,
               repo,
               run_id: BUILD_ACTIONS_RUN_ID,

assets/images/azure/azure-resources-search.png

@@ -22,6 +22,7 @@ import { ToolPicker } from 'components/article/ToolPicker'
 const ClientSideRedirectExceptions = dynamic(() => import('./ClientsideRedirectExceptions'), {
   ssr: false,
 })
+const ClientSideHighlightJS = dynamic(() => import('./ClientSideHighlightJS'), { ssr: false })
 
 // Mapping of a "normal" article to it's interactive counterpart
 const interactiveAlternatives: Record<string, { href: string }> = {
@@ -50,7 +51,7 @@ const interactiveAlternatives: Record<string, { href: string }> = {
 }
 
 export const ArticlePage = () => {
-  const router = useRouter()
+  const { asPath } = useRouter()
   const {
     title,
     intro,
@@ -65,7 +66,7 @@ export const ArticlePage = () => {
     currentLearningTrack,
   } = useArticleContext()
   const { t } = useTranslation('pages')
-  const currentPath = router.asPath.split('?')[0]
+  const currentPath = asPath.split('?')[0]
 
   const renderTocItem = (item: MiniTocItem) => {
     return (
@@ -111,6 +112,24 @@ export const ArticlePage = () => {
     }
   }, [])
 
+  // If the page contains `[data-highlight]` blocks, these pages need
+  // syntax highlighting. But not every page needs it, so it's conditionally
+  // lazy-loaded on the client.
+  const [lazyLoadHighlightJS, setLazyLoadHighlightJS] = useState(false)
+  useEffect(() => {
+    // It doesn't need to use querySelector because all we care about is if
+    // there is greater than zero of these in the DOM.
+    // Note! This "core selector", which determines whether to bother
+    // or not, needs to match what's used inside ClientSideHighlightJS.tsx
+    if (document.querySelector('[data-highlight]')) {
+      setLazyLoadHighlightJS(true)
+    }
+
+    // Important to depend on the current path because the first page you
+    // load, before any client-side navigation, might not need it, but the
+    // consecutive one does.
+  }, [asPath])
+
   // Scrollable code blocks in our REST API docs and elsewhere aren't accessible
   // via keyboard navigation without setting tabindex="0".  But we don't want to set
   // this attribute on every `<pre>` code block, only the ones where there are scroll
@@ -134,6 +153,10 @@ export const ArticlePage = () => {
       never render anything. It always just return null. */}
       {loadClientsideRedirectExceptions && <ClientSideRedirectExceptions />}
 
+      {/* Doesn't matter *where* this is included because it will
+      never render anything. It always just return null. */}
+      {lazyLoadHighlightJS && <ClientSideHighlightJS />}
+
       <div className="container-xl px-3 px-md-6 my-4">
         <ArticleGridLayout
           topper={<ArticleTitle>{title}</ArticleTitle>}

assets/images/azure/azure-storage-containers.png

@@ -0,0 +1,65 @@
+import { useEffect } from 'react'
+import hljs from 'highlight.js/lib/core'
+import json from 'highlight.js/lib/languages/json'
+
+// 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']
+
+// This is the selector we use for the first document.querySelectorAll()
+// to find the containers for `<code>` tags. Because it's s dataset
+// attribute, its value is expected to be the language.
+// E.g.
+//
+//   <div class="whatever" data-highlight="javascript">
+//     <p>other stuff</p>
+//     <code>Ignored!</code>
+//
+//     <pre>
+//       <code>HIGHLIGHT THIS!</code>
+//     </pre>
+//
+const CODE_ELEMENTS_PARENT_SELECTOR = '[data-highlight]'
+const CODE_SELECTOR = 'pre code'
+
+export default function ClientSideHighlightJS() {
+  useEffect(() => {
+    // Hi Internet Explorer!
+    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#browser_compatibility
+    // If intersectionObserver isn't supported, let's not bother doing
+    // anything. If your browser is that behind, syntax highlight is probably
+    // your least concern.
+    if (!window.IntersectionObserver) return
+
+    const intersectionObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          const element = entry.target as HTMLElement
+          if (!element.classList.contains('hljs')) {
+            hljs.highlightElement(element)
+          }
+        }
+      }
+    })
+    for (const parent of Array.from(
+      document.querySelectorAll<HTMLElement>(CODE_ELEMENTS_PARENT_SELECTOR)
+    )) {
+      const language = parent.dataset.highlight || 'json'
+      if (!SUPPORTED_LANGUAGES.includes(language)) {
+        if (process.env.NODE_ENV === 'development') {
+          console.warn(
+            `For highlighting, only ${SUPPORTED_LANGUAGES} is supported. Not '${language}'.`
+          )
+        }
+        continue
+      }
+      for (const element of Array.from(parent.querySelectorAll<HTMLElement>(CODE_SELECTOR))) {
+        element.classList.add(`language-${language}`)
+        intersectionObserver.observe(element)
+      }
+    }
+  }, [])
+
+  return null
+}

assets/images/azure/azure-storage-permissions.png

@@ -1,8 +1,9 @@
 import { useEffect } from 'react'
 import { useRouter } from 'next/router'
 
-import overrides from '../../lib/redirects/static/rest-api-redirect-exceptions.json'
-const overrideRedirects: Record<string, string> = overrides
+import restApiOverrides from '../../lib/redirects/static/client-side-rest-api-redirects.json'
+import productOverrides from '../../lib/redirects/static/client-side-product-redirects.json'
+const overrideRedirects: Record<string, string> = { ...restApiOverrides, ...productOverrides }
 
 export default function ClientSideRedirectExceptions() {
   const router = useRouter()

assets/images/azure/azure-storage-shared-access-tokens.png

@@ -25,6 +25,7 @@ type VersionItem = {
   versionTitle: string
   currentRelease: string
   latestVersion: string
+  shortName: string
 }
 
 export type ProductTreeNode = {

assets/images/enterprise/3.3/organizations/security-and-analysis-disable-or-enable-all-ghas.png

@@ -25,7 +25,7 @@ export const LearningTrack = ({ track }: Props) => {
     <div data-testid="learning-track" className="my-3 px-4 col-12 col-md-6">
       <div className="Box d-flex flex-column">
         <div className="Box-header color-bg-subtle p-4 d-flex flex-1 flex-items-start flex-wrap">
-          <div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
+          <div className="d-flex flex-auto flex-items-start col-7 col-md-7 col-xl-7">
             <div className="my-xl-0 mr-xl-3">
               <h3 id={slug} className={cx('mb-3 color-text f3 text-semibold', styles.hashAnchor)}>
                 <a className="color-unset" href={`#${slug}`}>
@@ -39,12 +39,11 @@ export const LearningTrack = ({ track }: Props) => {
           </div>
           <a
             className="d-inline-flex btn no-wrap mt-3 mt-md-0 flex-items-center flex-justify-center"
-            role="button"
             href={`${track?.guides && track?.guides[0].href}?learn=${
               track?.trackName
             }&learnProduct=${track?.trackProduct}`}
           >
-            <span>{t('start')}</span>
+            <span>{t('start_path')}</span>
             <ArrowRightIcon size={20} className="ml-2" />
           </a>
         </div>

assets/images/enterprise/3.3/organizations/security-and-analysis-enable-or-disable-feature-checkbox.png

@@ -30,6 +30,7 @@ export function ProductReleases() {
                 <p className="mt-2 mb-4 color-fg-muted">
                   <ListUnorderedIcon />{' '}
                   <Link
+                    className="text-bold"
                     href={`/${router.locale}/${releaseVersion}/admin/release-notes#${latestPatch.version}`}
                   >
                     {t('release_notes_for')} {latestPatch.version}
@@ -39,20 +40,24 @@ export function ProductReleases() {
                 <p className="mt-2 mb-4 color-fg-muted">
                   <ArrowUpIcon /> {t('upgrade_from')}{' '}
                   <Link
+                    className="text-bold"
                     href={`/${router.locale}/${firstPreviousVersion}/admin/enterprise-management/upgrading-github-enterprise-server`}
                   >
                     {release.firstPreviousRelease}
                   </Link>{' '}
                   or{' '}
                   <Link
+                    className="text-bold"
                     href={`/${router.locale}/${secondPreviousVersion}/admin/enterprise-management/upgrading-github-enterprise-server`}
                   >
                     {release.secondPreviousRelease}
                   </Link>
                 </p>
                 <p className="mt-2 mb-4 color-fg-muted">
                   <FileIcon />{' '}
-                  <Link href={`/${router.locale}/${releaseVersion}`}>{t('browse_all_docs')}</Link>
+                  <Link className="text-bold" href={`/${router.locale}/${releaseVersion}`}>
+                    {t('browse_all_docs')}
+                  </Link>
                 </p>
               </div>
             </div>

assets/images/enterprise/3.3/repository/security-and-analysis-disable-or-enable-ghes.png

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import cx from 'classnames'
 import { useRouter } from 'next/router'
 import { MarkGithubIcon, ThreeBarsIcon, XIcon } from '@primer/octicons-react'
+import { useVersion } from 'components/hooks/useVersion'
 
 import { Link } from 'components/Link'
 import { useMainContext } from 'components/context/MainContext'
@@ -16,12 +17,20 @@ import styles from './Header.module.scss'
 
 export const Header = () => {
   const router = useRouter()
-  const { relativePath, error } = useMainContext()
+  const { relativePath, error, allVersions } = useMainContext()
+  const { currentVersion } = useVersion()
   const { t } = useTranslation(['header', 'homepage'])
   const [isMenuOpen, setIsMenuOpen] = useState(
     router.pathname !== '/' && router.query.query && true
   )
   const [scroll, setScroll] = useState(false)
+  const [signupCTAVisible, setSignupCTAVisible] = useState(false)
+
+  useEffect(() => {
+    const allowedVersions: RegExp = /ghec|fpt/
+    const canShowSignupCTA = allowedVersions.test(allVersions[currentVersion].shortName)
+    setSignupCTAVisible(canShowSignupCTA)
+  }, [currentVersion])
 
   useEffect(() => {
     function onScroll() {
@@ -68,19 +77,31 @@ export const Header = () => {
           >
             <Breadcrumbs />
           </div>
+          <div className="d-flex flex-items-center">
+            <div className="mr-2">
+              <VersionPicker />
+            </div>
 
-          <div className="mr-2">
-            <VersionPicker />
-          </div>
-
-          <LanguagePicker />
+            <LanguagePicker />
 
-          {/* <!-- GitHub.com homepage and 404 page has a stylized search; Enterprise homepages do not --> */}
-          {relativePath !== 'index.md' && error !== '404' && (
-            <div className="d-inline-block ml-3">
-              <Search iconSize={16} isHeaderSearch={true} />
-            </div>
-          )}
+            {signupCTAVisible && (
+              <a
+                href="https://github.com/signup?ref_cta=Sign+up&ref_loc=docs+header&ref_page=docs"
+                target="_blank"
+                rel="noopener"
+                className="ml-3 btn color-fg-muted"
+              >
+                {t`sign_up_cta`}
+              </a>
+            )}
+
+            {/* <!-- GitHub.com homepage and 404 page has a stylized search; Enterprise homepages do not --> */}
+            {relativePath !== 'index.md' && error !== '404' && (
+              <div className="d-inline-block ml-3">
+                <Search iconSize={16} isHeaderSearch={true} />
+              </div>
+            )}
+          </div>
         </div>
 
         {/* mobile header */}
@@ -128,10 +149,20 @@ export const Header = () => {
 
               <div className="border-top my-2" />
               <LanguagePicker variant="inline" />
+              {signupCTAVisible && (
+                <a
+                  href="https://github.com/signup?ref_cta=Sign+up&ref_loc=docs+header&ref_page=docs"
+                  target="_blank"
+                  rel="noopener"
+                  className="mt-3 py-2 btn color-fg-muted d-block"
+                >
+                  {t`sign_up_cta`}
+                </a>
+              )}
 
               {/* <!-- GitHub.com homepage and 404 page has a stylized search; Enterprise homepages do not --> */}
               {relativePath !== 'index.md' && error !== '404' && (
-                <div className="my-2 pt-3">
+                <div className="my-2 pt-2">
                   <Search iconSize={16} isMobileSearch={true} />
                 </div>
               )}

assets/images/enterprise/site-admin-settings/ecosystem-toggles.png

@@ -4,6 +4,10 @@
 @import "./stylesheets/table.scss";
 
 .markdownBody {
+  a {
+    text-decoration: underline;
+  }
+
   summary {
     outline: none;
 
@@ -24,6 +28,13 @@
     }
   }
 
+  /* For REST pages which have Parameters and Code Samples h4 headings that are also links. */
+  h4 {
+    a {
+      text-decoration: none;
+    }
+  }
+
   h1,
   h2,
   h3,