Vendored view

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /build
+/vendored
 /.svelte-kit
 /package
 .env

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
+    "vendor": "VENDORED=true vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

src/lib/components/ContentContainer.svelte

@@ -16,28 +16,32 @@
   import Error from "$lib/components/Error.svelte";
   import Loading from "$lib/components/Loading.svelte";
 
+  export let vendored: boolean = false;
+
   let loadingComponent: undefined | HTMLElement;
 </script>
 
 <div id="positioned-container">
   <div id="content-container">
-    <div
-      class={$url.pathname.replaceAll("/", "") === "" && $loading.status !== "LOADING" ? "tab" : "hidden-tab"}
-    >
-      <p class="pb-4">
-        This interface can view .qza and .qzv files directly in your browser
-        without uploading to a server.
-        <a
-          href="#"
-          on:click={() =>
-            history.pushState({}, "", "/about/" + window.location.search)}
-          >Click here to learn more.
-        </a>
-      </p>
-      <DropZone />
-      <UrlInput />
-      <Gallery />
-    </div>
+    {#if !vendored}
+      <div
+        class={$url.pathname.replaceAll("/", "") === "" && $loading.status !== "LOADING" ? "tab" : "hidden-tab"}
+      >
+        <p class="pb-4">
+          This interface can view .qza and .qzv files directly in your browser
+          without uploading to a server.
+          <a
+            href="#"
+            on:click={() =>
+              history.pushState({}, "", "/about/" + window.location.search)}
+            >Click here to learn more.
+          </a>
+        </p>
+        <DropZone />
+        <UrlInput />
+        <Gallery />
+      </div>
+    {/if}
     <div
       class={$url.pathname.replaceAll("/", "") === "about" && $loading.status !== "LOADING"
         ? "tab"

src/lib/components/DropZone.svelte

@@ -40,6 +40,7 @@
     } else if (files.length > 1) {
       alert("Please only provide a single file.");
     } else {
+      console.log(files[0]);
       readerModel.readData(files[0]);
     }
   }

src/lib/components/NavBar.svelte

@@ -12,6 +12,8 @@
   import { createCollapsible, createDropdownMenu, melt } from "@melt-ui/svelte";
   import { slide, fly } from "svelte/transition";
 
