dashersupply/src/pages/404.astro

---
/** Fallback HTTP 404 Page. */
import Layout from "../layouts/Layout.astro";
import type { Page } from "../data/models/multis/Page";
import type { PageCallout } from "../data/models/components/PageCallout";
import type { PageContent } from "../data/models/components/PageContent";
import type { Site } from "../data/models/singles/Site";
import type { SiteConfig } from "../data/models/singles/SiteConfig";
import { getLocaleField, getPagesByLangSlug, getSite, getSiteConfig, getSiteHomePage } from "../data/api-client";
import { pick as pickLanguage } from "../lib/accept-language-parser";
import { localeUrlTestPatterns, overrideLocaleFromUrl, localeFromLang } from "../lib/locales";
import Banner from "../components/Banner.astro";
import ComponentRouter from "../components/ComponentRouter.astro";

// if you're here you've 404'ed
Astro.response.status = 404;

const locale = overrideLocaleFromUrl(Astro.request.url, localeFromLang(pickLanguage(['en', 'es', 'fr'], Astro.request.headers.get('Accept-Language')||'en-US', { loose: true })||'en'));
const siteDto = await getSite();
const site: Site = siteDto.items[0].data!;
const siteConfigDto = await getSiteConfig();
const siteConfig: SiteConfig = siteConfigDto.items[0].data!;
const siteName = getLocaleField(locale, site.siteName);
const shouldEmbedSquidexSDK = import.meta.env.MODE === 'development';

let pageDto;
let page: Page|undefined;
let title = 'HTTP 404';
let metaDescription = 'This page cannot be displayed.';
let isHomePage = false;
let homePageDto;
let homePage;
try {
	homePageDto = await getSiteHomePage(site);
	homePage = homePageDto.items[0].data!;
} catch (error) {
	homePage = undefined;
}

try {
	pageDto = await getPagesByLangSlug(locale, `${locale}/404`);
	page = pageDto.items[0].data!;
	title = page.title[locale] || title;
	metaDescription = page.seo[locale].metaDescription || metaDescription;
	isHomePage = false;
} catch (error) {
	if (!page) {
		page = {
			parentPage: { iv: [] },
			content: {
				"en-US": [
					{
						schemaId: '',
						schemaName: 'page-breadcrumbs',
					},
					{
						schemaId: '',
						schemaName: 'page-callout',
						text: '404 Page Not Found',
					} as PageCallout,
					{
						schemaId: '',
						schemaName: 'page-content',
						content: 'This page cannot be displayed.',
					} as PageContent,
				],
				"es-US": [
					{
						schemaId: '',
						schemaName: 'page-breadcrumbs',
					},
					{
						schemaId: '',
						schemaName: 'page-callout',
						text: '404 Page Not Found'
					} as PageCallout,
					{
						schemaId: '',
						schemaName: 'page-content',
						content: 'This page cannot be displayed.',
					} as PageContent,
				],
				"fr-CA": [
					{
						schemaId: '',
						schemaName: 'page-breadcrumbs',
					},
					{
						schemaId: '',
						schemaName: 'page-callout',
						text: '404 Page Not Found'
					} as PageCallout,
					{
						schemaId: '',
						schemaName: 'page-content',
						content: 'This page cannot be displayed.',
					} as PageContent,
				]
			},
			slug: {
				"en-US": Astro.url.pathname.replace(/^[\/\\]|[\/\\]$/g, '').replace(locale, 'en-US'),
				"es-US": Astro.url.pathname.replace(/^[\/\\]|[\/\\]$/g, '').replace(locale, 'es-US'),
				"fr-CA": Astro.url.pathname.replace(/^[\/\\]|[\/\\]$/g, '').replace(locale, 'fr-CA'),
			},
			title: {
				"en-US": "HTTP 404",
				"es-US": "HTTP 404",
				"fr-CA": "HTTP 404"
			},
			seo: {
				"en-US": {
					keywords: "",
					metaDescription: "This page cannot be displayed.",
					metaImage: "",
					metaSocial: [],
					metaTitle: "",
					schemaId: "",
					schemaName: ""
				},
				"es-US": {
					keywords: "",
					metaDescription: "La página que estás buscando no puede ser mostrada.",
					metaImage: "",
					metaSocial: [],
					metaTitle: "",
					schemaId: "",
					schemaName: ""
				},
				"fr-CA": {
					keywords: "",
					metaDescription: "La page que vous cherchez ne peut pas être affichée.",
					metaImage: "",
					metaSocial: [],
					metaTitle: "",
					schemaId: "",
					schemaName: ""
				}
			}
		}
	}
}
---
<Layout locale={locale} title={title} site={site} siteConfig={siteConfig} siteEditToken={siteDto.items[0].editToken!} page={page as Page} shouldEmbedSquidexSDK={shouldEmbedSquidexSDK}>
	<slot name="head">
		<meta name="description" content={metaDescription} />
		{
			// Object.entries(SupportedLanguages).map((supportedLanguage) => {
			// 	return (
			// 		<link
			// 			rel="alternate"
			// 			href={`/${supportedLanguage[0]}/${isHomePage ? '' : page.slug[supportedLanguage[0]]}`}
			// 			hreflang={supportedLanguage[0].substring(0, locale.indexOf('-'))}
			// 			type="text/html"
			// 			title={page.title[supportedLanguage[0]]}
			// 		/>
			// 	);
			// })
		}
	</slot>
	<main>
		<Banner editToken={siteDto.items[0].editToken} homePageLink={`/${locale}/`} siteName={site.siteName[locale]} />
		<ComponentRouter
			pageEditToken={pageDto?.items[0].editToken!}
			componentRouter={getLocaleField(locale, page.content)||[]}
			homePage={homePage as Page}
			isHomePage={isHomePage}
			locale={locale}
			page={page as Page}
			site={site}
		/>
	</main>
</Layout>

<style>
	main {
		margin: auto;
		min-width: 800px;
		max-width: calc(100% - 2rem);
		color: white;
		font-size: 16pt;
		line-height: 1.6;
	}
	a, a:link, a:visited { text-decoration: none; color: #fff }
	a:hover { text-decoration: underline; color: #fff }
</style>