Rename TemplatePreview to TemplateInline

Author: josh-padnick

…ocs/authoring/blocks/TemplatePreview.mdx …docs/authoring/blocks/TemplateInline.mdxdocs/src/content/docs/authoring/blocks/TemplatePreview.mdx renamed to docs/src/content/docs/authoring/blocks/TemplateInline.mdx docs/src/content/docs/authoring/blocks/TemplatePreview.mdx renamed to docs/src/content/docs/authoring/blocks/TemplateInline.mdx

@@ -1,10 +1,10 @@
 ---
-title: <TemplatePreview>
+title: <TemplateInline>
 ---
 
 import { Aside } from '@astrojs/starlight/components';
 
-The `<TemplatePreview>` block renders a preview of the Boilerplate templates inline, displaying the rendered output directly in your runbook. It uses the Gruntwork Boilerplate template engine to generate content, and optionally saves files to your generated files workspace.
+The `<TemplateInline>` block renders a preview of the Boilerplate templates inline, displaying the rendered output directly in your runbook. It uses the Gruntwork Boilerplate template engine to generate content, and optionally saves files to your generated files workspace.
 
 ### Quick example
 
@@ -24,7 +24,7 @@ variables:
 ```
 </Inputs>
 
-<TemplatePreview inputsId="s3-config" outputPath="s3.tf">
+<TemplateInline inputsId="s3-config" outputPath="s3.tf">
 ```hcl
 resource "aws_s3_bucket" "main" {
   bucket = "{{ .BucketName }}-{{ .Environment }}"
@@ -35,16 +35,16 @@ resource "aws_s3_bucket" "main" {
   }
 }
 ```
-</TemplatePreview>
+</TemplateInline>
 `````
 
-After the user fills out the form and clicks Submit, `<TemplatePreview>` will render the Terraform template with the provided values and display the result inline.
+After the user fills out the form and clicks Submit, `<TemplateInline>` will render the Terraform template with the provided values and display the result inline.
 
 TODO: Screenshots
 
 ## When to use
 
-Use `<TemplatePreview>` when you want to show users what generated content looks like, or when you want to show generated content without actually creating files in the generated files workspace.
+Use `<TemplateInline>` when you want to show users what generated content looks like, or when you want to show generated content without actually creating files in the generated files workspace.
 
 Here are some common use cases:
 
@@ -58,16 +58,16 @@ Here are some common use cases:
 **required**  
 **type:** `ReactNode`
 
-The template content to render. Write the template as a fenced code block inside the `<TemplatePreview>` tags. The code block should include a language hint (e.g., `hcl`, `yaml`, `dockerfile`) for syntax highlighting.
+The template content to render. Write the template as a fenced code block inside the `<TemplateInline>` tags. The code block should include a language hint (e.g., `hcl`, `yaml`, `dockerfile`) for syntax highlighting.
 
 #### Example
 
 `````mdx
-<TemplatePreview inputsId="some-config">
+<TemplateInline inputsId="some-config">
 ```txt
 Hello, {{ .Name }}. This is inline template content!
 ```
-</TemplatePreview>
+</TemplateInline>
 `````
 
 ### `inputsId`
@@ -109,7 +109,7 @@ variables:
 ```
 </Inputs>
 
-<TemplatePreview inputsId="docker-config" outputPath="Dockerfile">
+<TemplateInline inputsId="docker-config" outputPath="Dockerfile">
 ```dockerfile
 FROM node:{{ .NodeVersion }}-alpine
 
@@ -121,12 +121,12 @@ COPY . .
 EXPOSE 3000
 CMD ["node", "server.js"]
 ```
-</TemplatePreview>
+</TemplateInline>
 `````
 
 ### Multiple files
 
-You can have multiple `<TemplatePreview>` blocks referencing the same `<Inputs>`:
+You can have multiple `<TemplateInline>` blocks referencing the same `<Inputs>`:
 
 `````mdx
 <Inputs id="app-config">
@@ -140,20 +140,20 @@ variables:
 ```
 </Inputs>
 
