Scope markdown body (github#21082)

* update article content to markdown ui component * decouple lunr indexing from class name * remove summary outline none rule, apply utility class instead * improve typing * scope more styles down to markdown-body/extended-markdown * move all markdown-body style overrides to MarkdownContent component * fix class targeting within css module * clean up MarkdownContent header style * rename data-lunr to data-search * fix: inline code color issue * fix: update article markdown to work with MarkdownContent
aroc2021 · Aug 30, 2021 · d76c16d · d76c16d
1 parent 0e31d4a
commit d76c16d
Show file tree

Hide file tree

Showing 35 changed files with 472 additions and 449 deletions.
diff --git a/components/TruncateLines.tsx b/components/TruncateLines.tsx
@@ -1,15 +1,14 @@
-import React, { ReactNode, ReactHTML } from 'react'
+import React, { ReactNode } from 'react'
 import cx from 'classnames'
 
 type Props = {
-  as?: keyof ReactHTML
+  as?: keyof JSX.IntrinsicElements
   maxLines: number
   children: ReactNode
   className?: string
 }
 export const TruncateLines = (props: Props) => {
-  const { as, maxLines, className, children } = props
-  const Component = as || 'div'
+  const { maxLines, className, children, as: Component = 'div' } = props
   return (
     <Component className={cx('root', className)}>
       {children}

diff --git a/components/article/ArticleContent.tsx b/components/article/ArticleContent.tsx
diff --git a/components/article/ArticleGridLayout.tsx b/components/article/ArticleGridLayout.tsx
@@ -22,12 +22,9 @@ export const ArticleGridLayout = ({ head, toc, children, className }: Props) =>
       )}
 
       {/* content */}
-      {/*
-        NOTE: The article-grid-body class is used by the LUNR search scripts. 
-        If this class changes, please also change
-        updating script/search/parse-page-sections-into-records.js.
-        */}
-      <div className={cx(styles.content, 'article-grid-body')}>{children}</div>
+      <div data-search="article-body" className={styles.content}>
+        {children}
+      </div>
     </div>
   )
 }
diff --git a/components/article/ArticlePage.tsx b/components/article/ArticlePage.tsx
@@ -11,7 +11,7 @@ import { ArticleTitle } from 'components/article/ArticleTitle'
 import { useArticleContext } from 'components/context/ArticleContext'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { LearningTrackNav } from './LearningTrackNav'
-import { ArticleContent } from './ArticleContent'
+import { MarkdownContent } from 'components/ui/MarkdownContent'
 import { ArticleGridLayout } from './ArticleGridLayout'
 
 // Mapping of a "normal" article to it's interactive counterpart
@@ -63,12 +63,7 @@ export const ArticlePage = () => {
                 </Callout>
               )}
 
