---
import { getImage } from "astro:assets";
import { OG, SEO, SITE } from "@data/constants";
import faviconSvgSrc from "@images/icon.svg";
import faviconSrc from "@images/icon.png";
// Default properties for the Meta component. These values are used if props are not provided.
// 'meta' sets a default description meta tag to describe the page content.
// 'structuredData' defines default structured data in JSON-LD format to enhance search engine understanding of the page (for SEO purposes).
const defaultProps = {
meta: SITE.description,
structuredData: SEO.structuredData,
};
// Extract props with default values assigned from defaultProps. Values can be overridden when the component is used.
// For example:
//
const {
meta = defaultProps.meta,
structuredData = defaultProps.structuredData,
} = Astro.props;
// Define the metadata for your website and individual pages
const URL = `${Astro.site}`; // Set the website URL in astro.config.mjs
const author = SITE.author;
const canonical = Astro.url.href;
const basePath = Astro.url.pathname;
const ogTitle = OG.title;
const ogDescription = OG.description;
const socialImageRes = await getImage({
src: OG.image,
width: 1200,
height: 600,
});
const socialImage = Astro.url.origin + socialImageRes.src; // Get the full URL of the image (https://stackoverflow.com/a/9858694)
const languages: { [key: string]: string } = {
en: "",
fr: "fr",
};
function createHref(lang: string, prefix: string, path: string): string {
const hasPrefix = path.startsWith(`/${prefix}/`);
const basePath = hasPrefix ? path : `/${prefix}${path}`;
const normalizedBasePath = basePath.replace(/\/\/+/g, "/");
return `${URL.slice(0, -1)}${normalizedBasePath}`;
}
const fullPath: string = Astro.url.pathname;
const alternateLanguageLinks: string = Object.entries(languages)
.map(([lang, prefix]: [string, string]) => {
const basePath: string =
lang === "en" ? fullPath.replace(/^\/fr\//, "/") : fullPath;
const href: string = createHref(lang, prefix, basePath);
return ``;
})
.join("\n");
// Generate and optimize the favicon images
const faviconSvg = await getImage({
src: faviconSvgSrc,
format: "svg",
});
const appleTouchIcon = await getImage({
src: faviconSrc,
width: 180,
height: 180,
format: "png",
});
---
{
structuredData && (
)
}