Merge branch 'main' into feature/f-161-lighthouse-best-practices-score

next-sitemap.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: 'https://localhost:3000', // local temporary
+  generateRobotsTxt: true,
+  changefreq: 'daily',
+  priority: 0.7,
+};

package.json

@@ -10,11 +10,13 @@
     "lint:fix": "eslint . --ext .ts,.tsx -c .eslintrc.json --fix",
     "format": "prettier --write .",
     "format:fix": "prettier .",
-    "prepare": "husky"
+    "prepare": "husky",
+    "postbuild": "next-sitemap"
   },
   "dependencies": {
     "@internationalized/date": "^3.6.0",
     "@nextui-org/accordion": "^2.0.40",
+    "@nextui-org/alert": "^2.2.7",
     "@nextui-org/button": "^2.0.38",
     "@nextui-org/card": "^2.0.34",
     "@nextui-org/chip": "^2.0.33",
@@ -36,7 +38,7 @@
     "@nextui-org/switch": "^2.0.34",
     "@nextui-org/system": "2.2.6",
     "@nextui-org/table": "^2.0.40",
-    "@nextui-org/theme": "2.2.11",
+    "@nextui-org/theme": "^2.3.0",
     "@nextui-org/tooltip": "^2.0.41",
     "@react-aria/ssr": "3.9.4",
     "@react-aria/visually-hidden": "3.8.12",
@@ -59,7 +61,8 @@
     "leaflet-defaulticon-compatibility": "^0.1.2",
     "leaflet-geosearch": "^4.0.0",
     "lucide-react": "^0.454.0",
-    "next": "14.2.10",
+    "next": "14.2.15",
+    "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
     "nextui-cli": "^0.3.4",
     "react": "18.3.1",
@@ -72,6 +75,7 @@
     "react-pdf": "^9.1.1",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.0",
+    "sharp": "^0.33.5",
     "tailwind-variants": "0.1.20",
     "uuid": "^11.0.3"
   },

public/robots.txt

@@ -0,0 +1,9 @@
+# *
+User-agent: *
+Allow: /
+
+# Host
+Host: https://localhost:3000
+
+# Sitemaps
+Sitemap: https://localhost:3000/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
+<url><loc>https://localhost:3000/about</loc><lastmod>2024-12-17T19:34:24.137Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/data_sources</loc><lastmod>2024-12-17T19:34:24.138Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/elements</loc><lastmod>2024-12-17T19:34:24.138Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/disclaimer</loc><lastmod>2024-12-17T19:34:24.138Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000</loc><lastmod>2024-12-17T19:34:24.138Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/wiki</loc><lastmod>2024-12-17T19:34:24.138Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/download-portal</loc><lastmod>2024-12-17T19:34:24.138Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+</urlset>

src/app/about/layout.tsx

@@ -1,15 +1,61 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
+import { siteConfig } from '@/config/site';
 
 export const metadata: Metadata = {
-  title: 'About',
+  title: {
+    default: 'About',
+    template: `%s - ${siteConfig.name}`,
+  },
+  description:
+    'Learn more about the WFP Hunger Map, its mission, and how it provides real-time global hunger data and food insecurity trends.',
+  keywords: siteConfig.keywords,
+  openGraph: {
+    title: `About Us - ${siteConfig.name}`,
+    description:
+      'Discover the mission and purpose behind the WFP Hunger Map, providing real-time global hunger data and insights.',
+    url: `${siteConfig.domain}/about`,
+    images: [
+      {
+        url: '/Images/About-preview.png',
+        width: 1200,
+        height: 630,
+        alt: `About Us - ${siteConfig.name}`,
+      },
+    ],
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: `About Us - ${siteConfig.name}`,
+    description:
+      'Learn more about how the WFP Hunger Map helps visualize real-time global hunger and food insecurity trends.',
+    images: [
+      {
+        url: '/Images/About-preview.png',
+        width: 1200,
+        height: 630,
+        alt: `About Us - ${siteConfig.name}`,
+      },
+    ],
+    site: '@WFP',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    nocache: false,
+  },
 };
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content !pt-1">{children}</main>
     </div>
   );

src/app/comparison-portal/layout.tsx

@@ -0,0 +1,62 @@
+import { Metadata } from 'next';
+
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
+import { Topbar } from '@/components/Topbar/Topbar';
+import { siteConfig } from '@/config/site';
+
+export const metadata: Metadata = {
+  title: {
+    default: 'Comparison Portal',
+    template: `%s - ${siteConfig.name}`,
+  },
+  description:
+    'Compare real-time global hunger data across different countries and regions. Obtain food insecurity statistics from the WFP Hunger Map Comparison Portal, tailored to various time zones. A valuable resource for humanitarian efforts and research.',
+  keywords: siteConfig.keywords,
+  openGraph: {
+    title: `Comparison Portal - ${siteConfig.name}`,
+    description:
+      'Compare real-time global hunger data across different countries and regions. Obtain food insecurity statistics from the WFP Hunger Map Comparison Portal, tailored to various time zones. Essential for humanitarian aid and research.',
+    url: `${siteConfig.domain}/comparison-portal`,
+    images: [
+      {
+        url: '/Images/Comparison-preview.png',
+        width: 1200,
+        height: 630,
+        alt: `Comparison Portal - ${siteConfig.name}`,
+      },
+    ],
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: `Comparison Portal - ${siteConfig.name}`,
+    description:
+      'Access comparable global hunger data from the WFP Hunger Map Comparison Portal, tailored to different countries and time zones.',
+    images: [
+      {
+        url: '/Images/Comparison-preview.png',
+        width: 1200,
+        height: 630,
+        alt: `Comparison Portal - ${siteConfig.name}`,
+      },
+    ],
+    site: '@WFP',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    nocache: false,
+  },
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
+      <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content w-full">{children}</main>
+    </div>
+  );
+}

