@okam/directus-next-component 1.5.0 → 1.6.0

package/components/DirectusFile/interface.d.ts

@@ -1,5 +1,5 @@
+import type { TFiles } from '@okam/directus-next';
 import type { TDefaultComponent } from '@okam/stack-ui';
-import type { TFiles } from '../../types/files';
 export interface TDirectusFileProps extends TFiles, TDefaultComponent {
     /**
      * Serves to fall back to different parts of the URLs. Some properties have default values:

package/directus/directus-next-component/src/hooks/directus-metadata.js

@@ -0,0 +1,92 @@
+"use strict";
+require("react/jsx-runtime");
+require("@okam/next-component");
+const directusFile = require("./directus-file.js");
+require("@okam/stack-ui");
+require("next/link.js");
+require("../logger.js");
+const radashi = require("radashi");
+function withFallbacks(pageProps, options) {
+  var _a, _b;
+  const { pageSettings } = pageProps ?? {};
+  const pageSettingsTranslation = (_a = pageSettings == null ? void 0 : pageSettings.translations) == null ? void 0 : _a[0];
+  const itemTranslation = (_b = pageSettings == null ? void 0 : pageSettings.translations) == null ? void 0 : _b[0];
+  const title = (pageSettingsTranslation == null ? void 0 : pageSettingsTranslation.title) ?? (itemTranslation == null ? void 0 : itemTranslation.title);
+  const imageFragment = (pageSettingsTranslation == null ? void 0 : pageSettingsTranslation.og_image) ?? (itemTranslation && "featured_image" in itemTranslation ? itemTranslation.featured_image : {});
+  const image = options.getFilesFragment(imageFragment);
+  return { title, image };
+}
+function limitOpenGraphImageDimensions(width, height, maxWidth, maxHeight) {
+  return {
+    width: radashi.min([parseInt(width.toString(), 10), maxWidth]),
+    height: radashi.min([parseInt(height.toString(), 10), maxHeight])
+  };
+}
+function getOpenGraphImageFallback(fallbackImage, options) {
+  if (!fallbackImage) return null;
+  const { width, height, src } = fallbackImage;
+  const dimensions = limitOpenGraphImageDimensions(width, height, options == null ? void 0 : options.ogImageMaxWidth, options == null ? void 0 : options.ogImageMaxHeight);
+  return { ...fallbackImage, ...dimensions, url: src };
+}
+function useOpenGraphImage(image, options) {
+  const directusImage = directusFile(image);
+  const { src, alt } = directusImage ?? {};
+  const { width: limitedWidth, height: limitedHeight } = ((directusImage == null ? void 0 : directusImage.width) && (directusImage == null ? void 0 : directusImage.height) ? limitOpenGraphImageDimensions(
+    directusImage.width,
+    directusImage.height,
+    options == null ? void 0 : options.ogImageMaxWidth,
+    options == null ? void 0 : options.ogImageMaxHeight
+  ) : null) ?? {};
+  if (!src || !(directusImage == null ? void 0 : directusImage.width)) return null;
+  const imgHref = options == null ? void 0 : options.imageLoader({
+    ...image,
+    src,
+    width: limitedWidth,
+    height: limitedHeight ?? void 0
+  });
+  return {
+    alt,
+    type: (directusImage == null ? void 0 : directusImage.type) ?? void 0,
+    width: limitedWidth,
+    height: limitedHeight,
+    url: imgHref
+  };
+}
+function useMetadata(pageProps, options, defaultProps) {
+  var _a;
+  const { title, image } = withFallbacks(pageProps, options);
+  const { pageSettings } = pageProps ?? {};
+  const translation = (_a = pageSettings == null ? void 0 : pageSettings.translations) == null ? void 0 : _a[0];
+  const metaDescription = (defaultProps == null ? void 0 : defaultProps.meta_description) ?? (translation == null ? void 0 : translation.meta_description);
+  const noFollow = (defaultProps == null ? void 0 : defaultProps.no_follow) ?? (translation == null ? void 0 : translation.no_follow);
+  const noIndex = (defaultProps == null ? void 0 : defaultProps.no_index) ?? (translation == null ? void 0 : translation.no_index);
+  const directusImage = directusFile(image);
+  const openGraphImage = useOpenGraphImage(directusImage, options) ?? getOpenGraphImageFallback(options == null ? void 0 : options.ogFallbackImage, options);
+  const openGraphType = options.openGraphTypeConfig[(pageSettings == null ? void 0 : pageSettings.belongs_to_collection) ?? ""] ?? "website";
+  const alternates = options.createAlternateUrls(pageSettings);
+  const { canonical } = alternates;
+  const metadata = {
+    title,
+    metadataBase: URL.canParse(options.getHostname()) ? new URL(options.getHostname()) : void 0,
+    description: metaDescription,
+    openGraph: {
+      title: title ?? void 0,
+      description: metaDescription ?? void 0,
+      images: openGraphImage ?? void 0,
+      url: canonical == null ? void 0 : canonical.toString(),
+      type: openGraphType
+    },
+    twitter: {
+      title: title ?? void 0,
+      images: openGraphImage ?? void 0,
+      description: metaDescription ?? void 0
+    },
+    alternates,
+    robots: {
+      index: !noIndex,
+      follow: !noFollow
+    }
+  };
+  return metadata;
+}
+module.exports = useMetadata;

package/directus/directus-next-component/src/hooks/directus-metadata.mjs

@@ -0,0 +1,93 @@
+import "react/jsx-runtime";
+import "@okam/next-component";
+import useDirectusFile from "./directus-file.mjs";
+import "@okam/stack-ui";
+import "next/link.js";
+import "../logger.mjs";
+import { min } from "radashi";
+function withFallbacks(pageProps, options) {
+  var _a, _b;
+  const { pageSettings } = pageProps ?? {};
+  const pageSettingsTranslation = (_a = pageSettings == null ? void 0 : pageSettings.translations) == null ? void 0 : _a[0];
+  const itemTranslation = (_b = pageSettings == null ? void 0 : pageSettings.translations) == null ? void 0 : _b[0];
+  const title = (pageSettingsTranslation == null ? void 0 : pageSettingsTranslation.title) ?? (itemTranslation == null ? void 0 : itemTranslation.title);
+  const imageFragment = (pageSettingsTranslation == null ? void 0 : pageSettingsTranslation.og_image) ?? (itemTranslation && "featured_image" in itemTranslation ? itemTranslation.featured_image : {});
+  const image = options.getFilesFragment(imageFragment);
+  return { title, image };
+}
+function limitOpenGraphImageDimensions(width, height, maxWidth, maxHeight) {
+  return {
+    width: min([parseInt(width.toString(), 10), maxWidth]),
+    height: min([parseInt(height.toString(), 10), maxHeight])
+  };
+}
+function getOpenGraphImageFallback(fallbackImage, options) {
+  if (!fallbackImage) return null;
+  const { width, height, src } = fallbackImage;
+  const dimensions = limitOpenGraphImageDimensions(width, height, options == null ? void 0 : options.ogImageMaxWidth, options == null ? void 0 : options.ogImageMaxHeight);
+  return { ...fallbackImage, ...dimensions, url: src };
+}
+function useOpenGraphImage(image, options) {
+  const directusImage = useDirectusFile(image);
+  const { src, alt } = directusImage ?? {};
+  const { width: limitedWidth, height: limitedHeight } = ((directusImage == null ? void 0 : directusImage.width) && (directusImage == null ? void 0 : directusImage.height) ? limitOpenGraphImageDimensions(
+    directusImage.width,
+    directusImage.height,
+    options == null ? void 0 : options.ogImageMaxWidth,
+    options == null ? void 0 : options.ogImageMaxHeight
+  ) : null) ?? {};
+  if (!src || !(directusImage == null ? void 0 : directusImage.width)) return null;
+  const imgHref = options == null ? void 0 : options.imageLoader({
+    ...image,
+    src,
+    width: limitedWidth,
+    height: limitedHeight ?? void 0
+  });
+  return {
+    alt,
+    type: (directusImage == null ? void 0 : directusImage.type) ?? void 0,
+    width: limitedWidth,
+    height: limitedHeight,
+    url: imgHref
+  };
+}
+function useMetadata(pageProps, options, defaultProps) {
+  var _a;
+  const { title, image } = withFallbacks(pageProps, options);
+  const { pageSettings } = pageProps ?? {};
+  const translation = (_a = pageSettings == null ? void 0 : pageSettings.translations) == null ? void 0 : _a[0];
+  const metaDescription = (defaultProps == null ? void 0 : defaultProps.meta_description) ?? (translation == null ? void 0 : translation.meta_description);
+  const noFollow = (defaultProps == null ? void 0 : defaultProps.no_follow) ?? (translation == null ? void 0 : translation.no_follow);
+  const noIndex = (defaultProps == null ? void 0 : defaultProps.no_index) ?? (translation == null ? void 0 : translation.no_index);
+  const directusImage = useDirectusFile(image);
+  const openGraphImage = useOpenGraphImage(directusImage, options) ?? getOpenGraphImageFallback(options == null ? void 0 : options.ogFallbackImage, options);
+  const openGraphType = options.openGraphTypeConfig[(pageSettings == null ? void 0 : pageSettings.belongs_to_collection) ?? ""] ?? "website";
+  const alternates = options.createAlternateUrls(pageSettings);
+  const { canonical } = alternates;
+  const metadata = {
+    title,
+    metadataBase: URL.canParse(options.getHostname()) ? new URL(options.getHostname()) : void 0,
+    description: metaDescription,
+    openGraph: {
+      title: title ?? void 0,
+      description: metaDescription ?? void 0,
+      images: openGraphImage ?? void 0,
+      url: canonical == null ? void 0 : canonical.toString(),
+      type: openGraphType
+    },
+    twitter: {
+      title: title ?? void 0,
+      images: openGraphImage ?? void 0,
+      description: metaDescription ?? void 0
+    },
+    alternates,
+    robots: {
+      index: !noIndex,
+      follow: !noFollow
+    }
+  };
+  return metadata;
+}
+export {
+  useMetadata as default
+};

package/directus/directus-next-component/src/index.js

@@ -7,6 +7,7 @@ const index$3 = require("./components/DirectusFile/index.js");
 const directusFile = require("./hooks/directus-file.js");
 const directusLink = require("./hooks/directus-link.js");
 const navigationItems = require("./hooks/navigation-items.js");
+const directusMetadata = require("./hooks/directus-metadata.js");
 const logger = require("./logger.js");
 exports.DirectusLink = index;
 exports.DirectusImg = index$1;
@@ -15,4 +16,5 @@ exports.DirectusFile = index$3;
 exports.useDirectusFile = directusFile;
 exports.useDirectusLink = directusLink;
 exports.useNavigationItems = navigationItems;
+exports.useMetadata = directusMetadata;
 exports.DirectusNextComponent = logger.logger;

package/directus/directus-next-component/src/index.mjs

@@ -5,6 +5,7 @@ import { default as default5 } from "./components/DirectusFile/index.mjs";
 import { default as default6 } from "./hooks/directus-file.mjs";
 import { default as default7 } from "./hooks/directus-link.mjs";
 import { default as default8 } from "./hooks/navigation-items.mjs";
+import { default as default9 } from "./hooks/directus-metadata.mjs";
 import { logger } from "./logger.mjs";
 export {
   default5 as DirectusFile,
@@ -14,5 +15,6 @@ export {
   default4 as DirectusVideo,
   default6 as useDirectusFile,
   default7 as useDirectusLink,
+  default9 as useMetadata,
   default8 as useNavigationItems
 };

package/directus/directus-next-component/src/server.js

@@ -9,6 +9,7 @@ const logger = require("./logger.js");
 const directusFile = require("./hooks/directus-file.js");
 const directusLink = require("./hooks/directus-link.js");
 const navigationItems = require("./hooks/navigation-items.js");
+const directusMetadata = require("./hooks/directus-metadata.js");
 exports.withDirectus = withDirectus;
 exports.DirectusFile = index;
 exports.DirectusImg = index$1;
@@ -18,3 +19,4 @@ exports.DirectusNextComponent = logger.logger;
 exports.useDirectusFile = directusFile;
 exports.useDirectusLink = directusLink;
 exports.useNavigationItems = navigationItems;
+exports.useMetadata = directusMetadata;

package/directus/directus-next-component/src/server.mjs

@@ -7,6 +7,7 @@ import { logger } from "./logger.mjs";
 import { default as default7 } from "./hooks/directus-file.mjs";
 import { default as default8 } from "./hooks/directus-link.mjs";
 import { default as default9 } from "./hooks/navigation-items.mjs";
+import { default as default10 } from "./hooks/directus-metadata.mjs";
 export {
   default3 as DirectusFile,
   default4 as DirectusImg,
@@ -15,6 +16,7 @@ export {
   default6 as DirectusVideo,
   default7 as useDirectusFile,
   default8 as useDirectusLink,
+  default10 as useMetadata,
   default9 as useNavigationItems,
   default2 as withDirectus
 };

package/hooks/directus-file.d.ts

@@ -1,5 +1,5 @@
+import type { TFiles } from '@okam/directus-next';
 import type { Nullable } from '@okam/stack-ui';
-import type { TFiles } from '../types/files';
 export default function useDirectusFile(file: Nullable<TFiles>, baseUrl?: URL, searchParams?: Record<string, Nullable<string>>): {
     tags?: any;
     location?: string | null | undefined;

package/hooks/directus-metadata.d.ts

@@ -0,0 +1,6 @@
+import type { TPageSettings, TPageSettingsTranslation } from '@okam/directus-next';
+import type { Metadata } from 'next';
+import type { TMetadataOptions } from '../types/metadata';
+export default function useMetadata<TPageProps extends {
+    pageSettings: TPageSettings;
+}>(pageProps: TPageProps, options: TMetadataOptions, defaultProps?: Partial<TPageSettingsTranslation>): Metadata;

package/index.d.ts

@@ -5,9 +5,18 @@ export { default as DirectusFile } from './components/DirectusFile';
 export { default as useDirectusFile } from './hooks/directus-file';
 export { default as useDirectusLink } from './hooks/directus-link';
 export { default as useNavigationItems } from './hooks/navigation-items';
+export { default as useMetadata } from './hooks/directus-metadata';
 export { logger as DirectusNextComponent } from './logger';
-export type { TFiles } from './types/files';
-export type { TPageSettings } from './types/page-settings';
+export type { 
+/**
+ * @deprecated Import from `@okam/directus-next` instead
+ */
+TFiles, } from '@okam/directus-next';
+export type { 
+/**
+ * @deprecated Import from `@okam/directus-next` instead
+ */ TPageSettings, } from '@okam/directus-next';
 export type { TNavigationItems, TNavigationItemsTree } from './types/navigation-items';
 export type { TLinks } from './types/links';
 export type { TDirectusLinkProps, TUseDirectusLink, TDirectusLink, TDirectusLinkPropsConfig, TDirectusLinkComponentsConfig, } from './components/DirectusLink/interface';
