[sveltekit] Text view

public/fonts.css

@@ -4,7 +4,8 @@
   font-style: normal;
   font-weight: 400;
   src: url("/fonts/source-sans-pro-v21-latin-regular.eot"); /* IE9 Compat Modes */
-  src: local(""),
+  src:
+    local(""),
     url("/fonts/source-sans-pro-v21-latin-regular.eot?#iefix")
       format("embedded-opentype"),
     /* IE6-IE8 */ url("/fonts/source-sans-pro-v21-latin-regular.woff2")
@@ -24,7 +25,8 @@
   font-style: italic;
   font-weight: 400;
   src: url("/fonts/source-sans-pro-v21-latin-italic.eot"); /* IE9 Compat Modes */
-  src: local(""),
+  src:
+    local(""),
     url("/fonts/source-sans-pro-v21-latin-italic.eot?#iefix")
       format("embedded-opentype"),
     /* IE6-IE8 */ url("/fonts/source-sans-pro-v21-latin-italic.woff2")
@@ -44,7 +46,8 @@
   font-style: normal;
   font-weight: 600;
   src: url("/fonts/source-sans-pro-v21-latin-600.eot"); /* IE9 Compat Modes */
-  src: local(""),
+  src:
+    local(""),
     url("/fonts/source-sans-pro-v21-latin-600.eot?#iefix")
       format("embedded-opentype"),
     /* IE6-IE8 */ url("/fonts/source-sans-pro-v21-latin-600.woff2")
@@ -64,7 +67,8 @@
   font-style: normal;
   font-weight: 700;
   src: url("/fonts/source-sans-pro-v21-latin-700.eot"); /* IE9 Compat Modes */
-  src: local(""),
+  src:
+    local(""),
     url("/fonts/source-sans-pro-v21-latin-700.eot?#iefix")
       format("embedded-opentype"),
     /* IE6-IE8 */ url("/fonts/source-sans-pro-v21-latin-700.woff2")
@@ -77,3 +81,17 @@
       url("/fonts/source-sans-pro-v21-latin-700.svg#SourceSansPro")
       format("svg"); /* Legacy iOS */
 }