-<TemplatePreview inputsId="app-config" outputPath="config.yaml">
+<TemplateInline inputsId="app-config" outputPath="config.yaml">
 ```yaml
 app:
   name: {{ .AppName }}
   environment: {{ .Environment }}
 ```
-</TemplatePreview>
+</TemplateInline>
 
-<TemplatePreview inputsId="app-config" outputPath=".env">
+<TemplateInline inputsId="app-config" outputPath=".env">
 ```bash
 APP_NAME={{ .AppName }}
 ENVIRONMENT={{ .Environment }}
 ```
-</TemplatePreview>
+</TemplateInline>
 `````
 
 ### Reference multiple Inputs
@@ -182,7 +182,7 @@ variables:
 ```
 </Inputs>
 
-<TemplatePreview inputsId={["global-config", "service-config"]} outputPath="deploy.tf">
+<TemplateInline inputsId={["global-config", "service-config"]} outputPath="deploy.tf">
 ```hcl
 resource "aws_ecs_service" "main" {
   name = "{{ .ServiceName }}-{{ .Environment }}"
@@ -192,7 +192,7 @@ resource "aws_ecs_service" "main" {
   }
 }
 ```
-</TemplatePreview>
+</TemplateInline>
 `````
 
 ### With Boilerplate logic
@@ -212,7 +212,7 @@ variables:
 ```
 </Inputs>
 
-<TemplatePreview inputsId="terraform-config" outputPath="main.tf">
+<TemplateInline inputsId="terraform-config" outputPath="main.tf">
 ```hcl
 resource "aws_instance" "app" {
   ami           = "ami-12345678"
@@ -223,7 +223,7 @@ resource "aws_instance" "app" {
   {{- end }}
 }
 ```
-</TemplatePreview>
+</TemplateInline>
 `````
 
 ## Features
@@ -240,21 +240,21 @@ Rendered content is displayed with syntax highlighting based on the language hin
 
 If template rendering fails (e.g., invalid Boilerplate syntax), an error message is displayed instead of the rendered content.
 
-## TemplatePreview vs BoilerplateInputs
+## TemplateInline vs Template
 
-| Feature | `<TemplatePreview>` | `<BoilerplateInputs>` with path |
+| Feature | `<TemplateInline>` | `<Template>` with path |
 |---------|--------------------|---------------------------------|
 | Generates files | Optional (`generateFile={true}`) | Always saves to workspace |
 | Template location | Inline only | Can reference directories |
 | Use case | Show what will be generated, optionally save | Generate files from external templates |
 
 <Aside type="note">
-Use `<TemplatePreview>` when you want to show users what files will look like inline. Add `generateFile={true}` to also save the file to the workspace.
+Use `<TemplateInline>` when you want to show users what files will look like inline. Add `generateFile={true}` to also save the file to the workspace.
 </Aside>
 
 ## Complete example
 
-Here's a complete example showing `<Inputs>` with multiple `<TemplatePreview>` blocks:
+Here's a complete example showing `<Inputs>` with multiple `<TemplateInline>` blocks:
 
 `````mdx
 <Inputs id="service-config">
@@ -273,7 +273,7 @@ variables:
 ```
 </Inputs>
 
-<TemplatePreview inputsId="service-config" outputPath="docker-compose.yaml">
+<TemplateInline inputsId="service-config" outputPath="docker-compose.yaml">
 ```yaml
 version: "3.8"
 services:
@@ -284,14 +284,15 @@ services:
     environment:
       - NODE_ENV={{ .Environment }}
 ```
-</TemplatePreview>
+</TemplateInline>
 
-<TemplatePreview inputsId="service-config" outputPath=".env">
+<TemplateInline inputsId="service-config" outputPath=".env">
 ```bash
 SERVICE_NAME={{ .ServiceName }}
 PORT={{ .Port }}
 ENVIRONMENT={{ .Environment }}
 ```
-</TemplatePreview>
+</TemplateInline>
 `````
 
