fixes filter by year type in viz builder and better formatting on dea…

…ths page
Datawheel · Dec 17, 2024 · a2a7a01 · a2a7a01
1 parent 5eee646
commit a2a7a01
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 100 deletions.
diff --git a/app/[locale]/page.jsx b/app/[locale]/page.jsx
@@ -122,13 +122,6 @@ export default async function Home() {
           page, where we list the biographies of influential celebrities,
           artists, leaders, and cultural icons who passed away this year.
         </p>
-        <p>
-          This comprehensive timeline serves as a historical record and tribute,
-          allowing you to explore month by month the remarkable individuals who
-          shaped our collective cultural memory. From entertainers to
-          scientists, political figures to artists, discover their stories and
-          lasting impact on human history.
-        </p>
       </div>
 
       <TrendingGrid

diff --git a/app/[locale]/profile/deaths/[id]/page.jsx b/app/[locale]/profile/deaths/[id]/page.jsx
@@ -16,12 +16,21 @@ async function getPeopleDiedThisYear(yearNum) {
   return res.json();
 }
 
-export async function generateMetadata({params}) {
+export async function generateMetadata({params}, parent) {
   // read route params
   const year = params.id;
 
+  // optionally access and extend (rather than replace) parent metadata
+  const previousImages = (await parent).openGraph?.images || [];
+
   return {
     title: `${year} Celebrity Deaths | Pantheon`,
+    openGraph: {
+      images: [
+        `https://static.pantheon.world/profile/deaths/deaths-${year}.jpg`,
+        ...previousImages,
+      ],
+    },
   };
 }
 

diff --git a/components/deaths/DeathsByMonth.css b/components/deaths/DeathsByMonth.css
@@ -3,7 +3,8 @@
 
   .people-grid {
     display: grid;
-    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 0.75rem;
   }
 
   .person-card {
@@ -14,15 +15,16 @@
   }
 
   .image-column img {
-    width: 100px; /* adjust size as needed */
-    height: 100px; /* adjust size as needed */
+    width: 100px;
+    height: 100px;
     object-fit: cover;
   }
 
   .text-column {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    min-width: 0;
   }
 
   .text-column h4 {

diff --git a/components/deaths/PeopleGrid.css b/components/deaths/PeopleGrid.css
@@ -1,13 +1,12 @@
 .people-grid {
     display: grid;
-    /* Define columns: three per row if space allows, otherwise adjust responsively */
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    grid-gap: 1rem; /* space between cards */
-    /* padding: 1rem; */
+    /* Adjust grid to show 2 items per row on mobile, 3+ on larger screens */
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    grid-gap: 0.75rem;
     margin: 40px 0;
-  }
-  
-  .person-card {
+}
+
+.person-card {
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 4px;
@@ -16,42 +15,84 @@
     flex-direction: column;
     text-decoration: none !important;
     cursor: pointer;
-  }
-
-  .person-card__image {
+    min-width: 0; /* Prevents cards from overflowing grid */
+}
+
+.person-card__image {
     width: 100%;
     height: auto;
     overflow: hidden;
-  }
-  
-  .person-card__image img {
+}
+
+.person-card__image img {
     width: 100%;
     height: auto;
     display: block;
     object-fit: cover;
-  }
-  
-  .person-card__info {
+}
+
+.person-card__info {
     padding: 0.75rem;
-  }
-  
-  .person-card__name {
+}
+
+.person-card__name {
     margin: 0;
-    font-size: 1.3rem;
+    font-size: 1.1rem;
     font-weight: bold;
-  }
+}
 
-  .person-card__occupation {
+.person-card__occupation {
     margin: 0.5rem 0 0;
-    font-size: 1.1rem;
+    font-size: 0.9rem;
     color: #555;
-  }
-  
-  .person-card__dates,
-  .person-card__age,
-  .person-card__hpi {
+}
+
+.person-card__dates,
+.person-card__age,
+.person-card__hpi {
     margin: 0.5rem 0 0;
-    font-size: 1.1rem;
+    font-size: 0.9rem;
     color: #555;
-  }
-
+}
+
+/* Add media queries for larger screens */
+@media (min-width: 768px) {
+    .people-grid {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        grid-gap: 1rem;
+    }
+
+    .person-card__name {
+        font-size: 1.3rem;
+    }
+
+    .person-card__occupation,
+    .person-card__dates,
+    .person-card__age,
+    .person-card__hpi {
+        font-size: 1.1rem;
+    }
+}
+
+/* Add these styles at the bottom of the file */
+.view-more-link {
+    text-align: center;
+    margin: 2rem 0;
+}
+
+.view-more-link a {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    background-color: #f5f5f5;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    color: #333;
+    text-decoration: none;
+    font-size: 1.1rem;
+    transition: all 0.2s ease;
+}
+
+.view-more-link a:hover {
+  background-color: #e5e5e5;
+  transform: translateY(-1px);
+}
diff --git a/components/deaths/PeopleGrid.jsx b/components/deaths/PeopleGrid.jsx
@@ -3,47 +3,55 @@ import "./PeopleGrid.css";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import {toTitleCase} from "../utils/vizHelpers";
+import Link from "next/link";
 
 dayjs.extend(advancedFormat);
 
 const PeopleGrid = ({bios}) => (
-  <div className="people-grid">
-    {bios.map(profile => (
-      <a
-        href={`/profile/person/${profile.slug}`}
-        className="person-card"
-        key={profile.pid || profile.id}
-      >
-        <div className="person-card__image">
-          <PersonImage
-            src={`/profile/people/${profile.pid || profile.id}.jpg`}
-            alt={`Photo of ${profile.name}`}
-            fallbackSrc="https://static.pantheon.world/icons/icon-person.svg"
-          />
-        </div>
-        <div className="person-card__info">
-          <h2 className="person-card__name">{profile.name}</h2>
-          <h3 className="person-card__occupation">
-            {profile.bplace_country?.demonym
-              ? `${profile.bplace_country?.demonym} ${toTitleCase(
-                  profile.occupation?.occupation
-                )}`
-              : `${toTitleCase(profile.occupation?.occupation)}`}
-          </h3>
-          <p className="person-card__dates">
-            <span>
-              {dayjs(profile.birthdate).format("MMM D, YYYY")} -{" "}
-              {dayjs(profile.deathdate).format("MMM D, YYYY")}
-            </span>
-          </p>
-          <p className="person-card__age">
-            Age {parseInt(profile.deathyear) - parseInt(profile.birthyear)}
-          </p>
-          <p className="person-card__hpi">HPI: {profile.hpi.toFixed(2)}</p>
-        </div>
-      </a>
-    ))}
-  </div>
+  <>
+    <div className="people-grid">
+      {bios.map(profile => (
+        <a
+          href={`/profile/person/${profile.slug}`}
+          className="person-card"
+          key={profile.pid || profile.id}
+        >
+          <div className="person-card__image">
+            <PersonImage
+              src={`/profile/people/${profile.pid || profile.id}.jpg`}
+              alt={`Photo of ${profile.name}`}
+              fallbackSrc="https://static.pantheon.world/icons/icon-person.svg"
+            />
+          </div>
+          <div className="person-card__info">
+            <h2 className="person-card__name">{profile.name}</h2>
+            <h3 className="person-card__occupation">
+              {profile.bplace_country?.demonym
+                ? `${profile.bplace_country?.demonym} ${toTitleCase(
+                    profile.occupation?.occupation
+                  )}`
+                : `${toTitleCase(profile.occupation?.occupation)}`}
+            </h3>
+            <p className="person-card__dates">
+              <span>
+                {dayjs(profile.birthdate).format("MMM D, YYYY")} -{" "}
+                {dayjs(profile.deathdate).format("MMM D, YYYY")}
+              </span>
+            </p>
+            <p className="person-card__age">
+              Age {parseInt(profile.deathyear) - parseInt(profile.birthyear)}
+            </p>
+            <p className="person-card__hpi">HPI: {profile.hpi.toFixed(2)}</p>
+          </div>
+        </a>
+      ))}
+    </div>
+    <div className="view-more-link">
+      <Link href="/explore/rankings?show=people&years=2024,2024&yearType=deathyear">
+        View Full List of 2024 Deaths Ranked by HPI →
+      </Link>
+    </div>
+  </>
 );
 
 export default PeopleGrid;
diff --git a/components/explore/YearControl.jsx b/components/explore/YearControl.jsx
@@ -2,7 +2,7 @@
 import {useState} from "react";
 import {useDispatch, useSelector} from "react-redux";
 import {FORMATTERS} from "../utils/consts";
-import {updateYears} from "../../features/exploreSlice";
+import {updateYears, updateYearType} from "../../features/exploreSlice";
 
 const ENTER_KEY_CODE = 13;
 const MAX_ALLOWED_YEAR = new Date().getFullYear();
@@ -67,14 +67,16 @@ export default function YearControl() {
     }
   };
 
+  const yearTypeChange = yearType => {
+    dispatch(updateYearType(yearType));
+  };
+
   return (
     <div className="year-control filter">
       <ul className="items options flat-options filter">
         <li>
           <a
-            onClick={e =>
-              loading ? null : this.changeYearType("birthyear", e)
-            }
+            onClick={e => yearTypeChange("birthyear", e)}
             href="#"
             id="birthyear"
             className={getClasName("birthyear", yearType, loading)}
@@ -84,9 +86,7 @@ export default function YearControl() {
         </li>
         <li>
           <a
-            onClick={e =>
-              loading ? null : this.changeYearType("deathyear", e)
-            }
+            onClick={e => yearTypeChange("deathyear", e)}
             href="#"
             id="deathyear"
             className={getClasName("deathyear", yearType, loading)}

diff --git a/components/utils/sanitizers.js b/components/utils/sanitizers.js
@@ -66,7 +66,7 @@ export const SANITIZERS = {
   },
   gender: gender =>
     ["F", "f", "M", "m"].includes(gender) ? gender.toUpperCase() : null,
-  yearType: yearType => (yearType === "deathyear" ? yearType : "birthyear"),
+  yearType: yearType => (yearType === "deathyear" ? "deathyear" : "birthyear"),
   placeType: placeType =>
     placeType === "deathplace" ? placeType : "birthplace",
   country: place =>

diff --git a/features/Explore.jsx b/features/Explore.jsx
@@ -22,6 +22,7 @@ import {
   updateCity,
   updateGender,
   updateYears,
+  updateYearType,
   updateShowDepth,
   updateOccupation,
   updateOnlyShowNew,
@@ -77,10 +78,13 @@ function Explore({places, occupations, pageType}) {
     const queryParamOccupation =
       SANITIZERS.occupation(searchParams.get("occupation"), occupations) ||
       "all";
-    console.log("queryParamOccupation!!", queryParamOccupation);
+
     const queryParamCity = SANITIZERS.city(searchParams.get("place")) || "all";
     const queryParamGender = SANITIZERS.gender(searchParams.get("gender"));
     const queryParamYears = SANITIZERS.years(searchParams.get("years"));
+    const queryParamYearType = SANITIZERS.yearType(
+      searchParams.get("yearType")
+    );
     const queryParamNew = SANITIZERS.new(searchParams.get("new"));
     dispatch(
       updateShowDepth({
@@ -94,6 +98,7 @@ function Explore({places, occupations, pageType}) {
     dispatch(updateCity(queryParamCity));
     dispatch(updateGender(queryParamGender));
     dispatch(updateYears(queryParamYears));
+    dispatch(updateYearType(queryParamYearType));
     dispatch(updateOnlyShowNew(queryParamNew));
     dispatch(setFirstLoad());
   }, []);
@@ -109,6 +114,7 @@ function Explore({places, occupations, pageType}) {
     occupation,
     gender,
     years,
+    yearType,
     metricCutoff,
     metricType,
     onlyShowNew,