Pulls out NewsIndex Astro component

7 files changed, 59 insertions, 34 deletions

diff --git a/src/components/NewsIndex/NewsIndex.astro b/src/components/NewsIndex/NewsIndex.astro
new file mode 100644
index 0000000..6738071
--- /dev/null
+++ b/src/components/NewsIndex/NewsIndex.astro
@@ -0,0 +1,25 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import NewsPreviewLink from './NewsPreviewLink.astro';
+import getLocaleFromPath from '$lib/getLocaleFromPath';
+import translate from '$i18n/translate';
+import tComponent from '$i18n/translations/components/newsIndex';
+interface Props {
+  headingLevel: 'h2' | 'h3' | 'h4';
+  newsItems: CollectionEntry<'news'>[];
+}
+
+const { headingLevel, newsItems } = Astro.props;
+const locale = getLocaleFromPath(Astro.url.pathname);
+const t = translate(locale);
+---
+
+<div class="news-index">
+  {
+    newsItems.length > 0 ? (
+      newsItems.map((item) => <NewsPreviewLink headingLevel={headingLevel} newsItem={item} />)
+    ) : (
+      <p>{t(tComponent, { key: 'no-news' })}</p>
+    )
+  }
+</div>
diff --git a/src/components/NewsPreviewLink.astro b/src/components/NewsIndex/NewsPreviewLink.astro
index 90cce61..aa8a371 100644
--- a/src/components/NewsPreviewLink.astro
+++ b/src/components/NewsIndex/NewsPreviewLink.astro
@@ -1,6 +1,6 @@
 ---
 import translate from '$i18n/translate';
-import tNewsPreviewLink from '$i18n/translations/components/newsPreviewLink';
+import tComponent from '$i18n/translations/components/newsIndex';
 import getLocaleFromPath from '$lib/getLocaleFromPath';
 import type { CollectionEntry } from 'astro:content';
 
@@ -21,5 +21,5 @@ const t = translate(locale);
   `}
   />
   <p>{newsItem.data.summary}</p>
-  <p class="link">{t(tNewsPreviewLink, { key: 'read-article' })}</p>
+  <p class="link">{t(tComponent, { key: 'read-article' })}</p>
 </a>
diff --git a/src/i18n/translations/components/newsIndex.ts b/src/i18n/translations/components/newsIndex.ts
new file mode 100644
index 0000000..0511b88
--- /dev/null
+++ b/src/i18n/translations/components/newsIndex.ts
@@ -0,0 +1,19 @@
+import type { TranslationsDictionary } from '$types/TranslationsDictionary';
+
+const tComponent = {
+  title: {
+    sco: () => 'News',
+    'en-GB': () => 'News',
+  },
+  'no-news': {
+    sco: () => 'The ar nae news at the present time. Caw again later!',
+    'en-GB': () => 'There is no news at the current time. Check in again later!',
+  },
+  'read-article': {
+    sco: () => 'Read fu airticle',
+    'en-GB': () => 'Read full article',
+  },
+};
+
+type Raw = typeof tComponent;
+export default tComponent as TranslationsDictionary<Raw>;
diff --git a/src/i18n/translations/components/newsPreviewLink.ts b/src/i18n/translations/components/newsPreviewLink.ts
deleted file mode 100644
index 98b2dd9..0000000
--- a/src/i18n/translations/components/newsPreviewLink.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { TranslationsDictionary } from '$types/TranslationsDictionary';
-
-const tNewsPreviewLink = {
-  'read-article': {
-    sco: () => 'Read fu airticle',
-    'en-GB': () => 'Read full article',
-  },
-};
-
-type Raw = typeof tNewsPreviewLink;
-export default tNewsPreviewLink as TranslationsDictionary<Raw>;
diff --git a/src/i18n/translations/pages/news.ts b/src/i18n/translations/pages/news.ts
index 22517d1..a794c6f 100644
--- a/src/i18n/translations/pages/news.ts
+++ b/src/i18n/translations/pages/news.ts
@@ -5,10 +5,6 @@ const tPage = {
     sco: () => 'News',
     'en-GB': () => 'News',
   },
-  'no-news': {
-    sco: () => 'The ar nae news at the present time. Caw again later!',
-    'en-GB': () => 'There is no news at the current time. Check in again later!',
-  },
 };
 
 type Raw = typeof tPage;
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index 11188a0..e5e6040 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -5,8 +5,8 @@ import translate from '$i18n/translate';
 import tPage from '$i18n/translations/pages/home';
 import type Locale from '$types/Locale';
 import { getMostRecentNewsItem } from '$lib/newsUtils';
-import NewsPreviewLink from '$components/NewsPreviewLink.astro';
 import contactDetails from '$data/contactDetails';
+import NewsIndex from '$components/NewsIndex/NewsIndex.astro';
 
 export async function getStaticPaths() {
   return localeStaticPaths;
@@ -20,12 +20,16 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
 <Page title={t(tPage, { key: 'title' })}>
   <section>
     <h2 class="grid-span-6" set:html={t(tPage, { key: 'news' })} />
-    {mostRecentNewsItem && <NewsPreviewLink headingLevel="h3" newsItem={mostRecentNewsItem} />}
-    <div class="grid-end margin-block-start-sm">
-      <a href={`/${locale}/news`} class="btn">
-        {t(tPage, { key: 'aw-news' })} ▷
-      </a>
-    </div>
+    <NewsIndex newsItems={mostRecentNewsItem ? [mostRecentNewsItem] : []} headingLevel="h3" />
+    {
+      mostRecentNewsItem && (
+        <div class="grid-span-2 grid-end margin-block-start-sm">
+          <a href={`/${locale}/news`} class="btn">
+            {t(tPage, { key: 'aw-news' })} ▷
+          </a>
+        </div>
+      )
+    }
   </section>
 
   <section>
diff --git a/src/pages/[locale]/news/index.astro b/src/pages/[locale]/news/index.astro
index 8a6e322..6e95884 100644
--- a/src/pages/[locale]/news/index.astro
+++ b/src/pages/[locale]/news/index.astro
@@ -5,8 +5,8 @@ import Page from '$layouts/Page.astro';
 import getLocaleFromPath from '$lib/getLocaleFromPath';
 import localeStaticPaths from '$lib/localeStaticPaths';
 import { getCollection } from 'astro:content';
-import NewsPreviewLink from '$components/NewsPreviewLink.astro';
 import { isNewsItemInLocale } from '$lib/newsUtils';
+import NewsIndex from '$components/NewsIndex/NewsIndex.astro';
 
 const allNews = await getCollection('news');
 const locale = getLocaleFromPath(Astro.url.pathname);
@@ -21,14 +21,6 @@ export async function getStaticPaths() {
 <Page title={t(tPage, { key: 'title' })}>
   <section>
     <h1>{t(tPage, { key: 'title' })}</h1>
-    <div class="news-index">
-      {
-        allNewsInLocale.length > 0 ? (
-          allNewsInLocale.map((item) => <NewsPreviewLink headingLevel="h2" newsItem={item} />)
-        ) : (
-          <p>{t(tPage, { key: 'no-news' })}</p>
-        )
-      }
-    </div>
+    <NewsIndex newsItems={allNewsInLocale} headingLevel="h2" />
   </section>
 </Page>