From 10116cd460291edb9cb421ddb37d527389fbc8f6 Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Wed, 31 Dec 2025 01:11:08 +1000
Subject: [PATCH] fix: escape JSX entities in tutorial slides

---
 .../agent-example-slides/AgentCodeSlide.tsx   |  2 +-
 .../agent-example-slides/SetupCodeSlide.tsx   |  6 ++---
 .../agent-example-slides/TheGoalSlide.tsx     |  2 +-
 .../FirstToolNextStepsSlide.tsx               |  2 +-
 .../first-tool-slides/PackageJsonSlide.tsx    | 26 +++++++++----------
 .../first-tool-slides/PublishSlide.tsx        |  2 +-
 .../first-tool-slides/WriteToolSlide.tsx      |  4 +--
 .../playground-slides/FillParametersSlide.tsx |  2 +-
 .../playground-slides/OpenPlaygroundSlide.tsx |  4 +--
 9 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/apps/tutorial/src/components/agent-example-slides/AgentCodeSlide.tsx b/apps/tutorial/src/components/agent-example-slides/AgentCodeSlide.tsx
index 7870769..7a3ec28 100644
--- a/apps/tutorial/src/components/agent-example-slides/AgentCodeSlide.tsx
+++ b/apps/tutorial/src/components/agent-example-slides/AgentCodeSlide.tsx
@@ -37,7 +37,7 @@ export function AgentCodeSlide(): React.ReactElement {
               <span className="text-white">: </span>
               <span className="text-yellow-400">openai</span>
               <span className="text-white">(</span>
-              <span className="text-amber-300">'gpt-4o'</span>
+              <span className="text-amber-300">{"'gpt-4o'"}</span>
               <span className="text-white">),</span>
               {'\n'}
               <span className="text-white">{'  '}</span>
diff --git a/apps/tutorial/src/components/agent-example-slides/SetupCodeSlide.tsx b/apps/tutorial/src/components/agent-example-slides/SetupCodeSlide.tsx
index 7a8362e..0f164b6 100644
--- a/apps/tutorial/src/components/agent-example-slides/SetupCodeSlide.tsx
+++ b/apps/tutorial/src/components/agent-example-slides/SetupCodeSlide.tsx
@@ -48,20 +48,20 @@ export function SetupCodeSlide(): React.ReactElement {
               <span className="text-white">{' { searchTpmjsToolsTool } '}</span>
               <span className="text-purple-400">from</span>
               {'\n'}
-              <span className="text-amber-300"> '@tpmjs/search-registry'</span>
+              <span className="text-amber-300">{" '@tpmjs/search-registry'"}</span>
               <span className="text-white">;</span>
               {'\n'}
               <span className="text-purple-400">import</span>
               <span className="text-white">{' { registryExecuteTool } '}</span>
               <span className="text-purple-400">from</span>
               {'\n'}
-              <span className="text-amber-300"> '@tpmjs/registry-execute'</span>
+              <span className="text-amber-300">{" '@tpmjs/registry-execute'"}</span>
               <span className="text-white">;</span>
               {'\n'}
               <span className="text-purple-400">import</span>
               <span className="text-white">{' { generateText } '}</span>
               <span className="text-purple-400">from</span>
-              <span className="text-amber-300"> 'ai'</span>
+              <span className="text-amber-300">{" 'ai'"}</span>
               <span className="text-white">;</span>
             </code>
           </pre>
diff --git a/apps/tutorial/src/components/agent-example-slides/TheGoalSlide.tsx b/apps/tutorial/src/components/agent-example-slides/TheGoalSlide.tsx
index 1f7bd23..2304f21 100644
--- a/apps/tutorial/src/components/agent-example-slides/TheGoalSlide.tsx
+++ b/apps/tutorial/src/components/agent-example-slides/TheGoalSlide.tsx
@@ -26,7 +26,7 @@ export function TheGoalSlide(): React.ReactElement {
         >
           <div className="text-xs text-white/40 font-mono mb-4">User Request</div>
           <p className="text-lg text-white/80 italic">
-            "Convert this markdown to a formatted blog post and generate a summary"
+            {'"Convert this markdown to a formatted blog post and generate a summary"'}
           </p>
         </motion.div>
 
diff --git a/apps/tutorial/src/components/first-tool-slides/FirstToolNextStepsSlide.tsx b/apps/tutorial/src/components/first-tool-slides/FirstToolNextStepsSlide.tsx
index ee779f1..52ea774 100644
--- a/apps/tutorial/src/components/first-tool-slides/FirstToolNextStepsSlide.tsx
+++ b/apps/tutorial/src/components/first-tool-slides/FirstToolNextStepsSlide.tsx
@@ -34,7 +34,7 @@ export function FirstToolNextStepsSlide(): React.ReactElement {
         transition={{ duration: 0.8 }}
         className="relative z-10 max-w-4xl w-full"
       >
-        <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">You're Published!</h2>
+        <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">{"You're Published!"}</h2>
         <p className="text-xl text-white/50 mb-12">Your tool is now discoverable by AI agents</p>
 
         <div className="grid md:grid-cols-3 gap-4 max-w-3xl mx-auto">
diff --git a/apps/tutorial/src/components/first-tool-slides/PackageJsonSlide.tsx b/apps/tutorial/src/components/first-tool-slides/PackageJsonSlide.tsx
index 38af26b..29196bc 100644
--- a/apps/tutorial/src/components/first-tool-slides/PackageJsonSlide.tsx
+++ b/apps/tutorial/src/components/first-tool-slides/PackageJsonSlide.tsx
@@ -29,47 +29,47 @@ export function PackageJsonSlide(): React.ReactElement {
               <span className="text-white">{'{'}</span>
               {'\n'}
               <span className="text-white">{'  '}</span>
-              <span className="text-cyan-400">"name"</span>
+              <span className="text-cyan-400">{'"name"'}</span>
               <span className="text-white">: </span>
-              <span className="text-amber-300">"my-ai-tool"</span>
+              <span className="text-amber-300">{'"my-ai-tool"'}</span>
               <span className="text-white">,</span>
               {'\n'}
               <span className="text-white">{'  '}</span>
-              <span className="text-cyan-400">"version"</span>
+              <span className="text-cyan-400">{'"version"'}</span>
               <span className="text-white">: </span>
-              <span className="text-amber-300">"1.0.0"</span>
+              <span className="text-amber-300">{'"1.0.0"'}</span>
               <span className="text-white">,</span>
               {'\n'}
               <span className="text-white">{'  '}</span>
-              <span className="text-cyan-400">"keywords"</span>
+              <span className="text-cyan-400">{'"keywords"'}</span>
               <span className="text-white">: [</span>
               {'\n'}
               <span className="text-white">{'    '}</span>
-              <span className="text-amber-300 bg-orange-500/20 px-1 rounded">"tpmjs-tool"</span>
+              <span className="text-amber-300 bg-orange-500/20 px-1 rounded">{'"tpmjs-tool"'}</span>
               <span className="text-white/50">{' ← Required for discovery'}</span>
               {'\n'}
               <span className="text-white">{'  ],'}]</span>
               {'\n'}
               <span className="text-white">{'  '}</span>
-              <span className="text-cyan-400">"main"</span>
+              <span className="text-cyan-400">{'"main"'}</span>
               <span className="text-white">: </span>
-              <span className="text-amber-300">"dist/index.js"</span>
+              <span className="text-amber-300">{'"dist/index.js"'}</span>
               <span className="text-white">,</span>
               {'\n'}
               <span className="text-white">{'  '}</span>
-              <span className="text-cyan-400">"types"</span>
+              <span className="text-cyan-400">{'"types"'}</span>
               <span className="text-white">: </span>
-              <span className="text-amber-300">"dist/index.d.ts"</span>
+              <span className="text-amber-300">{'"dist/index.d.ts"'}</span>
               <span className="text-white">,</span>
               {'\n'}
               <span className="text-white">{'  '}</span>
-              <span className="text-cyan-400">"exports"</span>
+              <span className="text-cyan-400">{'"exports"'}</span>
               <span className="text-white">{': {'}</span>
               {'\n'}
               <span className="text-white">{'    '}</span>
-              <span className="text-cyan-400">"."</span>
+              <span className="text-cyan-400">{'"."'}</span>
               <span className="text-white">: </span>
-              <span className="text-amber-300">"./dist/index.js"</span>
+              <span className="text-amber-300">{'"./dist/index.js"'}</span>
               {'\n'}
               <span className="text-white">{'  }'}</span>
               {'\n'}
diff --git a/apps/tutorial/src/components/first-tool-slides/PublishSlide.tsx b/apps/tutorial/src/components/first-tool-slides/PublishSlide.tsx
index f4c7d46..7e32a18 100644
--- a/apps/tutorial/src/components/first-tool-slides/PublishSlide.tsx
+++ b/apps/tutorial/src/components/first-tool-slides/PublishSlide.tsx
@@ -65,7 +65,7 @@ export function PublishSlide(): React.ReactElement {
           transition={{ delay: 0.8 }}
           className="mt-8 text-white/40 text-sm font-mono"
         >
-          TPMJS syncs from npm's changes feed every 2 minutes
+          {"TPMJS syncs from npm's changes feed every 2 minutes"}
         </motion.div>
       </motion.div>
     </div>
diff --git a/apps/tutorial/src/components/first-tool-slides/WriteToolSlide.tsx b/apps/tutorial/src/components/first-tool-slides/WriteToolSlide.tsx
index 0b5be13..21f8d64 100644
--- a/apps/tutorial/src/components/first-tool-slides/WriteToolSlide.tsx
+++ b/apps/tutorial/src/components/first-tool-slides/WriteToolSlide.tsx
@@ -49,7 +49,7 @@ export function WriteToolSlide(): React.ReactElement {
               <span className="text-white">{'  '}</span>
               <span className="text-cyan-400">description</span>
               <span className="text-white">: </span>
-              <span className="text-amber-300">'Generate a greeting'</span>
+              <span className="text-amber-300">{"'Generate a greeting'"}</span>
               <span className="text-white">,</span>
               {'\n'}
               <span className="text-white">{'  '}</span>
@@ -65,7 +65,7 @@ export function WriteToolSlide(): React.ReactElement {
               <span className="text-white">().</span>
               <span className="text-yellow-400">describe</span>
               <span className="text-white">(</span>
-              <span className="text-amber-300">'Name'</span>
+              <span className="text-amber-300">{"'Name'"}</span>
               <span className="text-white">),</span>
               {'\n'}
               <span className="text-white">{'  }'}),</span>
diff --git a/apps/tutorial/src/components/playground-slides/FillParametersSlide.tsx b/apps/tutorial/src/components/playground-slides/FillParametersSlide.tsx
index 59aeef2..3cfa240 100644
--- a/apps/tutorial/src/components/playground-slides/FillParametersSlide.tsx
+++ b/apps/tutorial/src/components/playground-slides/FillParametersSlide.tsx
@@ -16,7 +16,7 @@ export function FillParametersSlide(): React.ReactElement {
         <div className="text-sky-400/60 font-mono text-sm mb-4">Step 3</div>
         <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">Fill Parameters</h2>
         <p className="text-xl text-white/50 mb-10">
-          The form is auto-generated from the tool's schema
+          {"The form is auto-generated from the tool's schema"}
         </p>
 
         <motion.div
diff --git a/apps/tutorial/src/components/playground-slides/OpenPlaygroundSlide.tsx b/apps/tutorial/src/components/playground-slides/OpenPlaygroundSlide.tsx
index 6d23037..180338d 100644
--- a/apps/tutorial/src/components/playground-slides/OpenPlaygroundSlide.tsx
+++ b/apps/tutorial/src/components/playground-slides/OpenPlaygroundSlide.tsx
@@ -15,7 +15,7 @@ export function OpenPlaygroundSlide(): React.ReactElement {
       >
         <div className="text-sky-400/60 font-mono text-sm mb-4">Step 2</div>
         <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">Open the Playground</h2>
-        <p className="text-xl text-white/50 mb-10">Click "Try it" on any tool page</p>
+        <p className="text-xl text-white/50 mb-10">{'Click "Try it" on any tool page'}</p>
 
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -75,7 +75,7 @@ export function OpenPlaygroundSlide(): React.ReactElement {
           className="mt-6 p-4 rounded-lg bg-sky-500/10 border border-sky-500/20 max-w-md mx-auto"
         >
           <p className="text-sky-400 text-sm">
-            Every tool page has a "Try it" button that opens the playground
+            {'Every tool page has a "Try it" button that opens the playground'}
           </p>
         </motion.div>
       </motion.div>