Merged in feat/consume-imagevault (pull request #75)

Config for imagevault images

.gitignore

@@ -35,4 +35,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-certificates
+certificates
+# Local Netlify folder
+.netlify

.prettierignore

@@ -10,3 +10,4 @@ app/scandic.css
 netlify.toml
 package.json
 package-lock.json
+.gitignore

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,6 @@ TERM = "xterm"
 
 [[plugins]]
 package = "@netlify/plugin-nextjs"
+
+[images]
+  remote_images = ["https://imagevault-stage.scandichotels.com.*", "https://imagevault.scandichotels.com.*"]

next.config.js

@@ -8,7 +8,6 @@ jiti("./env/client")
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   eslint: { ignoreDuringBuilds: true },
-
   images: {
     remotePatterns: [
       {
@@ -16,6 +15,14 @@ const nextConfig = {
         hostname: "eu-images.contentstack.com",
         pathname: "/v3/assets/**",
       },
+      {
+        protocol: "https",
+        hostname: "imagevault-stage.scandichotels.com",
+      },
+      {
+        protocol: "https",
+        hostname: "imagevault.scandichotels.com",
+      },
     ],
   },
 

types/components/imageVaultImage.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,31 @@
+import {
+  ImageVaultAsset,
+  InsertResponse,
+} from "@/types/components/imageVaultImage"
+
+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,
+    },
+  }
+}