amend employers page

src/helpers/employerHelper.js

@@ -0,0 +1,4 @@
+import data from "../../.sourceflow/employers.json";
+import CollectionHelper from "@/helpers/CollectionHelper";
+
+export const employerHelper = new CollectionHelper(data);

src/pages/great-places-to-work/[url_slug]/index.page.js

@@ -1,13 +1,13 @@
 import { Content } from "@/ui";
 import { getRoute } from "@/getters/getRoute";
 import unslug from "unslug";
-import { generateImage } from "@/faker/generateImage";
 import { generateBody } from "@/faker/generateBody";
 import { generateArrayOf } from "@/faker/generateArrayOf";
 import { generateTitle } from "@/faker/generateTitle";
 import { generateNarrativePanel } from "@/faker/generateNarrativePanel";
 import { generateJob } from "@/faker/generateJob";
 import { generatePromoItem } from "@/faker/generatePromoItem";
+import { employerHelper } from "@/helpers/employerHelper";
 
 export default function EmployerPage({ content }) {
   return (
@@ -18,6 +18,8 @@ export default function EmployerPage({ content }) {
 }
 
 export async function getStaticProps({ params: { url_slug } }) {
+  const employer = employerHelper.find(url_slug);
+
   return {
     props: {
       meta: {},
@@ -28,7 +30,7 @@ export async function getStaticProps({ params: { url_slug } }) {
             items: [
               { label: "Find a Job", href: getRoute("jobs") },
               { label: "Great Places To Work", href: getRoute("employers") },
-              { label: unslug(url_slug), href: getRoute("employer", { url_slug }) },
+              { label: employer.name, href: getRoute("employer", { url_slug }) },
             ],
           },
         },
@@ -37,16 +39,16 @@ export async function getStaticProps({ params: { url_slug } }) {
           props: {
             title: {
               path: `page.${url_slug}.component.Header.title`,
-              placeholder: `Working with ${unslug(url_slug)}`,
+              placeholder: `Working with ${employer.name}`,
             },
-            img: generateImage({ width: 1440, height: 365 }),
+            img: employer.cover_image ?? null,
           },
         },
         {
           component: "RichText",
           props: {
             className: "bg-primary text-white py-5",
-            body: generateBody(),
+            body: employer.content,
           },
         },
         {
@@ -104,5 +106,5 @@ export async function getStaticProps({ params: { url_slug } }) {
 }
 
 export async function getStaticPaths() {
-  return { paths: [], fallback: false };
+  return { paths: employerHelper.toPaths(), fallback: false };
 }

src/pages/great-places-to-work/index.page.js

@@ -1,5 +1,7 @@
 import { Content } from "@/ui";
 import { getRoute } from "@/getters/getRoute";
+import { employerHelper } from "@/helpers/employerHelper";
+import { getAsset } from "@/getters/getAsset";
 
 export default function EmployersPage({ content }) {
   return (
@@ -10,6 +12,8 @@ export default function EmployersPage({ content }) {
 }
 
 export async function getStaticProps() {
+  const employers = employerHelper.fetch();
+
   return {
     props: {
       meta: {},
@@ -29,6 +33,17 @@ export async function getStaticProps() {
             ],
           },
         },
+        {
+          component: "PromoSection",
+          props: {
+            items: employers.map((i) => ({
+              title: i.name,
+              description: i.description,
+              img: i.card_image ?? i.cover_image ?? getAsset("_theme.employer.card.img.fallback") ?? null,
+              href: getRoute("employer", { url_slug: i.url_slug }),
+            })),
+          },
+        },
       ],
     },
   };

src/ui/PromoItem/index.jsx

@@ -7,12 +7,10 @@ import { trimText } from "@/functions/trimText";
 export default function PromoItem({ className, title, img, description, href }) {
   return (
     <a href={href} className={clsx(className, classes.card)}>
-      <figure>
-        <SourceFlowImage src={img} size="380x220" alt={title} />
-      </figure>
+      <figure>{img && <SourceFlowImage src={img} size="380x220" alt={title} />}</figure>
       <div className={classes.card__body}>
         <h5>{trimText(title, 50)}</h5>
-        <p>{trimText(description, 150)}</p>
+        <div dangerouslySetInnerHTML={{ __html: description }} />
       </div>
     </a>
   );

src/ui/PromoItem/styles.module.scss

@@ -2,6 +2,7 @@
 
 .card {
   text-align: left;
+  border: 1px solid lightgray;
   border-top: 4px solid var(#{--bs-tertiary});
   border-top-right-radius: var(#{--bs-border-radius});
   border-top-left-radius: var(#{--bs-border-radius});
@@ -24,11 +25,12 @@
   &__body {
     flex-grow: 1;
     padding: $spacer * 2 $spacer $spacer;
-    border: 1px solid lightgray;
+    border-top: 1px solid lightgray;
 
     h5 {
-      min-height: 57.6px;
+      min-height: 48px;
       color: var(#{--bs-primary});
+      margin-bottom: 0;
     }
   }
 }