+
+/* Source Code Pro */
+@font-face {
+  font-family: "Source Code Pro";
+  font-style: normal;
+  src: url("/fonts/SourceCodePro-VariableFont_wght.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Source Code Pro";
+  font-style: italic;
+  src: url("/fonts/SourceCodePro-Italic-VariableFont_wght.ttf")
+    format("truetype");
+}

src/common/Dropdown2.svelte

@@ -130,7 +130,7 @@
     position: relative;
   }
   .dropdownContainer.open {
-    z-index: var(--menuActive);
+    z-index: var(--menuActive, 16);
   }
   .title {
     display: block;
@@ -143,7 +143,7 @@
     border: 1px solid rgba(0, 0, 0, 0.1);
   }
   .title:hover {
-    background: var(--light-primary);
+    background: var(--light-primary, #eff7ff);
   }
   .title.open {
     background: var(--primary);
@@ -187,7 +187,7 @@
   }
 
   .overlay {
-    z-index: var(--menuShim);
+    z-index: var(--menuShim, 14);
     position: fixed;
     top: 0;
     left: 0;

src/common/Paginator.svelte

@@ -100,7 +100,7 @@
           bind:value={inputValue}
           on:change={handleChange}
           on:keyup={handleKeyup}
-          style={`width: ${inputWidth}ch`}
+          style={`min-width: ${inputWidth}ch`}
         />
       {:else}
         <span class="pageNumber">{page}</span>

src/common/icons/Document.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  const REM = 16;
+
+  export let size = 1.1;
+  export let title = "Document";
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={`${size * REM}px`}
+  height={`${size * REM}px`}
+  viewBox="0 0 17 16"
+  fill="none"
+>
+  <title>{title}</title>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.33167 1.5C4.19359 1.5 4.08167 1.61193 4.08167 1.75V14.25C4.08167 14.3881 4.19359 14.5 4.33167 14.5H13.8317C13.9697 14.5 14.0817 14.3881 14.0817 14.25V6H11.3317C10.3652 6 9.58167 5.2165 9.58167 4.25V1.5H4.33167ZM11.0817 1.5615V4.25C11.0817 4.38807 11.1936 4.5 11.3317 4.5H14.0202C14.0164 4.49569 14.0125 4.4915 14.0084 4.48744L11.0942 1.57322C11.0902 1.56916 11.086 1.56525 11.0817 1.5615ZM2.58167 1.75C2.58167 0.783502 3.36517 0 4.33167 0H10.9175C11.3816 0 11.8267 0.184374 12.1549 0.512563L15.0691 3.42678C15.3973 3.75497 15.5817 4.20008 15.5817 4.66421V14.25C15.5817 15.2165 14.7982 16 13.8317 16H4.33167C3.36517 16 2.58167 15.2165 2.58167 14.25V1.75Z"
+    fill="#1F2328"
+  />
+</svg>

src/common/icons/Notes.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  const REM = 16;
+
+  export let size = 1.1;
+  export let title = "Notes";
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={`${size * REM}px`}
+  height={`${size * REM}px`}
+  viewBox="0 0 17 17"
+  fill="none"
+>
+  <title>{title}</title>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3.168 3.25031C3.1017 3.25031 3.03811 3.27665 2.99122 3.32353C2.94434 3.37042 2.918 3.43401 2.918 3.50031V11.0003C2.918 11.1383 3.03 11.2503 3.168 11.2503H5.168C5.36691 11.2503 5.55768 11.3293 5.69833 11.47C5.83898 11.6106 5.918 11.8014 5.918 12.0003V14.1903L8.638 11.4703C8.77852 11.3296 8.96915 11.2505 9.168 11.2503H13.668C13.7343 11.2503 13.7979 11.224 13.8448 11.1771C13.8917 11.1302 13.918 11.0666 13.918 11.0003V3.50031C13.918 3.43401 13.8917 3.37042 13.8448 3.32353C13.7979 3.27665 13.7343 3.25031 13.668 3.25031H3.168ZM1.418 3.50031C1.418 2.53431 2.202 1.75031 3.168 1.75031H13.668C14.634 1.75031 15.418 2.53431 15.418 3.50031V11.0003C15.418 11.4644 15.2336 11.9095 14.9054 12.2377C14.5772 12.5659 14.1321 12.7503 13.668 12.7503H9.478L6.905 15.3233C6.70124 15.527 6.44167 15.6656 6.15911 15.7218C5.87654 15.778 5.58367 15.7491 5.3175 15.6389C5.05133 15.5287 4.82381 15.342 4.66371 15.1025C4.50361 14.863 4.4181 14.5814 4.418 14.2933V12.7503H3.168C2.70387 12.7503 2.25875 12.5659 1.93056 12.2377C1.60237 11.9095 1.418 11.4644 1.418 11.0003V3.50031Z"
+    fill="#1F2328"
+  />
+</svg>

src/common/icons/Text.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  const REM = 16;
+
+  export let size = 1.1;
+  export let title = "Text";
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={`${size * REM}px`}
+  height={`${size * REM}px`}
+  viewBox="0 0 17 16"
+  fill="none"
+>
+  <title>{title}</title>
+
+  <g clip-path="url(#clip0_1638_13525)">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.95954 8.5L5.32427 3.59417L3.60723 8.5H6.95954ZM7.45954 10L8.2886 12.4872C8.41959 12.8801 8.84433 13.0925 9.23729 12.9615C9.63024 12.8305 9.84261 12.4058 9.71163 12.0128L6.48453 2.33155C6.319 1.83496 5.85427 1.5 5.33082 1.5C4.81404 1.5 4.35369 1.8266 4.18297 2.31438L0.792219 12.0022C0.655383 12.3932 0.861391 12.8211 1.25235 12.9579C1.64331 13.0947 2.07117 12.8887 2.20801 12.4978L3.08223 10H7.45954ZM10.5908 5.64243C11.2787 4.37408 12.6191 4 13.75 4C15.2498 4 16.75 4.93852 16.75 6.60109V12.25C16.75 12.6642 16.4143 13 16 13C15.6829 13 15.4118 12.8032 15.3021 12.525C14.7451 12.8197 14.0504 13 13.2499 13C12.48 13 11.7363 12.769 11.1717 12.2913C10.5946 11.803 10.2499 11.0924 10.2499 10.25C10.2499 9.55605 10.515 8.83855 11.1368 8.30556C11.7498 7.7801 12.631 7.5 13.7499 7.5H15.25V6.60109C15.25 6.06148 14.7503 5.5 13.75 5.5C12.881 5.5 12.2214 5.78217 11.9093 6.35757C11.7118 6.72168 11.2566 6.85676 10.8925 6.65927C10.5284 6.46179 10.3933 6.00653 10.5908 5.64243ZM15.25 9H13.7499C12.8688 9 12.375 9.2199 12.113 9.44444C11.8598 9.66145 11.7499 9.94395 11.7499 10.25C11.7499 10.6576 11.9052 10.947 12.1406 11.1462C12.3885 11.356 12.7698 11.5 13.2499 11.5C13.982 11.5 14.5103 11.2915 14.8376 11.0514C15.1887 10.794 15.2499 10.5563 15.2499 10.5H15.25V9Z"
+      fill="#1F2328"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_1638_13525">
+      <rect
+        width="16"
+        height="16"
+        fill="white"
+        transform="translate(0.749908)"
+      />
+    </clipPath>
+  </defs>
+</svg>

src/common/icons/Thumbnails.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  const REM = 16;
+
+  export let size = 1.1;
+  export let title = "Thumbnails";
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={`${size * REM}px`}
+  height={`${size * REM}px`}
+  viewBox="0 0 17 16"
+  fill="none"
+>
+  <title>{title}</title>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M13.4139 7.5C14.3804 7.5 15.1639 6.7165 15.1639 5.75L15.1639 3.25C15.1639 2.2835 14.3804 1.5 13.4139 1.5L10.9139 1.5C9.94741 1.5 9.16391 2.2835 9.16391 3.25L9.16391 5.75C9.16391 6.7165 9.94741 7.5 10.9139 7.5L13.4139 7.5ZM13.6639 5.75C13.6639 5.88807 13.552 6 13.4139 6L10.9139 6C10.7758 6 10.6639 5.88807 10.6639 5.75L10.6639 3.25C10.6639 3.11193 10.7758 3 10.9139 3L13.4139 3C13.552 3 13.6639 3.11193 13.6639 3.25L13.6639 5.75Z"
+    fill="#1F2328"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M13.4139 14.5C14.3804 14.5 15.1639 13.7165 15.1639 12.75L15.1639 10.25C15.1639 9.2835 14.3804 8.5 13.4139 8.5L10.9139 8.5C9.94741 8.5 9.16391 9.2835 9.16391 10.25L9.16391 12.75C9.16391 13.7165 9.94741 14.5 10.9139 14.5L13.4139 14.5ZM13.6639 12.75C13.6639 12.8881 13.552 13 13.4139 13L10.9139 13C10.7758 13 10.6639 12.8881 10.6639 12.75L10.6639 10.25C10.6639 10.1119 10.7758 10 10.9139 10L13.4139 10C13.552 10 13.6639 10.1119 13.6639 10.25L13.6639 12.75Z"
+    fill="#1F2328"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.16391 12.75C8.16391 13.7165 7.38041 14.5 6.41391 14.5L3.91391 14.5C2.94741 14.5 2.16391 13.7165 2.16391 12.75L2.16391 10.25C2.16391 9.2835 2.94741 8.5 3.91391 8.5L6.41391 8.5C7.38041 8.5 8.16391 9.2835 8.16391 10.25L8.16391 12.75ZM6.41391 13C6.55198 13 6.66391 12.8881 6.66391 12.75L6.66391 10.25C6.66391 10.1119 6.55198 10 6.41391 10L3.91391 10C3.77584 10 3.66391 10.1119 3.66391 10.25L3.66391 12.75C3.66391 12.8881 3.77584 13 3.91391 13L6.41391 13Z"
+    fill="#1F2328"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6.41391 7.5C7.38041 7.5 8.16391 6.7165 8.16391 5.75L8.16391 3.25C8.16391 2.2835 7.38041 1.5 6.41391 1.5L3.91391 1.5C2.94741 1.5 2.16391 2.2835 2.16391 3.25L2.16391 5.75C2.16391 6.7165 2.94741 7.5 3.91391 7.5L6.41391 7.5ZM6.66391 5.75C6.66391 5.88807 6.55198 6 6.41391 6L3.91391 6C3.77584 6 3.66391 5.88807 3.66391 5.75L3.66391 3.25C3.66391 3.11193 3.77584 3 3.91391 3L6.41391 3C6.55198 3 6.66391 3.11193 6.66391 3.25L6.66391 5.75Z"
+    fill="#1F2328"
+  />
+</svg>

src/lib/api/addons.test.ts

@@ -17,7 +17,7 @@ describe("getAddons", () => {
   });
   it("calls the addons API endpoint", async () => {
     await addons.getAddons({}, mockFetch);
-    const expectedEndpoint = new URL(`addons`, BASE_API_URL);
+    const expectedEndpoint = new URL("addons/", BASE_API_URL);
     expect(mockFetch).toHaveBeenCalledWith(
       expectedEndpoint,
       expect.any(Object),
@@ -28,7 +28,7 @@ describe("getAddons", () => {
       { active: true, featured: true, query: "foobar" },
       mockFetch,
     );
-    const expectedEndpoint = new URL(`addons`, BASE_API_URL);
+    const expectedEndpoint = new URL("addons/", BASE_API_URL);
     expectedEndpoint.searchParams.set("active", "true");
     expectedEndpoint.searchParams.set("featured", "true");
     expectedEndpoint.searchParams.set("query", "foobar");
@@ -57,7 +57,7 @@ test("getPinnedAddons", async () => {
     .mockResolvedValue({ ok: true, json: async () => {} });
   await addons.getPinnedAddons(mockFetch);
   expect(mockFetch).toHaveBeenCalledWith(
-    new URL(`addons?active=true`, BASE_API_URL),
+    new URL(`addons/?active=true`, BASE_API_URL),
     expect.any(Object),
   );
 });
@@ -76,7 +76,7 @@ describe("getAddon", async () => {
   it("calls the addons list endpoint with a respository query argument", async () => {
     await addons.getAddon("MuckRock", "addon-repo", mockFetch);
     expect(mockFetch).toHaveBeenCalledWith(
-      new URL(`addons?repository=MuckRock%2Faddon-repo`, BASE_API_URL),
+      new URL(`addons/?repository=MuckRock%2Faddon-repo`, BASE_API_URL),
       expect.any(Object),
     );
   });

src/lib/api/documents.test.ts

@@ -1,7 +1,18 @@
-import type { Document, DocumentUpload, Pending, Sizes } from "./types";
+import type {
+  Document,
+  DocumentText,
+  DocumentUpload,
+  Pending,
+  Sizes,
+} from "./types";
 
 import { vi, test as base, describe, expect, afterEach } from "vitest";
-import { APP_URL, DC_BASE, IMAGE_WIDTHS_ENTRIES } from "@/config/config.js";
+import {
+  APP_URL,
+  BASE_API_URL,
+  DC_BASE,
+  IMAGE_WIDTHS_ENTRIES,
+} from "@/config/config.js";
 
 import * as documents from "./documents";
 
@@ -31,11 +42,79 @@ const test = base.extend({
 
     await use(pending);
   },
+
+  text: async ({}, use: Use<DocumentText>) => {
+    const { default: text } = await import(
+      "./fixtures/documents/document.txt.json"
+    );
+
+    await use(text);
+  },
 });
 
 describe("document fetching", () => {
   test.todo("documents.get");
   test.todo("documents.search");
+
+  test("documents.text public", async ({ document, text }) => {
+    const mockFetch = vi.fn().mockImplementation(async () => ({
+      ok: true,
+      async json() {
+        return text;
+      },
+    }));
+
+    const endpoint = documents.jsonUrl(document);
+
+    documents.text(document, mockFetch).then((t) => {
+      expect(t).toMatchObject(text);
+    });
+
+    expect(mockFetch).toHaveBeenCalledWith(endpoint);
+  });
+
+  test("documents.text private", async ({ document, text }) => {
+    const { asset_url } = document;
+    const privateText = new URL("private.txt.json", asset_url).toString();
+    const privateDoc = {
+      ...document,
+      access: "private",
+      asset_url: BASE_API_URL,
+    } as Document;
+
+    // to get private assets, we need to hit the API first for credentials
+    // then fetch the actual asset from cloud storage
+    const mockFetch = vi.fn().mockImplementation(async (endpoint, options) => {
+      console.log(endpoint.toString(), options);
+      // call 2
+      if (endpoint === privateText) {
+        return {
+          ok: true,
+          async json() {
+            return text;
+          },
+        };
+      }
+
+      // call 1
+      return {
+        status: 200,
+        headers: new Headers([["Location", privateText]]),
+        async json() {
+          return {
+            location: privateText,
+          };
+        },
+      };
+    });
+
+    documents.text(privateDoc, mockFetch).then((t) => {
+      expect(t).toMatchObject(text);
+
+      // we need two fetches for private assets
+      expect(mockFetch).toHaveBeenCalledTimes(2);
+    });
+  });
 });
 
 describe("document uploads and processing", () => {