@immich/ui 0.33.0 → 0.34.1

package/dist/components/Card/Card.svelte

@@ -32,7 +32,7 @@
   }: Props = $props();
 
   const containerStyles = tv({
-    base: 'w-full overflow-hidden shadow-sm',
+    base: 'flex w-full overflow-hidden shadow-sm',
     variants: {
       shape: {
         rectangle: '',
@@ -46,7 +46,7 @@
   });
 
   const cardStyles = tv({
-    base: 'flex h-full w-full flex-col',
+    base: 'flex grow flex-col',
     variants: {
       color: {
         primary: 'bg-primary/25 dark:bg-primary/25',

package/dist/components/Modal/Modal.svelte

@@ -25,11 +25,13 @@
     closeOnBackdropClick?: boolean;
     children: Snippet;
     onClose?: () => void;
+    onEscapeKeydown?: (event: KeyboardEvent) => void;
   };
 
   let {
     size = 'medium',
     onClose,
+    onEscapeKeydown,
     icon = true,
     title,
     class: className,
@@ -52,6 +54,20 @@
     },
   });
 
+  const modalContentStyles = tv({
+    base: 'fixed inset-0 m-auto flex max-h-dvh grow sm:p-4',
+    variants: {
+      size: {
+        tiny: 'sm:h-min md:max-w-sm',
+        small: 'sm:h-min md:max-w-md',
+        medium: 'sm:h-min md:max-w-(--breakpoint-sm)',
+        large: 'sm:h-min md:max-w-(--breakpoint-md)',
+        giant: 'sm:h-min md:max-w-(--breakpoint-lg)',
+        full: '',
+      },
+    },
+  });
+
   const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Modal);
   const headerChildren = $derived(getChildSnippet(ChildKey.ModalHeader));
   const bodyChildren = $derived(getChildSnippet(ChildKey.ModalBody));
@@ -67,32 +83,20 @@
 
   let cardRef = $state<HTMLElement | null>(null);
 
-  const handleCloseOnClick = (event: Event) => {
-    if (!closeOnBackdropClick || cardRef?.contains(event.target as Node)) {
-      return;
-    }
-
-    onClose?.();
-  };
+  const interactOutsideBehavior = $derived(closeOnBackdropClick ? 'close' : 'ignore');
+  const escapeKeydownBehavior = $derived(closeOnEsc ? 'close' : 'ignore');
 </script>
 
-<Dialog.Root open={true}>
+<Dialog.Root open={true} onOpenChange={(isOpen: boolean) => !isOpen && handleClose()}>
   <Dialog.Portal>
-    <Dialog.Overlay class="fixed start-0 top-0 flex h-dvh w-screen bg-black/30" />
+    <Dialog.Overlay class="fixed start-0 top-0 flex h-dvh max-h-dvh w-screen bg-black/30" />
     <Dialog.Content
-      onkeydown={(e) => {
-        if (e.key === 'Escape') {
-          e.stopPropagation();
-          e.preventDefault();
-          if (closeOnEsc) {
-            handleClose();
-          }
-        }
-      }}
-      onclick={handleCloseOnClick}
-      class={cleanClass('fixed start-0 top-0 flex h-dvh w-screen items-center justify-center overflow-hidden sm:p-4')}
+      {onEscapeKeydown}
+      {escapeKeydownBehavior}
+      {interactOutsideBehavior}
+      class={cleanClass(modalContentStyles({ size }))}
     >
-      <div class={cleanClass('flex h-full w-full flex-col items-center justify-center')}>
+      <div class={cleanClass('flex grow flex-col justify-center')}>
         <Card bind:ref={cardRef} class={cleanClass(modalStyles({ size }), className)}>
           <CardHeader class="border-b border-gray-200 px-5 py-3 dark:border-white/10">
             {#if headerChildren}

package/dist/components/Modal/Modal.svelte.d.ts

@@ -10,6 +10,7 @@ type Props = {
     closeOnBackdropClick?: boolean;
     children: Snippet;
     onClose?: () => void;
+    onEscapeKeydown?: (event: KeyboardEvent) => void;
 };
 declare const Modal: import("svelte").Component<Props, {}, "">;
 type Modal = ReturnType<typeof Modal>;

package/dist/components/SiteMetadata/SiteMetadata.svelte

@@ -1,45 +1,54 @@
 <script lang="ts">
-  import { resolveUrl } from '../../utilities/common.js';
+  import { resolveMetadata, resolveUrl, type ArticleMetadata, type Metadata } from '../../utilities/common.js';
 
   type Props = {
-    site: {
-      title: string;
-      description: string;
-      imageUrl?: string;
-    };
-    page?: {
-      title: string;
-      description: string;
-      imageUrl?: string;
-    };
+    site: Metadata;
+    page?: Metadata;
+    article?: ArticleMetadata;
   };
 
-  const { site, page }: Props = $props();
+  const { site, page, article }: Props = $props();
 
-  let fullTitle = $derived(page ? `${page.title} | ${site.title}` : site.title);
-
-  let pageDescription = $derived(page?.description ?? site.description);
-  let pageUrl = $derived(page?.imageUrl ?? site?.imageUrl);
+  let resolved = $derived(resolveMetadata(site, page, article));
 </script>
 
 <svelte:head>
-  <title>{fullTitle}</title>
-  <meta name="description" content={site.description} />
+  <title>{resolved.title}</title>
+  <meta name="description" content={resolved.description} />
+
+  <!-- Twitter Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={resolved.title} />
+  <meta name="twitter:description" content={resolved.description} />
+  {#if resolved.imageUrl}
+    <meta property="twitter:image" content={resolveUrl(resolved.imageUrl)} />
+  {/if}
 
   <!-- Facebook Meta Tags -->
-  <meta property="og:type" content="website" />
-  <meta property="og:site_name" content="{site.title} — {site.description}" />
-  <meta property="og:title" content={fullTitle} />
-  <meta property="og:description" content={pageDescription} />
-  {#if pageUrl}
-    <meta property="og:image" content={resolveUrl(pageUrl)} />
+  <meta property="og:type" content={resolved.type} />
+  <meta property="og:site_name" content={resolved.siteName} />
+  <meta property="og:title" content={resolved.title} />
+  <meta property="og:description" content={resolved.description} />
+  {#if resolved.imageUrl}
+    <meta property="og:image" content={resolveUrl(resolved.imageUrl)} />
   {/if}
 
-  <!-- Twitter Meta Tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content={fullTitle} />
-  <meta name="twitter:description" content={pageDescription} />
-  {#if pageUrl}
-    <meta property="twitter:image" content={resolveUrl(pageUrl)} />
+  {#if resolved.article}
+    <meta property="og:article:published_time" content={resolved.article.publishedTime} />
+    {#if resolved.article.modifiedTime}
+      <meta property="og:article:modified_time" content={resolved.article.modifiedTime} />
+    {/if}
+    {#if resolved.article.expirationTime}
+      <meta property="og:article:expiration_time" content={resolved.article.expirationTime} />
+    {/if}
+    {#if resolved.article.section}
+      <meta property="og:article:section" content={resolved.article.section} />
+    {/if}
+    {#each resolved.article.authors ?? [] as author (author)}
+      <meta property="og:article:author" content={author} />
+    {/each}
+    {#each resolved.article.tags ?? [] as tag (tag)}
+      <meta property="og:article:tag" content={tag} />
+    {/each}
   {/if}
 </svelte:head>

package/dist/components/SiteMetadata/SiteMetadata.svelte.d.ts

@@ -1,14 +1,8 @@
+import { type ArticleMetadata, type Metadata } from '../../utilities/common.js';
 type Props = {
-    site: {
-        title: string;
-        description: string;
-        imageUrl?: string;
-    };
-    page?: {
-        title: string;
-        description: string;
-        imageUrl?: string;
-    };
+    site: Metadata;
+    page?: Metadata;
+    article?: ArticleMetadata;
 };
 declare const SiteMetadata: import("svelte").Component<Props, {}, "">;
 type SiteMetadata = ReturnType<typeof SiteMetadata>;

package/dist/utilities/common.d.ts

@@ -1,2 +1,31 @@
+import { DateTime } from 'luxon';
 export declare const resolveUrl: (url: string, currentHostname?: string) => string;
 export declare const isExternalLink: (href: string) => boolean;
+export type Metadata = {
+    title: string;
+    description: string;
+    imageUrl?: string;
+};
+export type ArticleMetadata = {
+    publishedTime: DateTime;
+    modifiedTime?: DateTime;
+    expirationTime?: DateTime;
+    authors?: string[];
+    section?: string;
+    tags?: string[];
+};
+export declare const resolveMetadata: (site: Metadata, page?: Metadata, article?: ArticleMetadata) => {
+    type: string;
+    siteName: string;
+    title: string;
+    description: string;
+    imageUrl: string | undefined;
+    article: {
+        publishedTime: string | null;
+        modifiedTime: string | null | undefined;
+        expirationTime: string | null | undefined;
+        authors: string[] | undefined;
+        section: string | undefined;
+        tags: string[] | undefined;
+    } | undefined;
+};

package/dist/utilities/common.js

@@ -1,4 +1,5 @@
 import { env } from '$env/dynamic/public';
+import { DateTime } from 'luxon';
 const getImmichApp = (host) => {
     if (!host || !host.endsWith('immich.app')) {
         return false;
@@ -20,3 +21,27 @@ export const resolveUrl = (url, currentHostname) => {
 export const isExternalLink = (href) => {
     return !(href.startsWith('/') || href.startsWith('#'));
 };
+export const resolveMetadata = (site, page, article) => {
+    const title = page ? `${page.title} | ${site.title}` : site.title;
+    const description = page?.description ?? site.description;
+    const imageUrl = page?.imageUrl ?? site?.imageUrl;
+    const siteName = page ? `${site.title} — ${site.description}` : site.title;
+    const type = article ? 'article' : 'website';
+    return {
+        type,
+        siteName,
+        title,
+        description,
+        imageUrl,
+        article: article
+            ? {
+                publishedTime: article.publishedTime.toISO(),
+                modifiedTime: article.modifiedTime?.toISO(),
+                expirationTime: article.expirationTime?.toISO(),
+                authors: article.authors,
+                section: article.section,
+                tags: article.tags,
+            }
+            : undefined,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.33.0",
+  "version": "0.34.1",
   "license": "GNU Affero General Public License version 3",
   "scripts": {
     "create": "node scripts/create.js",
@@ -48,6 +48,7 @@
     "@tailwindcss/postcss": "^4.1.7",
     "@tailwindcss/vite": "^4.1.7",
     "@types/eslint": "^9.6.0",
+    "@types/luxon": "^3.7.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.7.0",
     "eslint-config-prettier": "^10.0.0",
@@ -69,11 +70,12 @@
   "dependencies": {
     "@mdi/js": "^7.4.47",
     "bits-ui": "^2.9.8",
+    "luxon": "^3.7.2",
     "simple-icons": "^15.14.0",
     "tailwind-merge": "^3.0.0",
     "tailwind-variants": "^3.0.0"
   },
   "volta": {
-    "node": "22.19.0"
+    "node": "22.20.0"
   }
 }