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, + }, + } +}