+export type { TMetadataOptions } from './types/metadata';

package/package.json

@@ -1,16 +1,28 @@
 {
   "name": "@okam/directus-next-component",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
     ".": {
-      "import": "./index.mjs",
-      "require": "./index.js"
+      "import": {
+        "types": "./index.d.ts",
+        "default": "./index.mjs"
+      },
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./index.mjs"
+      }
     },
     "./server": {
-      "import": "./server.mjs",
-      "require": "./server.js"
+      "import": {
+        "types": "./server.d.ts",
+        "default": "./server.mjs"
+      },
+      "require": {
+        "types": "./server.d.ts",
+        "default": "./server.mjs"
+      }
     }
   },
   "publishConfig": {
@@ -21,12 +33,13 @@
   },
   "dependencies": {
     "@okam/logger": "1.1.0",
-    "@okam/next-component": "0.4.0",
-    "@okam/stack-ui": "1.31.0",
+    "@okam/next-component": "1.0.0",
+    "@okam/stack-ui": "1.34.0",
     "@react-spring/web": "^9.7.5",
     "next": "^14.1.1",
     "radashi": "^12.3.0",
     "react": "18.3.1",
-    "unlazy": "^0.12.1"
+    "unlazy": "^0.12.1",
+    "@okam/directus-next": "1.1.0"
   }
 }

