displays date on news items

4 files changed, 56 insertions, 5 deletions

diff --git a/src/components/NewsIndex/NewsPreviewLink.astro b/src/components/NewsIndex/NewsPreviewLink.astro
index fa01d8d..5b8153c 100644
--- a/src/components/NewsIndex/NewsPreviewLink.astro
+++ b/src/components/NewsIndex/NewsPreviewLink.astro
@@ -2,7 +2,7 @@
 import translate from '$i18n/translate';
 import tComponent from '$i18n/translations/components/newsIndex';
 import { getLocaleFromPathOrThrow } from '$lib/getLocaleFromPath';
-import { getHref } from '$lib/newsUtils';
+import { getDate, getHref } from '$lib/newsUtils';
 import type { CollectionEntry } from 'astro:content';
 
 interface Props {
@@ -13,6 +13,8 @@ interface Props {
 const { headingLevel, newsItem } = Astro.props;
 const locale = getLocaleFromPathOrThrow(Astro.url.pathname);
 const t = translate(locale);
+
+const publicationDate = getDate(newsItem);
 ---
 
 <a class="news-index__item group-hover" href={getHref(newsItem)}>
@@ -22,5 +24,14 @@ const t = translate(locale);
   `}
   />
   <p>{newsItem.data.summary}</p>
+  <time datetime={publicationDate?.toISOString()}>
+    {
+      publicationDate?.toLocaleDateString('en-GB', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+      })
+    }
+  </time>
   <p class="link">{t(tComponent, { key: 'read-article' })}</p>
 </a>
diff --git a/src/i18n/translations/pages/home.ts b/src/i18n/translations/pages/home.ts
index bb2f86d..c440365 100644
--- a/src/i18n/translations/pages/home.ts
+++ b/src/i18n/translations/pages/home.ts
@@ -5,6 +5,14 @@ const tPage = {
     sco: () => 'Hame',
     'en-GB': () => 'Home',
   },
+  news: {
+    sco: () => 'News',
+    'en-GB': () => 'News',
+  },
+  'aw-news': {
+    sco: () => 'Aa news',
+    'en-GB': () => 'All news',
+  },
   sangschaw: {
     sco: () => 'Sangschaw open for entries',
     'en-GB': () => 'Sangschaw open for entries',
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index 7846fd8..15b4005 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -1,10 +1,14 @@
 ---
-import Page from '$layouts/Page.astro';
-import localeStaticPaths from '$lib/localeStaticPaths';
+import Button from '$components/Button.astro';
+import CommitteeList from '$components/CommitteeList/CommitteeList.astro';
+import NewsIndex from '$components/NewsIndex/NewsIndex.astro';
 import translate from '$i18n/translate';
 import tPage from '$i18n/translations/pages/home';
+import Page from '$layouts/Page.astro';
+import localeStaticPaths from '$lib/localeStaticPaths';
+import { isBefore, isNewsItemInLocale } from '$lib/newsUtils';
 import type Locale from '$types/Locale';
-import CommitteeList from '$components/CommitteeList/CommitteeList.astro';
+import { getCollection } from 'astro:content';
 
 export async function getStaticPaths() {
   return localeStaticPaths;
@@ -12,9 +16,26 @@ export async function getStaticPaths() {
 
 const locale = Astro.params.locale as Locale;
 const t = translate(locale);
+
+const allNewsItemsInLocale = await getCollection('news', (item) =>
+  isNewsItemInLocale(item, locale)
+);
+const firstNewsItem = allNewsItemsInLocale.find(
+  (item) => !allNewsItemsInLocale.some((otherItem) => isBefore(item, otherItem))
+);
+if (!firstNewsItem) {
+  throw new Error('No first news item.');
+}
 ---
 
 <Page title={t(tPage, { key: 'title' })}>
+  <section id="news">
+    <h2 set:html={t(tPage, { key: 'news' })} />
+    <NewsIndex headingLevel="h3" newsItems={[firstNewsItem]} />
+    <Button classNames="grid-span-3 grid-prose-end" href={`/${locale}/news`}>
+      {t(tPage, { key: 'aw-news' })} ▶
+    </Button>
+  </section>
   <section id="about">
     <h2 set:html={t(tPage, { key: 'about-us' })} />
     <p set:html={t(tPage, { key: 'about-us-para-1' })} />
diff --git a/src/pages/[locale]/news/[...slug].astro b/src/pages/[locale]/news/[...slug].astro
index 4585cf2..580f4a3 100644
--- a/src/pages/[locale]/news/[...slug].astro
+++ b/src/pages/[locale]/news/[...slug].astro
@@ -1,7 +1,7 @@
 ---
 import Article from '$layouts/Article.astro';
 import { getCollection, render } from 'astro:content';
-import { getLocale, getSlug } from '$lib/newsUtils';
+import { getDate, getLocale, getSlug } from '$lib/newsUtils';
 
 export async function getStaticPaths() {
   return (await getCollection('news')).map((entry) => ({
@@ -15,11 +15,22 @@ export async function getStaticPaths() {
 
 const { entry } = Astro.props;
 const { Content } = await render(entry);
+
+const publicationDate = getDate(entry);
 ---
 
 <Article title={entry.data.title}>
   <section>
     <h1>{entry.data.title}</h1>
+    <time datetime={publicationDate?.toISOString()}>
+      {
+        publicationDate?.toLocaleDateString('en-GB', {
+          day: 'numeric',
+          month: 'short',
+          year: 'numeric',
+        })
+      }
+    </time>
     <Content />
   </section>
 </Article>