diff --git a/data/ui.yml b/data/ui.yml
index ff8b52542c51..32fd466830b1 100644
--- a/data/ui.yml
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index 9658f2447f76..d94e80e56851 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
"@primer/live-region-element": "^0.7.2",
"@primer/octicons": "^19.19.0",
"@primer/octicons-react": "^19.14.0",
+ "@primer/primitives": "^11.3.1",
"@primer/react": "^38.0.0",
"accept-language-parser": "^1.5.0",
"ajv": "^8.17.1",
@@ -252,7 +253,6 @@
"resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.0.tgz",
"integrity": "sha512-1LFfa/qnMQvEOAdzlQymH0ulepxbxnCYAKJZfMci/5XJyIHWgEYnDmgnKakbTh7CH2tFQ5O60oYDvns4i9RAIg==",
"dev": true,
- "peer": true,
"dependencies": {
"@octokit/auth-token": "^4.0.0",
"@octokit/graphql": "^7.1.0",
@@ -413,6 +413,7 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+ "peer": true,
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.24"
@@ -598,6 +599,7 @@
"version": "7.23.3",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.3.tgz",
"integrity": "sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==",
+ "peer": true,
"engines": {
"node": ">=6.9.0"
}
@@ -635,12 +637,14 @@
"node_modules/@babel/core/node_modules/convert-source-map": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
- "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+ "peer": true
},
"node_modules/@babel/core/node_modules/semver": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+ "peer": true,
"bin": {
"semver": "bin/semver.js"
}
@@ -674,6 +678,7 @@
"version": "7.22.15",
"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz",
"integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==",
+ "peer": true,
"dependencies": {
"@babel/compat-data": "^7.22.9",
"@babel/helper-validator-option": "^7.22.15",
@@ -689,6 +694,7 @@
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+ "peer": true,
"dependencies": {
"yallist": "^3.0.2"
}
@@ -697,6 +703,7 @@
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+ "peer": true,
"bin": {
"semver": "bin/semver.js"
}
@@ -704,7 +711,8 @@
"node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
- "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+ "peer": true
},
"node_modules/@babel/helper-environment-visitor": {
"version": "7.22.20",
@@ -752,6 +760,7 @@
"version": "7.23.3",
"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
"integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
+ "peer": true,
"dependencies": {
"@babel/helper-environment-visitor": "^7.22.20",
"@babel/helper-module-imports": "^7.22.15",
@@ -778,6 +787,7 @@
"version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
"integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+ "peer": true,
"dependencies": {
"@babel/types": "^7.22.5"
},
@@ -816,6 +826,7 @@
"version": "7.22.15",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz",
"integrity": "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==",
+ "peer": true,
"engines": {
"node": ">=6.9.0"
}
@@ -824,6 +835,7 @@
"version": "7.26.10",
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.10.tgz",
"integrity": "sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==",
+ "peer": true,
"dependencies": {
"@babel/template": "^7.26.9",
"@babel/types": "^7.26.10"
@@ -2712,7 +2724,6 @@
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@octokit/core/-/core-7.0.2.tgz",
"integrity": "sha512-ODsoD39Lq6vR6aBgvjTnA3nZGliknKboc9Gtxr7E4WDNqY24MxANKcuDQSF0jzapvGb3KWOEDrKfve4HoWGK+g==",
- "peer": true,
"dependencies": {
"@octokit/auth-token": "^6.0.0",
"@octokit/graphql": "^9.0.1",
@@ -3352,7 +3363,6 @@
"integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==",
"devOptional": true,
"license": "Apache-2.0",
- "peer": true,
"dependencies": {
"playwright": "1.56.1"
},
@@ -3382,6 +3392,12 @@
"node": ">=16.0.0"
}
},
+ "node_modules/@primer/css/node_modules/@primer/primitives": {
+ "version": "7.17.1",
+ "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.17.1.tgz",
+ "integrity": "sha512-SiPzEb+up1nDpV2NGwNiY8m6sGnF3OUqRb0has5s6T40vq6Li/g3cYVgl+oolEa4DUoNygEPs09jwJt24f/3zg==",
+ "license": "MIT"
+ },
"node_modules/@primer/live-region-element": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/@primer/live-region-element/-/live-region-element-0.7.2.tgz",
@@ -3413,9 +3429,9 @@
}
},
"node_modules/@primer/primitives": {
- "version": "7.17.1",
- "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.17.1.tgz",
- "integrity": "sha512-SiPzEb+up1nDpV2NGwNiY8m6sGnF3OUqRb0has5s6T40vq6Li/g3cYVgl+oolEa4DUoNygEPs09jwJt24f/3zg==",
+ "version": "11.3.1",
+ "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-11.3.1.tgz",
+ "integrity": "sha512-f5FXeUHQ0iyxt1UF6MqeajQ9jRV/7uOGLECU5KuFWhMioCZOho09jS6alZA9tiwksHr2LYXfo7AdFczpEz3Npw==",
"license": "MIT"
},
"node_modules/@primer/react": {
@@ -3480,12 +3496,6 @@
"integrity": "sha512-iFrvar5SOMtKFOSjYvs4z9UlLqDdJbMx0mgISLcPedv+g0ac5sgeETLGtipHCVIae6HJPclNEH5aCyD1RZaEHw==",
"license": "BSD-3-Clause"
},
- "node_modules/@primer/react/node_modules/@primer/primitives": {
- "version": "11.1.0",
- "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-11.1.0.tgz",
- "integrity": "sha512-edsofzVG67EobXGRrqFc/kfjzKh8wbq1wEmRc1vmRNqDJNMxBRWZ9bT2AzKvcv+Hbf7olDAPkrSqVHbO4hhr/A==",
- "license": "MIT"
- },
"node_modules/@primer/view-components": {
"version": "0.22.0",
"resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.22.0.tgz",
@@ -4164,7 +4174,6 @@
"integrity": "sha512-wGA0NX93b19/dZC1J18tKWVIYWyyF2ZjT9vin/NRu0qzzvfVzWjs04iq2rQ3H65vCTQYlRqs3YHfY7zjdV+9Kw==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@types/body-parser": "*",
"@types/express-serve-static-core": "^5.0.0",
@@ -4326,7 +4335,6 @@
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
"integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
"license": "MIT",
- "peer": true,
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
@@ -4338,7 +4346,6 @@
"integrity": "sha512-nf22//wEbKXusP6E9pfOCDwFdHAX4u172eaJI4YkDRQEZiorm6KfYnSC2SWLDMVWUOWPERmJnN0ujeAfTBLvrw==",
"devOptional": true,
"license": "MIT",
- "peer": true,
"peerDependencies": {
"@types/react": "^18.0.0"
}
@@ -4509,7 +4516,6 @@
"integrity": "sha512-pUXGCuHnnKw6PyYq93lLRiZm3vjuslIy7tus1lIQTYVK9bL8XBgJnCWm8a0KcTtHC84Yya1Q6rtll+duSMj0dg==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "8.39.1",
"@typescript-eslint/types": "8.39.1",
@@ -5155,7 +5161,6 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true,
"license": "MIT",
- "peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -5185,7 +5190,6 @@
"version": "8.17.1",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
- "peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@@ -5713,7 +5717,6 @@
}
],
"license": "MIT",
- "peer": true,
"dependencies": {
"caniuse-lite": "^1.0.30001733",
"electron-to-chromium": "^1.5.199",
@@ -5964,7 +5967,6 @@
"resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
"integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
"license": "MIT",
- "peer": true,
"dependencies": {
"cheerio-select": "^2.1.0",
"dom-serializer": "^2.0.0",
@@ -7204,7 +7206,6 @@
"integrity": "sha512-TS9bTNIryDzStCpJN93aC5VRSW3uTx9sClUn4B87pwiCaJh220otoI0X8mJKr+VcPtniMdN8GKjlwgWGUv5ZKA==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.12.1",
@@ -7266,7 +7267,6 @@
"integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
"dev": true,
"license": "MIT",
- "peer": true,
"bin": {
"eslint-config-prettier": "bin/cli.js"
},
@@ -7538,7 +7538,6 @@
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@rtsao/scc": "^1.1.0",
"array-includes": "^3.1.9",
@@ -8711,6 +8710,7 @@
"node_modules/gensync": {
"version": "1.0.0-beta.2",
"license": "MIT",
+ "peer": true,
"engines": {
"node": ">=6.9.0"
}
@@ -8917,7 +8917,6 @@
"resolved": "https://registry.npmjs.org/graphql/-/graphql-16.9.0.tgz",
"integrity": "sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==",
"dev": true,
- "peer": true,
"engines": {
"node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
}
@@ -10290,7 +10289,6 @@
"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
"dev": true,
- "peer": true,
"bin": {
"jiti": "lib/jiti-cli.mjs"
}
@@ -10409,6 +10407,7 @@
"node_modules/json5": {
"version": "2.2.3",
"license": "MIT",
+ "peer": true,
"bin": {
"json5": "lib/cli.js"
},
@@ -13367,7 +13366,6 @@
"integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
"devOptional": true,
"license": "Apache-2.0",
- "peer": true,
"bin": {
"playwright-core": "cli.js"
},
@@ -13431,7 +13429,6 @@
"integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
"dev": true,
"license": "MIT",
- "peer": true,
"bin": {
"prettier": "bin/prettier.cjs"
},
@@ -13601,7 +13598,6 @@
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
- "peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
},
@@ -13622,7 +13618,6 @@
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
- "peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.2"
@@ -14290,7 +14285,6 @@
"integrity": "sha512-d0NoFH4v6SjEK7BoX810Jsrhj7IQSYHAHLi/iSpgqKc7LaIDshFRlSg5LOymf9FqQhxEHs2W5ZQXlvy0KD45Uw==",
"devOptional": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"chokidar": "^4.0.0",
"immutable": "^5.0.2",
@@ -15217,7 +15211,6 @@
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
"integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
"license": "MIT",
- "peer": true,
"dependencies": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/traverse": "^7.4.5",
@@ -15464,7 +15457,6 @@
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"dev": true,
"license": "MIT",
- "peer": true,
"engines": {
"node": ">=12"
},
@@ -15790,7 +15782,6 @@
"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
"dev": true,
"license": "Apache-2.0",
- "peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -16138,7 +16129,6 @@
"dev": true,
"hasInstallScript": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"napi-postinstall": "^0.2.2"
},
@@ -16341,7 +16331,6 @@
"integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"esbuild": "^0.25.0",
"fdir": "^6.5.0",
@@ -16450,7 +16439,6 @@
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"dev": true,
"license": "MIT",
- "peer": true,
"engines": {
"node": ">=12"
},
diff --git a/package.json b/package.json
index 0217006887a4..06e04e4e4aa3 100644
--- a/package.json
+++ b/package.json
@@ -166,6 +166,7 @@
"@primer/live-region-element": "^0.7.2",
"@primer/octicons": "^19.19.0",
"@primer/octicons-react": "^19.14.0",
+ "@primer/primitives": "^11.3.1",
"@primer/react": "^38.0.0",
"accept-language-parser": "^1.5.0",
"ajv": "^8.17.1",
diff --git a/src/fixtures/fixtures/data/ui.yml b/src/fixtures/fixtures/data/ui.yml
index ff8b52542c51..32fd466830b1 100644
--- a/src/fixtures/fixtures/data/ui.yml
+++ b/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
diff --git a/src/frame/components/article/ArticlePage.tsx b/src/frame/components/article/ArticlePage.tsx
index 629655fc9f5e..03b81abcfd01 100644
--- a/src/frame/components/article/ArticlePage.tsx
+++ b/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 = (
<>
+
{isLearningPath && }
{isJourneyTrack && }
{miniTocItems.length > 1 && }
diff --git a/src/frame/components/article/ViewMarkdownButton.module.scss b/src/frame/components/article/ViewMarkdownButton.module.scss
new file mode 100644
index 000000000000..9dfb8f872cee
--- /dev/null
+++ b/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;
+}
diff --git a/src/frame/components/article/ViewMarkdownButton.tsx b/src/frame/components/article/ViewMarkdownButton.tsx
new file mode 100644
index 000000000000..1ef21b47f3a2
--- /dev/null
+++ b/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 (
+
+
+
+ )
+}
diff --git a/src/frame/components/context/ArticleContext.tsx b/src/frame/components/context/ArticleContext.tsx
index 222fcebd0bd2..22cc1cf223ad 100644
--- a/src/frame/components/context/ArticleContext.tsx
+++ b/src/frame/components/context/ArticleContext.tsx
@@ -42,6 +42,7 @@ export type ArticleContextT = {
allTools: Record
supportPortalVaIframeProps: SupportPortalVaIframeProps
currentLayout?: string
+ currentPath: string
}
export const ArticleContext = createContext(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 || '',
}
}
diff --git a/src/frame/stylesheets/index.scss b/src/frame/stylesheets/index.scss
index 37accdd7d1f8..178fcc2d5834 100644
--- a/src/frame/stylesheets/index.scss
+++ b/src/frame/stylesheets/index.scss
@@ -15,3 +15,6 @@
@import "src/content-render/stylesheets/index.scss";
@import "src/links/stylesheets/hover-card.scss";
+
+// For primer Spinners and other animated components
+@import "@primer/primitives/dist/css/base/motion/motion.css";
diff --git a/src/workflows/ready-for-docs-review.ts b/src/workflows/ready-for-docs-review.ts
index b3d39b60ace1..7eb15436dc33 100644
--- a/src/workflows/ready-for-docs-review.ts
+++ b/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 {