feat: make news get data from tgno-backend api (#2)

* feat: use api to get news

* feat: get news from api

* chor: run pnpm update

* fix: better layout on desktop

* feat: add .env.example file

* feat: add limiter to the newscomp

.env.development

@@ -0,0 +1,5 @@
+# This file is used to set the environment variables for the development environment
+# Remember to update /src/env.d.ts with the same variables for IntelliSense for TypeScript
+
+# API_URL="http://localhost:8000/"
+API_URL="https://dev.tg.no/"

.env.example

@@ -0,0 +1,4 @@
+# This file is used to set the environment variables for the development environment
+# Remember to update /src/env.d.ts with the same variables for IntelliSense for TypeScript
+
+API_URL=

package.json

@@ -13,7 +13,7 @@
     "@astrojs/check": "^0.9.3",
     "@astrojs/node": "^8.3.3",
     "@astrojs/tailwind": "^5.1.0",
-    "astro": "^4.15.4",
+    "astro": "^4.15.6",
     "tailwindcss": "^3.4.11",
     "typescript": "^5.6.2"
   }

src/components/Main.astro

@@ -1,3 +1,3 @@
-<main class="px-24 max-w-7xl mx-auto w-full max-sm:px-5">
+<main class="px-24 max-w-7xl mx-auto w-full sm:flex-1 max-sm:px-5">
   <slot/>
 </main>

src/components/NewsComp.astro

@@ -2,77 +2,87 @@
 import  H2 from './H2.astro';
 interface Article {
   id: number;
+  meta: {
+    type: string;
+    detail_url: string;
+    html_url: string;
+    slug: string;
+    first_published_at: string;
+  };
   title: string;
-  category: string;
-  date: string;
-  thumbnail: {
+  tags: Array<{
+    id: number;
+    name: string;
+    slug: string;
+  }>;
+  main_image: {
     url: string;
+    full_url: string;
+    width: number;
+    height: number;
+    alt: string;
   };
 }
 
-const articleTest = [
-  {
-    id: 1,
-    title: 'The calm before the LAN',
-    category: 'Behind the scenes',
-    date: '2022-04-13',
-    thumbnail: {
-      url: '/images/tg23-oversikt.jpg',
-    },
-  },
-  {
-    id: 2,
-    title: 'Achivements return',
-    category: 'Activities, Achievements',
-    date: '2021-04-13',
-    thumbnail: {
-      url: '/images/tg23-oversikt.jpg',
-    },
-  },
-  {
-    id: 3,
-    title: 'Arne?',
-    category: 'Arne??',
-    date: '2020-04-13',
-    thumbnail: {
-      url: '/images/tg23-oversikt.jpg',
-    },
-  },
-  {
-    id: 4,
-    title: "New wallpaper for this year's theme",
-    category: 'Behind the scenes, Creative',
-    date: '2019-04-13',
-    thumbnail: {
-      url: '/images/tg23-oversikt.jpg',
-    },
-  },
-  ]
+type Props = {
+	articleLimit?: number;
+};
+const { articleLimit = 0 } = Astro.props;
 
 const fetchArticles = async (): Promise<Article[]> => {
-  // const response = await fetch('https://your-wagtail-site.com/api/v2/pages/?type=yourapp.ArticlePage&fields=title,category,date,thumbnail&order=-date&limit=4');
-  // const data = await response.json();
-  // return data.items;
-  return articleTest;
-}
+  const baseurl = `${import.meta.env.API_URL}api/v2/news/?fields=title,tags,first_published_at,main_image&order=-first_published_at`;
+  
+  const validLimit = articleLimit >= 1 ? `&limit=${articleLimit}` : '';
+  
+  const response = await fetch(
+    `${baseurl}${validLimit}`,
+  );
+  const data = await response.json();
+  const articles: Article[] = data.items;
+  return articles;
+};
 
 const articles = await fetchArticles();
 ---
 
 <section>
   <H2 text="News >_" />
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:px-44">
-      {articles.map(article => (
-        <a href="#">
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:px-44">
+    {
+      articles.map((article) => (
+        <a href={`/news/${article.meta.slug}`}>
           <article class="overflow-hidden flex flex-row p-4">
             <div class="flex-1">
-              <span class="text-sm text-orange-500">{article.category}</span>
+              <div class="text-sm text-orange-500">
+                {article.tags
+                  .map((tag) => {
+                    return tag.name.charAt(0).toUpperCase() + tag.name.slice(1);
+                  })
+                  .join(", ")}
+              </div>
               <h3 class="text-xl text-white font-bold mt-2">{article.title}</h3>
-              <time datetime={article.date} class="text-sm text-gray-500">{new Date(article.date).toLocaleDateString()}</time>
+              <time
+                datetime={article.meta.first_published_at}
+                class="text-sm text-gray-500"
+              >
+                {new Date(article.meta.first_published_at).toLocaleDateString(
+                  "en-US",
+                  {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  },
+                )}
+              </time>
             </div>
-            <img src={article.thumbnail.url} alt={article.title} class="w-24 h-24 object-cover ml-2 rounded-lg" />
+            <img
+              src={article.main_image.full_url}
+              alt={article.main_image.alt}
+              class="w-24 h-24 object-cover ml-2 rounded-lg"
+            />
           </article>
         </a>
-      ))}
-    </div>
+      ))
+    }
+  </div>
 </section>