-              {intro && (
-                <div
-                  className="lead-mktg markdown-body mb-3"
-                  dangerouslySetInnerHTML={{ __html: intro }}
-                />
-              )}
+              {intro && <MarkdownContent className="lead-mktg mb-3">{intro}</MarkdownContent>}
 
               {permissions && (
                 <div
@@ -153,7 +148,9 @@ export const ArticlePage = () => {
             </>
           }
         >
-          <ArticleContent>{renderedPage}</ArticleContent>
+          <div id="article-contents">
+            <MarkdownContent>{renderedPage}</MarkdownContent>
+          </div>
         </ArticleGridLayout>
 
         {currentLearningTrack?.trackName ? (

diff --git a/components/article/ArticleVersionPicker.tsx b/components/article/ArticleVersionPicker.tsx
@@ -25,7 +25,7 @@ export const ArticleVersionPicker = () => {
       `}
       data-testid="article-version-picker"
     >
-      <summary className="f4 h5-mktg btn-outline-mktg btn-mktg p-2">
+      <summary className="f4 h5-mktg btn-outline-mktg btn-mktg p-2 outline-none">
         <span className="d-md-none d-xl-inline-block">{t('article_version')}</span>{' '}
         {allVersions[currentVersion].versionTitle}
         <Dropdown.Caret />

diff --git a/components/landing/HomepageVersionPicker.tsx b/components/landing/HomepageVersionPicker.tsx
@@ -25,7 +25,7 @@ export const HomepageVersionPicker = ({ variant }: Props) => {
   if (variant === 'inline') {
     return (
       <Details {...getDetailsProps()} className="details-reset">
-        <summary aria-label="Toggle language list">
+        <summary className="outline-none" aria-label="Toggle language list">
           <div className="d-flex flex-items-center flex-justify-between py-2">
             <span>{label}</span>
             <ChevronDownIcon size={24} className="arrow ml-md-1" />

diff --git a/components/landing/TocLanding.tsx b/components/landing/TocLanding.tsx
@@ -3,7 +3,7 @@ import { TableOfContents } from 'components/landing/TableOfContents'
 import { useTocLandingContext } from 'components/context/TocLandingContext'
 import { ArticleTopper } from 'components/article/ArticleTopper'
 import { ArticleTitle } from 'components/article/ArticleTitle'
-import { ArticleContent } from 'components/article/ArticleContent'
+import { MarkdownContent } from 'components/ui/MarkdownContent'
 import { ArticleList } from 'components/landing/ArticleList'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { ArticleGridLayout } from 'components/article/ArticleGridLayout'
@@ -55,7 +55,11 @@ export const TocLanding = () => {
               </div>
             )}
 
-            {renderedPage && <ArticleContent>{renderedPage}</ArticleContent>}
+            {renderedPage && (
+              <div id="article-contents">
+                <MarkdownContent>{renderedPage}</MarkdownContent>
+              </div>
+            )}
 
             <TableOfContents items={tocItems} variant={variant} />
           </div>

diff --git a/components/lib/display-platform-specific-content.ts b/components/lib/display-platform-specific-content.ts
@@ -3,7 +3,7 @@ import parseUserAgent from './user-agent'
 import { sendEvent, EventType } from './events'
 
 const supportedPlatforms = ['mac', 'windows', 'linux']
-const detectedPlatforms = new Set()
+const detectedPlatforms = new Set<string>()
 
 // Emphasize content for the visitor's OS (inferred from user agent string)
 
@@ -66,9 +66,7 @@ function setActiveSwitcherLinks(platform: string) {
 function showPlatformSpecificContent(platform: string) {
   // find all platform-specific *block* elements and hide or show as appropriate
   // example: {{ #mac }} block content {{/mac}}
-  const markdowns = Array.from(
-    document.querySelectorAll('.extended-markdown')
-  ) as Array<HTMLElement>
+  const markdowns = Array.from(document.querySelectorAll<HTMLElement>('.extended-markdown'))
   markdowns
     .filter((el) => supportedPlatforms.some((platform) => el.classList.contains(platform)))
     .forEach((el) => {
@@ -78,8 +76,8 @@ function showPlatformSpecificContent(platform: string) {
   // find all platform-specific *inline* elements and hide or show as appropriate
   // example: <span class="platform-mac">inline content</span>
   const platforms = Array.from(
-    document.querySelectorAll('.platform-mac, .platform-windows, .platform-linux')
-  ) as Array<HTMLElement>
+    document.querySelectorAll<HTMLElement>('.platform-mac, .platform-windows, .platform-linux')
+  )
   platforms.forEach((el) => {
     el.style.display = el.classList.contains('platform-' + platform) ? '' : 'none'
   })
@@ -108,11 +106,11 @@ function getDetectedPlatforms(): Array<string> {
   // find all platform-specific *inline* elements and hide or show as appropriate
   // example: <span class="platform-mac">inline content</span>
   const platformEls = Array.from(
-    document.querySelectorAll('.platform-mac, .platform-windows, .platform-linux')
-  ) as Array<HTMLElement>
+    document.querySelectorAll<HTMLElement>('.platform-mac, .platform-windows, .platform-linux')
+  )
   platformEls.forEach((el) => detectPlatforms(el))
 
-  return Array.from(detectedPlatforms) as Array<string>
+  return Array.from(detectedPlatforms)
 }
 
 function detectPlatforms(el: HTMLElement) {

diff --git a/components/page-header/LanguagePicker.tsx b/components/page-header/LanguagePicker.tsx
@@ -20,7 +20,7 @@ export const LanguagePicker = ({ variant }: Props) => {
   if (variant === 'inline') {
     return (
       <Details {...getDetailsProps()} className="details-reset">
-        <summary aria-label="Toggle language list">
+        <summary className="outline-none" aria-label="Toggle language list">
           <div className="d-flex flex-items-center flex-justify-between py-2">
             <span>{selectedLang.nativeName || selectedLang.name}</span>
             <ChevronDownIcon size={24} className="arrow ml-md-1" />

diff --git a/components/page-header/ProductPicker.tsx b/components/page-header/ProductPicker.tsx
@@ -13,7 +13,11 @@ export const ProductPicker = () => {
 
   return (
     <Details {...getDetailsProps()} className="details-reset">
-      <summary className="color-text-link" role="button" aria-label="Toggle products list">
+      <summary
+        className="color-text-link outline-none"
+        role="button"
+        aria-label="Toggle products list"
+      >
         <div id="current-product" className="d-flex flex-items-center flex-justify-between py-2">
           {/* <!-- Product switcher - GitHub.com, Enterprise Server, etc -->
     <!-- 404 and 500 error layouts are not real pages so we need to hardcode the name for those --> */}

diff --git a/components/playground/ArticleMarkdown.module.scss b/components/playground/ArticleMarkdown.module.scss
@@ -0,0 +1,10 @@
+.articleMarkdown {
+  pre {
+    padding: 0;
+    background-color: unset;
+  }
+
+  table {
+    table-layout: fixed !important;
+  }
+}
diff --git a/components/playground/ArticleMarkdown.tsx b/components/playground/ArticleMarkdown.tsx
@@ -1,10 +1,15 @@
 import React from 'react'
+import cx from 'classnames'
 import { useTheme } from '@primer/components'
 import ReactMarkdown from 'react-markdown'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { vs, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 import gfm from 'remark-gfm'
 
+import { MarkdownContent } from 'components/ui/MarkdownContent'
+
+import styles from './ArticleMarkdown.module.scss'
+
 type Props = {
   className?: string
   children: string
@@ -13,30 +18,32 @@ export const ArticleMarkdown = ({ className, children }: Props) => {
   const theme = useTheme()
 
   return (
-    <ReactMarkdown
-      className={className}
-      remarkPlugins={[gfm as any]}
-      components={{
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        code: ({ node, inline, className, children, ...props }) => {
-          const match = /language-(\w+)/.exec(className || '')
-          return !inline && match ? (
-            <SyntaxHighlighter
-              style={theme.colorScheme === 'dark' ? vscDarkPlus : vs}
-              language={match[1]}
-              PreTag="div"
-              children={String(children).replace(/\n$/, '')}
-              {...(props as any)}
-            />
-          ) : (
-            <code className={className} {...props}>
-              {children}
-            </code>
-          )
-        },
-      }}
-    >
-      {children}
-    </ReactMarkdown>
+    <MarkdownContent>
+      <ReactMarkdown
+        className={cx(styles.articleMarkdown, className)}
+        remarkPlugins={[gfm as any]}
+        components={{
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          code: ({ node, inline, className, children, ...props }) => {
+            const match = /language-(\w+)/.exec(className || '')
+            return !inline && match ? (
+              <SyntaxHighlighter
+                style={theme.colorScheme === 'dark' ? vscDarkPlus : vs}
+                language={match[1]}
+                PreTag="div"
+                children={String(children).replace(/\n$/, '')}
+                {...(props as any)}
+              />
+            ) : (
+              <code className={className} {...props}>
+                {children}
+              </code>
+            )
+          },
+        }}
+      >
+        {children}
+      </ReactMarkdown>
+    </MarkdownContent>
   )
 }
diff --git a/components/release-notes/GHAEReleaseNotes.tsx b/components/release-notes/GHAEReleaseNotes.tsx
@@ -3,6 +3,7 @@ import cx from 'classnames'
 import { ChevronDownIcon } from '@primer/octicons-react'
 import { GHAEReleaseNotePatch } from './GHAEReleaseNotePatch'
 import { GHAEReleaseNotesContextT } from './types'
+import { MarkdownContent } from 'components/ui/MarkdownContent'
 
 type GitHubAEProps = {
   context: GHAEReleaseNotesContextT
@@ -20,7 +21,7 @@ export function GHAEReleaseNotes({ context }: GitHubAEProps) {
           <div></div>
         </div>
 
-        <div className="markdown-body">
+        <MarkdownContent data-search="article-content">
           {releaseNotes.map((patch) => {
             return (
               <GHAEReleaseNotePatch
@@ -30,25 +31,27 @@ export function GHAEReleaseNotes({ context }: GitHubAEProps) {
               />
             )
           })}
-        </div>
+        </MarkdownContent>
       </article>
 
       <aside
-        className="markdown-body position-sticky top-0 d-none d-md-block border-left no-print color-bg-primary flex-shrink-0"
+        className="position-sticky top-0 d-none d-md-block border-left no-print color-bg-primary flex-shrink-0"
         style={{ width: 260, height: '100vh' }}
       >
         <nav className="height-full overflow-auto">
-          <ul className="list-style-none pl-0 text-bold">
-            {releases.map((release) => {
-              return (
-                <CollapsibleReleaseSection
-                  key={release.version}
-                  release={release}
-                  focusedPatch={focusedPatch}
-                />
-              )
-            })}
-          </ul>
+          <MarkdownContent data-search="article-content">
+            <ul className="list-style-none pl-0 text-bold">
+              {releases.map((release) => {
+                return (
+                  <CollapsibleReleaseSection
+                    key={release.version}
+                    release={release}
+                    focusedPatch={focusedPatch}
+                  />
+                )
+              })}
+            </ul>
+          </MarkdownContent>
         </nav>
       </aside>
     </div>
@@ -78,7 +81,7 @@ const CollapsibleReleaseSection = ({
         open={defaultIsOpen}
         onToggle={onToggle}
       >
-        <summary className="px-3 py-4 my-0 d-flex flex-items-center flex-justify-between">
+        <summary className="px-3 py-4 my-0 d-flex flex-items-center flex-justify-between outline-none">
           {release.version}
           <div className="d-flex">
             <span className="color-text-tertiary text-mono text-small text-normal mr-1">