4 files changed, 33 insertions, 15 deletions
diff --git a/src/components/NewsPreviewLink.astro b/src/components/NewsPreviewLink.astro
new file mode 100644
index 0000000..99ecb60
--- /dev/null
+++ b/src/components/NewsPreviewLink.astro
@@ -0,0 +1,20 @@
+---
+import translate from '$i18n/translate';
+import tNewsPreviewLink from '$i18n/translations/components/newsPreviewLink';
+import type Locale from '$types/Locale';
+import type { CollectionEntry } from 'astro:content';
+
+interface Props {
+  locale: Locale;
+  newsItem: CollectionEntry<'news'>;
+}
+
+const { locale, newsItem } = Astro.props;
+const t = translate(locale);
+---
+
+<a class="news-index__item" href={`/${locale}/news/${newsItem.slug.replace('/', '-')}`}>
+  <h2>{newsItem.data.title}</h2>
+  <p>{newsItem.data.summary}</p>
+  <p class="link">{t(tNewsPreviewLink, { key: 'read-article' })}</p>
+</a>
diff --git a/src/i18n/translations/components/newsPreviewLink.ts b/src/i18n/translations/components/newsPreviewLink.ts
new file mode 100644
index 0000000..98b2dd9
--- /dev/null
+++ b/src/i18n/translations/components/newsPreviewLink.ts
@@ -0,0 +1,11 @@
+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 0cc411a..22517d1 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',
   },
-  'read-article': {
-    sco: () => 'Read fu airticle',
-    'en-GB': () => 'Read full article',
-  },
   '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!',
diff --git a/src/pages/[locale]/news/index.astro b/src/pages/[locale]/news/index.astro
index 3e1b994..42a17e2 100644
--- a/src/pages/[locale]/news/index.astro
+++ b/src/pages/[locale]/news/index.astro
@@ -5,7 +5,7 @@ import Page from '$layouts/Page.astro';
 import getLocaleFromPath from '$lib/getLocaleFromPath';
 import localeStaticPaths from '$lib/localeStaticPaths';
 import { getCollection } from 'astro:content';
-import relativePath from '$lib/relativePath';
+import NewsPreviewLink from '$components/NewsPreviewLink.astro';
 
 const allNews = await getCollection('news');
 const locale = getLocaleFromPath(Astro.url.pathname);
@@ -29,16 +29,7 @@ export async function getStaticPaths() {
     <div class="news-index">
       {
         allNewsInLocale.length > 0 ? (
-          allNewsInLocale.map((item) => (
-            <a
-              class="news-index__item"
-              href={relativePath(Astro.url.pathname, item.slug.replace('/', '-'))}
-            >
-              <h2>{item.data.title}</h2>
-              <p>{item.data.summary}</p>
-              <p class="link">{t(tPage, { key: 'read-article' })}</p>
-            </a>
-          ))
+          allNewsInLocale.map((item) => <NewsPreviewLink locale={locale} newsItem={item} />)
         ) : (
           <p>{t(tPage, { key: 'no-news' })}</p>
         )