fix: escape JSX entities in tutorial slides
This commit is contained in:
Ajax Davis
parent
5d9e256660
commit
10116cd460
9 changed files with 25 additions and 25 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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'}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue