fix: change the message for not open roles

Not open roles will now give a role unavailable message
instead of 404

i18n/locales/en.json

@@ -567,7 +567,11 @@
     "description": "Our mission is to empower users to take control of their finances both in and out of crypto in a transparent and auditable way while enabling them to own their data through a self-sovereign application.",
     "header": "We’re looking for talented people",
     "no_open_roles": "There are no open roles.",
-    "title": "Careers at rotki"
+    "title": "Careers at rotki",
+    "role_unavailable": {
+      "title": "Role unavailable",
+      "description": "Thank you for your interest in the {title} role. This position is no longer available and we are not looking for new candidates for this role."
+    }
   },
   "logout": "Logout",
   "maintenance": {

pages/jobs/[id].vue

@@ -5,20 +5,28 @@ import { commonAttrs, getMetadata } from '~/utils/metadata';
 const { public: { baseUrl } } = useRuntimeConfig();
 const { path } = useRoute();
 const { fallbackToLocalOnError } = useRemoteOrLocal();
+const { t } = useI18n();
 
 const { data: job } = await useAsyncData(path, () => fallbackToLocalOnError(
   async () => await queryCollection('jobsRemote').path(path).first(),
   async () => await queryCollection('jobsLocal').path(path).first(),
 ));
 
-if (!get(job)?.open) {
+if (!isDefined(job)) {
   showError({ message: `Page not found: ${path}`, statusCode: 404 });
 }
 else {
+  const { title, description, open } = get(job);
+
+  const meta = {
+    title: open ? title : `${title} (${t('jobs.role_unavailable.title')})`,
+    description: open ? description : t('jobs.role_unavailable.description', { title }),
+  };
+
   useHead({
     meta: getMetadata(
-      get(job)?.title ?? '',
-      get(job)?.description ?? '',
+      meta.title,
+      meta.description,
       `${baseUrl}${path}`,
       baseUrl,
     ),
@@ -39,6 +47,20 @@ definePageMeta({
     <template #title>
       {{ job.title }}
     </template>
-    <JobDetail :data="job" />
+    <JobDetail
+      v-if="job.open"
+      :data="job"
+    />
+    <div class="py-8 lg:py-20">
+      <div class="container flex flex-col lg:flex-row">
+        <div>
+          <div class="text-h5 font-medium mb-4">
+            {{ t("jobs.role_unavailable.title") }}
+          </div>
+
+          {{ t("jobs.role_unavailable.description", { title: job.title }) }}
+        </div>
+      </div>
+    </div>
   </NuxtLayout>
 </template>