+

docs/src/content/docs/authoring/blocks/index.md

@@ -14,5 +14,5 @@ Blocks are special React components that you can use in your MDX runbooks to add
 - [`<Check>`](/authoring/blocks/check)
 - [`<Command>`](/authoring/blocks/command)
 - [`<Inputs>`](/authoring/blocks/inputs)
-- [`<TemplatePreview>`](/authoring/blocks/templatepreview)
+- [`<TemplateInline>`](/authoring/blocks/templateinline)
 

testdata/demo-runbook-2/runbook.mdx

@@ -124,7 +124,7 @@ We just created the `.mise.toml` file. We're going to use this shortly in your n
 
 Here's a preview of the GitHub Actions workflow we'll add to your repo:
 
-<TemplatePreview inputsId="infrastructure-live-root-repo-inputs" outputPath="ci.yml" generateFile={true}>
+<TemplateInline inputsId="infrastructure-live-root-repo-inputs" outputPath="ci.yml" generateFile={true}>
 ```yaml
 name: CI
 
@@ -148,7 +148,7 @@ jobs:
       - name: Validate
         run: tofu validate
 ```
-</TemplatePreview>
+</TemplateInline>
 
 ### Create Terragrunt foundations
 

testdata/demo-runbook-3/runbook.mdx

@@ -30,22 +30,22 @@ Now let's create a standalone inputs
 
 Now let's render an inline template based on both test1 and test2
 
-<TemplatePreview inputsId="test2">
+<TemplateInline inputsId="test2">
 ```yaml
 orgName: {{ .GithubOrgName }} 
 ```
-</TemplatePreview>
+</TemplateInline>
 
 ## Test 4
 
 Now let's render an inline template that pulls from both test1 and test2
 
-<TemplatePreview inputsId={["test1", "test2"]}>
+<TemplateInline inputsId={["test1", "test2"]}>
 ```yaml
 orgName: {{ .GithubOrgName }} 
 orgNamePrefix: {{ .OrgNamePrefix }}
 ```
-</TemplatePreview>
+</TemplateInline>
 
 ## Test 5
 

testdata/runbook-with-inline-boilerplate/runbook.mdx

@@ -40,7 +40,7 @@ variables:
 
 Use the form below to configure your deployment:
 
-<TemplatePreview inputsId="test1" outputPath="sample.hcl">
+<TemplateInline inputsId="test1" outputPath="sample.hcl">
 ```hcl
 # This template uses manually initialized variables
 resource "aws_s3_bucket" "example" {
@@ -52,15 +52,15 @@ resource "aws_s3_bucket" "example" {
   }
 }
 ```
-</TemplatePreview>
+</TemplateInline>
 
 ## Boielrplate config 2
 
 <BoilerplateInputs id="test2" templatePath="." />
 
 ### Code snippet 2
 
-<TemplatePreview inputsId="test2" outputPath="/a/b.hcl">
+<TemplateInline inputsId="test2" outputPath="/a/b.hcl">
 ```hcl
 terraform {
   required_version = ">= 1.0"
@@ -87,7 +87,7 @@ locals {
   }
 }
 ```
-</TemplatePreview>
+</TemplateInline>
 
 ## Check
 
@@ -112,7 +112,7 @@ Check: Hit the endpoint (get from the module output!) and make sure it returns H
 
 ## Manual variable initialization example
 
-You can also manually initialize variables in a TemplatePreview:
+You can also manually initialize variables in a TemplateInline:
 
 
 

web/src/components/MDXContainer.tsx

@@ -6,7 +6,7 @@ import type { AppError } from '@/types/error'
 // Support MDX components
 import { Inputs } from '@/components/mdx/Inputs'
 import { Template } from '@/components/mdx/Template'
-import { TemplatePreview } from '@/components/mdx/TemplatePreview'
+import { TemplateInline } from '@/components/mdx/TemplateInline'
 import { ComponentIdRegistryProvider } from '@/contexts/ComponentIdRegistry'
 import { BlockVariablesProvider } from '@/contexts/BlockVariablesContext'
 import { Check } from '@/components/mdx/Check'
