astroplate/src/pages/404.astro

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

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

let lang = getLangFromUrl(Astro.url);

// Check if the current language is disabled
const disabledLanguages = config.settings.disable_languages as string[];
if (disabledLanguages.includes(lang)) {
  // Redirect to the default language or handle as per your application logic
  lang = config.settings.default_language;
}

const { page_not_found_content, page_not_found, back_to_home } =
  await getTranslations(lang as keyof ContentEntryMap);
const href = constructUrl(
  "/",
  lang,
  config.settings.default_language,
  trailing_slash
);
---

<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>