@immich/ui 0.33.0 → 0.34.0

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.0",
   "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,6 +70,7 @@
   "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"