From c1c9d565184091bf422e05cbd6ca7b689cd1e1c1 Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Sat, 12 Apr 2025 20:00:13 +0200
Subject: [PATCH] Move Opengraph metadata from the publication component to the
 publication page

---
 src/lib/components/Publication.svelte | 37 ---------------------------
 src/routes/publication/+page.svelte   | 32 +++++++++++++++++++++++
 2 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte
index 9d79264..e61cbb3 100644
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/Publication.svelte
@@ -22,20 +22,6 @@
     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");
@@ -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
diff --git a/src/routes/publication/+page.svelte b/src/routes/publication/+page.svelte
index 9e40cb5..dff8ffb 100644
--- a/src/routes/publication/+page.svelte
+++ b/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" />