next/13/next-image-to-legacy-image

app/cloud-docs/[[...page]]/page.tsx

@@ -0,0 +1,65 @@
+import { productName } from 'data/metadata';
+import DocsPage from 'components/docs-page';
+import otherDocsData from 'data/other-docs-nav-data.json';
+// Imports below are only used server-side
+import { getStaticGenerationFunctions } from '@hashicorp/react-docs-page/server';
+import path from 'path';
+import { rehypePlugins, remarkPlugins } from 'lib/remark-rehype-plugins';
+import { remarkRewriteAssets } from 'lib/remark-rewrite-assets';
+//  Configure the docs path
+const BASE_ROUTE = 'cloud-docs';
+const NAV_DATA = path.join(
+	process.env.NAV_DATA_DIRNAME,
+	BASE_ROUTE + '-nav-data.json',
+);
+const CONTENT_DIR = path.join(process.env.CONTENT_DIRNAME, BASE_ROUTE);
+const PRODUCT = { name: productName, slug: 'terraform' } as const;
+const SOURCE_REPO = 'terraform-docs-common';
+const DEFAULT_BRANCH = 'main';
+export default function CloudDocsLayout(props) {
+	// add the "other docs" section to the bottom of the nav data
+	const modifiedProps = Object.assign({}, props);
+	modifiedProps.navData = modifiedProps.navData.concat(otherDocsData);
+	return (
+		<DocsPage
+			baseRoute={BASE_ROUTE}
+			product={PRODUCT}
+			staticProps={modifiedProps}
+			showVersionSelect={false}
+		/>
+	);
+}
+const { getStaticPaths, getStaticProps } = getStaticGenerationFunctions(
+	process.env.IS_CONTENT_PREVIEW &&
+		process.env.PREVIEW_FROM_REPO === SOURCE_REPO
+		? {
+				strategy: 'fs',
+				localContentDir: CONTENT_DIR,
+				navDataFile: NAV_DATA,
+				product: SOURCE_REPO,
+				githubFileUrl(filepath) {
+					// This path rewriting is meant for local preview from `terraform-docs-common`.
+					filepath = filepath.replace('preview/', '');
+					return `https://github.com/hashicorp/${SOURCE_REPO}/blob/${DEFAULT_BRANCH}/website/${filepath}`;
+				},
+				remarkPlugins: (params) => [
+					...remarkPlugins,
+					remarkRewriteAssets({
+						product: SOURCE_REPO,
+						version: process.env.CURRENT_GIT_BRANCH,
+						getAssetPathParts: (nodeUrl) => ['website', nodeUrl],
+					}),
+				],
+				rehypePlugins,
+		  }
+		: {
+				fallback: 'blocking',
+				revalidate: 3600,
+				strategy: 'remote',
+				basePath: BASE_ROUTE,
+				product: SOURCE_REPO,
+				remarkPlugins,
+				rehypePlugins,
+		  },
+);
+export { getStaticPaths, getStaticProps };

app/cloud-docs/agents/[[...page]]/page.tsx

@@ -0,0 +1,74 @@
+import { productName } from 'data/metadata';
+import DocsPage from 'components/docs-page';
+// Imports below are only used server-side
+import { getStaticGenerationFunctions } from '@hashicorp/react-docs-page/server';
+import path from 'path';
+import { rehypePlugins, remarkPlugins } from 'lib/remark-rehype-plugins';
+import { remarkRewriteAssets } from 'lib/remark-rewrite-assets';
+//  Configure the docs path
+const BASE_ROUTE = 'cloud-docs/agents';
+const NAV_DATA_PREFIX = 'cloud-docs-agents';
+const NAV_DATA = path.join(
+	process.env.NAV_DATA_DIRNAME,
+	NAV_DATA_PREFIX + '-nav-data.json',
+);
+// const CONTENT_DIR = 'content/cloud-docs/agents'
+const CONTENT_DIR = path.join(process.env.CONTENT_DIRNAME, BASE_ROUTE);
+const PRODUCT = { name: productName, slug: 'terraform' } as const;
+const SOURCE_REPO = 'terraform-docs-agents';
+const DEFAULT_BRANCH = 'main';
+const PROJECT_NAME = 'Terraform Cloud Agents';
+export default function CloudDocsAgentsLayout(props) {
+	// append additional nav data
+	const modifiedProps = Object.assign({}, props);
+	modifiedProps.navData = modifiedProps.navData.concat([
+		{ divider: true },
+		{ title: 'Terraform Cloud', href: '/cloud-docs' },
+		{ title: 'Terraform Enterprise', href: '/enterprise' },
+	]);
+	return (
+		<DocsPage
+			baseRoute={BASE_ROUTE}
+			product={PRODUCT}
+			staticProps={modifiedProps}
+			projectName={PROJECT_NAME}
+			showVersionSelect
+		/>
+	);
+}
+const { getStaticPaths, getStaticProps } = getStaticGenerationFunctions(
+	process.env.IS_CONTENT_PREVIEW &&
+		process.env.PREVIEW_FROM_REPO === SOURCE_REPO
+		? {
+				strategy: 'fs',
+				localContentDir: CONTENT_DIR,
+				navDataFile: NAV_DATA,
+				product: SOURCE_REPO,
+				githubFileUrl(filepath) {
+					// This path rewriting is meant for local preview from `terraform`.
+					filepath = filepath.replace('preview/', '');
+					return `https://github.com/hashicorp/${SOURCE_REPO}/blob/${DEFAULT_BRANCH}/website/${filepath}`;
+				},
+				remarkPlugins: (params) => [
+					...remarkPlugins,
+					remarkRewriteAssets({
+						product: SOURCE_REPO,
+						version: process.env.CURRENT_GIT_BRANCH,
+						getAssetPathParts: (nodeUrl) => ['website', nodeUrl],
+					}),
+				],
+				rehypePlugins,
+		  }
+		: {
+				fallback: 'blocking',
+				revalidate: 3600,
+				strategy: 'remote',
+				basePath: BASE_ROUTE,
+				navDataPrefix: NAV_DATA_PREFIX,
+				product: SOURCE_REPO,
+				remarkPlugins,
+				rehypePlugins,
+				enabledVersionedDocs: true,
+		  },
+);
+export { getStaticPaths, getStaticProps };

