Fix playground types and docs lint issues

alpha912 · alpha912 · commit 6cec0b466842 · 2026-01-22T17:20:59.000Z
diff --git a/app/docs/getting-started/first-document/page.tsx b/app/docs/getting-started/first-document/page.tsx
@@ -120,7 +120,7 @@ Blocks: 2 (meta, doc)`}
         <section className="mb-12">
           <h2 className="text-3xl font-bold mb-4">Complete Example</h2>
           
-          <p className="mb-4">Here's a complete OSF document with all basic features:</p>
+          <p className="mb-4">Here&apos;s a complete OSF document with all basic features:</p>
           
           <div className="bg-gray-900 p-4 rounded border-2 border-gray-700 overflow-x-auto">
             <pre className="text-gray-300 font-mono text-sm">
@@ -169,7 +169,7 @@ Blocks: 2 (meta, doc)`}
 
         {/* Next Steps */}
         <section>
-          <h2 className="text-3xl font-bold mb-4">What's Next?</h2>
+          <h2 className="text-3xl font-bold mb-4">What&apos;s Next?</h2>
           
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <a
diff --git a/app/docs/getting-started/installation/page.tsx b/app/docs/getting-started/installation/page.tsx
@@ -71,7 +71,7 @@ export default function InstallationPage() {
           <ol className="list-decimal pl-6 mb-4 space-y-2">
             <li>Open Visual Studio Code</li>
             <li>Press <code className="bg-gray-800 px-2 py-1 rounded">Ctrl+Shift+X</code> (Windows/Linux) or <code className="bg-gray-800 px-2 py-1 rounded">Cmd+Shift+X</code> (Mac)</li>
-            <li>Search for "OmniScript Format"</li>
+            <li>Search for &quot;OmniScript Format&quot;</li>
             <li>Click Install</li>
           </ol>
 
diff --git a/app/docs/releases/page.tsx b/app/docs/releases/page.tsx
@@ -6,7 +6,7 @@
 'use client';
 
 import Navigation from '@/components/Navigation';
-import { CheckCircle, Warning, RocketLaunch, GitBranch } from 'phosphor-react';
+import { CheckCircle } from 'phosphor-react';
 
 export default function ReleasesPage() {
   return (
@@ -37,7 +37,7 @@ export default function ReleasesPage() {
           </p>
           
           <div className="mb-4">
-            <h3 className="text-xl font-bold mb-2">✨ What's New</h3>
+            <h3 className="text-xl font-bold mb-2">✨ What&apos;s New</h3>
             <ul className="list-disc list-inside space-y-1 text-gray-300">
               <li>@table blocks - Markdown-style tables with captions, alignment, styling</li>
               <li>@include directive - Modular documents with file composition</li>
@@ -82,7 +82,7 @@ export default function ReleasesPage() {
           </p>
           
           <div className="mb-4">
-            <h3 className="text-xl font-bold mb-2">✨ What's New</h3>
+            <h3 className="text-xl font-bold mb-2">✨ What&apos;s New</h3>
             <ul className="list-disc list-inside space-y-1 text-gray-300">
               <li>@chart blocks - Data visualization with 5 chart types</li>
               <li>@diagram blocks - Flowcharts, sequences, Gantt, mindmaps</li>
@@ -167,7 +167,7 @@ export default function ReleasesPage() {
           </p>
           
           <div className="mb-4">
-            <h3 className="text-xl font-bold mb-2">✨ What's New</h3>
+            <h3 className="text-xl font-bold mb-2">✨ What&apos;s New</h3>
             <ul className="list-disc list-inside space-y-1 text-gray-300">
               <li>Strikethrough text support (~~text~~)</li>
               <li>Ordered lists and blockquotes</li>
diff --git a/app/docs/releases/v1-0/page.tsx b/app/docs/releases/v1-0/page.tsx
@@ -6,7 +6,7 @@
 'use client';
 
 import Navigation from '@/components/Navigation';
-import { Rocket, ChartBar, FlowArrow, Code, CheckCircle, Warning, Star, Confetti } from 'phosphor-react';
+import { Rocket, CheckCircle, Warning, Star, Confetti } from 'phosphor-react';
 
 export default function V1ReleaseNotesPage() {
   return (
@@ -36,11 +36,11 @@ export default function V1ReleaseNotesPage() {
             </p>
           </section>
 
-          {/* What's New */}
+          {/* What&apos;s New */}
           <section className="mb-12">
             <h2 className="text-4xl font-bold mb-6 border-b-2 border-white pb-2 flex items-center gap-3">
               <Rocket size={36} weight="duotone" />
-              What's New
+              What&apos;s New
             </h2>
             
             {/* @chart blocks */}
@@ -273,7 +273,10 @@ export default function V1ReleaseNotesPage() {
               <h4 className="font-bold mb-2">Recommended Updates:</h4>
               <ol className="list-decimal list-inside space-y-2 text-gray-300">
                 <li>Update packages: <code className="bg-black px-2 py-1">npm update omniscript-*</code></li>
-                <li>Add version to @meta: <code className="bg-black px-2 py-1">version: "1.0";</code></li>
+                <li>
+                  Add version to @meta:{' '}
+                  <code className="bg-black px-2 py-1">version: &quot;1.0&quot;;</code>
+                </li>
                 <li>Explore new blocks (@chart, @diagram, @code)</li>
               </ol>
             </div>
@@ -340,11 +343,11 @@ export default function V1ReleaseNotesPage() {
             </div>
           </section>
 
-          {/* What's Next */}
+          {/* What&apos;s Next */}
           <section className="mb-12">
             <h2 className="text-4xl font-bold mb-6 border-b-2 border-white pb-2 flex items-center gap-3">
               <Star size={36} weight="duotone" />
-              What's Next (v1.1)
+              What&apos;s Next (v1.1)
             </h2>
             
             <div className="border-2 border-blue-500 p-6">
@@ -375,7 +378,7 @@ export default function V1ReleaseNotesPage() {
             <h2 className="text-4xl font-bold mb-6 border-b-2 border-white pb-2">Thank You</h2>
             <div className="bg-gray-900 p-6">
               <p className="text-xl text-gray-300 mb-4">
-                Thank you for using OmniScript Format! We're excited to see what you build with v1.0.
+                Thank you for using OmniScript Format! We&apos;re excited to see what you build with v1.0.
               </p>
               <p className="text-gray-300">
                 <strong>Happy documenting!</strong> 🚀
diff --git a/app/docs/releases/v1-1/page.tsx b/app/docs/releases/v1-1/page.tsx
@@ -27,7 +27,7 @@ export default function V11ReleasePage() {
 
       <hr />
 
-      <h2>🎉 What's New</h2>
+      <h2>🎉 What&apos;s New</h2>
 
       <h3 id="strikethrough">✨ Strikethrough Text Formatting</h3>
       <p>Use <code>~~text~~</code> syntax for strikethrough formatting:</p>
diff --git a/app/docs/releases/v1-2/page.tsx b/app/docs/releases/v1-2/page.tsx
@@ -145,7 +145,7 @@ export default function V12ReleasePage() {
             <div className="p-6 bg-gray-900 border-2 border-white">
               <h3 className="text-2xl font-bold mb-3">Type Safety</h3>
               <ul className="space-y-2 text-gray-300">
-                <li>• Zero 'any' types</li>
+                <li>• Zero &apos;any&apos; types</li>
                 <li>• Strict TypeScript mode</li>
                 <li>• exactOptionalPropertyTypes enabled</li>
                 <li>• Full type coverage</li>
diff --git a/app/docs/user-guide/page.tsx b/app/docs/user-guide/page.tsx
@@ -253,12 +253,12 @@ export default function UserGuidePage() {
               </div>
 
               <div className="border-2 border-red-500 p-4">
-                <h3 className="font-bold text-white mb-2">❌ DON'T: Mix block types incorrectly</h3>
+                <h3 className="font-bold text-white mb-2">❌ DON&apos;T: Mix block types incorrectly</h3>
                 <p>Each block should contain only its appropriate properties.</p>
               </div>
 
               <div className="border-2 border-red-500 p-4">
-                <h3 className="font-bold text-white mb-2">❌ DON'T: Forget semicolons</h3>
+                <h3 className="font-bold text-white mb-2">❌ DON&apos;T: Forget semicolons</h3>
                 <p>All property assignments must end with a semicolon.</p>
               </div>
             </div>
diff --git a/app/docs/v1-2-features/page.tsx b/app/docs/v1-2-features/page.tsx
@@ -81,8 +81,8 @@ export default function V12FeaturesPage() {
             <h3 className="text-2xl font-bold mb-4">Table Properties</h3>
             <ul className="space-y-3 text-gray-300">
               <li><strong>caption</strong>: Optional table title displayed above the table</li>
-              <li><strong>style</strong>: <code className="bg-black px-2 py-1">"bordered"</code>, <code className="bg-black px-2 py-1">"striped"</code>, or <code className="bg-black px-2 py-1">"minimal"</code></li>
-              <li><strong>alignment</strong>: Array of <code className="bg-black px-2 py-1">"left"</code>, <code className="bg-black px-2 py-1">"center"</code>, or <code className="bg-black px-2 py-1">"right"</code></li>
+              <li><strong>style</strong>: <code className="bg-black px-2 py-1">&quot;bordered&quot;</code>, <code className="bg-black px-2 py-1">&quot;striped&quot;</code>, or <code className="bg-black px-2 py-1">&quot;minimal&quot;</code></li>
+              <li><strong>alignment</strong>: Array of <code className="bg-black px-2 py-1">&quot;left&quot;</code>, <code className="bg-black px-2 py-1">&quot;center&quot;</code>, or <code className="bg-black px-2 py-1">&quot;right&quot;</code></li>
             </ul>
           </div>
 
@@ -316,7 +316,7 @@ export default function V12FeaturesPage() {
             </p>
             <ul className="space-y-2 text-gray-300">
               <li>• Table column counts must match header</li>
-              <li>• Alignment values must be "left", "center", or "right"</li>
+              <li>• Alignment values must be &quot;left&quot;, &quot;center&quot;, or &quot;right&quot;</li>
               <li>• Number parsing is more strict</li>
             </ul>
             <p className="text-gray-300 mt-4">
diff --git a/app/docs/v1-features/chart-blocks/page.tsx b/app/docs/v1-features/chart-blocks/page.tsx
@@ -6,7 +6,6 @@
 'use client';
 
 import Navigation from '@/components/Navigation';
-import { ChartBar, GameController } from 'phosphor-react';
 
 export default function ChartBlocksPage() {
   return (
diff --git a/app/docs/v1-features/code-blocks/page.tsx b/app/docs/v1-features/code-blocks/page.tsx
@@ -6,7 +6,6 @@
 'use client';
 
 import Navigation from '@/components/Navigation';
-import { Code, GameController, CheckCircle, Warning } from 'phosphor-react';
 
 export default function CodeBlocksPage() {
   return (
@@ -261,7 +260,7 @@ export default function CodeBlocksPage() {
             <div className="border-l-4 border-green-500 pl-4">
               <h4 className="font-bold mb-1">✅ Use Captions</h4>
               <p className="text-gray-300 text-sm">
-                Add captions to provide context: "Example usage", "Error handling", "Configuration", etc.
+                Add captions to provide context: &quot;Example usage&quot;, &quot;Error handling&quot;, &quot;Configuration&quot;, etc.
               </p>
             </div>
 
diff --git a/app/docs/v1-features/diagram-blocks/page.tsx b/app/docs/v1-features/diagram-blocks/page.tsx
@@ -6,7 +6,6 @@
 'use client';
 
 import Navigation from '@/components/Navigation';
-import { FlowArrow, GameController } from 'phosphor-react';
 
 export default function DiagramBlocksPage() {
   return (
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import Link from 'next/link';
+
 import Terminal from '@/components/Terminal'
 import CodeBlock from '@/components/CodeBlock'
 import { FileText, Robot, ArrowsClockwise, ChartBar, PaintBrush, Lightning, FilePdf, PresentationChart, FileXls } from 'phosphor-react';
@@ -53,14 +55,14 @@ export default function Home() {
       {/* Navigation */}
       <nav className="fixed top-0 left-0 right-0 z-50 bg-noir-white border-b-2 border-noir-black px-8 py-4">
         <div className="container-noir flex items-center justify-between">
-          <a href="/" className="font-mono font-bold text-2xl tracking-tight">
+          <Link href="/" className="font-mono font-bold text-2xl tracking-tight">
             OmniScript_
-          </a>
+          </Link>
 
           <ul className="flex items-center gap-8">
-            <li><a href="#features" className="font-mono text-sm hover:underline">Features</a></li>
-            <li><a href="/playground" className="font-mono text-sm hover:underline">Playground</a></li>
-            <li><a href="/docs" className="font-mono text-sm hover:underline">Docs</a></li>
+            <li><Link href="#features" className="font-mono text-sm hover:underline">Features</Link></li>
+            <li><Link href="/playground" className="font-mono text-sm hover:underline">Playground</Link></li>
+            <li><Link href="/docs" className="font-mono text-sm hover:underline">Docs</Link></li>
             <li><a href="https://github.com/OmniScriptOSF/omniscript-core" className="font-mono text-sm hover:underline" target="_blank" rel="noopener noreferrer">GitHub</a></li>
             <li><a href="https://www.npmjs.com/package/omniscript-cli" className="font-mono text-sm hover:underline" target="_blank" rel="noopener noreferrer">NPM</a></li>
           </ul>
diff --git a/app/playground/page.tsx b/app/playground/page.tsx
diff --git a/components/CodeBlock.tsx b/components/CodeBlock.tsx
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
