Move Opengraph metadata from the publication component to the publication page

src/lib/components/Publication.svelte

@@ -23,20 +23,6 @@
     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");
   }
@@ -114,29 +100,6 @@
   });
 </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

src/routes/publication/+page.svelte

@@ -4,19 +4,51 @@
   import type { PageData } from "./$types";
   import { onDestroy } from "svelte";
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
+  import { pharosInstance } from "$lib/parser";
+  import { page } from "$app/stores";
 
   // Extend the PageData type with the properties we need
   interface ExtendedPageData extends PageData {
     waitable: Promise<any>;
     publicationType: string;
     indexEvent: NDKEvent;
+    parser: any;
   }
 
   let { data } = $props<{ data: ExtendedPageData }>();
 
+  // Get publication metadata for OpenGraph tags
+  let title = $derived(data.indexEvent?.getMatchingTags('title')[0]?.[1] || data.parser?.getIndexTitle(data.parser?.getRootIndexId()) || '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(data.indexEvent?.getMatchingTags('image')[0]?.[1] || '/screenshots/old_books.jpg');
+  let summary = $derived(data.indexEvent?.getMatchingTags('summary')[0]?.[1] || 'Alexandria is a digital library, utilizing Nostr events for curated publications and wiki pages.');
+
   onDestroy(() => data.parser.reset());
 </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" />
+  <meta property="og:image" content="{image}" />
+  
+  <!-- Twitter Card meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="{title}" />
+  <meta name="twitter:description" content="{summary}" />
+  <meta name="twitter:image" content="{image}" />
+</svelte:head>
+
 <main>
   {#await data.waitable}
     <TextPlaceholder divClass='skeleton-leather w-full' size="xxl" />