components/io-usecase-section/index.tsx

@@ -1,81 +1,83 @@
-import * as React from 'react'
-import { Products } from '@hashicorp/platform-product-meta'
-import classNames from 'classnames'
-import Image from 'next/image'
-import Button from '@hashicorp/react-button'
-import s from './style.module.css'
-
+import * as React from 'react';
+import { Products } from '@hashicorp/platform-product-meta';
+import classNames from 'classnames';
+import Image from 'next/legacy/image';
+import Button from '@hashicorp/react-button';
+import s from './style.module.css';
 interface IoUsecaseSectionProps {
-  brand?: Products | 'neutral'
-  bottomIsFlush?: boolean
-  eyebrow: string
-  heading: string
-  description: string
-  media?: {
-    src: string
-    width: string
-    height: string
-    alt: string
-  }
-  cta?: {
-    text: string
-    link: string
-  }
+	brand?: Products | 'neutral';
+	bottomIsFlush?: boolean;
+	eyebrow: string;
+	heading: string;
+	description: string;
+	media?: {
+		src: string;
+		width: string;
+		height: string;
+		alt: string;
+	};
+	cta?: {
+		text: string;
+		link: string;
+	};
 }
-
 export default function IoUsecaseSection({
-  brand = 'neutral',
-  bottomIsFlush = false,
-  eyebrow,
-  heading,
-  description,
-  media,
-  cta,
+	brand = 'neutral',
+	bottomIsFlush = false,
+	eyebrow,
+	heading,
+	description,
+	media,
+	cta,
 }: IoUsecaseSectionProps): React.ReactElement {
-  return (
-    <section
-      className={classNames(s.section, s[brand], bottomIsFlush && s.isFlush)}
-    >
-      <div className={s.container}>
-        <p className={s.eyebrow}>{eyebrow}</p>
-        <div className={s.columns}>
-          <div className={s.column}>
-            <h2 className={s.heading}>{heading}</h2>
-            {media?.src ? (
-              <div
-                className={s.description}
-                dangerouslySetInnerHTML={{
-                  __html: description,
-                }}
-              />
-            ) : null}
-            {cta?.link && cta?.text ? (
-              <div className={s.cta}>
-                <Button
-                  title={cta.text}
-                  url={cta.link}
-                  theme={{
-                    brand: brand,
-                  }}
-                />
-              </div>
-            ) : null}
-          </div>
-          <div className={s.column}>
-            {media?.src ? (
-              // eslint-disable-next-line jsx-a11y/alt-text
-              <Image {...media} />
-            ) : (
-              <div
-                className={s.description}
-                dangerouslySetInnerHTML={{
-                  __html: description,
-                }}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  )
+	return (
+		<section
+			className={classNames(
+				s.section,
+				s[brand],
+				bottomIsFlush && s.isFlush,
+			)}
+		>
+			<div className={s.container}>
+				<p className={s.eyebrow}>{eyebrow}</p>
+				<div className={s.columns}>
+					<div className={s.column}>
+						<h2 className={s.heading}>{heading}</h2>
+						{media?.src ? (
+							<div
+								className={s.description}
+								dangerouslySetInnerHTML={{
+									__html: description,
+								}}
+							/>
+						) : null}
+						{cta?.link && cta?.text ? (
+							<div className={s.cta}>
+								<Button
+									title={cta.text}
+									url={cta.link}
+									theme={{
+										brand: brand,
+									}}
+								/>
+							</div>
+						) : null}
+					</div>
+					<div className={s.column}>
+						{media?.src ? (
+							// eslint-disable-next-line jsx-a11y/alt-text
+							<Image {...media} />
+						) : (
+							<div
+								className={s.description}
+								dangerouslySetInnerHTML={{
+									__html: description,
+								}}
+							/>
+						)}
+					</div>
+				</div>
+			</div>
+		</section>
+	);
 }