3 files changed, 82 insertions, 33 deletions
diff --git a/public/main.css b/public/main.css
index 0b88656..1fdf2ab 100644
--- a/public/main.css
+++ b/public/main.css
@@ -287,47 +287,29 @@ ol li {
   }
 }
 
-.news-post {
-  margin-block: 1.5rem;
-  margin-inline: 0.5rem;
-  width: 30%;
-  border: solid 2px var(--text-color);
-  color: var(--text-color);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-inline: var(--spacing-inline-sm);
-  padding-block: var(--spacing-block-sm);
-  transition:
-    background-color 300ms,
-    color 300ms,
-    transform 50ms;
-}
-
-.news-post:hover {
-  background-color: var(--background-highlight-color);
-  color: var(--text-highlight-color);
+.news-index {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-block-lg);
 }
 
-.news-post:active {
-  transform: scale(1.1, 1.1);
+.news-index__item {
+  display: block;
+  transition: background 300ms;
+  padding-block: var(--spacing-block-md);
+  padding-inline: var(--spacing-inline-sm);
 }
 
-.news-post__title {
-  padding-block: 0;
-  text-decoration: underline;
-  transition: text-decoration 300ms;
+.news-index__item:hover {
+  background: var(--background-highlight-color);
 }
 
-.news-post:hover .news-post__title {
-  text-decoration-color: transparent;
+.news-index__item :first-child {
+  margin-block-start: 0;
 }
 
-.news-post__summary {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  white-space: normal;
-  font-size: var(--font-size-sm);
+.news-index__item :last-child {
+  margin-block-end: 0;
 }
 
 footer {
diff --git a/src/i18n/translations/pages/news.ts b/src/i18n/translations/pages/news.ts
new file mode 100644
index 0000000..0cc411a
--- /dev/null
+++ b/src/i18n/translations/pages/news.ts
@@ -0,0 +1,19 @@
+import type { TranslationsDictionary } from '$types/TranslationsDictionary';
+
+const tPage = {
+  title: {
+    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!',
+  },
+};
+
+type Raw = typeof tPage;
+export default tPage as TranslationsDictionary<Raw>;
diff --git a/src/pages/[locale]/news/index.astro b/src/pages/[locale]/news/index.astro
new file mode 100644
index 0000000..3e1b994
--- /dev/null
+++ b/src/pages/[locale]/news/index.astro
@@ -0,0 +1,48 @@
+---
+import translate from '$i18n/translate';
+import tPage from '$i18n/translations/pages/news';
+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';
+
+const allNews = await getCollection('news');
+const locale = getLocaleFromPath(Astro.url.pathname);
+const allNewsInLocale = allNews.filter(isInLocale);
+const t = translate(locale);
+
+function isInLocale(newsItem: (typeof allNews)[number]) {
+  const srcPath = newsItem.id;
+  const newsItemLocale = srcPath.slice(0, srcPath.indexOf('/'));
+  return newsItemLocale === locale;
+}
+
+export async function getStaticPaths() {
+  return localeStaticPaths;
+}
+---
+
+<Page title={t(tPage, { key: 'title' })}>
+  <section>
+    <h1>{t(tPage, { key: 'title' })}</h1>
+    <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>
+          ))
+        ) : (
+          <p>{t(tPage, { key: 'no-news' })}</p>
+        )
+      }
+    </div>
+  </section>
+</Page>