src/app/comparison-portal/page.tsx

@@ -0,0 +1,28 @@
+import { Suspense } from 'react';
+
+import ComparisonAccordionSkeleton from '@/components/ComparisonPortal/ComparisonAccordionSkeleton';
+import CountryComparison from '@/components/ComparisonPortal/CountryComparison';
+import CountrySelectionSkeleton from '@/components/ComparisonPortal/CountrySelectSkeleton';
+import container from '@/container';
+import { GlobalDataRepository } from '@/domain/repositories/GlobalDataRepository';
+
+export default async function ComparisonPortal() {
+  const globalRepo = container.resolve<GlobalDataRepository>('GlobalDataRepository');
+  const countryMapData = await globalRepo.getMapDataForCountries();
+  const globalFcsData = await globalRepo.getFcsData();
+  return (
+    <div>
+      <h1>Comparison Portal</h1>
+      <Suspense
+        fallback={
+          <>
+            <CountrySelectionSkeleton />
+            <ComparisonAccordionSkeleton />
+          </>
+        }
+      >
+        <CountryComparison countryMapData={countryMapData} globalFcsData={globalFcsData} />
+      </Suspense>
+    </div>
+  );
+}

src/app/data_sources/layout.tsx

@@ -1,15 +1,61 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
+import { siteConfig } from '@/config/site';
 
 export const metadata: Metadata = {
-  title: 'Data Sources',
+  title: {
+    default: 'Data Sources',
+    template: `%s - ${siteConfig.name}`,
+  },
+  description:
+    'Explore the data sources behind the WFP Hunger Map, providing insights into global hunger trends and food insecurity statistics.',
+  keywords: siteConfig.keywords,
+  openGraph: {
+    title: `Data Sources - ${siteConfig.name}`,
+    description:
+      'Explore the trusted data sources behind the WFP Hunger Map, offering real-time global hunger trends and food insecurity insights.',
+    url: `${siteConfig.domain}/data_sources`,
+    images: [
+      {
+        url: '/Images/Datasource-preview.png',
+        width: 1200,
+        height: 630,
+        alt: `Data Sources - ${siteConfig.name}`,
+      },
+    ],
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: `Data Sources - ${siteConfig.name}`,
+    description:
+      'Explore the trusted data sources that power the WFP Hunger Map for real-time hunger and food insecurity statistics.',
+    images: [
+      {
+        url: '/Images/Datasource-preview.png',
+        width: 1200,
+        height: 630,
+        alt: `Data Sources - ${siteConfig.name}`,
+      },
+    ],
+    site: '@WFP',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    nocache: false,
+  },
 };
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content !pt-1">{children}</main>
     </div>
   );

src/app/disclaimer/layout.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
 
 export const metadata: Metadata = {
@@ -9,7 +10,10 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content">{children}</main>
     </div>
   );

src/app/download-portal/layout.tsx

@@ -1,15 +1,61 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
+import { siteConfig } from '@/config/site';
 
 export const metadata: Metadata = {
-  title: 'Download Portal',
+  title: {
+    default: 'Download Portal',
+    template: `%s - ${siteConfig.name}`,
+  },
+  description:
+    'Access and download real-time global hunger data as PDF reports or JSON data. Obtain food insecurity statistics from the WFP Hunger Map Download Portal, tailored to different countries and time zones. A valuable resource for humanitarian efforts and research.',
+  keywords: siteConfig.keywords,
+  openGraph: {
+    title: `Download Portal - ${siteConfig.name}`,
+    description:
+      'Download real-time global hunger data as PDF reports or JSON data from the WFP Hunger Map Download Portal, tailored to different countries and time zones. Essential for humanitarian aid and research.',
+    url: `${siteConfig.domain}/download-portal`,
+    images: [
+      {
+        url: '/Images/Download-preview.png',
+        width: 1200,
+        height: 630,
+        alt: `Download Portal - ${siteConfig.name}`,
+      },
+    ],
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: `Download Portal - ${siteConfig.name}`,
+    description:
+      'Access downloadable global hunger data from the WFP Hunger Map Download Portal, tailored to different countries and time zones.',
+    images: [
+      {
+        url: '/Images/Download-preview.png',
+        width: 1200,
+        height: 630,
+        alt: `Download Portal - ${siteConfig.name}`,
+      },
+    ],
+    site: '@WFP',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    nocache: false,
+  },
 };
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content">{children}</main>
     </div>
   );