feat: add news items to homepage

Author: dmijatovic

frontend/components/home/kin/TopNewsSection.tsx

@@ -0,0 +1,74 @@
+// SPDX-FileCopyrightText: 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2024 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import Link from 'next/link'
+import {TopNewsProps} from '~/components/news/apiNews'
+import GradientBorderButton from './GradientBorderButton'
+import {config} from './config'
+import HomepageDivider from './HomepageDivider'
+
+const {button} = config
+
+function TopNewsItem({item}:{item:TopNewsProps}){
+  return (
+    <Link
+      href={`/news/${item.publication_date}/${item.slug}`}
+    >
+      <article className="flex gap-4 items-start" data-aos="fade" data-aos-delay="0">
+        {/* <LandingPageImpactIcon className="h-auto mr-5 pt-1 scale-125 flex-shrink-0" /> */}
+        <div>
+          <h3 className="mb-4 text-2xl font-medium">{item.title}</h3>
+          <p className="text-lg opacity-70">{item.summary}</p>
+        </div>
+
+      </article>
+    </Link>
+  )
+}
+/**
+ * Top news items including the homepage divider.
+ * If there are no news items it returns null.
+ * */
+export default function TopNewsSection({news}:{news:TopNewsProps[]}) {
+
+  // console.group('TopNewsSection')
+  // console.log('news...',news)
+  // console.groupEnd()
+
+  if (news?.length > 0){
+    return (
+      <>
+        <section
+          id="top-news"
+          className="p-5 md:p-10 w-full max-w-screen-xl mx-auto">
+
+          <h2 className="flex justify-start text-3xl lg:text-4xl font-rsd-titles font-bold mt-6"
+            data-aos="fade" data-aos-duration="400" data-aos-easing="ease-in-out">
+            Latest news
+          </h2>
+
+          <div className="grid gap-20 grid-cols-1 md:grid-cols-2 pt-14">
+            {news.map(item=>{
+              return <TopNewsItem key={item.id} item={item} />
+            })}
+            <div className="flex justify-center items-center"
+              data-aos="fade"
+              data-aos-easing="ease-in-out"
+              data-aos-duration="500"
+            >
+              <GradientBorderButton
+                text={button.news.label}
+                url={button.news.url}
+                target={button.news.target}
+              />
+            </div>
+          </div>
+        </section>
+        <HomepageDivider />
+      </>
+    )
+  }
+  return null
+}

frontend/components/home/kin/index.tsx

@@ -14,13 +14,15 @@ import 'aos/dist/aos.css'
 import AppHeader from '~/components/AppHeader'
 import AppFooter from '~/components/AppFooter'
 import Arc from '~/components/home/rsd/arc.svg'
+import {TopNewsProps} from '~/components/news/apiNews'
 import JumboBanner from './JumboBanner'
 import HomepageDivider from './HomepageDivider'
 import AboutUsSection from './AboutUsSection'
 import OurProgramsSection from './OurProgramsSection'
 import ContributeSection from './ContributeSection'
+import TopNewsSection from './TopNewsSection'
 
-export default function RsdHome() {
+export default function RsdHome({news}:{news:TopNewsProps[]}) {
   // Initialize AOS library
   useEffect(() => {
     AOS.init({offset: 16})
@@ -37,6 +39,8 @@ export default function RsdHome() {
       <div className="bg-base-800">
         {/* Arc separator  */}
         <Arc className="w-full text-base-100 dark:text-base-900 -translate-y-1"></Arc>
+        {/* Top 3 news items, ONLY if there are some */}
+        <TopNewsSection news={news} />
         {/* Our Programs Section */}
         <OurProgramsSection />
         {/*  Divider  */}

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kin-rpd-frontend",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

frontend/pages/index.tsx

@@ -42,7 +42,7 @@ export default function Home({counts,news}: HomeProps) {
       />
       {/* canonical url meta tag */}
       <CanonicalUrl/>
-      <KinRpdHome />
+      <KinRpdHome news={news} />
     </>
   )
 }