implemen OpenGraph metadata

src/lib/components/Publication.svelte

@@ -14,8 +14,28 @@
   import Preview from "./Preview.svelte";
   import { pharosInstance } from "$lib/parser";
   import { page } from "$app/state";
+  import { ndkInstance } from "$lib/ndk";
+  import type { NDKEvent } from "@nostr-dev-kit/ndk";
 
-  let { rootId, publicationType } = $props<{ rootId: string, publicationType: string }>();
+  let { rootId, publicationType, indexEvent } = $props<{ 
+    rootId: string, 
+    publicationType: string,
+    indexEvent: NDKEvent
+  }>();
+  
+  // Get publication metadata for OpenGraph tags
+  let title = $derived($pharosInstance.getIndexTitle(rootId) || 'Alexandria Publication');
+  let currentUrl = page.url.href;
+  
+  // Get image and summary from the event tags if available
+  // If image unavailable, use the Alexandria default pic.
+  let image = $derived(indexEvent?.getMatchingTags('image')[0]?.[1] || '/screenshots/old_books.jpg');
+  let summary = $derived(indexEvent?.getMatchingTags('summary')[0]?.[1] || ``);
+  
+  // Debug: Log the event and its tags
+  console.log('indexEvent:', indexEvent);
+  console.log('image tag:', indexEvent?.getMatchingTags('image'));
+  console.log('summary tag:', indexEvent?.getMatchingTags('summary'));
 
   if (rootId !== $pharosInstance.getRootIndexId()) {
     console.error("Root ID does not match parser root index ID");
@@ -94,6 +114,30 @@
   });
 </script>
 
+<svelte:head>
+  <!-- Basic meta tags -->
+  <title>{title}</title>
+  <meta name="description" content="{summary}" />
+  
+  <!-- OpenGraph meta tags -->
+  <meta property="og:title" content="{title}" />
+  <meta property="og:description" content="{summary}" />
+  <meta property="og:url" content="{currentUrl}" />
+  <meta property="og:type" content="article" />
+  <meta property="og:site_name" content="Alexandria" />
+  {#if image}
+  <meta property="og:image" content="{image}" />
+  {/if}
+  
+  <!-- Twitter Card meta tags -->
+  <meta name="twitter:card" content="{image ? 'summary_large_image' : 'summary'}" />
+  <meta name="twitter:title" content="{title}" />
+  <meta name="twitter:description" content="{summary}" />
+  {#if image}
+  <meta name="twitter:image" content="{image}" />
+  {/if}
+</svelte:head>
+
 {#if showTocButton && !showToc}
   <Button
     class="btn-leather fixed top-20 left-4 h-6 w-6"

src/routes/publication/+page.svelte

@@ -3,8 +3,16 @@
   import { TextPlaceholder } from "flowbite-svelte";
   import type { PageData } from "./$types";
   import { onDestroy } from "svelte";
+  import type { NDKEvent } from "@nostr-dev-kit/ndk";
 
-  let { data }: { data: PageData } = $props();
+  // Extend the PageData type with the properties we need
+  interface ExtendedPageData extends PageData {
+    waitable: Promise<any>;
+    publicationType: string;
+    indexEvent: NDKEvent;
+  }
+
+  let { data } = $props<{ data: ExtendedPageData }>();
 
   onDestroy(() => data.parser.reset());
 </script>
@@ -13,6 +21,10 @@
   {#await data.waitable}
     <TextPlaceholder divClass='skeleton-leather w-full' size="xxl" />
   {:then}
-    <Article rootId={data.parser.getRootIndexId()} publicationType={data.publicationType} />
+  <Article 
+      rootId={data.parser.getRootIndexId()} 
+      publicationType={data.publicationType} 
+      indexEvent={data.indexEvent} 
+    />
   {/await}
 </main>

src/routes/publication/+page.ts

@@ -1,6 +1,6 @@
 import { error } from '@sveltejs/kit';
+import type { Load } from '@sveltejs/kit';
 import type { NDKEvent } from '@nostr-dev-kit/ndk';
-import type { PageLoad } from './$types';
 import { nip19 } from 'nostr-tools';
 import { getActiveRelays } from '$lib/ndk.ts';
 
@@ -82,7 +82,7 @@ async function fetchEventByDTag(ndk: any, dTag: string): Promise<NDKEvent> {
   }
 }
 
-export const load: PageLoad = async ({ url, parent }: { url: URL; parent: () => Promise<any> }) => {
+export const load: Load = async ({ url, parent }: { url: URL; parent: () => Promise<any> }) => {
   const id = url.searchParams.get('id');
   const dTag = url.searchParams.get('d');
   const { ndk, parser } = await parent();
@@ -102,5 +102,6 @@ export const load: PageLoad = async ({ url, parent }: { url: URL; parent: () =>
   return {
     waitable: fetchPromise,
     publicationType,
+    indexEvent,
   };
 };