astroplate/src/pages/404.astro

---
import config from "@/config/config.json";
import Base from "@/layouts/Base.astro";
import { getLangFromUrl, getTranslations } from "@/lib/utils/i18nUtils";
import type { ContentEntryMap } from "astro:content";
import { supportedLang } from "@/lib/utils/i18nUtils";

export function getStaticPaths() {
  const paths = supportedLang.map((lang) => ({
    params: { lang: lang || undefined },
  }));
  return paths;
}

const lang = getLangFromUrl(Astro.url);
const { page_not_found_content, page_not_found, back_to_home } =
  await getTranslations(lang as keyof ContentEntryMap);
const { defaultLang } = config.language;
const href = lang && lang !== defaultLang ? `/${lang}/` : "/";
---

<Base title="Page Not Found">
  <section class="section-sm text-center">
    <div class="container">
      <div class="row justify-center">
        <div class="sm:col-10 md:col-8 lg:col-6">
          <span
            class="text-[8rem] block font-bold text-dark dark:text-darkmode-dark"
          >
            404
          </span>
          <h1 class="h2 mb-4">{page_not_found}</h1>
          <div class="content">
            <p>{page_not_found_content}</p>
          </div>
          <a href={href} class="btn btn-primary mt-8">{back_to_home}</a>
        </div>
      </div>
    </div>
  </section>
</Base>