Parametrises heading level in NewsPreviewLink

3 files changed, 9 insertions, 4 deletions

diff --git a/src/components/NewsPreviewLink.astro b/src/components/NewsPreviewLink.astro
index 566f136..8486fe7 100644
--- a/src/components/NewsPreviewLink.astro
+++ b/src/components/NewsPreviewLink.astro
@@ -5,16 +5,21 @@ import getLocaleFromPath from '$lib/getLocaleFromPath';
 import type { CollectionEntry } from 'astro:content';
 
 interface Props {
+  headingLevel: 'h1' | 'h2' | 'h3' | 'h4';
   newsItem: CollectionEntry<'news'>;
 }
 
-const { newsItem } = Astro.props;
+const { headingLevel, newsItem } = Astro.props;
 const locale = getLocaleFromPath(Astro.url.pathname);
 const t = translate(locale);
 ---
 
 <a class="news-index__item" href={`/${locale}/news/${newsItem.slug.replace('/', '-')}`}>
-  <h2>{newsItem.data.title}</h2>
+  <Fragment
+    set:html={`
+    <${headingLevel}>${newsItem.data.title}</${headingLevel}>
+  `}
+  />
   <p>{newsItem.data.summary}</p>
   <p class="link">{t(tNewsPreviewLink, { key: 'read-article' })}</p>
 </a>
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index 3674b9f..30c06fc 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -20,7 +20,7 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
 <Page title={t(tPage, { key: 'title' })}>
   <section>
     <h2 set:html={t(tPage, { key: 'news' })} />
-    {mostRecentNewsItem && <NewsPreviewLink newsItem={mostRecentNewsItem} />}
+    {mostRecentNewsItem && <NewsPreviewLink headingLevel="h3" newsItem={mostRecentNewsItem} />}
     <div class="align-end margin-block-start-md">
       <a href={`/${locale}/news`} class="btn">
         {t(tPage, { key: 'aw-news' })} ▷
diff --git a/src/pages/[locale]/news/index.astro b/src/pages/[locale]/news/index.astro
index c64fbdb..8a6e322 100644
--- a/src/pages/[locale]/news/index.astro
+++ b/src/pages/[locale]/news/index.astro
@@ -24,7 +24,7 @@ export async function getStaticPaths() {
     <div class="news-index">
       {
         allNewsInLocale.length > 0 ? (
-          allNewsInLocale.map((item) => <NewsPreviewLink newsItem={item} />)
+          allNewsInLocale.map((item) => <NewsPreviewLink headingLevel="h2" newsItem={item} />)
         ) : (
           <p>{t(tPage, { key: 'no-news' })}</p>
         )