AI experiments with DevDot (copy as markdown, llm.txt, etc)

src/components/dev-dot-content/components/copy-content-button/index.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { useState } from 'react'
+import classNames from 'classnames'
+import Button from 'components/button'
+import { IconClipboardCopy16 } from '@hashicorp/flight-icons/svg-react/clipboard-copy-16'
+import { IconCheck16 } from '@hashicorp/flight-icons/svg-react/check-16'
+import s from './copy-content-button.module.css'
+
+interface CopyContentButtonProps {
+	markdownContent: string
+	className?: string
+}
+
+const CopyContentButton = ({
+	markdownContent,
+	className,
+}: CopyContentButtonProps) => {
+	const [isCopied, setIsCopied] = useState(false)
+
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(markdownContent)
+			setIsCopied(true)
+			setTimeout(() => setIsCopied(false), 2000)
+		} catch (err) {
+			console.error('Failed to copy content:', err)
+		}
+	}
+
+	return (
+		<Button
+			onClick={handleCopy}
+			color="secondary"
+			className={classNames(className)}
+			aria-label="Copy page content as markdown"
+			icon={isCopied ? <IconCheck16 /> : <IconClipboardCopy16 />}
+			text={isCopied ? 'Copied!' : 'Markdown'}
+		/>
+	)
+}
+
+export default CopyContentButton

src/components/dev-dot-content/dev-dot-content.module.css

