From 274e20333577ecd5df5380e8678d4883d5c5804e Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Tue, 26 Mar 2024 16:36:39 +0100 Subject: [PATCH 1/2] feat: add imagevaultImage utils and types --- app/[lang]/(live-current)/image/page.tsx | 54 +++++++++++ middleware.ts | 2 +- netlify.toml | 14 +++ next.config.js | 5 +- types/requests/imagevault.ts | 115 +++++++++++++++++++++++ utils/imageVault.ts | 28 ++++++ 6 files changed, 216 insertions(+), 2 deletions(-) create mode 100644 app/[lang]/(live-current)/image/page.tsx create mode 100644 types/requests/imagevault.ts create mode 100644 utils/imageVault.ts diff --git a/app/[lang]/(live-current)/image/page.tsx b/app/[lang]/(live-current)/image/page.tsx new file mode 100644 index 000000000..628659ccf --- /dev/null +++ b/app/[lang]/(live-current)/image/page.tsx @@ -0,0 +1,54 @@ +import { gql } from "graphql-request" +import { request } from "@/lib/request" +import NextImage from "next/image" +import Image from "../../../../components/Image" +import { insertResponseToImageVaultAsset } from "@/utils/imageVault" +import type { InsertResponse } from "@/types/requests/imagevault" + +type TestImageData = { + lopeztest: { + json_rte: { json: JSON } + customdam: InsertResponse + } +} + +const query = gql` + query MyQuery { + lopeztest(uid: "blt0b6d8eaa08d72c46") { + json_rte { + json + } + customdam + } + } +` + +export default async function TestImagePage() { + const response = await request(query) + + const data = response.data?.lopeztest + const customImage = insertResponseToImageVaultAsset(data.customdam) + + return ( +
+ + {customImage.meta.alt +
+ ) +} diff --git a/middleware.ts b/middleware.ts index 27e4c1a77..747a59533 100644 --- a/middleware.ts +++ b/middleware.ts @@ -109,5 +109,5 @@ export const config = { * public routes inside middleware. * (https://clerk.com/docs/quickstarts/nextjs?utm_source=sponsorship&utm_medium=youtube&utm_campaign=code-with-antonio&utm_content=12-31-2023#add-authentication-to-your-app) */ - matcher: ["/((?!.+\\.[\\w]+$|_next|en/test|api|trpc).*)"], + matcher: ["/((?!.+\\.[\\w]+$|_next|.netlify|en/test|api|trpc).*)"], } diff --git a/netlify.toml b/netlify.toml index ebbc125d7..49151ec87 100644 --- a/netlify.toml +++ b/netlify.toml @@ -21,3 +21,17 @@ TERM = "xterm" [[plugins]] package = "@netlify/plugin-nextjs" + +[images] + remote_images = ["https://imagevault-stage.scandichotels.com.*", "https://imagevault.scandichotels.com.*"] + +[[redirects]] +from = "/_next/image" +to = "/.netlify/images?url=:url&w=12344&q=:quality" +status = 200 + + [redirects.query] + url = ":url" + w = ":width" + q = ":quality" + diff --git a/next.config.js b/next.config.js index e40cd62d0..e03286676 100644 --- a/next.config.js +++ b/next.config.js @@ -8,7 +8,6 @@ jiti("./env/client") /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true }, - images: { remotePatterns: [ { @@ -16,6 +15,10 @@ const nextConfig = { hostname: "eu-images.contentstack.com", pathname: "/v3/assets/**", }, + { + protocol: "https", + hostname: "imagevault-stage.scandichotels.com", + }, ], }, diff --git a/types/requests/imagevault.ts b/types/requests/imagevault.ts new file mode 100644 index 000000000..c543d3243 --- /dev/null +++ b/types/requests/imagevault.ts @@ -0,0 +1,115 @@ +/** + * @file TypeScript typings for ImageVault + * + * The types in this file are based on the source maps of the downloaded + * distribution at https://clientscript.imagevault.se/Installation/ImageVaultInsertMedia + * + * They have been clean up and amended to. + */ + +export type MetaData = { + DefinitionType?: number + Description: string | null + LanguageId: null + MetadataDefinitionId: number + Name: string + Value: string +} + +export type ImageVaultAsset = { + id: number + title: string + url: string + dimensions: { + width: number + height: number + aspectRatio: number + } + meta: { alt: string | undefined; caption: string | undefined } +} + +/** + * The response from ImageVault when inserting an asset + */ +export declare class InsertResponse { + /** + * The media item id of the asset + */ + Id: number + /** + * The id of the vault where the asset resides + */ + VaultId: number + /** + * The name of the asset + */ + Name: string + /** + * The conversion selected by the user. Is an array but will only contain one object + */ + MediaConversions: MediaConversion[] + /** + * Date when the asset was added to ImageVault + */ + DateAdded: string + /** + * Name of the user that added the asset to ImageVault + */ + AddedBy: string + + Metadata?: MetaData[] | undefined +} + +/** + * Defines a media asset, original or conversion + */ +export declare class MediaConversion { + /** + * The url to the conversion + */ + Url: string + /** + * Name of the conversion + */ + Name: string + /** + * Html representing the conversion + */ + Html: string + /** + * Content type of the conversion + */ + ContentType: string + /** + * Width, in pixels, of the conversion + */ + Width: number + /** + * Height, in pixels, of the conversion + */ + Height: number + /** + * Aspect ratio of the conversion + */ + AspectRatio: number + /** + * Width of the selected/requested format + */ + FormatWidth: number + /** + * Height of the selected/requested format + */ + FormatHeight: number + /** + * Aspect ratio of the selected/requested format + */ + FormatAspectRatio: number + /** + * Name of the media format + */ + MediaFormatName: string + /** + * Id of the selected media format + */ + MediaFormatId: number +} diff --git a/utils/imageVault.ts b/utils/imageVault.ts new file mode 100644 index 000000000..13818f765 --- /dev/null +++ b/utils/imageVault.ts @@ -0,0 +1,28 @@ +import { ImageVaultAsset, InsertResponse } from "@/types/requests/imagevault" + +export function insertResponseToImageVaultAsset( + response: InsertResponse +): ImageVaultAsset { + const alt = response.Metadata?.find((meta) => + meta.Name.includes("AltText_") + )?.Value + + const caption = response.Metadata?.find((meta) => + meta.Name.includes("Title_") + )?.Value + + return { + url: response.MediaConversions[0].Url, + id: response.Id, + meta: { + alt, + caption, + }, + title: response.Name, + dimensions: { + width: response.MediaConversions[0].Width, + height: response.MediaConversions[0].Height, + aspectRatio: response.MediaConversions[0].FormatAspectRatio, + }, + } +} From 6a80deefeba56191ebd8157331eb058ce41d2919 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Wed, 27 Mar 2024 14:40:26 +0100 Subject: [PATCH 2/2] fix: correct netlify config --- .gitignore | 4 +- .prettierignore | 1 + app/[lang]/(live-current)/image/page.tsx | 54 ------------------- netlify.toml | 11 ---- next.config.js | 4 ++ .../imageVaultImage.ts} | 0 utils/imageVault.ts | 5 +- 7 files changed, 12 insertions(+), 67 deletions(-) delete mode 100644 app/[lang]/(live-current)/image/page.tsx rename types/{requests/imagevault.ts => components/imageVaultImage.ts} (100%) diff --git a/.gitignore b/.gitignore index f69661531..533cf75ab 100644 --- a/.gitignore +++ b/.gitignore @@ -35,4 +35,6 @@ yarn-error.log* *.tsbuildinfo next-env.d.ts -certificates \ No newline at end of file +certificates +# Local Netlify folder +.netlify diff --git a/.prettierignore b/.prettierignore index 84dd22b6b..3944d3070 100644 --- a/.prettierignore +++ b/.prettierignore @@ -10,3 +10,4 @@ app/scandic.css netlify.toml package.json package-lock.json +.gitignore diff --git a/app/[lang]/(live-current)/image/page.tsx b/app/[lang]/(live-current)/image/page.tsx deleted file mode 100644 index 628659ccf..000000000 --- a/app/[lang]/(live-current)/image/page.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { gql } from "graphql-request" -import { request } from "@/lib/request" -import NextImage from "next/image" -import Image from "../../../../components/Image" -import { insertResponseToImageVaultAsset } from "@/utils/imageVault" -import type { InsertResponse } from "@/types/requests/imagevault" - -type TestImageData = { - lopeztest: { - json_rte: { json: JSON } - customdam: InsertResponse - } -} - -const query = gql` - query MyQuery { - lopeztest(uid: "blt0b6d8eaa08d72c46") { - json_rte { - json - } - customdam - } - } -` - -export default async function TestImagePage() { - const response = await request(query) - - const data = response.data?.lopeztest - const customImage = insertResponseToImageVaultAsset(data.customdam) - - return ( -
- - {customImage.meta.alt -
- ) -} diff --git a/netlify.toml b/netlify.toml index 49151ec87..190b12b25 100644 --- a/netlify.toml +++ b/netlify.toml @@ -24,14 +24,3 @@ package = "@netlify/plugin-nextjs" [images] remote_images = ["https://imagevault-stage.scandichotels.com.*", "https://imagevault.scandichotels.com.*"] - -[[redirects]] -from = "/_next/image" -to = "/.netlify/images?url=:url&w=12344&q=:quality" -status = 200 - - [redirects.query] - url = ":url" - w = ":width" - q = ":quality" - diff --git a/next.config.js b/next.config.js index e03286676..930cbafb1 100644 --- a/next.config.js +++ b/next.config.js @@ -19,6 +19,10 @@ const nextConfig = { protocol: "https", hostname: "imagevault-stage.scandichotels.com", }, + { + protocol: "https", + hostname: "imagevault.scandichotels.com", + }, ], }, diff --git a/types/requests/imagevault.ts b/types/components/imageVaultImage.ts similarity index 100% rename from types/requests/imagevault.ts rename to types/components/imageVaultImage.ts diff --git a/utils/imageVault.ts b/utils/imageVault.ts index 13818f765..a6aaba6c7 100644 --- a/utils/imageVault.ts +++ b/utils/imageVault.ts @@ -1,4 +1,7 @@ -import { ImageVaultAsset, InsertResponse } from "@/types/requests/imagevault" +import { + ImageVaultAsset, + InsertResponse, +} from "@/types/components/imageVaultImage" export function insertResponseToImageVaultAsset( response: InsertResponse