src/env.d.ts

@@ -1 +1,5 @@
-/// <reference path="../.astro/types.d.ts" />
+/// <reference path="../.astro/types.d.ts" />
+
+interface ImportMetaEnv {
+  readonly API_URL: string;
+}

src/layouts/Layout.astro

@@ -27,7 +27,7 @@ image = "/images/tg.jpg"
 
 		<title>{title}</title>
 	</head>
-	<body class="min-h-screen bg-background">
+	<body class="min-h-screen bg-background sm:flex sm:flex-col">
 		<Header/>
 		<slot />
 		<Sponsors />

src/pages/index.astro

@@ -12,6 +12,6 @@ import Hero from '../components/Hero.astro';
 			<H1 text="JOIN NORWAY'S LARGEST EASTER HUT"/>
 		</div>
 		<Hero image="/images/tg23-oversikt.jpg" />
-		<NewsComp />
+		<NewsComp articleLimit={4} />
 	</Main>
 </Layout>

src/pages/news/[slug].astro

@@ -0,0 +1,95 @@
+---
+import H1 from "../../components/H1.astro";
+import Main from "../../components/Main.astro";
+import Layout from "../../layouts/Layout.astro";
+
+interface Article {
+  id: number;
+  meta: {
+    type: string;
+    detail_url: string;
+    html_url: string;
+    slug: string;
+    first_published_at: string;
+  };
+  title: string;
+  intro: string;
+  body: string;
+  tags: Array<{
+    id: number;
+    name: string;
+    slug: string;
+  }>;
+  main_image: {
+    url: string;
+    full_url: string;
+    width: number;
+    height: number;
+    alt: string;
+  };
+}
+
+
+const { slug } = Astro.params;
+const fetchArticleIdBySlug = async (slug: string): Promise<number | null> => {
+  const response = await fetch(
+    `${import.meta.env.API_URL}api/v2/news/?&slug=${slug}`
+  );
+  const data = await response.json();
+  const articles: Article[] = data.items;
+  if (articles.length > 0) {
+    return articles[0].id;
+  } else {
+    return null;
+  }
+};
+
+if (!slug) {
+  throw new Error('Slug is not defined');
+}
+const articleId = await fetchArticleIdBySlug(slug);
+
+if (!articleId) {
+  throw new Error('Article not found');
+}
+
+const fetchArticleById = async (id: number): Promise<Article> => {
+  const response = await fetch(
+    `${import.meta.env.API_URL}api/v2/news/${id}/`
+  );
+  const data = await response.json();
+  return data;
+};
+
+const article = await fetchArticleById(articleId);
+---
+
+<Layout title=`The Gathering - ${article.title}`>
+  <Main>
+    <!-- Article Title -->
+     <H1 text=`${article.title}`/>
+    <!-- Display Tags -->
+    <p class="text-sm text-gray-600 mb-2">
+      {article.tags
+        .map((tag) => {
+          return tag.name
+            .split(' ')
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+        })
+        .join(', ')}
+    </p>
+    <!-- Publish Date -->
+    <time datetime={article.meta.first_published_at} class="text-sm text-gray-500 mb-4 block">
+      {new Date(article.meta.first_published_at).toLocaleDateString()}
+    </time>
+    <!-- Main Image -->
+    <img
+      src={article.main_image.full_url}
+      alt={article.main_image.alt}
+      class="w-auto h-auto mb-4"
+    />
+    <!-- Article Content -->
+    <div class="text-white" set:html={article.body}></div>
+  </Main>
+</Layout>

src/pages/news/index.astro

@@ -0,0 +1,12 @@
+---
+import Main from '../../components/Main.astro';
+import NewsComp from '../../components/NewsComp.astro';
+import Layout from '../../layouts/Layout.astro';
+---
+
+
+		<Layout title="The Gathering - News">
+			<Main>
+				<NewsComp />
+			</Main>
+		</Layout>