import { MetaProvider, Title, Meta, Link } from "@solidjs/meta";

function App() {
  return (
    <MetaProvider>
      <Title>My App</Title>
      <Meta name="description" content="My app description" />
      <Link rel="canonical" href="https://example.com" />
      {/* Your app content */}
    </MetaProvider>
  );
}

import { Title } from "@solidjs/meta";

<Title>Home - My App</Title>
// Multiple Title components can exist, last one wins

import { Meta } from "@solidjs/meta";

<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta name="description" content="Page description" />

{/* Open Graph */}
<Meta property="og:title" content="Page Title" />
<Meta property="og:description" content="Page description" />
<Meta property="og:image" content="/og-image.jpg" />

{/* Twitter */}
<Meta name="twitter:card" content="summary_large_image" />
<Meta name="twitter:title" content="Page Title" />

import { Link } from "@solidjs/meta";

<Link rel="canonical" href="https://example.com/page" />
<Link rel="stylesheet" href="/styles.css" />
<Link rel="preconnect" href="https://fonts.googleapis.com" />

import { Style } from "@solidjs/meta";

<Style>{`
  body {
    margin: 0;
  }
`}</Style>

import { Base } from "@solidjs/meta";

<Base href="https://example.com/" />
// Set once in root layout

import { useHead } from "@solidjs/meta";

function Page() {
  useHead({
    tag: "script",
    props: {
      type: "application/ld+json",
      id: "structured-data"
    },
    setting: {
      close: true, // Required for script/style tags
      escape: false
    },
    id: "structured-data", // Stable ID for SSR hydration
    children: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "Article Title"
    })
  });
  
  return <div>Content</div>;
}

import { createSignal } from "solid-js";
import { Title, Meta } from "@solidjs/meta";

function ProductPage({ product }) {
  const title = () => `Product: ${product.name}`;
  
  return (
    <>
      <Title>{title()}</Title>
      <Meta name="description" content={product.description} />
      <Meta property="og:title" content={title()} />
      <Meta property="og:image" content={product.image} />
    </>
  );
}

function SEO({ title, description, image, url }) {
  return (
    <>
      <Title>{title}</Title>
      <Meta name="description" content={description} />
      <Link rel="canonical" href={url} />
      
      {/* Open Graph */}
      <Meta property="og:title" content={title} />
      <Meta property="og:description" content={description} />
      <Meta property="og:image" content={image} />
      <Meta property="og:url" content={url} />
      
      {/* Twitter */}
      <Meta name="twitter:card" content="summary_large_image" />
      <Meta name="twitter:title" content={title} />
      <Meta name="twitter:description" content={description} />
      <Meta name="twitter:image" content={image} />
    </>
  );
}

// routes/about.tsx
import { Title, Meta } from "@solidjs/meta";

export default function About() {
  return (
    <>
      <Title>About - My Site</Title>
      <Meta name="description" content="Learn about us" />
      <h1>About</h1>
    </>
  );
}

// routes/users/[id].tsx
import { Title, Meta } from "@solidjs/meta";
import { useParams } from "@solidjs/router";
import { createResource } from "solid-js";

export default function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <Show when={user()}>
      <Title>{user()!.name} - Profile</Title>
      <Meta name="description" content={user()!.bio} />
      <Meta property="og:image" content={user()!.avatar} />
      <h1>{user()!.name}</h1>
    </Show>
  );
}

// routes/_layout.tsx or app.tsx
import { Meta, Link } from "@solidjs/meta";

export default function RootLayout(props) {
  return (
    <>
      <Meta property="og:site_name" content="My Site" />
      <Meta property="og:image" content="/default-og.jpg" />
      <Link rel="icon" href="/favicon.ico" />
      {props.children}
    </>
  );
}