fix: randomw fixes

Author: OlivierCo

apps/www/app/docs/@aside/[name]/page.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import {
   Card,
   CardContent,
@@ -35,18 +36,21 @@ export default function HookAside() {
         </CardHeader>
         <CardContent>
           <div className="space-y-2 text-sm">
-            <a
+            <Link
               href="/docs/use-local-storage"
               className="block hover:text-blue-500"
             >
               useLocalStorage
-            </a>
-            <a href="/docs/use-counter" className="block hover:text-blue-500">
+            </Link>
+            <Link
+              href="/docs/use-counter"
+              className="block hover:text-blue-500"
+            >
               useCounter
-            </a>
-            <a href="/docs/use-toggle" className="block hover:text-blue-500">
+            </Link>
+            <Link href="/docs/use-toggle" className="block hover:text-blue-500">
               useToggle
-            </a>
+            </Link>
           </div>
         </CardContent>
       </Card>

apps/www/app/docs/@aside/page.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import {
   Card,
   CardHeader,
@@ -35,18 +36,21 @@ export default function DocsAside() {
         </CardHeader>
         <CardContent>
           <div className="space-y-2 text-sm">
-            <a
+            <Link
               href="/docs/use-local-storage"
               className="block hover:text-blue-500"
             >
               useLocalStorage
-            </a>
-            <a href="/docs/use-counter" className="block hover:text-blue-500">
+            </Link>
+            <Link
+              href="/docs/use-counter"
+              className="block hover:text-blue-500"
+            >
               useCounter
-            </a>
-            <a href="/docs/use-toggle" className="block hover:text-blue-500">
+            </Link>
+            <Link href="/docs/use-toggle" className="block hover:text-blue-500">
               useToggle
-            </a>
+            </Link>
           </div>
         </CardContent>
       </Card>

apps/www/app/docs/@details/[name]/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import type { Metadata } from "next";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import {
@@ -22,7 +23,7 @@ export async function generateMetadata({
   params,
 }: {
   params: Promise<{ name: string }>;
-}) {
+}): Promise<Metadata> {
   const { name } = await params;
   const hooks = await getHooks();
   const hook = hooks.find((h) => h.name === name);
@@ -180,6 +181,7 @@ export default async function HookPage({
         <h1 className="text-4xl font-bold mb-2 flex justify-between">
           {hook.title} <ShareButton />
         </h1>
+
         <span className="inline-block bg-gray-200 dark:bg-slate-700 text-sm px-2 py-1 rounded mb-8">
           {hook.category}
         </span>

apps/www/app/docs/@details/cli/page.tsx

@@ -479,7 +479,8 @@ export default async function CliPage() {
                 Search for hooks by keyword with interactive selection.
               </p>
               <Terminal>
-                npx usehooks-cli@latest search "fetch" --interactive --add
+                npx usehooks-cli@latest search &quot;fetch&quot; --interactive
+                --add
               </Terminal>
             </Step>
 

apps/www/app/docs/@details/introduction/page.tsx

@@ -24,7 +24,8 @@ export default function IntroductionPage() {
             Introduction
           </h1>
           <p className="text-xl text-muted-foreground">
-            This is not a hook library. It's how you build your hook library.
+            This is not a hook library. It&apos;s how you build your hook
+            library.
           </p>
         </div>
 
@@ -35,7 +36,7 @@ export default function IntroductionPage() {
           </p>
           <p className="text-lg leading-7">
             This approach works well until you need to customize a hook to fit
-            your specific needs or require one that isn't included in the
+            your specific needs or require one that isn&apos;t included in the
             library. Often, you end up wrapping library hooks, writing
             workarounds, or mixing hooks from different libraries with
             incompatible APIs.
@@ -111,9 +112,9 @@ export default function IntroductionPage() {
           </div>
 
           <p className="text-sm text-muted-foreground">
-            In a typical library, if you need to change a hook's behavior, you
-            have to override implementations or wrap the hook. With useHooks.io,
-            you simply edit the hook code directly.
+            In a typical library, if you need to change a hook&apos;s behavior,
+            you have to override implementations or wrap the hook. With
+            useHooks.io, you simply edit the hook code directly.
           </p>
         </section>
 
@@ -235,7 +236,7 @@ export default function IntroductionPage() {
 
           <Callout>
             <p className="text-sm">
-              <strong>Note:</strong> The CLI is inspired by shadcn/ui's
+              <strong>Note:</strong> The CLI is inspired by shadcn/ui&apos;s
               component workflow, making it easy to add and manage hooks in your
               React applications.
             </p>

apps/www/app/docs/@details/mcp/page.tsx

@@ -130,7 +130,7 @@ export default function McpPage() {
                 <ul className="list-disc list-inside font-mono text-sm ml-4">
                   <li>category (optional): Filter hooks by category</li>
                   <li>
-                    format (optional): Output format ("json" or "markdown")
+                    format (optional): Output format (&quot;json&quot; or &quot;markdown&quot;)
                   </li>
                 </ul>
               </div>
@@ -156,12 +156,12 @@ export default function McpPage() {
               <p className="text-gray-600 mb-2">
                 Search hooks by name or description
               </p>
-              <div className="bg-accentp-3 rounded">
+              <div className="bg-accent p-3 rounded">
                 <p className="font-mono text-sm">Parameters:</p>
                 <ul className="list-disc list-inside font-mono text-sm ml-4">
                   <li>keyword: Search term (minimum 2 characters)</li>
                   <li>
-                    format (optional): Output format ("json" or "markdown")
+                    format (optional): Output format (&quot;json&quot; or &quot;markdown&quot;)
                   </li>
                   <li>category (optional): Filter results by category</li>
                 </ul>
@@ -178,7 +178,7 @@ export default function McpPage() {
                 <ul className="list-disc list-inside font-mono text-sm ml-4">
                   <li>name: Name of the hook to retrieve</li>
                   <li>
-                    format (optional): Output format ("json" or "markdown")
+                    format (optional): Output format (&quot;json&quot; or &quot;markdown&quot;)
                   </li>
                   <li>include_examples (optional): Include usage examples</li>
                 </ul>

apps/www/components/code-block.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 
@@ -29,8 +32,22 @@ export function CodeBlock({
   language = "typescript",
   showLineNumbers = true,
 }: CodeBlockProps) {
+  const [isClient, setIsClient] = useState(false);
   const codeString = getTextContent(children);
 
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // Fallback for SSR
+  if (!isClient) {
+    return (
+      <pre className="bg-gray-900 text-gray-100 p-4 rounded-md overflow-x-auto text-sm">
+        <code>{codeString}</code>
+      </pre>
+    );
+  }
+
   return (
     <SyntaxHighlighter
       language={language}