@@ -213,7 +213,7 @@ const compileMDX = async (content: string): Promise<React.ComponentType> => {
       // Form and template components
       Inputs,
       Template,
-      TemplatePreview,
+      TemplateInline,
       // Script execution components
       Check,
       Command,

web/src/components/mdx/Inputs/Inputs.tsx

@@ -19,7 +19,7 @@ import { useComponentIdRegistry } from '@/contexts/ComponentIdRegistry'
  * 
  * The collected variables are published to context so they can be used by:
  * - <Template> components (for file generation)
- * - <TemplatePreview> components (for inline preview)
+ * - <TemplateInline> components (for inline preview)
  * - <Command> and <Check> components (for script variable substitution)
  * 
  * @param props.id - Unique identifier for this component (required)

…/mdx/TemplatePreview/TemplatePreview.tsx …ts/mdx/TemplateInline/TemplateInline.tsxweb/src/components/mdx/TemplatePreview/TemplatePreview.tsx renamed to web/src/components/mdx/TemplateInline/TemplateInline.tsx web/src/components/mdx/TemplatePreview/TemplatePreview.tsx renamed to web/src/components/mdx/TemplateInline/TemplateInline.tsx

@@ -11,7 +11,7 @@ import { useFileTree } from '@/hooks/useFileTree'
 import { mergeFileTrees } from '@/lib/mergeFileTrees'
 import { CodeFile } from '@/components/artifacts/code/CodeFile'
 
-interface TemplatePreviewProps {
+interface TemplateInlineProps {
   /** ID or array of IDs of Inputs components to get variable values from. When multiple IDs are provided, variables are merged in order (later IDs override earlier ones). */
   inputsId?: string | string[]
   /** Output path prefix for generated files */
@@ -23,18 +23,18 @@ interface TemplatePreviewProps {
 }
 
 /**
- * TemplatePreview renders inline template content with variable substitution.
+ * TemplateInline renders inline template content with variable substitution.
  * It displays the rendered output as code blocks (preview only, no file generation).
  * 
  * Variables are sourced from Inputs components referenced by inputsId.
  * When multiple inputsIds are provided, variables and configs are merged (later IDs override earlier).
  */
-function TemplatePreview({
+function TemplateInline({
   inputsId,
   outputPath,
   generateFile = false,
   children
-}: TemplatePreviewProps) {
+}: TemplateInlineProps) {
   // Render state
   const [renderState, setRenderState] = useState<'waiting' | 'rendered'>('waiting');
   const [renderData, setRenderData] = useState<{ renderedFiles: Record<string, File> } | null>(null);
@@ -142,7 +142,7 @@ function TemplatePreview({
 
   useEffect(() => {
     // Check if we have all required variables
-    // Note that TemplatePreview is a pure consumer of variables, so it only has importedVarValues
+    // Note that TemplateInline is a pure consumer of variables, so it only has importedVarValues
     if (!hasAllRequiredVariables(importedVarValues)) {
       return;
     }
@@ -178,7 +178,7 @@ function TemplatePreview({
           }
         })
         .catch(err => {
-          console.error(`[TemplatePreview][${outputPath}] Render failed:`, err);
+          console.error(`[TemplateInline][${outputPath}] Render failed:`, err);
         });
     }, delay);
   }, [importedVarValues, hasAllRequiredVariables, outputPath, renderTemplate, setFileTree, generateFile]);
@@ -222,6 +222,7 @@ function TemplatePreview({
 }
 
 // Set displayName for React DevTools and component detection
-TemplatePreview.displayName = 'TemplatePreview';
+TemplateInline.displayName = 'TemplateInline';
+
+export default TemplateInline;
 
-export default TemplatePreview;

web/src/components/mdx/TemplateInline/index.ts

@@ -0,0 +1,3 @@
+export { default as TemplateInline } from './TemplateInline'
+
+