From a9a8c17a737a3b8167ff714210c700de6a13aea4 Mon Sep 17 00:00:00 2001 From: Mika Munterud Date: Mon, 22 Jan 2024 13:05:51 +0100 Subject: [PATCH] DIGG-160-beta: Adding renderImage to generate ImageFragment --- components/global/CustomImage/index.tsx | 8 +++--- pages/goda-exempel/index.tsx | 24 +++++++---------- pages/nyheter/index.tsx | 19 +++++--------- utilities/app.ts | 16 ++++++++++- utilities/domain.ts | 35 ++++++++----------------- 5 files changed, 45 insertions(+), 57 deletions(-) diff --git a/components/global/CustomImage/index.tsx b/components/global/CustomImage/index.tsx index 65e3d6fb..5fdfd936 100644 --- a/components/global/CustomImage/index.tsx +++ b/components/global/CustomImage/index.tsx @@ -28,15 +28,15 @@ export const CustomImage: React.FC = ({ 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 ( { 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 index bb935637..cef9c77c 100644 --- 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 index fa348062..d6c4ef2f 100644 --- 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 index 102e8be6..5ad0233d 100644 --- 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,33 +65,20 @@ 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": @@ -99,14 +86,14 @@ const fallback = (domain: DiggDomain | undefined): ParsedProps => { ...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), }; } };