---
import {SITE, OPEN_GRAPH} from '../config.ts';
import { getLanguageFromURL } from '../util.ts';
export interface Props {
  content: any,
  site: any,
  canonicalURL: URL,
};
const {
        content = {},
        canonicalURL,
      } = Astro.props;
const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
const canonicalImageSrc = new URL(imageSrc, Astro.site);
const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
const lang = canonicalURL && getLanguageFromURL(canonicalURL.pathname);
---
<!-- Page Metadata -->
<link rel="canonical" href={canonicalURL}/>

<!-- Algolia docsearch language facet -->
<meta name="docsearch:language" content="{lang}" />

<!-- OpenGraph Tags -->
<meta property="og:title" content={content.title ?? SITE.title}/>
<meta property="og:type" content="article"/>
<meta property="og:url" content={canonicalURL}/>
<meta property="og:locale" content={content.ogLocale ?? OPEN_GRAPH.locale}/>
<meta property="og:image" content={canonicalImageSrc}/>
<meta property="og:image:alt" content={imageAlt}/>
<meta name="description" property="og:description" content={content.description ? content.description : SITE.description}/>
<meta property="og:site_name" content={SITE.title}/>

<!-- Twitter Tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content={OPEN_GRAPH.twitter}/>
<meta name="twitter:title" content={content.title ?? SITE.title}/>
<meta name="twitter:description" content={content.description ? content.description : SITE.description}/>
<meta name="twitter:image" content={canonicalImageSrc}/>
<meta name="twitter:image:alt" content={imageAlt}/>

<!--
  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
  Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
-->