feat: add imagevaultImage utils and types

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<TestImageData>(query)
+
+  const data = response.data?.lopeztest
+  const customImage = insertResponseToImageVaultAsset(data.customdam)
+
+  return (
+    <div style={{ padding: 40 }}>
+      <NextImage
+        src={customImage.url}
+        title={customImage.title}
+        alt={customImage.meta.alt ?? customImage.title}
+        width={400}
+        height={400}
+        quality={10}
+        style={{ objectFit: "contain" }}
+      />
+      <Image
+        src={customImage.url}
+        title={customImage.title}
+        alt={customImage.meta.alt ?? customImage.title}
+        width={400}
+        height={400}
+        quality={10}
+        style={{ objectFit: "contain" }}
+      />
+    </div>
+  )
+}

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).*)"],
 }

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"
+

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

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

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