+  export let vendored: boolean = false;
+
   onMount(() => {
     const nav_dropdown = document.getElementById("nav-dropdown") as Element;
     observer.observe(nav_dropdown);
@@ -49,18 +51,22 @@
   }
 
   function navLogoClicked() {
+    // It's easiest to just calculate this here. If we do it at the top of the
+    // page then we will likely do it before index path is set.
+    let logoTarget = vendored ? ($readerModel.indexPath ? "/visualization/" : "/details/") : "/";
+
     if ($loading.status === "LOADING") {
       // If we are in the loading state go back to root and reload to force the
       // loading to stop
-      history.pushState({}, "", "/");
+      history.pushState({}, "", logoTarget);
       location.reload();
     } else if ($url.pathname.replaceAll("/", "") === "error") {
       // If we are navigating away from the error page then we want to clean out
       // the errored state and push clean state
       readerModel.clear();
-      history.pushState({}, "", "/");
+      history.pushState({}, "", logoTarget);
     } else {
-      history.pushState({}, "", "/" + window.location.search);
+      history.pushState({}, "", logoTarget + window.location.search);
     }
   }
 </script>
@@ -75,7 +81,7 @@
         <li id="file-text">
           File: {$readerModel.name}
         </li>
-        {#if $readerModel.indexPath || $readerModel.rawSrc}
+        {#if !vendored && ($readerModel.indexPath || $readerModel.rawSrc)}
           <li>
             <button title="Unload File" id="close-button" on:click={() => {
                 readerModel.clear();

src/lib/components/Vendored.svelte

@@ -0,0 +1,59 @@
+<script>
+  import NavBar from "$lib/components/NavBar.svelte";
+  import ContentContainer from "$lib/components/ContentContainer.svelte";
+
+  import url from "$lib/scripts/url-store";
+
+  import "../../app.css";
+  import readerModel from "$lib/models/readerModel";
+
+  import { onMount } from "svelte";
+  import { checkBrowserCompatibility } from "$lib/scripts/util";
+
+  // For the vendored view, we want the server to give us a session id to use
+  // as a token to verify that we are allowed to access files
+  function getVendoredSession() {
+    const vendoredSession = $url.searchParams.get('session');
+
+    if (vendoredSession === null) {
+      throw new Error('Session searchParam not found.');
+    }
+
+    readerModel.session = vendoredSession;
+    readerModel._dirty();
+  }
+
+  async function getFileFromServer() {
+    try {
+      const fileName = $url.searchParams.get('file');
+
+      if (fileName === null) {
+        throw new Error('File searchParam not found. No file to load.');
+      }
+
+      const response = await fetch(`${window.location.origin}${fileName}`, {
+        method: 'GET',
+      });
+
+      if (!response.ok) {
+        throw new Error(`Received network response ${response}. Not OK.`);
+      }
+
+      const blob = await response.blob();
+      const file = new File([blob], fileName, { type: blob.type });
+      readerModel.readData(file);
+    } catch (error) {
+      console.error(`There was a problem with the fetch operation: ${error}`);
+    }
+  }
+
+  onMount(() => {
+    checkBrowserCompatibility();
+  });
+
+  getVendoredSession();
+  getFileFromServer();
+</script>
+
+<NavBar vendored={true}/>
+<ContentContainer vendored={true}/>

src/routes-sw/(main)/+layout.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Main from "$lib/components/Main.svelte";
+</script>
+
+<Main />

src/routes-vend/(error)/incompatible/+page.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  const downloadChrome = 'https://www.google.com/chrome/browser/';
+  const downloadFirefox = 'https://www.mozilla.org/firefox';
+</script>
+
+<div class="container" style="text-align: center">
+  <h1>Incompatible Browser</h1>
+  <div  class="row" style="margin-bottom: 50px;">
+    <div class="col-md-12">
+      Sorry, your current browser does not support the latest web-technologies
+      that this site needs.
+    </div>
+  </div>
+  <div class="row show-grid">
+    <div class="col-md-6 col-md-push-6" style="margin-bottom: 4em;">
+      <a href={downloadFirefox}><img src="/images/firefox.png" alt="Firefox" /></a>
+      <h3>
+        Download <strong><a href={downloadFirefox}>Mozilla Firefox&reg;</a></strong>
+      </h3>
+      <p>(requires version 47 or later;<br />will not work in private browsing)</p>
+    </div>
+  <div class="col-md-6 col-md-pull-6">
+    <a href={downloadChrome}><img src="/images/chrome.png" alt="Chrome" /></a>
+    <h3>
+        Download <strong><a href={downloadChrome}>Google Chrome&reg;</a></strong>
+    </h3>
+    <p>(requires version 49 or later)</p>
+    </div>
+  </div>
+</div>

src/routes-vend/(main)/+layout.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Vendored from "$lib/components/Vendored.svelte"
+</script>
+
+<Vendored />

src/routes-vend/+layout.js

@@ -0,0 +1,5 @@
+// Static render
+// export const prerender = true;
+
+export const ssr = false;
+export const trailingSlash = "always";

svelte.config.js

@@ -1,19 +1,12 @@
-import adapter from "@sveltejs/adapter-static";
-import { vitePreprocess } from "@sveltejs/kit/vite";
-import { preprocessMeltUI, sequence } from "@melt-ui/pp";
+import sw_config from "./sw-config.js";
+import vend_config from "./vend-config.js";
 
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
-  // for more information about preprocessors
-  preprocess: sequence([vitePreprocess(), preprocessMeltUI()]),
+let config;
 
-  kit: {
-    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
-    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
-    adapter: adapter({ fallback: "index.html" }),
-  },
-};
+if (process.env.VENDORED) {
+  config = vend_config;
+} else {
+  config = sw_config;
+}
 
 export default config;

sw-config.js

@@ -0,0 +1,24 @@
+import adapter from "@sveltejs/adapter-static";
+import { vitePreprocess } from "@sveltejs/kit/vite";
+import { preprocessMeltUI, sequence } from "@melt-ui/pp";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: sequence([vitePreprocess(), preprocessMeltUI()]),
+
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter({
+      fallback: "index.html",
+    }),
+    files: {
+      routes: "src/routes-sw",
+    },
+  },
+};
+
+export default config;

vend-config.js

@@ -0,0 +1,26 @@
+import adapter from "@sveltejs/adapter-static";
+import { vitePreprocess } from "@sveltejs/kit/vite";
+import { preprocessMeltUI, sequence } from "@melt-ui/pp";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: sequence([vitePreprocess(), preprocessMeltUI()]),
+
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter({
+      fallback: "index.html",
+      pages: "vendored",
+    }),
+    files: {
+      routes: "src/routes-vend",
+      serviceWorker: "",
+    },
+  },
+};
+
+export default config;