Merge pull request #902 from MuckRock/898-embed-cache

src/config/config.js

@@ -37,6 +37,10 @@ export const SIGN_IN_URL = new URL(DC_LOGIN, DC_BASE).toString();
 export const SIGN_UP_URL = new URL(SQUARELET_SIGNUP, SQUARELET_BASE).toString();
 export const SIGN_OUT_URL = new URL(DC_LOGOUT, DC_BASE).toString();
 
+export const EMBED_MAX_AGE = 60 * 10;
+export const PAGE_MAX_AGE = 60 * 10;
+export const VIEWER_MAX_AGE = 60 * 10;
+
 export const VERIFICATION_FORM_URL =
   "https://airtable.com/app93Yt5cwdVWTnqn/pagogIhgB1jZTzq00/form";
 export const SQUARELET_ORGS_URL =

src/routes/(app)/+layout.ts

@@ -7,6 +7,7 @@ import type {
   Project,
   User,
 } from "$lib/api/types";
+
 import { getMe, orgUsers, userOrgs } from "$lib/api/accounts";
 import { getTipOfDay } from "$lib/api/flatpages";
 import { getPinnedAddons } from "$lib/api/addons";
@@ -24,6 +25,7 @@ export async function load({ fetch }) {
   let pinnedAddons: Promise<Nullable<APIResponse<Page<AddOnListItem>>>> =
     Promise.resolve(null);
   let pinnedProjects: Promise<Project[]> = Promise.resolve([]);
+
   if (me && org) {
     user_orgs = userOrgs(me, fetch).catch((e) => {
       console.error(e);
@@ -34,6 +36,7 @@ export async function load({ fetch }) {
       return [];
     });
   }
+
   if (me) {
     pinnedAddons = getPinnedAddons(fetch).catch((e) => {
       console.error(e);

src/routes/(app)/+page.server.ts

@@ -1,9 +1,11 @@
-import { _ } from "svelte-i18n";
-import { createFeedback, type Feedback } from "@/lib/api/feedback";
 import type { Actions } from "./$types";
+
+import { _ } from "svelte-i18n";
 import { fail } from "@sveltejs/kit";
 import { setFlash } from "sveltekit-flash-message/server";
 
+import { createFeedback, type Feedback } from "$lib/api/feedback";
+
 export const actions = {
   feedback: async ({ request, cookies, fetch }) => {
     const data = await request.formData();

src/routes/(app)/add-ons/+layout.ts

@@ -1,9 +1,18 @@
+import { VIEWER_MAX_AGE } from "@/config/config.js";
 import { breadcrumbTrail } from "$lib/utils/navigation";
 
-export async function load({ parent }) {
+export async function load({ parent, setHeaders }) {
+  const { me } = await parent();
   const breadcrumbs = await breadcrumbTrail(parent, [
     { href: "/add-ons/", title: "Add-Ons" },
   ]);
+
+  if (!me) {
+    setHeaders({
+      "max-age": `public, max-age=${VIEWER_MAX_AGE}`,
+    });
+  }
+
   return {
     breadcrumbs,
   };

src/routes/(app)/documents/+layout.ts

@@ -1,10 +1,19 @@
 import { breadcrumbTrail } from "$lib/utils/navigation";
 
-export async function load({ parent }) {
+import { VIEWER_MAX_AGE } from "@/config/config.js";
+
+export async function load({ parent, setHeaders }) {
+  const { me } = await parent();
   const breadcrumbs = await breadcrumbTrail(parent, [
     { href: "/documents/", title: "Documents" },
   ]);
 
+  if (!me) {
+    setHeaders({
+      "max-age": `public, max-age=${VIEWER_MAX_AGE}`,
+    });
+  }
+
   return {
     breadcrumbs,
   };

src/routes/(app)/projects/[id]-[slug]/+page.ts

@@ -7,13 +7,13 @@ import type {
 
 import { error, redirect } from "@sveltejs/kit";
 
-import { DEFAULT_PER_PAGE } from "@/config/config.js";
+import { DEFAULT_PER_PAGE, VIEWER_MAX_AGE } from "@/config/config.js";
 import * as projects from "$lib/api/projects";
 import * as collaborators from "$lib/api/collaborators";
 import { search } from "$lib/api/documents";
 import { breadcrumbTrail } from "$lib/utils/navigation";
 
-export async function load({ params, url, parent, data, fetch }) {
+export async function load({ params, url, parent, data, fetch, setHeaders }) {
   const id = parseInt(params.id, 10);
 
   const [project, users]: [
@@ -42,6 +42,8 @@ export async function load({ params, url, parent, data, fetch }) {
     { href: url.pathname, title: project.data.title },
   ]);
 
+  const { me } = await parent();
+
   const query = url.searchParams.get("q") ?? "";
   const cursor = url.searchParams.get("cursor") ?? "";
   const per_page = +(url.searchParams.get("per_page") || DEFAULT_PER_PAGE);
@@ -51,6 +53,13 @@ export async function load({ params, url, parent, data, fetch }) {
     fetch,
   );
 
+  if (!me) {
+    setHeaders({
+      "cache-control": `public, max-age=${VIEWER_MAX_AGE}`,
+      "last-modified": new Date(project.data.updated_at).toUTCString(),
+    });
+  }
+
   return {
     ...(data ?? {}), // include csrf_token
     breadcrumbs,

src/routes/(app)/upload/+page.ts

@@ -1,25 +1,22 @@
 /**
  * Data loading for upload
  */
-
+import { redirect } from "@sveltejs/kit";
 import * as projectsApi from "$lib/api/projects";
 
 export async function load({ fetch, parent }) {
   const { me } = await parent();
 
-  if (me) {
-    const projects = await projectsApi.list(
-      { per_page: 100, user: me.id },
-      fetch,
-    );
-
-    return {
-      projects: projects.data,
-    };
+  if (!me) {
+    return redirect(302, "/home/");
   }
 
-  // anonymous gets empty results
+  const projects = await projectsApi.list(
+    { per_page: 100, user: me.id },
+    fetch,
+  );
+
   return {
-    projects: { results: [] },
+    projects: projects.data,
   };
 }

src/routes/(pages)/[...path]/+page.ts

@@ -1,18 +1,23 @@
 // load data for flatpages
 import { error } from "@sveltejs/kit";
 
+import { PAGE_MAX_AGE } from "@/config/config.js";
 import * as flatpages from "$lib/api/flatpages";
 
-export async function load({ fetch, params }) {
+export async function load({ fetch, params, setHeaders }) {
   const { data, error: err } = await flatpages.get(params.path, fetch);
 
+  if (err) {
+    return error(err.status, { message: err.message });
+  }
+
   if (!data) {
     return error(404, "Page not found");
   }
 
-  if (err) {
-    return error(err.status, { message: err.message });
-  }
+  setHeaders({
+    "cache-control": `public, max-age=${PAGE_MAX_AGE}`,
+  });
 
   return data;
 }

src/routes/(pages)/home/+page.ts

@@ -4,23 +4,30 @@ import DOMPurify from "isomorphic-dompurify";
 import { marked } from "marked";
 import { gfmHeadingId } from "marked-gfm-heading-id";
 
+import { PAGE_MAX_AGE } from "@/config/config.js";
 import * as flatpages from "$lib/api/flatpages";
 import { getMe } from "$lib/api/accounts";
 
 marked.use(gfmHeadingId());
 
-export async function load({ fetch }) {
+export async function load({ fetch, setHeaders }) {
   const [{ data: page, error: err }, me] = await Promise.all([
     flatpages.get("/home/", fetch),
     getMe(fetch),
   ]);
 
+  if (err) {
+    return error(err.status, { message: err.message });
+  }
+
   if (!page) {
     return error(404, "Page not found");
   }
 
-  if (err) {
-    return error(err.status, { message: err.message });
+  if (!me) {
+    setHeaders({
+      "cache-control": `public, max-age=${PAGE_MAX_AGE}`,
+    });
   }
 
   return {

src/routes/embed/documents/[id]-[slug]/+page.ts

@@ -2,13 +2,13 @@ import type { ReadMode } from "$lib/api/types";
 
 import { redirect } from "@sveltejs/kit";
 
+import { EMBED_MAX_AGE } from "@/config/config.js";
 import { getEmbedSettings, type EmbedSettings } from "$lib/utils/embed.js";
-import { getQuery } from "$lib/utils/search.js";
 import loadDocument from "$lib/load/document";
 import * as documents from "$lib/api/documents";
 
 /** @type {import('./$types').PageLoad} */
-export async function load({ fetch, url, params, depends }) {
+export async function load({ fetch, url, params, depends, setHeaders }) {
   let { document, asset_url, mode } = await loadDocument({
     fetch,
     url,
@@ -25,13 +25,15 @@ export async function load({ fetch, url, params, depends }) {
 
   let settings: Partial<EmbedSettings> = getEmbedSettings(url.searchParams);
 
-  const query = getQuery(url, "q");
+  setHeaders({
+    "cache-control": `public, max-age=${EMBED_MAX_AGE}`,
+    "last-modified": new Date(document.updated_at).toUTCString(),
+  });
 
   return {
     document,
     mode,
     asset_url,
     settings,
-    query,
   };
 }

src/routes/embed/documents/[id]/annotations/[note_id]/+page.ts

@@ -1,9 +1,11 @@
 // load a note for embedding
 import { error } from "@sveltejs/kit";
-import * as documents from "@/lib/api/documents";
+
+import { EMBED_MAX_AGE } from "@/config/config.js";
+import * as documents from "$lib/api/documents";
 import * as notesApi from "$lib/api/notes";
 
-export async function load({ params, fetch }) {
+export async function load({ params, fetch, setHeaders }) {
   const [document, note] = await Promise.all([
     documents.get(+params.id, fetch),
     notesApi.get(+params.id, parseInt(params.note_id), fetch),
@@ -13,6 +15,11 @@ export async function load({ params, fetch }) {
     return error(404, "Document not found");
   }
 
+  setHeaders({
+    "cache-control": `public, max-age=${EMBED_MAX_AGE}`,
+    "last-modified": new Date(document.data.updated_at).toUTCString(),
+  });
+
   return {
     document: document.data,
     note: note.data,

src/routes/embed/documents/[id]/pages/[page]/+page.ts

@@ -1,11 +1,12 @@
 // load data for a single page embed
 import { error } from "@sveltejs/kit";
 
+import { EMBED_MAX_AGE } from "@/config/config.js";
 import * as documents from "$lib/api/documents";
 import * as notesApi from "$lib/api/notes";
 
 /** @type {import('./$types').PageLoad} */
-export async function load({ params, fetch }) {
+export async function load({ params, fetch, setHeaders }) {
   const page = +params.page;
   let [document, notes] = await Promise.all([
     documents.get(+params.id, fetch),
@@ -16,6 +17,11 @@ export async function load({ params, fetch }) {
     return error(404, "Document not found");
   }
 
+  setHeaders({
+    "cache-control": `public, max-age=${EMBED_MAX_AGE}`,
+    "last-modified": new Date(document.data.updated_at).toUTCString(),
+  });
+
   return {
     document: document.data,
     notes:

src/routes/embed/projects/[project_id]-[slug]/+page.ts

@@ -2,13 +2,15 @@
 import type { Maybe } from "$lib/api/types";
 
 import { error, redirect } from "@sveltejs/kit";
+
+import { EMBED_MAX_AGE } from "@/config/config.js";
 import { search } from "$lib/api/documents";
 import { get, embedUrl } from "$lib/api/projects";
 
 const OLD_PATTERN = /(\D+)-(\d+)/;
 
 /** @type {import('./$types').PageLoad} */
-export async function load({ params, fetch, url }) {
+export async function load({ params, fetch, url, setHeaders }) {
   // handle old URLs
   let { project_id, slug }: Record<string, Maybe<string>> = params;
   if (`${project_id}-${slug}`.match(OLD_PATTERN)) {
@@ -35,6 +37,11 @@ export async function load({ params, fetch, url }) {
     return redirect(302, embedUrl(project.data));
   }
 
+  setHeaders({
+    "cache-control": `public, max-age=${EMBED_MAX_AGE}`,
+    "last-modified": new Date(project.data.updated_at).toUTCString(),
+  });
+
   return {
     documents,
     error: project.error,