fix: heading level on service page and OG image ratio (#443)

* fix: ratio for open graph header

* fix: correct header level for services

* fix: description for employees site

* fix: fix issue with crash when missing image (hide employee)

src/employees/index.tsx

@@ -20,7 +20,7 @@ import style from './employees.module.css';
 import { EmployeeItem } from './types';
 import { formatTelephone } from '../utils/phone';
 
-const getSoMeMetadata = (officeName?: Office) => {
+const SomeMetadata = ({ officeName }: { officeName?: Office }) => {
   let description;
   switch (officeName) {
     case 'oslo':
@@ -82,7 +82,7 @@ export default function Employees({
 
   return (
     <Layout fullWidth title="Alle varianter – Variant">
-      {getSoMeMetadata(officeName)}
+      <SomeMetadata officeName={officeName} />
 
       <div className={style.employeesContainer}>
         <header className={style.employees__header}>
@@ -137,6 +137,10 @@ const blurDataUrl =
 export const EmployeeTile = ({
   employee: { name, telephone, email, imageUrl, officeName },
 }: PropsWithChildren<{ employee: EmployeeItem }>) => {
+  if (!imageUrl) {
+    return null;
+  }
+
   return (
     <div
       className={style.employee}

src/employees/types.ts

@@ -2,6 +2,6 @@ export type EmployeeItem = {
   name: string;
   email: string;
   telephone: string | null;
-  imageUrl: string;
+  imageUrl: string | null;
   officeName: string;
 };

src/index/index.tsx

@@ -297,16 +297,18 @@ const Home = ({ randomEmployee, randomCases, feeds }: HomeProps) => {
       <section className={style.employees}>
         {randomEmployee ? (
           <div className={style.employees__random}>
-            <div className={style.employees__random__image}>
-              <Image
-                width={300}
-                height={300}
-                alt={`Bilde av ${randomEmployee.name}`}
-                src={randomEmployee.imageUrl}
-                loading="lazy"
-                decoding="async"
-              />
-            </div>
+            {randomEmployee.imageUrl && (
+              <div className={style.employees__random__image}>
+                <Image
+                  width={300}
+                  height={300}
+                  alt={`Bilde av ${randomEmployee.name}`}
+                  src={randomEmployee.imageUrl}
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+            )}
 
             <p>Dette er {randomEmployee.name}. En av oss som jobber her.</p>
 

src/jobs/listing/listing.tsx

@@ -128,6 +128,10 @@ const Listing: NextPage<InferGetStaticPropsType<typeof getStaticProps>> =
 export const ContactTile = ({
   contact: { name, email, telephone, imageUrl },
 }: PropsWithChildren<{ contact: EmployeeItem }>) => {
+  if (!imageUrl) {
+    return null;
+  }
+
   return (
     <div className={style.contact}>
       <div className={style.contact__img}>
@@ -148,10 +152,7 @@ export const ContactTile = ({
           📬 {email}
         </a>
         {telephone && (
-          <a
-            href={`tel:${telephone}`}
-            className={style.contact__type}
-          >
+          <a href={`tel:${telephone}`} className={style.contact__type}>
             📞 {formatTelephone(telephone)}
           </a>
         )}

src/tjenesteomrader/index.tsx

@@ -6,14 +6,14 @@ import Entrance from './components/entrance/entrance';
 import { colorPairs } from '@variant/profile/lib/colors';
 
 import style from './tjenesteomrader.module.css';
-import { Heading2 } from '@components/heading';
+import { Heading1 } from '@components/heading';
 
 const Tjenesteomrader = () => {
   return (
     <section className={style.tjenesteomrader}>
-      <Heading2 id="tjenesteomrader" className={style.title}>
+      <Heading1 id="tjenesteomrader" styleLevel="2">
         Våre tjenesteområder
-      </Heading2>
+      </Heading1>
       <p className={style.tjenesteomrader__ingress}>
         I Variant ønsker vi å bidra til størst mulig forandring til det bedre
         for kundene våre, for folk og for samfunnet. Derfor har vi rigget oss

src/tjenesteomrader/tjenesteomrader.module.css

@@ -14,10 +14,6 @@
   font-size: 1.2rem;
 }
 
-.title {
-  text-align: center;
-}
-
 .wrapper {
   padding-block: 5rem;
 }