@immich/ui 0.32.0 → 0.34.0

package/dist/components/SiteMetadata/SiteMetadata.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { resolveMetadata, resolveUrl, type ArticleMetadata, type Metadata } from '../../utilities/common.js';
+
+  type Props = {
+    site: Metadata;
+    page?: Metadata;
+    article?: ArticleMetadata;
+  };
+
+  const { site, page, article }: Props = $props();
+
+  let resolved = $derived(resolveMetadata(site, page, article));
+</script>
+
+<svelte:head>
+  <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={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}
+
+  {#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

@@ -0,0 +1,9 @@
+import { type ArticleMetadata, type Metadata } from '../../utilities/common.js';
+type Props = {
+    site: Metadata;
+    page?: Metadata;
+    article?: ArticleMetadata;
+};
+declare const SiteMetadata: import("svelte").Component<Props, {}, "">;
+type SiteMetadata = ReturnType<typeof SiteMetadata>;
+export default SiteMetadata;

package/dist/index.d.ts

@@ -51,6 +51,7 @@ export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
 export { default as PasswordInput } from './components/PasswordInput/PasswordInput.svelte';
 export { default as Scrollable } from './components/Scrollable/Scrollable.svelte';
 export { default as Select } from './components/Select/Select.svelte';
+export { default as SiteMetadata } from './components/SiteMetadata/SiteMetadata.svelte';
 export { default as HStack } from './components/Stack/HStack.svelte';
 export { default as Stack } from './components/Stack/Stack.svelte';
 export { default as VStack } from './components/Stack/VStack.svelte';

package/dist/index.js

@@ -53,6 +53,7 @@ export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
 export { default as PasswordInput } from './components/PasswordInput/PasswordInput.svelte';
 export { default as Scrollable } from './components/Scrollable/Scrollable.svelte';
 export { default as Select } from './components/Select/Select.svelte';
+export { default as SiteMetadata } from './components/SiteMetadata/SiteMetadata.svelte';
 export { default as HStack } from './components/Stack/HStack.svelte';
 export { default as Stack } from './components/Stack/Stack.svelte';
 export { default as VStack } from './components/Stack/VStack.svelte';

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,5 +1,7 @@
+import { env } from '$env/dynamic/public';
+import { DateTime } from 'luxon';
 const getImmichApp = (host) => {
-    if (!host.endsWith('immich.app')) {
+    if (!host || !host.endsWith('immich.app')) {
         return false;
     }
     if (host === 'immich.app' || host.startsWith('pr-')) {
@@ -13,9 +15,33 @@ export const resolveUrl = (url, currentHostname) => {
     }
     const target = new URL(url);
     const targetApp = getImmichApp(target.hostname);
-    const currentApp = getImmichApp(currentHostname ?? globalThis.location.hostname);
+    const currentApp = getImmichApp(currentHostname ?? globalThis.location?.hostname ?? env.PUBLIC_IMMICH_HOSTNAME);
     return targetApp && targetApp === currentApp ? target.pathname : target.href;
 };
 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.32.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"