astroplate/src/pages/404.astro

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

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

let lang = getLangFromUrl(Astro.url);

const disabledLanguages = config.settings.disable_languages as string[];
if (disabledLanguages.includes(lang)) {
  lang = config.settings.default_language;
}

const { page_not_found_content, page_not_found, back_to_home } =
  await getTranslations(lang as keyof ContentEntryMap);
---

<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={slugSelector("/", lang)} class="btn btn-primary mt-8"
            >{back_to_home}</a
          >
        </div>
      </div>
    </div>
  </section>
</Base>