// app/seo.ts
import { initSeo } from "remix-seo";
export const { getSeo, getSeoMeta, getSeoMetaV2, getSeoLinks } = initSeo({
 // Pass any SEO defaults for your site here.
 // If individual routes do not provide their own meta and link tags,
 // the tags generated by the defaults will be used.
 title: "The Awesome Store",
 titleTemplate: "%s | The Awesome Store",
 description: "The most awesome store on planet Earth.",
});

// ------------------------------------------------------------

// app/root.tsx
import { getSeo } from "~/seo";
let [seoMeta, seoMetaV2, seoLinks] = getSeo();

// ------------- v1 ------------
export let meta = () => ( ...seoMeta, { whatever: "cool" } );

// ------------- v2 ------------
export let meta = () => ( [...seoMetaV2, { whatever: "cool" }] );

// Links
export let links = () => [ ...seoLinks, { rel: "stylesheet", href: "/sick-styles.css" } ];

// ------------------------------------------------------------

// app/routes/some-route.tsx
import { getSeo, getSeoMeta, getSeoLinks } from "~/seo";

// No need for route data? Get meta and links in one call.
let [seoMeta, seoMetaV2, seoLinks] = getSeo({
 title: "About us",
 description: "We are great!",
});


// -----------  v1 Meta ----------------
// SEO depends on route data?
// call getSeoMeta and getSeoLinks individually in the relevant function.
export let meta = ({ context }) => {
 let seoMeta = getSeoMeta({
  title: `Welcome ${context.name}`
 });
 return {
  ...seoMeta,
 };
};

// -----------  v2 Meta ----------------
// SEO depends on route data?
export let meta = ({ context }) => {
 let seoMetaV2 = getSeoMetaV2({
  title: `Welcome ${context.name}`
 });
 return seoMetaV2; // or [...seoMetaV2] both will work.
};
export let links = ({ context }) => {
 let seoLinks = getSeoLinks({
  title: `Welcome ${context.name}`
 });
 return [...seoLinks];
};