Implement markdown reference renderer

app/components/Breadcrumb.tsx

@@ -16,7 +16,7 @@ export default function Breadcrumb({ type, category, name }: {
                 <>
                     <span className="mx-2">/</span>
                     <Link href={`/docs/reference/${type}`} className="hover:text-blue-400 transition-colors capitalize">
-                        {capitalCase(pluralize(type))}
+                        {capitalCase(type)}
                     </Link>
                 </>
             )}

app/components/Index.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import type { ReferencePage } from '../services/referenceService';
 import { capitalCase } from 'change-case';
+import pluralize from 'pluralize';
 
 export default function Index({
   groupedReferences
@@ -34,7 +35,7 @@ export default function Index({
                   <Option
                     key={type}
                     target={`/docs/reference/${type}`}
-                    display={capitalCase(type) + 's'}
+                    display={pluralize(capitalCase(type))}
                     className="uppercase"
                     currentPath={pathname}
                   />

app/docs/reference/[type]/[category]/[name]/page.tsx

@@ -1,17 +1,25 @@
-import Link from 'next/link';
 import { notFound } from 'next/navigation';
-import Code from '../../../../../components/Code';
 import Breadcrumb from '../../../../../components/Breadcrumb';
+import Markdown from '../../../../../components/Markdown';
 import { getAllReferenceParams, getReferenceByPath } from '../../../../../services/referenceService';
 import { getMetadata } from "../../../../../services/metadataService";
-import { kebabCase } from 'change-case';
 
 export async function generateMetadata({ params }: { params: Promise<{ type: string; category: string; name: string }> }) {
   const { type, category, name } = await params;
-  const data = getReferenceByPath(type, category, name);
+  const decodedName = decodeURIComponent(name);
+  const data = getReferenceByPath(type, category, decodedName);
+
+  if (!data) {
+    return getMetadata({
+      title: 'Reference - DocumentDB MQL Reference',
+      description: '',
+      extraKeywords: ['reference', type, category, name]
+    });
+  }
+
   return getMetadata({
-    title: `${data?.name || 'Reference'} - DocumentDB MQL Reference`,
-    description: data?.description || data?.summary || '',
+    title: `${data.frontmatter.title || name} - DocumentDB MQL Reference`,
+    description: data.frontmatter.description || '',
     extraKeywords: ['reference', type, category, name]
   });
 }
@@ -22,153 +30,35 @@ export async function generateStaticParams(): Promise<{ type: string; category:
 
 export default async function ReferencePage({ params }: { params: Promise<{ type: string; category: string; name: string }> }) {
   const { type, category, name } = await params;
-  const data = getReferenceByPath(type, category, name);
+  const decodedName = decodeURIComponent(name);
+  const data = getReferenceByPath(type, category, decodedName);
 
   if (!data) {
     notFound();
   }
 
+  const pageTitle = data.frontmatter.title || name;
+  const pageDescription = data.frontmatter.description;
+
   return (
     <article>
-      <Breadcrumb type={type} category={category} name={data.name} />
+      <Breadcrumb type={type} category={category} name={pageTitle} />
+
       {/* Header */}
       <div className="mb-8">
         <h1 className="text-5xl font-bold text-white mb-4">
-          {data.name}
+          {pageTitle}
         </h1>
         <div className="w-24 h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-green-500 rounded-full mb-6"></div>
-        <p className="text-gray-300 text-lg leading-relaxed">
-          {data.description}
-        </p>
-        {data.summary && (
-          <div className="mt-4 p-4 bg-blue-900/20 border-l-4 border-blue-500 rounded">
-            <p className="text-gray-300 text-sm">{data.summary}</p>
-          </div>
+        {pageDescription && (
+          <p className="text-gray-300 text-lg leading-relaxed">
+            {pageDescription}
+          </p>
         )}
       </div>
 
-      {/* Syntax Section */}
-      {data.syntax && data.syntax.length > 0 && (
-        <section className="mb-8">
-          <a className="invisible scroll-mt-24" id={'syntax'} />
-          <h2 className="text-2xl font-bold text-white mb-4">Syntax</h2>
-          <div className="bg-neutral-900 rounded-lg p-6 border border-neutral-700/50 overflow-x-auto">
-            <Code code={data.syntax} />
-          </div>
-        </section>
-      )}
-
-      {/* Parameters Section */}
-      {data.parameters && data.parameters.length > 0 && (
-        <section className="mb-8">
-          <a className="invisible scroll-mt-24" id={'parameters'} />
-          <h2 className="text-2xl font-bold text-white mb-4">Parameters</h2>
-          <div className="space-y-4">
-            {data.parameters.map((param, index) => (
-              <div key={index} className="bg-neutral-800/50 backdrop-blur-sm rounded-lg border border-neutral-700/50 p-5">
-                <div className="flex items-center gap-3 mb-2">
-                  <code className="text-blue-300 font-mono font-semibold text-lg">{param.name}</code>
-                  {param.type ? <span className="text-xs px-2 py-1 rounded bg-purple-900/40 text-purple-300 border border-purple-700/50">
-                    {param.type}
-                  </span> : <></>}
-                  {param.required && (
-                    <span className="text-xs px-2 py-1 rounded bg-red-900/40 text-red-300 border border-red-700/50">
-                      required
-                    </span>
-                  )}
-                </div>
-                {param.description && (
-                  <p className="text-gray-400 text-sm mt-2 leading-relaxed">{param.description}</p>
-                )}
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {/* Examples Section */}
-      {data.examples && (
-        <section className="mb-8">
-          <a className="invisible scroll-mt-24" id={'examples'} />
-          <h2 className="text-2xl font-bold text-white mb-4">Examples</h2>
-
-          {/* Sample Data */}
-          {data.examples.sample && (
-            <div className="mb-6">
-              <a className="invisible scroll-mt-24" id={'sample-data'} />
-              <h3 className="text-lg font-semibold text-gray-200 mb-3">Sample Data</h3>
-              <div className="bg-neutral-900 rounded-lg p-6 border border-neutral-700/50 overflow-x-auto">
-                <Code code={typeof data.examples.sample === 'string' ? data.examples.sample : JSON.stringify(data.examples.sample, null, 2)} language='json' />
-              </div>
-            </div>
-          )}
-
-          {/* Example Items */}
-          {data.examples.items && data.examples.items.length > 0 && (
-            <div className="space-y-6">
-              {data.examples.items.map((example, index) => (
-                <div key={index} className="bg-neutral-800/30 rounded-lg border border-neutral-700/50 p-6">
-                  <a className="invisible scroll-mt-24" id={kebabCase(example.title)} />
-                  <h3 className="text-xl font-semibold text-white mb-3">{example.title}</h3>
-
-                  {example.explanation && (
-                    <div className="mb-4 p-4 bg-blue-900/20 border-l-4 border-blue-500 rounded">
-                      <p className="text-gray-300 text-sm">{example.explanation}</p>
-                    </div>
-                  )}
-
-                  {example.description && (
-                    <p className="text-gray-400 text-sm mb-4 leading-relaxed">{example.description}</p>
-                  )}
-
-                  {/* Query */}
-                  <div className="mb-4">
-                    <h4 className="text-sm font-semibold text-gray-300 mb-2">Query:</h4>
-                    <div className="bg-neutral-900 rounded-lg p-4 border border-neutral-700/50 overflow-x-auto">
-                      <Code code={example.query} language='javascript' />
-                    </div>
-                  </div>
-
-                  {/* Output */}
-                  {example.output && (
-                    <div>
-                      <h4 className="text-sm font-semibold text-gray-300 mb-2">Output:</h4>
-                      <div className="bg-neutral-900 rounded-lg p-4 border border-neutral-700/50 overflow-x-auto">
-                        <Code code={example.output.value} language='json' />
-                      </div>
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-        </section>
-      )}
-
-      {/* Related Section */}
-      {data.related && data.related.length > 0 && (
-        <section className="mb-8">
-          <a className="invisible scroll-mt-24" id={'related'} />
-          <h2 className="text-2xl font-bold text-white mb-4">Related</h2>
-          <div className="bg-neutral-800/50 backdrop-blur-sm rounded-lg border border-neutral-700/50 p-6">
-            <ul className="space-y-2">
-              {data.related.map((rel, index) => (
-                <li key={index}>
-                  <Link
-                    href={`/docs/reference${rel.reference}`}
-                    className="text-blue-400 hover:text-blue-300 hover:underline transition-colors flex items-center gap-2"
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
-                    </svg>
-                    {rel.reference}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </section>
-      )}
+      {/* Markdown Content */}
+      <Markdown content={data.content} />
     </article>
   );
-}
+}

app/docs/reference/[type]/page.tsx

@@ -7,11 +7,11 @@ import { getMetadata } from "../../../services/metadataService";
 import pluralize from 'pluralize';
 import { capitalCase } from 'change-case';
 
-const allowed_types = ['operator', 'command'];
+const allowed_types = ['operators', 'commands'];
 
 export const generateStaticParams = async (): Promise<{ type: string }[]> => [
-  { type: 'operator' },
-  { type: 'command' }
+  { type: 'operators' },
+  { type: 'commands' }
 ];
 
 export async function generateMetadata({ params }: { params: Promise<{ type: string }> }) {