diff --git a/package.json b/package.json index 7fd1c60e..f75b47d3 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "@nextui-org/card": "^2.0.34", "@nextui-org/chip": "^2.0.33", "@nextui-org/code": "2.0.33", - "pdfjs-dist": "3.11.174", "@nextui-org/dropdown": "^2.1.31", "@nextui-org/image": "^2.0.32", "@nextui-org/input": "2.2.5", @@ -62,7 +61,7 @@ "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", diff --git a/public/Images/Comparison-preview.png b/public/Images/Comparison-preview.png new file mode 100644 index 00000000..cdda7ab2 Binary files /dev/null and b/public/Images/Comparison-preview.png differ diff --git a/src/app/comparison-portal/layout.tsx b/src/app/comparison-portal/layout.tsx index 7443535c..a1c2903d 100644 --- a/src/app/comparison-portal/layout.tsx +++ b/src/app/comparison-portal/layout.tsx @@ -2,9 +2,51 @@ 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: 'Comparison Portal', + 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 }) { diff --git a/src/components/Accordions/AccordionModalSkeleton.tsx b/src/components/Accordions/AccordionModalSkeleton.tsx new file mode 100644 index 00000000..75bdae98 --- /dev/null +++ b/src/components/Accordions/AccordionModalSkeleton.tsx @@ -0,0 +1,17 @@ +import { Skeleton } from '@nextui-org/skeleton'; + +export default function AccordionModalSkeleton() { + return ( +
+ {/* For screens smaller than 450px */} +
+ +
+ + {/* For screens between 450px and 700px */} +
+ +
+
+ ); +} diff --git a/src/components/Map/FcsChoropleth.tsx b/src/components/Map/FcsChoropleth.tsx index 046a1389..a54cbf0c 100644 --- a/src/components/Map/FcsChoropleth.tsx +++ b/src/components/Map/FcsChoropleth.tsx @@ -12,6 +12,7 @@ import FcsChoroplethProps from '@/domain/props/FcsChoroplethProps'; import FcsChoroplethOperations from '@/operations/map/FcsChoroplethOperations'; import { MapOperations } from '@/operations/map/MapOperations'; +import AccordionModalSkeleton from '../Accordions/AccordionModalSkeleton'; import CountryLoadingLayer from './CountryLoading'; import FscCountryChoropleth from './FcsCountryChoropleth'; @@ -66,11 +67,14 @@ export default function FcsChoropleth({ )} {/* Animated GeoJSON layer for the selected country */} {selectedCountryId && (!regionData || !regionLabelData) && ( - + <> + + + )} {countryId === selectedCountryId && ( )} {!ipcRegionData && selectedCountryId && ( - feature?.properties?.adm0_id === selectedCountryId), - } as FeatureCollection - } - selectedCountryId={selectedCountryId} - color="hsl(var(--nextui-ipcAnimation))" - /> + <> + feature?.properties?.adm0_id === selectedCountryId), + } as FeatureCollection + } + selectedCountryId={selectedCountryId} + color="hsl(var(--nextui-ipcAnimation))" + /> + + )} {selectedCountryId && ( diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index 03afbb29..12e22bb4 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -94,6 +94,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma window.gtag('event', `${selectedCountryData.properties.iso3}_country_selected`, { selectedMap: selectedMapType, }); + window.gtag('event', `${selectedCountryData.properties.iso3} _${selectedMapType}_countrymap_selected`); setSelectedCountryName(selectedCountryData.properties.adm0_name); mapRef.current?.fitBounds(L.geoJSON(selectedCountryData as GeoJSON).getBounds(), { animate: true }); } diff --git a/src/components/Map/NutritionChoropleth.tsx b/src/components/Map/NutritionChoropleth.tsx index 4e4814a5..228aeda3 100644 --- a/src/components/Map/NutritionChoropleth.tsx +++ b/src/components/Map/NutritionChoropleth.tsx @@ -14,6 +14,7 @@ import NutritionChoroplethProps from '@/domain/props/NutritionChoroplethProps'; import { MapOperations } from '@/operations/map/MapOperations'; import NutritionChoroplethOperations from '@/operations/map/NutritionChoroplethOperations'; +import AccordionModalSkeleton from '../Accordions/AccordionModalSkeleton'; import CountryLoadingLayer from './CountryLoading'; import NutritionStateChoropleth from './NutritionStateChoropleth'; @@ -73,11 +74,14 @@ export default function NutritionChoropleth({ )} {/* Animated GeoJSON layer for the selected country */} {selectedCountryId && (!regionNutritionData || !regionLabelData) && ( - + <> + + + )} {countryId === selectedCountryId && (