index.astro

---
import PageHeader from '@blocks/PageHeader/PageHeader.astro';
import { PublicationCard } from '@blocks/PublicationCard';
import PublicationList from '@blocks/PublicationList/PublicationList.astro';
import { Button } from '@components/Button';
import { Column, Grid } from '@components/Grid';
import PreviewModeSubscription from '@components/PreviewMode/PreviewModeSubscription.astro';
import Layout from '@layouts/Default.astro';
import { setCacheControl } from '@lib/cache-control';
import { datocmsRequest } from '@lib/datocms';
import { defaultLocale, t } from '@lib/i18n';
import type { PublicationsPageQuery } from '@lib/types/datocms';
import query from './_index.query.graphql';

setCacheControl(Astro.response, 0, 10);

const { locale = defaultLocale } = Astro.params;

const { page, highlightedPublications } =
  await datocmsRequest<PublicationsPageQuery>({
    query,
    variables: { locale },
  });

if (!page) {
  return new Response(null, { status: 404 });
}
---

<Layout pageUrls={[]} seoMetaTags={page._seoMetaTags}>
  <PreviewModeSubscription query={query} variables={{ locale }} />
  <PageHeader title={page.header.title} subtitle={page.header.subtitle}>
    <Fragment slot="header">
      <Button
        as="a"
        href="../"
        className="back-button"
        level="tertiary"
        icon="arrow-left"
        iconPosition="left"
      >
        {t('back_to_home')}
      </Button>
    </Fragment>
  </PageHeader>
  <Grid as="section" border>
    <h2 class="a11y-sr-only">{page.highlightedPublicationsTitle}</h2>
    {
      highlightedPublications.map((publication) => (
        <Column
          key={publication.id}
          span={{
            mobile: 12,
            tablet: 6,
            desktop: 4,
          }}
        >
          <PublicationCard publication={publication} priority={true} />
        </Column>
      ))
    }
  </Grid>
  <PublicationList />
</Layout>