From d4876f42f6e1dd4608c93cbd66ab4e5ed746699a Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 10 Dec 2024 14:09:47 -0500
Subject: [PATCH] Add published URL and source to document metadata

---
 src/lib/components/documents/Metadata.svelte  | 20 ++++++++++++
 .../documents/stories/Metadata.stories.svelte | 31 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/lib/components/documents/stories/Metadata.stories.svelte

diff --git a/src/lib/components/documents/Metadata.svelte b/src/lib/components/documents/Metadata.svelte
index 69983a0f9..1d2f357ea 100644
--- a/src/lib/components/documents/Metadata.svelte
+++ b/src/lib/components/documents/Metadata.svelte
@@ -15,6 +15,7 @@
   import { LANGUAGE_MAP } from "@/config/config.js";
   import { userOrgString } from "$lib/api/documents";
   import Metadata from "../common/Metadata.svelte";
+  import { LinkExternal16 } from "svelte-octicons";
 
   export let document: Document;
   export let text: Maybe<DocumentText>;
@@ -44,6 +45,19 @@
 </script>
 
 <div class="meta">
+  {#if document.published_url}
+    <Metadata key={$_("edit.fields.published_url")}>
+      <a href={document.published_url} class="publishedUrl" target="_blank">
+        {new URL(document.published_url).hostname}
+        <LinkExternal16 height={12} width={12} />
+      </a>
+    </Metadata>
+  {/if}
+  {#if document.source}
+    <Metadata key={$_("edit.fields.source")}>
+      {document.source}
+    </Metadata>
+  {/if}
   <Metadata key={$_("sidebar.contributed")}>
     {userOrgString(document)}
   </Metadata>
@@ -70,4 +84,10 @@
     gap: 1rem;
     padding: 0 0.5rem 1rem 0;
   }
+  .publishedUrl {
+    display: flex;
+    align-items: center;
+    fill: var(--blue-3);
+    gap: 0.25rem;
+  }
 </style>
diff --git a/src/lib/components/documents/stories/Metadata.stories.svelte b/src/lib/components/documents/stories/Metadata.stories.svelte
new file mode 100644
index 000000000..2eee9eebc
--- /dev/null
+++ b/src/lib/components/documents/stories/Metadata.stories.svelte
@@ -0,0 +1,31 @@
+<script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import MetadataComponent from "../Metadata.svelte";
+  import type { Document } from "@/lib/api/types";
+
+  import doc from "@/test/fixtures/documents/document-expanded.json";
+  const document = doc as Document;
+
+  export const meta = {
+    title: "Components / Documents / Metadata",
+    component: MetadataComponent,
+    parameters: {
+      layout: "centered",
+    },
+  };
+
+  const args = {
+    document: {
+      ...document,
+      source: "NYPD",
+      published_url:
+        "https://www.nytimes.com/live/2024/12/10/nyregion/unitedhealthcare-ceo-luigi-mangione",
+    },
+  };
+</script>
+
+<Template let:args>
+  <MetadataComponent {...args} />
+</Template>
+
+<Story name="Metadata" {args} />