generated from avior/template-web-astro
133 lines
3.3 KiB
Plaintext
133 lines
3.3 KiB
Plaintext
---
|
|
import Favicon from 'components/layouts/Favicon/Favicon.astro'
|
|
import IconSVG from 'assets/layouts/Head/favicon.svg'
|
|
import IconPNG from 'assets/layouts/Head/favicon.png'
|
|
|
|
export interface Props {
|
|
/**
|
|
* Site display name
|
|
*/
|
|
siteName?: string | undefined
|
|
/**
|
|
* Page Title
|
|
*/
|
|
title?: string | undefined
|
|
/**
|
|
* Page description
|
|
*/
|
|
description?: string | undefined
|
|
/**
|
|
* define the cannonical url
|
|
*/
|
|
canonical?: string | false | undefined
|
|
/**
|
|
* OpenGraph image(s)
|
|
*/
|
|
image?: typeof IconPNG | Array<typeof IconPNG> | undefined
|
|
/**
|
|
* Twitter/X Specific options
|
|
*/
|
|
twitter?: {
|
|
title?: string | undefined
|
|
card?: "summary" | "summary_large_image" | "app" | "player" | undefined
|
|
site?: string | undefined
|
|
creator?: string | undefined
|
|
} | undefined
|
|
/**
|
|
* OpenGraph Specific options (override defaults set by other options)
|
|
*/
|
|
og?: {
|
|
title?: string | undefined
|
|
type?: string | undefined
|
|
description?: string | undefined
|
|
url?: string | undefined
|
|
} | undefined
|
|
}
|
|
|
|
const props = Astro.props
|
|
|
|
const image = props.image ? Array.isArray(props.image) ? props.image : [props.image] : undefined
|
|
|
|
const canonical = typeof Astro.props.canonical === 'string' ? Astro.props.canonical : Astro.props.canonical === false ? undefined : Astro.url.href
|
|
---
|
|
|
|
<!-- Charset -->
|
|
<meta charset="UTF-8" />
|
|
|
|
<!-- Viewport -->
|
|
<meta name="viewport" content="width=device-width" />
|
|
|
|
|
|
<!-- Analytics -->
|
|
<script defer data-domain="avior.me" src="/js/script.js"></script>
|
|
|
|
<!-- Favicon -->
|
|
<Favicon svg={IconSVG} png={IconPNG} icoPath="/favicon.ico" />
|
|
|
|
<!-- OpenGraph Sitename -->
|
|
{props.siteName && (
|
|
<meta property="og:site_name" content={props.siteName} />
|
|
)}
|
|
|
|
<!-- Title -->
|
|
{props.title && (
|
|
<title>{props.title}</title>
|
|
// <meta property="twitter:title" content={props.twitter?.title ?? props.title} />
|
|
)}
|
|
|
|
<!-- Description -->
|
|
{props.description && (
|
|
<meta name="description" content={props.description} />
|
|
)}
|
|
|
|
<!-- Canonical -->
|
|
{canonical && (
|
|
<link rel="canonical" href={canonical} />
|
|
)}
|
|
|
|
<!-- Twitter -->
|
|
<!-- Twitter Card -->
|
|
<meta property="twitter:card" content={props.twitter?.card ?? 'summary'} />
|
|
|
|
<!-- Twitter Site -->
|
|
{props.twitter?.site && (
|
|
<meta property="twitter:site" content={props.twitter.site} />
|
|
)}
|
|
|
|
<!-- Twitter Creator -->
|
|
{props.twitter?.creator && (
|
|
<meta property="twitter:creator" content={props.twitter.creator} />
|
|
)}
|
|
|
|
<!-- Twitter Title -->
|
|
{(props.twitter?.title ?? props.title) && (
|
|
<meta property="twitter:title" content={props.twitter?.title ?? props.title} />
|
|
)}
|
|
|
|
<!-- OpenGraph -->
|
|
<!-- OpenGraph Title -->
|
|
{(props.og?.title ?? props.title) && (
|
|
<meta property="og:title" content={props.og?.title ?? props.title} />
|
|
)}
|
|
|
|
<!-- OpenGraph Description -->
|
|
{(props.og?.description ?? props.description) && (
|
|
<meta property="og:description" content={props.og?.description ?? props.description} />
|
|
)}
|
|
|
|
<!-- OpenGraph Type -->
|
|
<meta property="og:type" content={props.og?.type ?? 'website'} />
|
|
|
|
<!-- OpenGraph URL -->
|
|
{(props.og?.url ?? canonical) && (
|
|
<meta property="og:url" content={props.og?.url ?? canonical} />
|
|
)}
|
|
|
|
<!-- OpenGraph Image -->
|
|
{image?.map((img) => (
|
|
<meta property="og:image" content={img.src} />
|
|
<meta property="og:image:type" content={`image/${img.format}`} />
|
|
<meta property="og:image:width" content={img.width.toString()} />
|
|
<meta property="og:image:height" content={img.height.toString()} />
|
|
))}
|