package/server.d.ts

@@ -7,3 +7,4 @@ export { logger as DirectusNextComponent } from './logger';
 export { default as useDirectusFile } from './hooks/directus-file';
 export { default as useDirectusLink } from './hooks/directus-link';
 export { default as useNavigationItems } from './hooks/navigation-items';
+export { default as useMetadata } from './hooks/directus-metadata';

package/types/links.d.ts

@@ -1,5 +1,4 @@
-import type { TFiles } from './files';
-import type { TPageSettings } from './page-settings';
+import type { TPageSettings, TFiles } from '@okam/directus-next';
 /**
  * Represent the directus `links` collection, not the props of the DirectusLink component
  */

package/types/metadata.d.ts

@@ -0,0 +1,60 @@
+import type { TPageSettings } from '@okam/directus-next';
+import type { Nullable } from '@okam/stack-ui';
+import type { AlternateURLs } from 'next/dist/lib/metadata/types/alternative-urls-types';
+import type { OpenGraphType } from 'next/dist/lib/metadata/types/opengraph-types';
+import type { StaticImageData } from 'next/image';
+import type { TDirectusFileProps } from '../components/DirectusFile/interface';
+/**
+ * Configuration options for metadata generation
+ */
+export type TMetadataOptions = {
+    /**
+     * Default fallback image to use for Open Graph tags when no other image is specified
+     */
+    ogFallbackImage?: StaticImageData;
+    /**
+     * Maximum width allowed for Open Graph images
+     */
+    ogImageMaxWidth: number;
+    /**
+     * Maximum height allowed for Open Graph images
+     */
+    ogImageMaxHeight: number;
+    /**
+     * Custom image loader function to transform image URLs
+     * @param src Source URL of the image
+     * @param width Optional width to resize the image to
+     * @param height Optional height to resize the image to
+     * @returns Transformed image URL
+     */
+    imageLoader: ({ src, width, height }: {
+        src: string;
+        width?: number | string;
+        height?: number | string;
+    }) => string;
+    /**
+     * Get the files fragment from a directus_files object
+     * @param file The directus_files object
+     * @returns The files fragment
+     */
+    getFilesFragment: <T extends {
+        _typename: 'directus_files';
+    }>(file: Nullable<T>) => Nullable<TDirectusFileProps>;
+    /**
+     * Create alternate URLs for the page
+     * @param pageSettings The page settings
+     * @returns The alternate URLs
+     */
+    createAlternateUrls: (pageSettings: Nullable<TPageSettings>) => AlternateURLs;
+    /**
+     * The type config of Open Graph to use
+     * @param {string} key - The collection name
+     * @param {OpenGraphType} value - The og:type value
+     */
+    openGraphTypeConfig: Record<string, OpenGraphType>;
+    /**
+     * Get the hostname
+     * @returns The hostname
+     */
+    getHostname: () => string;
+};

package/types/files.d.ts

@@ -1,24 +0,0 @@
-export type TFiles = {
-    id?: string | null;
-    title?: string | null;
-    description?: string | null;
-    tags?: any | null;
-    location?: string | null;
-    storage?: string | null;
-    focal_point_divider?: string | null;
-    focal_point_x?: number | null;
-    focal_point_y?: number | null;
-    filename_disk?: string | null;
-    filename_download?: string | null;
-    type?: string | null;
-    width?: number | null;
-    height?: number | null;
-    duration?: number | null;
-    embed?: string | null;
-    caption?: string | null;
-    thumbhash?: string | null;
-    /**
-     * @deprecated Use `filename_download` instead
-     */
-    filenameDownload?: string | null;
-};

package/types/page-settings.d.ts

@@ -1,17 +0,0 @@
-export type TPageSettings = {
-    id: string;
-    belongs_to_collection?: string | null;
-    translations?: Array<{
-        slug?: string | null;
-        title?: string | null;
-        path?: string | null;
-        languages_code?: {
-            code: string;
-        } | null;
-    } | null> | null;
-    route?: {
-        translations?: Array<{
-            route?: string | null;
-        } | null> | null;
-    } | null;
-};