Add a "view page as markdown" button (#58578)

Author: sarahs

data/ui.yml

@@ -98,6 +98,7 @@ pages:
   about_versions: About versions
   permissions_callout_title: Who can use this feature?
   video_from_transcript: See video for this transcript
+  view_page_as_markdown: View page as Markdown
 support:
   still_need_help: Still need help?
   contact_support: Contact support

src/fixtures/fixtures/data/ui.yml

@@ -98,6 +98,7 @@ pages:
   about_versions: About versions
   permissions_callout_title: Who can use this feature?
   video_from_transcript: See video for this transcript
+  view_page_as_markdown: View page as Markdown
 support:
   still_need_help: Still need help?
   contact_support: Contact support

src/frame/components/article/ArticlePage.tsx

@@ -23,6 +23,7 @@ import { useTranslation } from '@/languages/components/useTranslation'
 import { LinkPreviewPopover } from '@/links/components/LinkPreviewPopover'
 import { UtmPreserver } from '@/frame/components/UtmPreserver'
 import { JourneyTrackCard, JourneyTrackNav } from '@/journeys/components'
+import { ViewMarkdownButton } from './ViewMarkdownButton'
 
 const ClientSideRefresh = dynamic(() => import('@/frame/components/ClientSideRefresh'), {
   ssr: false,
@@ -46,6 +47,7 @@ export const ArticlePage = () => {
     currentJourneyTrack,
     supportPortalVaIframeProps,
     currentLayout,
+    currentPath,
   } = useArticleContext()
   const isLearningPath = !!currentLearningTrack?.trackName
   const isJourneyTrack = !!currentJourneyTrack?.trackId
@@ -74,6 +76,7 @@ export const ArticlePage = () => {
 
   const toc = (
     <>
+      <ViewMarkdownButton currentPath={currentPath} />
       {isLearningPath && <LearningTrackCard track={currentLearningTrack} />}
       {isJourneyTrack && <JourneyTrackCard journey={currentJourneyTrack} />}
       {miniTocItems.length > 1 && <MiniTocs miniTocItems={miniTocItems} />}

src/frame/components/article/ViewMarkdownButton.module.scss

@@ -0,0 +1,8 @@
+.button {
+  font-size: 12px;
+  padding: 4px 8px;
+  border-color: #d1d9e0;
+  background-color: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+}

src/frame/components/article/ViewMarkdownButton.tsx

@@ -0,0 +1,45 @@
+import { FileIcon } from '@primer/octicons-react'
+import { Button } from '@primer/react'
+import { sendEvent } from '@/events/components/events'
+import { EventType } from '@/events/types'
+import { useTranslation } from '@/languages/components/useTranslation'
+import cx from 'classnames'
+import styles from './ViewMarkdownButton.module.scss'
+
+interface ViewMarkdownButtonProps {
+  currentPath: string
+}
+
+export const ViewMarkdownButton = ({ currentPath }: ViewMarkdownButtonProps) => {
+  const { t } = useTranslation('pages')
+
+  const encodedPath = encodeURIComponent(currentPath).replace(/%2F/g, '/').replace(/%40/g, '@')
+  const markdownUrl = `/api/article/body?pathname=${encodedPath}`
+
+  const handleClick = () => {
+    sendEvent({
+      type: EventType.link,
+      link_url: markdownUrl,
+      link_samesite: false,
+      link_container: 'view-markdown-button',
+    })
+    window.open(markdownUrl, '_blank')
+  }
+
+  return (
+    <div className="mb-3 ml-3">
+      <Button
+        onClick={handleClick}
+        variant="default"
+        className={cx(
+          'd-inline-flex flex-items-center border text-decoration-none color-fg-default',
+          styles.button,
+        )}
+        aria-label={t('view_page_as_markdown')}
+      >
+        <FileIcon size={12} className="mr-1" aria-hidden="true" />
+        {t('view_page_as_markdown')}
+      </Button>
+    </div>
+  )
+}

src/frame/components/context/ArticleContext.tsx

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

src/workflows/ready-for-docs-review.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { graphql } from '@octokit/graphql'
 
 import {