@@ -13,6 +13,7 @@
 */
 .root {
 	composes: hds-typography-body-300 from global;
+	position: relative;
 
 	& :global {
 		/* Note on alert overrides: alert classes are applied at content
@@ -85,3 +86,10 @@
    * ./mdx-components/mdx-lists.
    */
 }
+
+.copyButtonContainer {
+	position: absolute;
+	top: 16px;
+	right: 16px;
+	z-index: 1;
+}

src/components/dev-dot-content/index.tsx

@@ -78,6 +78,7 @@ const DevDotContent = ({
 	className,
 	children,
 	mdxRemoteProps,
+	onRawContent,
 }: DevDotContentProps): ReactElement => {
 	const shouldRenderChildren = Boolean(children)
 
@@ -96,6 +97,11 @@ const DevDotContent = ({
 		)
 	}
 
+	// Call onRawContent with the raw content if it exists
+	if (onRawContent && mdxRemoteProps?.rawContent) {
+		onRawContent(mdxRemoteProps.rawContent)
+	}
+
 	return <div className={classNames(s.root, className)}>{content}</div>
 }
 

src/components/dev-dot-content/types.ts

@@ -8,10 +8,12 @@ import { type MDXRemoteSerializeResult } from 'lib/next-mdx-remote'
 
 type MDXRemoteProps = MDXRemoteSerializeResult & {
 	components?: Record<string, ElementType>
+	rawContent?: string
 }
 
 interface BaseProps {
 	className?: string
+	onRawContent?: (content: string) => void
 }
 
 type WithChildrenOrMdxRemoteProps =

src/components/tutorial-meta/index.tsx

@@ -9,6 +9,7 @@ import Heading from 'components/heading'
 import InlineLink from 'components/inline-link'
 import Text from 'components/text'
 import { TutorialMetaBookmarkButton } from 'components/bookmark-button'
+import CopyContentButton from 'components/dev-dot-content/components/copy-content-button'
 import { Badges, getIsBeta, VariantList } from './components'
 import InteractiveLabButton from './components/interactive-lab-button'
 import s from './tutorial-meta.module.css'
@@ -20,12 +21,14 @@ interface TutorialMetaProps {
 		hasVideo: boolean
 	}
 	tutorialId: TutorialData['id']
+	rawContent?: string
 }
 
 export default function TutorialMeta({
 	heading,
 	meta,
 	tutorialId,
+	rawContent,
 }: TutorialMetaProps) {
 	const { isInteractive, hasVideo, edition, productsUsed, readTime } = meta
 
@@ -66,6 +69,7 @@ export default function TutorialMeta({
 					<TutorialMetaBookmarkButton
 						tutorial={{ id: tutorialId, name: heading.text }}
 					/>
+					{rawContent && <CopyContentButton markdownContent={rawContent} />}
 				</span>
 			</div>
 			{showCreateAccountCta ? (

src/lib/next-mdx-remote/types.ts

@@ -44,4 +44,8 @@ export type MDXRemoteSerializeResult<TScope = Record<string, unknown>> = {
 	 * you could provide scope as `{ name: "Some name" }`.
 	 */
 	scope?: TScope
+	/**
+	 * The original markdown content before compilation
+	 */
+	rawContent?: string
 }

src/views/docs-view/components/docs-page-heading/docs-page-heading.module.css

@@ -4,26 +4,29 @@
  */
 
 .root {
-	align-items: flex-start;
 	display: flex;
-
-	/* DOM order is version selector, then title. On small viewports, with
-	   wrapping, we have multiple rows so row-reverse has no effect.
-		 On large viewports, where we have space to put everything in one row,
-		 we show the version selector after the landingHero (if used). */
-	flex-direction: row-reverse;
-	flex-wrap: wrap;
+	align-items: center;
 	gap: 16px;
+	justify-content: space-between;
 }
 
-.pageHeadingWrapper {
-	flex-grow: 99; /* eats up all the space next to versionSwitcherWrapper */
-	min-width: min(100%, 28rem); /* 28rem, or fit container if alone in row */
-	width: 0; /* start from zero width, no arbitary breakpoint for flex-wrap */
+.controls {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	order: 2;
 }
 
 .versionSwitcherWrapper {
-	flex-grow: 1; /* grows when alone, lets pageHeadingWrapper grow more */
-	min-width: max-content; /* keep the selector on one line */
-	width: 0; /* start from zero width, no arbitary breakpoint for flex-wrap */
+	flex-shrink: 0;
+}
+
+.copyButtonWrapper {
+	flex-shrink: 0;
+	order: -1; /* Places copy button before version selector */
+}
+
+.pageHeadingWrapper {
+	flex: 1;
+	min-width: 0; /* Allows text to wrap if needed */
 }

src/views/docs-view/components/docs-page-heading/index.tsx

@@ -10,6 +10,7 @@ import s from './docs-page-heading.module.css'
 function DocsPageHeading({
 	className,
 	versionSelectorSlot,
+	copyButtonSlot,
 	headingSlot,
 }: {
 	/**
@@ -28,12 +29,21 @@ function DocsPageHeading({
 	 * puts it on a single line, it grows to fill the container.
 	 */
 	versionSelectorSlot?: ReactNode
+	/**
+	 * Optional copy button element to render alongside the version selector.
+	 */
+	copyButtonSlot?: ReactNode
 }) {
 	return (
 		<div className={classNames(s.root, className)}>
-			{versionSelectorSlot ? (
-				<div className={s.versionSwitcherWrapper}>{versionSelectorSlot}</div>
-			) : null}
+			<div className={s.controls}>
+				{versionSelectorSlot ? (
+					<div className={s.versionSwitcherWrapper}>{versionSelectorSlot}</div>
+				) : null}
+				{copyButtonSlot ? (
+					<div className={s.copyButtonWrapper}>{copyButtonSlot}</div>
+				) : null}
+			</div>
 			<div className={s.pageHeadingWrapper}>{headingSlot}</div>
 		</div>
 	)

src/views/docs-view/index.tsx

@@ -16,6 +16,8 @@ import s from './docs-view.module.css'
 import LandingHero from 'components/docs-landing-hero'
 import DocsPlainPageHeading from './components/docs-plain-page-heading'
 import DocsVersionSwitcher from 'components/docs-version-switcher'
+import { useState } from 'react'
+import CopyContentButton from 'components/dev-dot-content/components/copy-content-button'
 
 /**
  * Layouts
@@ -50,6 +52,7 @@ const DocsView = ({
 	const currentProduct = useCurrentProduct()
 	const { compiledSource, scope } = mdxSource
 	const docsMdxComponents = getDocsMdxComponents(currentProduct.slug)
+	const [rawContent, setRawContent] = useState<string>('')
 
 	/**
 	 * Check if we have a `pageHeading` to render. The `DocsPageHeading` element
@@ -104,6 +107,11 @@ const DocsView = ({
 							/>
 						) : null
 					}
+					copyButtonSlot={
+						rawContent ? (
+							<CopyContentButton markdownContent={rawContent} />
+						) : null
+					}
 					headingSlot={headingSlot}
 				/>
 			) : null}
@@ -116,7 +124,9 @@ const DocsView = ({
 						...docsMdxComponents,
 						wrapper: (props) => <div className={s.mdxContent} {...props} />,
 					},
+					rawContent: mdxSource.rawContent,
 				}}
+				onRawContent={setRawContent}
 			/>
 		</DocsViewLayout>
 	)

src/views/docs-view/render-page-mdx.ts

@@ -24,7 +24,7 @@ async function renderPageMdx(
 		scope,
 	}: Options = {}
 ): Promise<{
-	mdxSource: MDXRemoteSerializeResult
+	mdxSource: MDXRemoteSerializeResult & { rawContent: string }
 	frontMatter: Record<string, unknown>
 }> {
 	return await trace
@@ -41,7 +41,7 @@ async function renderPageMdx(
 					},
 					scope,
 				})
-				return { mdxSource, frontMatter }
+				return { mdxSource: { ...mdxSource, rawContent }, frontMatter }
 			} finally {
 				span.end()
 			}

src/views/tutorial-view/index.tsx

@@ -124,6 +124,7 @@ function TutorialView({
 	const currentPath = useCurrentPath({ excludeHash: true, excludeSearch: true })
 	const [collectionViewSidebarSections, setCollectionViewSidebarSections] =
 		useState<CollectionCategorySidebarSection[]>(null)
+	const [rawContent, setRawContent] = useState<string>('')
 
 	// variables
 	const {
@@ -271,39 +272,49 @@ function TutorialView({
 								setCollectionViewSidebarSections
 							}
 						>
-							<TutorialMeta
-								heading={pageHeading}
-								meta={{
-									readTime,
-									edition,
-									productsUsed,
-									isInteractive,
-									hasVideo,
-								}}
-								tutorialId={id}
-							/>
-							<span data-ref-id={progressRefsId} ref={progressRefs.startRef} />
-							{hasVideo && video.id && !video.videoInline && (
-								<VideoEmbed
-									url={getVideoUrl({
-										videoId: video.id,
-										videoHost: video.videoHost,
-									})}
+							<div className={s.content}>
+								<TutorialMeta
+									heading={pageHeading}
+									meta={{
+										readTime,
+										edition,
+										productsUsed,
+										isInteractive,
+										hasVideo,
+									}}
+									tutorialId={id}
+									rawContent={rawContent}
 								/>
-							)}
-							<DevDotContent
-								mdxRemoteProps={{ ...content, components: MDX_COMPONENTS }}
-							/>
-							<span data-ref-id={progressRefsId} ref={progressRefs.endRef} />
-							<FeedbackPanel />
-							<NextPrevious {...nextPreviousData} />
-							<FeaturedInCollections
-								className={s.featuredInCollections}
-								collections={featuredInWithoutCurrent}
-							/>
-							{layoutProps.isCertificationPrep && (
-								<SignupFormArea className={s.newsletterSignupArea} />
-							)}
+								<span
+									data-ref-id={progressRefsId}
+									ref={progressRefs.startRef}
+								/>
+								{hasVideo && video.id && !video.videoInline && (
+									<VideoEmbed
+										url={getVideoUrl({
+											videoId: video.id,
+											videoHost: video.videoHost,
+										})}
+									/>
+								)}
+								<DevDotContent
+									mdxRemoteProps={{
+										...content,
+										components: MDX_COMPONENTS,
+									}}
+									onRawContent={setRawContent}
+								/>
+								<span data-ref-id={progressRefsId} ref={progressRefs.endRef} />
+								<FeedbackPanel />
+								<NextPrevious {...nextPreviousData} />
+								<FeaturedInCollections
+									className={s.featuredInCollections}
+									collections={featuredInWithoutCurrent}
+								/>
+								{layoutProps.isCertificationPrep && (
+									<SignupFormArea className={s.newsletterSignupArea} />
+								)}
+							</div>
 						</LayoutContentWrapper>
 					</SidebarSidecarLayout>
 				</VariantProvider>

src/views/tutorial-view/server.ts

@@ -81,9 +81,11 @@ export async function getTutorialPageProps(
 		fullTutorialData.variant
 	)
 
-	const { content: serializedContent, headings } = await serializeContent(
-		fullTutorialData
-	)
+	const {
+		content: serializedContent,
+		headings,
+		rawContent,
+	} = await serializeContent(fullTutorialData)
 	const collectionContext = getCollectionContext(
 		collection.data,
 		fullTutorialData.collectionCtx
@@ -139,7 +141,7 @@ export async function getTutorialPageProps(
 			},
 			tutorial: {
 				...fullTutorialData,
-				content: serializedContent,
+				content: { ...serializedContent, rawContent },
 				collectionCtx: collectionContext,
 				nextCollectionInSidebar:
 					collectionContext.current.nextCollection ?? nextCollection,