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/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..190b12b25 100644 --- a/netlify.toml +++ b/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.*"] diff --git a/next.config.js b/next.config.js index e40cd62d0..930cbafb1 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,14 @@ const nextConfig = { hostname: "eu-images.contentstack.com", pathname: "/v3/assets/**", }, + { + protocol: "https", + hostname: "imagevault-stage.scandichotels.com", + }, + { + protocol: "https", + hostname: "imagevault.scandichotels.com", + }, ], }, diff --git a/types/components/imageVaultImage.ts b/types/components/imageVaultImage.ts new file mode 100644 index 000000000..c543d3243 --- /dev/null +++ b/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 +} diff --git a/utils/imageVault.ts b/utils/imageVault.ts new file mode 100644 index 000000000..a6aaba6c7 --- /dev/null +++ b/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, + }, + } +}