Merge pull request #1013 from MuckRock/1008-detect-iframe

src/lib/components/onboarding/GuidedTour.svelte

@@ -61,6 +61,7 @@
 </script>
 
 <script lang="ts">
+  import { afterNavigate } from "$app/navigation";
   import { onMount } from "svelte";
   import { getCurrentUser } from "$lib/utils/permissions";
 
@@ -85,6 +86,11 @@
       }
     }
   });
+
+  afterNavigate(() => {
+    // if we navigate anywhere else, end the tour
+    endTour();
+  });
 </script>
 
 <slot />

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

@@ -4,12 +4,21 @@ import type { Access, Document, Note } from "$lib/api/types";
 import { fail } from "@sveltejs/kit";
 import { setFlash, redirect } from "sveltekit-flash-message/server";
 
-import { CSRF_COOKIE_NAME } from "@/config/config.js";
+import { CSRF_COOKIE_NAME, EMBED_URL } from "@/config/config.js";
 import { destroy, edit, redact } from "$lib/api/documents";
 import * as notes from "$lib/api/notes";
 import { isErrorCode } from "$lib/utils/api";
 
-export function load({ cookies }) {
+export function load({ cookies, request, url }) {
+  const inIframe = request.headers.get("Sec-Fetch-Dest") === "iframe";
+  if (inIframe) {
+    const embed = new URL(url);
+
+    embed.host = new URL(EMBED_URL).host;
+    embed.searchParams.set("embed", "1");
+    return redirect(307, embed);
+  }
+
   const csrf_token = cookies.get(CSRF_COOKIE_NAME);
 
   return { csrf_token };

src/routes/(app)/documents/[id]-[slug]/+page.svelte

@@ -3,10 +3,11 @@
  -->
 
 <script lang="ts">
-  import "@/style/kit.css";
-
   import { browser } from "$app/environment";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
 
+  import { onMount } from "svelte";
   import { embedUrl } from "$lib/api/embed";
   import * as documents from "$lib/api/documents";
 
@@ -26,6 +27,15 @@
 
   $: action = data.action;
   $: hasDescription = Boolean(document.description?.trim().length);
+
+  onMount(() => {
+    // if we're in an iframe, redirect to the embed route
+    const inIframe = window.self !== window.top;
+    if (inIframe) {
+      const embedUrl = documents.embedUrl(document, $page.url.searchParams);
+      goto(embedUrl);
+    }
+  });
 </script>
 
 <svelte:head>

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

@@ -20,6 +20,7 @@ export async function load({
   depends,
   url,
   setHeaders,
+  data,
 }) {
   const { document, asset_url, mode } = await loadDocument({
     fetch,
@@ -55,6 +56,7 @@ export async function load({
   }
 
   return {
+    ...data,
     document,
     mode,
     asset_url,

src/routes/embed/+layout.ts

@@ -1 +1 @@
-export const trailingSlash = "always";
+export const trailingSlash = "ignore";