DIGG-160-beta: Adding renderImage to generate ImageFragment

diggsweden · Jan 22, 2024 · a9a8c17 · a9a8c17
1 parent 04161fa
commit a9a8c17
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 57 deletions.
diff --git a/components/global/CustomImage/index.tsx b/components/global/CustomImage/index.tsx
@@ -28,15 +28,15 @@ export const CustomImage: React.FC<CustomImageProps> = ({
         src={image.url}
         width={image.width || 300}
         height={image.height || 200}
+        className={className}
         alt={image.alt || ""}
       />
     );
   }
 
-  const src =
-    isExternalLink(image.url) || image.url.startsWith("/images")
-      ? image.url
-      : (env("MEDIA_BASE_URL") || "") + image.url;
+  const src = isExternalLink(image.url)
+    ? image.url
+    : (env("MEDIA_BASE_URL") || "") + image.url;
 
   return (
     <Image

diff --git a/pages/goda-exempel/index.tsx b/pages/goda-exempel/index.tsx
@@ -1,7 +1,8 @@
-import { getPublicationsList, populateSeo } from "@/utilities";
+import { getPublicationsList, populateSeo, renderImage } from "@/utilities";
+import { GetStaticProps } from "next";
 import { ListPage } from "@/components/content/ListPage";
 
-export async function getStaticProps({ locale }: any) {
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
   return await getPublicationsList([], ["Goda exempel"], locale || "sv", {
     seo: {
       ...populateSeo,
@@ -10,19 +11,12 @@ export async function getStaticProps({ locale }: any) {
     },
     basePath: `/goda-exempel`,
     heading: "Goda exempel",
-    heroImage: {
-      __typename: "dataportal_Digg_Image",
-      width: 1920,
-      height: 400,
-      url: "/images/goodExamplesHero.png",
-      alt: "Goda exempel",
-      name: "goodExamplesHero.png",
-      description: null,
-      mime: "image/png",
-      ext: null,
-      screen9: null,
-    },
+    heroImage: renderImage({
+      src: "/images/goodExamplesHero.png",
+      width: 1700,
+      height: 300,
+    }),
   });
-}
+};
 
 export default ListPage;
diff --git a/pages/nyheter/index.tsx b/pages/nyheter/index.tsx
@@ -1,4 +1,4 @@
-import { getPublicationsList, populateSeo } from "@/utilities";
+import { getPublicationsList, populateSeo, renderImage } from "@/utilities";
 import { GetStaticProps } from "next/types";
 import { ListPage } from "@/components/content/ListPage";
 
@@ -11,18 +11,11 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => {
     },
     basePath: `/nyheter`,
     heading: "Nyheter",
-    heroImage: {
-      __typename: "dataportal_Digg_Image",
-      width: 1920,
-      height: 400,
-      url: "/images/newsHero.png",
-      alt: "Nyheter",
-      name: "newsHero.png",
-      description: null,
-      mime: "image/png",
-      ext: null,
-      screen9: null,
-    },
+    heroImage: renderImage({
+      src: "/images/newsHero.png",
+      width: 1700,
+      height: 300,
+    }),
   });
 };
 

diff --git a/utilities/app.ts b/utilities/app.ts
@@ -11,7 +11,8 @@ import {
   PublicationListResponse,
   PublicationResponse,
   RootAggregateResponse,
-} from "./queryHelpers";
+} from "@/utilities/queryHelpers";
+import { StaticImageData } from "next/image";
 
 export type DataportalPageProps =
   | MultiContainerResponse
@@ -78,3 +79,16 @@ export const populateSeo: SeoDataFragment = {
   robotsFollow: true,
   robotsIndex: true,
 };
+
+export const renderImage = (img: StaticImageData): ImageFragment => ({
+  __typename: "dataportal_Digg_Image",
+  url: img as any,
+  name: null,
+  alt: null,
+  description: null,
+  mime: "image/png",
+  ext: ".png",
+  width: img.width,
+  height: img.height,
+  screen9: { id: "" }, // just add dummy data to make ts happy
+});
diff --git a/utilities/domain.ts b/utilities/domain.ts
@@ -2,17 +2,17 @@ import {
   BlockDataFragment as Block,
   ImageFragment,
   RelatedContentFragment as RelatedContent,
-} from "../graphql/__generated__/operations";
+} from "@/graphql/__generated__/operations";
 import { DomainProps } from "@/components/content/DomainPage";
-import { Dataportal_LinkType } from "../graphql/__generated__/types";
+import { Dataportal_LinkType } from "@/graphql/__generated__/types";
 import useTranslation from "next-translate/useTranslation";
-import start from "../public/images/illu-start.png";
-import ai from "../public/images/illu-ai.png";
-import data from "../public/images/illu-data.png";
-import kallkod from "../public/images/illu-kallkod.png";
-import { StaticImageData } from "next/image";
+import start from "@/public/images/illu-start.png";
+import ai from "@/public/images/illu-ai.png";
+import data from "@/public/images/illu-data.png";
+import kallkod from "@/public/images/illu-kallkod.png";
 import { Translate } from "next-translate";
 import { handleUrl } from "@/components/content/blocks/MediaBlock";
+import { renderImage } from "@/utilities/app";
 
 interface ParsedProps {
   content: Block[];
@@ -65,48 +65,35 @@ const fallback = (domain: DiggDomain | undefined): ParsedProps => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = useTranslation("pages");
 
-  const image = (img: StaticImageData): ImageFragment => ({
-    __typename: "dataportal_Digg_Image",
-    url: img as any,
-    name: null,
-    alt: null,
-    description: null,
-    mime: "image/png",
-    ext: ".png",
-    width: img.width,
-    height: img.height,
-    screen9: { id: "" }, // just add dummy data to make ts happy
-  });
-
   switch (domain) {
     case "offentligai":
       return {
         ...emptyProps,
         heading: t("ai$heading"),
         preamble: t("ai$preamble"),
-        image: image(ai),
+        image: renderImage(ai),
       };
     case "data":
       return {
         ...emptyProps,
         heading: t("data$heading"),
         preamble: t("data$preamble"),
-        image: image(data),
+        image: renderImage(data),
         puffs: dataPuffs(t),
       };
     case "oppen-kallkod":
       return {
         ...emptyProps,
         heading: t("os$heading"),
         preamble: t("os$preamble"),
-        image: image(kallkod),
+        image: renderImage(kallkod),
       };
     default:
       return {
         ...emptyProps,
         heading: t("startpage$heading"),
         preamble: t("startpage$preamble"),
-        image: image(start as any),
+        image: renderImage(start as any),
       };
   }
 };