Make inline layout available from frontmatter (#37720)

components/article/ArticleInlineLayout.module.scss

@@ -0,0 +1,30 @@
+.containerBox {
+  padding-top: 24px;
+  max-width: 720px;
+  margin: 0 auto;
+  align-content: center;
+  column-gap: 80px;
+  row-gap: 0;
+  grid-template-areas:
+    "topper"
+    "intro"
+    "sidebar"
+    "content";
+  grid-template-rows: auto 1fr;
+  grid-template-columns: minmax(300px, 720px);
+  display: grid;
+
+  @media (min-width: 720px) {
+    display: grid;
+    justify-items: flex-start;
+    justify-content: center;
+  }
+}
+
+.sidebarBox {
+  width: 100%;
+}
+
+.articleContainer {
+  max-width: 720px;
+}

components/article/ArticleInlineLayout.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import cx from 'classnames'
+import { Box } from '@primer/react'
+import { SupportPortalVaIframe, SupportPortalVaIframeProps } from './SupportPortalVaIframe'
+
+import styles from './ArticleInlineLayout.module.scss'
+
+type Props = {
+  intro?: React.ReactNode
+  topper?: React.ReactNode
+  toc?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+  supportPortalVaIframeProps?: SupportPortalVaIframeProps
+}
+export const ArticleInlineLayout = ({
+  intro,
+  topper,
+  toc,
+  children,
+  className,
+  supportPortalVaIframeProps,
+}: Props) => {
+  return (
+    <Box className={cx(styles.containerBox, className)}>
+      {topper && <Box gridArea="topper">{topper}</Box>}
+      {toc && (
+        <Box
+          gridArea="sidebar"
+          alignSelf="flex-start"
+          className={cx(styles.sidebarBox, 'border-bottom border-lg-0 pb-4 mb-5 pb-xl-0 mb-xl-0')}
+        >
+          {toc}
+        </Box>
+      )}
+
+      {intro && (
+        <Box id="article-intro" gridArea="intro">
+          {intro}
+        </Box>
+      )}
+
+      <Box
+        gridArea="content"
+        data-search="article-body"
+        className={cx(styles.articleContainer, className)}
+      >
+        {supportPortalVaIframeProps &&
+          supportPortalVaIframeProps.supportPortalUrl &&
+          supportPortalVaIframeProps.vaFlowUrlParameter && (
+            <SupportPortalVaIframe supportPortalVaIframeProps={supportPortalVaIframeProps} />
+          )}
+        {children}
+      </Box>
+    </Box>
+  )
+}

components/article/ArticlePage.tsx

@@ -12,6 +12,7 @@ import { MarkdownContent } from 'components/ui/MarkdownContent'
 import { Lead } from 'components/ui/Lead'
 import { PermissionsStatement } from 'components/ui/PermissionsStatement'
 import { ArticleGridLayout } from './ArticleGridLayout'
+import { ArticleInlineLayout } from './ArticleInlineLayout'
 import { PlatformPicker } from 'components/article/PlatformPicker'
 import { ToolPicker } from 'components/article/ToolPicker'
 import { MiniTocs } from 'components/ui/MiniTocs'
@@ -42,10 +43,62 @@ export const ArticlePage = () => {
     miniTocItems,
     currentLearningTrack,
     supportPortalVaIframeProps,
+    currentLayout,
   } = useArticleContext()
   const isLearningPath = !!currentLearningTrack?.trackName
   const { t } = useTranslation(['pages'])
 
+  const introProp = (
+    <>
+      {intro && (
+        // Note the `_page-intro` is used by the popover preview cards
+        // when it needs this text for in-page links.
+        <Lead data-testid="lead" data-search="lead" className="_page-intro">
+          {intro}
+        </Lead>
+      )}
+
+      {permissions && <PermissionsStatement permissions={permissions} />}
+
+      {includesPlatformSpecificContent && <PlatformPicker />}
+      {includesToolSpecificContent && <ToolPicker />}
+
+      {product && (
+        <Callout variant="success" className="mb-4" dangerouslySetInnerHTML={{ __html: product }} />
+      )}
+    </>
+  )
+
+  const toc = (
+    <>
+      {isLearningPath && <LearningTrackCard track={currentLearningTrack} />}
+      {miniTocItems.length > 1 && <MiniTocs miniTocItems={miniTocItems} />}
+    </>
+  )
+
+  const articleContents = (
+    <div id="article-contents">
+      {productVideoUrl && (
+        <div className="my-2">
+          <Link id="product-video" href={productVideoUrl} target="_blank">
+            <LinkExternalIcon aria-label="(external site)" className="octicon-link mr-2" />
+            {t('video_from_transcript')}
+          </Link>
+        </div>
+      )}
+
+      <MarkdownContent>{renderedPage}</MarkdownContent>
+      {effectiveDate && (
+        <div className="mt-4" id="effectiveDate">
+          Effective as of:{' '}
+          <time dateTime={new Date(effectiveDate).toISOString()}>
+            {new Date(effectiveDate).toDateString()}
+          </time>
+        </div>
+      )}
+    </div>
+  )
+
   return (
     <DefaultLayout>
       <LinkPreviewPopover />
@@ -55,61 +108,25 @@ export const ArticlePage = () => {
         <div className={cx('d-none d-xl-block mt-3 mr-auto width-full')}>
           <Breadcrumbs />
         </div>
-        <ArticleGridLayout
-          supportPortalVaIframeProps={supportPortalVaIframeProps}
-          topper={<ArticleTitle>{title}</ArticleTitle>}
-          intro={
-            <>
-              {intro && (
-                // Note the `_page-intro` is used by the popover preview cards
-                // when it needs this text for in-page links.
-                <Lead data-testid="lead" data-search="lead" className="_page-intro">
-                  {intro}
-                </Lead>
-              )}
-
-              {permissions && <PermissionsStatement permissions={permissions} />}
-
-              {includesPlatformSpecificContent && <PlatformPicker />}
-              {includesToolSpecificContent && <ToolPicker />}
-
-              {product && (
-                <Callout
-                  variant="success"
-                  className="mb-4"
-                  dangerouslySetInnerHTML={{ __html: product }}
-                />
-              )}
-            </>
-          }
-          toc={
-            <>
-              {isLearningPath && <LearningTrackCard track={currentLearningTrack} />}
-              {miniTocItems.length > 1 && <MiniTocs miniTocItems={miniTocItems} />}
-            </>
-          }
-        >
-          <div id="article-contents">
-            {productVideoUrl && (
-              <div className="my-2">
-                <Link id="product-video" href={productVideoUrl} target="_blank">
-                  <LinkExternalIcon aria-label="(external site)" className="octicon-link mr-2" />
-                  {t('video_from_transcript')}
-                </Link>
-              </div>
-            )}
-
-            <MarkdownContent>{renderedPage}</MarkdownContent>
-            {effectiveDate && (
-              <div className="mt-4" id="effectiveDate">
-                Effective as of:{' '}
-                <time dateTime={new Date(effectiveDate).toISOString()}>
-                  {new Date(effectiveDate).toDateString()}
-                </time>
-              </div>
-            )}
-          </div>
-        </ArticleGridLayout>
+        {currentLayout === 'inline' ? (
+          <ArticleInlineLayout
+            supportPortalVaIframeProps={supportPortalVaIframeProps}
+            topper={<ArticleTitle>{title}</ArticleTitle>}
+            intro={introProp}
+            toc={toc}
+          >
+            {articleContents}
+          </ArticleInlineLayout>
+        ) : (
+          <ArticleGridLayout
+            supportPortalVaIframeProps={supportPortalVaIframeProps}
+            topper={<ArticleTitle>{title}</ArticleTitle>}
+            intro={introProp}
+            toc={toc}
+          >
+            {articleContents}
+          </ArticleGridLayout>
+        )}
 
         {isLearningPath ? (
           <div className="mt-4">

components/context/ArticleContext.tsx

@@ -38,6 +38,7 @@ export type ArticleContextT = {
   detectedTools: Array<string>
   allTools: Record<string, string>
   supportPortalVaIframeProps: SupportPortalVaIframeProps
+  currentLayout?: string
 }
 
 export const ArticleContext = createContext<ArticleContextT | null>(null)
@@ -99,5 +100,6 @@ export const getArticleContextFromRequest = (req: any): ArticleContextT => {
     detectedTools: page.detectedTools || [],
     allTools: page.allToolsParsed || [], // this is set at the page level, see lib/page.js
     supportPortalVaIframeProps,
+    currentLayout: req.context.currentLayoutName,
   }
 }