Careers page

Open roles listing at /careers — powered by the JobsList component, grouped by department.

The careers sub-page renders a list of open roles at /careers using the JobsList component from @publier/shell. Roles are grouped by department in first-seen order.

Route control

The route comes from src/pages/careers.astro, not a YAML page flag. pages.careers does not create or suppress it. See Pages for current route controls and limits.

Starter implementation

The company-site template scaffolds src/pages/careers.astro:

---
import { JobsList } from '@publier/shell/components';
import BaseLayout from '@publier/shell/layouts/base-layout.astro';
---

<BaseLayout title="Careers — My Company" description="Help us build the infrastructure of tomorrow.">
  <main class="max-w-3xl mx-auto my-12 px-6 prose">
    <h1>Careers</h1>
    <p>
      We hire for curiosity, clarity, and kindness. Full-time, remote-first, with quarterly
      on-sites in different cities.
    </p>
    <JobsList
      heading="Open roles"
      jobs={[
        {
          title: 'Senior Software Engineer, Platform',
          department: 'Engineering',
          location: 'Remote (US/EU)',
          type: 'Full-time',
          href: 'mailto:careers@example.com?subject=SSE+Platform',
        },
        {
          title: 'Developer Relations',
          department: 'Engineering',
          location: 'Remote',
          type: 'Full-time',
          href: 'mailto:careers@example.com?subject=DevRel',
        },
        {
          title: 'Product Designer',
          department: 'Design',
          location: 'Remote (US/EU)',
          type: 'Full-time',
          href: 'mailto:careers@example.com?subject=Product+Designer',
        },
      ]}
    />
  </main>
</BaseLayout>

Empty state

When there are no open roles, pass an empty jobs array. JobsList shows a configurable message:

<JobsList
  heading="Open roles"
  emptyMessage="We're not hiring right now — check back soon."
  jobs={[]}
/>

See JobsList for the full prop reference.