fix: workaround for medium avatars cors problem

Author: mdvanes

components/PublicationCard/0_Bqr-dMZplB-namyY.jpg

@@ -23,14 +23,13 @@
   }
 
   h2 {
-    font-family: "Conduit ITC W04 Regular", 'system-ui';
+    font-family: "Conduit ITC W04 Regular", "system-ui";
     font-size: 180%;
   }
 }
 
 .publication-card--avatar {
   background-color: $red;
-  background-size: 50px;
   border-radius: 50%;
   color: black;
   height: 50px;
@@ -39,6 +38,16 @@
   text-align: center;
   font-size: 40px;
   font-family: "Righteous", sans-serif;
+
+  .publication-card--avatar-img {
+    border-radius: 50%;
+    height: 50px;
+    width: 50px;
+    position: absolute;
+    top: 0;
+    background-size: 50px;
+    overflow: hidden;
+  }
 }
 
 .publication-card--author {

components/PublicationCard/0_gTl35Xy5zRcgu5wJ.png

@@ -3,41 +3,19 @@ import { formatDate } from "../../lib/formatDate";
 import { IPublication } from "../../lib/publications/publications.types";
 // import SanitizedHTML from 'react-sanitized-html';
 import styles from "./PublicationCard.module.scss";
+import { PublicationCardAvatar } from "./PublicationCardAvatar";
 
 interface IPublicationCardProps {
   publication: IPublication;
 }
 
-const avatars: Record<string, string> = {
-  mdworld: "https://miro.medium.com/fit/c/176/176/0*gTl35Xy5zRcgu5wJ.png",
-  "nathan perdijk":
-    "https://miro.medium.com/fit/c/88/88/0*Bqr-dMZplB-namyY.jpg",
-  "bjorn ‘bjeaurn’":
-    "https://miro.medium.com/fit/c/176/176/0*o9UzuQyUwobacrCt.jpeg",
-  "hamza haiken":
-    "https://miro.medium.com/fit/c/176/176/2*1JTGoMi8_nuGQVO1EoItXg.png",
-  "nick ten veen":
-    "https://miro.medium.com/fit/c/88/88/2*k7vMxGfKwfqJ86TcprDA_Q.jpeg",
-};
-
 const PublicationCard: FC<IPublicationCardProps> = ({ publication }) => {
   const { title, author, uniqueSlug, latestPublishedAt } = publication;
-  const avatar = avatars[author.toLowerCase()];
+
   return (
     <a href={uniqueSlug} className={styles["publication-card"]}>
       <section>
-        <div
-          className={styles["publication-card--avatar"]}
-          style={
-            avatar
-              ? {
-                  backgroundImage: `url(${avatar})`,
-                }
-              : {}
-          }
-        >
-          {avatar ? "" : author.slice(0, 1).toUpperCase()}
-        </div>
+        <PublicationCardAvatar author={author} />
         <div>
           <p className={styles["publication-card--author"]}>{author}</p>
           <p className={styles["publication-card--date"]}>

components/PublicationCard/0_o9UzuQyUwobacrCt.jpg

@@ -0,0 +1,30 @@
+import { FC } from "react";
+import styles from "./PublicationCard.module.scss";
+import nathanImg from "./0_Bqr-dMZplB-namyY.jpg";
+import mdworldImg from "./0_gTl35Xy5zRcgu5wJ.png";
+import nickImg from "./2_k7vMxGfKwfqJ86TcprDA_Q.jpg";
+import hamzaImg from "./2_1JTGoMi8_nuGQVO1EoItXg.png";
+import bjornImg from "./0_o9UzuQyUwobacrCt.jpg";
+import Image, { StaticImageData } from "next/image";
+
+const avatars: Record<string, StaticImageData> = {
+  mdworld: mdworldImg,
+  "nathan perdijk": nathanImg,
+  "bjorn ‘bjeaurn’": bjornImg,
+  "hamza haiken": hamzaImg,
+  "nick ten veen": nickImg,
+};
+
+export const PublicationCardAvatar: FC<{ author: string }> = ({ author }) => {
+  const avatar = avatars[author.toLowerCase()];
+
+  return (
+    <div className={styles["publication-card--avatar"]}>
+      <div className="letter">{author.slice(0, 1).toUpperCase()}</div>
+
+      <div className={styles["publication-card--avatar-img"]}>
+        {avatar && <Image src={avatar} alt="avatar" width={50} height={50} />}
+      </div>
+    </div>
+  );
+};

components/PublicationCard/2_1JTGoMi8_nuGQVO1EoItXg.png

@@ -30,6 +30,7 @@
     a {
       border-radius: 4px;
       padding: 10px;
+      color: var(--cs-brutalist-creme);
 
       &:hover {
         background-color: #222;

components/PublicationCard/2_k7vMxGfKwfqJ86TcprDA_Q.jpg

@@ -18,7 +18,9 @@ const TopBar: FC = () => {
         </li>
         <li>Codelancer</li> */}
           <li>
-            <a href="https://www.ordina.nl/vakgebieden/scala/">Contact</a>
+            <a href="https://www.linkedin.com/company/codestar-powered-by-sopra-steria/">
+              Contact
+            </a>
           </li>
         </ul>
       </div>