4d2a577b0e
* chore: update deps * chore: update deps for apps/docs * chore: update landing-page deps * chore: update monorepo deps * chore: add astro as dep to config * chore: update package lock * fix: tailwind import on landing-page * chore: type module * chore: remove ci run for node 16 * chore: ci run ci * chore: remove astro check from ci * chore: remove lint check from ci * fix: tailwindcss import * fix: check errors on apps * chore: fix npm run check * chore: updat emonorepo deps * chore: not a module * chore: use astro-iconify instead * chore: update prettier * chore: use prettier formatter * chore: update lint deps * chore: run lint on ci * chore: add changeset
47 lines
1.9 KiB
Text
47 lines
1.9 KiB
Text
---
|
|
import { SITE, OPEN_GRAPH } from '../config';
|
|
import type { Frontmatter } from '../config';
|
|
|
|
export interface Props {
|
|
frontmatter: Frontmatter;
|
|
canonicalUrl: URL;
|
|
}
|
|
|
|
const { frontmatter, canonicalUrl } = Astro.props as Props;
|
|
const formattedContentTitle = `${frontmatter.title} 🚀 ${SITE.title}`;
|
|
const imageSrc = frontmatter.image?.src ?? OPEN_GRAPH.image.src;
|
|
const canonicalImageSrc = new URL(imageSrc, Astro.site);
|
|
const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt;
|
|
---
|
|
|
|
<!-- Page Metadata -->
|
|
<link rel="canonical" href={canonicalUrl} />
|
|
|
|
<!-- OpenGraph Tags -->
|
|
<meta property="og:title" content={formattedContentTitle} />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content={canonicalUrl} />
|
|
<meta property="og:locale" content={frontmatter.ogLocale ?? SITE.defaultLanguage} />
|
|
<meta property="og:image" content={canonicalImageSrc} />
|
|
<meta property="og:image:alt" content={imageAlt} />
|
|
<meta
|
|
name="description"
|
|
property="og:description"
|
|
content={frontmatter.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={formattedContentTitle} />
|
|
<meta name="twitter:description" content={frontmatter.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
|
|
-->
|