// manic.config.ts
import { defineConfig } from 'manicjs/config';
import { seo } from '@manicjs/seo';

export default defineConfig({
  plugins: [
    seo({
      hostname: 'https://example.com',
      title: 'My App',
      description: 'Build amazing apps with Manic',
    }),
  ],
});

// app/routes/about.tsx
import { Metadata } from '@manicjs/seo/metadata';

export default function About() {
  return (
    <>
      <Metadata
        title="About Us"
        description="Learn more about our company"
        ogImage="/images/about-og.png"
      />
      <h1>About Us</h1>
    </>
  );
}

// manic.config.ts
import { defineConfig } from 'manicjs/config';
import { seo } from '@manicjs/seo';

export default defineConfig({
  plugins: [
    seo({
      hostname: 'https://example.com',
      title: 'My App',
      description: 'Build amazing apps with Manic',
      author: 'John Doe',
      twitter: {
        card: 'summary_large_image',
        site: '@myapp',
        creator: '@johndoe',
      },
      openGraph: {
        type: 'website',
        locale: 'en_US',
        image: 'https://example.com/og.png',
        siteName: 'My App',
      },
      rules: [
        { userAgent: '*', allow: ['/'], disallow: ['/admin'] },
      ],
      contentSignals: {
        'ai-train': 'no',
        search: 'yes',
      },
    }),
  ],
});

import { Metadata } from '@manicjs/seo/metadata';

// app/routes/about.tsx
import { Metadata } from '@manicjs/seo/metadata';

export default function About() {
  return (
    <>
      <Metadata
        title="About Us"
        description="Learn more about our company"
        canonical="https://example.com/about"
      />
      <h1>About Us</h1>
    </>
  );
}

// app/routes/blog/[slug].tsx
import { Metadata } from '@manicjs/seo/metadata';
import { useRouter } from 'manicjs';

const posts: Record<string, { title: string; excerpt: string; image: string }> = {
  'hello-world': { title: 'Hello World', excerpt: 'My first post', image: '/images/hello.png' },
  'react-tips': { title: 'React Tips', excerpt: 'Useful React patterns', image: '/images/react.png' },
};

export default function BlogPost() {
  const { params } = useRouter();
  const post = posts[params.slug];

  if (!post) return <div>Post not found</div>;

  return (
    <>
      <Metadata
        title={post.title}
        description={post.excerpt}
        ogImage={post.image}
        ogType="article"
      />
      <article>
        <h1>{post.title}</h1>
        <p>{post.excerpt}</p>
      </article>
    </>
  );
}

import { Metadata } from '@manicjs/seo/metadata';
import { useState, useEffect } from 'react';

export default function Product() {
  const [product, setProduct] = useState<{ name: string; description: string; image: string } | null>(null);

  useEffect(() => {
    fetch('/api/product/1')
      .then(r => r.json())
      .then((data) => setProduct(data as { name: string; description: string; image: string }));
  }, []);

  return (
    <>
      {product && (
        <Metadata
          title={product.name}
          description={product.description}
          ogImage={product.image}
        />
      )}
      <div>{product?.name ?? 'Loading...'}</div>
    </>
  );
}

import { defineConfig } from 'manicjs/config';
import { seo } from '@manicjs/seo';
import { sitemap } from '@manicjs/sitemap';

export default defineConfig({
  plugins: [
    seo({
      hostname: 'https://example.com',
      title: 'My App',
    }),
    sitemap({
      hostname: 'https://example.com',
    }),
  ],
});