Merges pull request #25

Issue#195 new Revamped solution for OpenGraph metadata
11 months ago · bf6c183f79
9 changed files with 92 additions and 10 deletions
--- a/src/app.html
+++ b/src/app.html
@ -2,7 +2,7 @@
				@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png?v=2" />
    <meta name="viewport" content="width=device-width" />
    %sveltekit.head%
  </head>
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/Publication.svelte
@ -14,8 +14,14 @@
				@@ -14,8 +14,14 @@
  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
+  }>();

  if (rootId !== $pharosInstance.getRootIndexId()) {
    console.error("Root ID does not match parser root index ID");
@ -94,6 +100,7 @@
				@@ -94,6 +100,7 @@
  });
 </script>

+
 {#if showTocButton && !showToc}
  <Button
    class="btn-leather fixed top-20 left-4 h-6 w-6"
--- a/src/lib/components/util/CardActions.svelte
+++ b/src/lib/components/util/CardActions.svelte
@ -138,8 +138,8 @@
				@@ -138,8 +138,8 @@
  </Popover>
  {/if}
  <!-- Event JSON -->
-  <Modal class='modal-leather' title='Event JSON' bind:open={jsonModalOpen} autoclose outsideclose size='sm'>
-    <div class="overflow-auto bg-highlight dark:bg-primary-900 text-sm rounded p-1">
+  <Modal class='modal-leather' title='Event JSON' bind:open={jsonModalOpen} autoclose outsideclose size='lg'>
+    <div class="overflow-auto bg-highlight dark:bg-primary-900 text-sm rounded p-1" style="max-height: 70vh;">
      <pre><code>{JSON.stringify(event.rawEvent(), null, 2)}</code></pre>
    </div>
  </Modal>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -2,15 +2,44 @@
				@@ -2,15 +2,44 @@
  import "../app.css";
  import Navigation from "$lib/components/Navigation.svelte";
  import { onMount } from "svelte";
+  import { page } from "$app/stores";

  // Compute viewport height.
  $: displayHeight = window.innerHeight;

+  // Get standard metadata for OpenGraph tags
+  let title = 'Library of Alexandria';
+  let currentUrl = $page.url.href;
+  
+  // Get default image and summary for the Alexandria website
+  let image = '/screenshots/old_books.jpg';
+  let summary = 'Alexandria is a digital library, utilizing Nostr events for curated publications and wiki pages.';
+
  onMount(() => {
    document.body.style.height = `${displayHeight}px`;
  });
 </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="website" />
+  <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>
+
 <div class={'leather min-h-full w-full flex flex-col items-center'}>
  <Navigation class='sticky top-0' />
  <slot />
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@ -4,8 +4,9 @@
				@@ -4,8 +4,9 @@

 <div class='w-full flex justify-center'>
  <main class='main-leather flex flex-col space-y-6 max-w-2xl w-full my-6 px-4'>
-    <Heading tag='h1' class='h-leather text-left mb-4'>About</Heading>
-    
+    <Heading tag='h1' class='h-leather text-left mb-4'>About the Library of Alexandria</Heading>
+    <Img src="/screenshots/old_books.jpg" alt="Alexandria icon" />
+
    <P class="mb-3">
        Alexandria is a reader and writer for <A href="/publication?d=gitcitadel-project-documentation-curated-publications-specification-7-by-stella-v-1">curated publications</A> (in Asciidoc), wiki pages (Asciidoc), and will eventually also support long-form articles (Markdown). It is produced by the <A href="/publication?d=gitcitadel-project-documentation-gitcitadel-project-1-by-stella-v-1">GitCitadel project team</A>.
      </P>
--- a/src/routes/publication/+page.svelte
+++ b/src/routes/publication/+page.svelte
@ -3,16 +3,60 @@
				@@ -3,16 +3,60 @@
  import { TextPlaceholder } from "flowbite-svelte";
  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";

-  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;
+    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" />
  {:then}
-    <Article rootId={data.parser.getRootIndexId()} publicationType={data.publicationType} />
+  <Article 
+      rootId={data.parser.getRootIndexId()} 
+      publicationType={data.publicationType} 
+      indexEvent={data.indexEvent} 
+    />
  {/await}
 </main>
--- a/src/routes/publication/+page.ts
+++ b/src/routes/publication/+page.ts
@ -1,6 +1,6 @@
				@@ -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> {
				@@ -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: () =>
				@@ -102,5 +102,6 @@ export const load: PageLoad = async ({ url, parent }: { url: URL; parent: () =>
  return {
    waitable: fetchPromise,
    publicationType,
+    indexEvent,
  };
 };
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/screenshots/old_books.jpg
+++ b/static/screenshots/old_books.jpg