Merge pull request #966 from MuckRock/allanlasser/issue850

Update documents for logged out users

src/lib/components/documents/Header.svelte

@@ -11,8 +11,9 @@
   import { _ } from "svelte-i18n";
 
   import { ALLOWED_TAGS, ALLOWED_ATTR } from "@/config/config.js";
-  import { remToPx } from "@/lib/utils/layout";
-  import Access, { getLevel } from "../common/Access.svelte";
+  import Access, { getLevel } from "$lib/components/common/Access.svelte";
+  import { remToPx } from "$lib/utils/layout";
+  import SignedIn from "../common/SignedIn.svelte";
 
   export let document: Document;
 
@@ -33,11 +34,13 @@
 </script>
 
 <header bind:clientWidth={width}>
-  {#if access}
-    <div class="access">
-      <Access level={access} />
-    </div>
-  {/if}
+  <SignedIn>
+    {#if access}
+      <div class="access">
+        <Access level={access} />
+      </div>
+    {/if}
+  </SignedIn>
   <h1 class="title">{document.title}</h1>
   {#if description}
     <div class="description" class:twoColumn={BREAKPOINTS.TWO_COLUMN}>

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>

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} />

src/lib/components/layouts/DocumentLayout.svelte

@@ -22,6 +22,7 @@ Assumes it's a child of a ViewerContext
   import { getCurrentUser } from "$lib/utils/permissions";
   import { isOrg } from "$lib/api/accounts";
   import { getDocument, getText } from "../viewer/ViewerContext.svelte";
+  import SignedIn from "../common/SignedIn.svelte";
 
   const me = getCurrentUser();
 
@@ -33,7 +34,7 @@ Assumes it's a child of a ViewerContext
   $: projects = (document.projects ?? []) as Project[];
 </script>
 
-<SidebarLayout>
+<SidebarLayout hideNavigation={!$me}>
   <nav class="column" slot="navigation">
     <Projects {projects} {document} />
     <Data {document} />
@@ -55,10 +56,10 @@ Assumes it's a child of a ViewerContext
           </Flex>
         </Metadata>
       {/if}
-      {#if $me}
-        <ViewerActions {document} user={$me} {action} />
-      {/if}
-      <AddOns query="+document:{document.id}" />
+      <ViewerActions {document} user={$me} {action} />
+      <SignedIn>
+        <AddOns query="+document:{document.id}" />
+      </SignedIn>
     </Flex>
     {#await text then text}
       <DocumentMetadata {document} {text} />

src/lib/components/layouts/SidebarLayout.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
   import Sidebar from "./Sidebar.svelte";
+
+  export let hideNavigation = false;
+  export let hideActions = false;
 </script>
 
 <div class="sidebarLayoutContainer">
-  {#if $$slots.navigation}
+  {#if $$slots.navigation && !hideNavigation}
     <Sidebar position="left" id="navigation">
       <slot name="navigation" />
     </Sidebar>
@@ -13,7 +16,7 @@
     <slot name="content" />
   </div>
 
-  {#if $$slots.action}
+  {#if $$slots.action && !hideActions}
     <Sidebar position="right" id="action">
       <slot name="action" />
     </Sidebar>

src/lib/components/sidebar/ViewerActions.svelte

@@ -1,7 +1,7 @@
 <!-- Assumes its a child of ViewerContext -->
 
 <script lang="ts">
-  import type { Document, Org, User } from "$lib/api/types";
+  import type { Document, Nullable, Org, User } from "$lib/api/types";
 
   import { _ } from "svelte-i18n";
   import {
@@ -33,7 +33,7 @@
   import { getCurrentPage } from "../viewer/ViewerContext.svelte";
 
   export let document: Document;
-  export let user: User;
+  export let user: Nullable<User>;
   export let action: string = "";
 
   const page = getCurrentPage();