added code splitting and basic opener
This commit is contained in:
parent
af763d828a
commit
761701d2e9
@ -6,11 +6,9 @@
|
|||||||
|
|
||||||
<title>Loading...</title>
|
<title>Loading...</title>
|
||||||
|
|
||||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
|
||||||
<link rel='stylesheet' href='/global.css'>
|
|
||||||
<link rel='stylesheet' href='/build/bundle.css'>
|
<link rel='stylesheet' href='/build/bundle.css'>
|
||||||
|
|
||||||
<script defer src='/build/bundle.js'></script>
|
<script defer type="module" src='/build/main.js'></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
@ -34,9 +34,9 @@ export default {
|
|||||||
input: 'web/main.ts',
|
input: 'web/main.ts',
|
||||||
output: {
|
output: {
|
||||||
sourcemap: true,
|
sourcemap: true,
|
||||||
format: 'iife',
|
format: 'es',
|
||||||
name: 'app',
|
name: 'app',
|
||||||
file: 'public/build/bundle.js'
|
dir: "public/build"
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
svelte({
|
svelte({
|
||||||
|
@ -1,27 +1,46 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
import getComponentForShare from "./contentType";
|
||||||
const slug = window.location.pathname.split("/").pop();
|
const slug = window.location.pathname.split("/").pop();
|
||||||
|
|
||||||
let data: String = null
|
let component = null;
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
|
const regex = /filename="(.*)"/gm;
|
||||||
const res = await fetch(`/s/${slug}`);
|
const res = await fetch(`/s/${slug}`);
|
||||||
document.title = slug;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
const contentType: string = res.headers.get("Content-Type");
|
||||||
|
|
||||||
|
let filename: string;
|
||||||
|
let m;
|
||||||
|
while ((m = regex.exec(res.headers.get("Content-Disposition"))) !== null) {
|
||||||
|
// This is necessary to avoid infinite loops with zero-width matches
|
||||||
|
if (m.index === regex.lastIndex) {
|
||||||
|
regex.lastIndex++;
|
||||||
|
}
|
||||||
|
filename = m[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
document.title = filename;
|
||||||
|
|
||||||
|
component = getComponentForShare(contentType,filename);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div>{ slug }</div>
|
<div>{slug}</div>
|
||||||
<div>
|
<div>
|
||||||
{#if data === null}
|
{#if component === null}
|
||||||
Loading data...
|
Loading data...
|
||||||
{:else}
|
{:else}
|
||||||
{data}
|
{#await component}
|
||||||
|
Loading data...
|
||||||
|
{:then v }
|
||||||
|
<svelte:component this={v.default} />
|
||||||
|
{/await}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
</style>
|
</style>
|
68
web/contentType.ts
Normal file
68
web/contentType.ts
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
|
||||||
|
export default function getComponentForShare(contentType: string, filename: string) {
|
||||||
|
if (contentType.startsWith("image/")) {
|
||||||
|
return import("./opener/Default.svelte");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (contentType.startsWith("video/")) {
|
||||||
|
return import("./opener/Default.svelte");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (contentType.startsWith("audio/")) {
|
||||||
|
return import("./opener/Default.svelte");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (contentType.startsWith("application/pdf")) {
|
||||||
|
return import("./opener/Default.svelte");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (contentType.startsWith("text/")) {
|
||||||
|
return import("./opener/Text.svelte");
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (contentType) {
|
||||||
|
case "application/json":
|
||||||
|
case "application/ld+json":
|
||||||
|
case "application/xhtml+xml":
|
||||||
|
case "application/xml":
|
||||||
|
return import("./opener/Default.svelte");
|
||||||
|
case "application/ogg":
|
||||||
|
return import("./opener/Default.svelte");
|
||||||
|
}
|
||||||
|
|
||||||
|
const extension = filename.split(".").pop();
|
||||||
|
if (extension === undefined) {
|
||||||
|
return import("./opener/Default.svelte");
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (extension) {
|
||||||
|
case "png":
|
||||||
|
case "jpg":
|
||||||
|
case "jpeg":
|
||||||
|
case "gif":
|
||||||
|
return import("./opener/Default.svelte");
|
||||||
|
case "mp4":
|
||||||
|
case "mov":
|
||||||
|
case "avi":
|
||||||
|
case "mkv":
|
||||||
|
case "wmv":
|
||||||
|
case "flv":
|
||||||
|
case "mpg":
|
||||||
|
case "mpeg":
|
||||||
|
return import("./opener/Default.svelte");
|
||||||
|
case "mp3":
|
||||||
|
case "wav":
|
||||||
|
case "ogg":
|
||||||
|
case "flac":
|
||||||
|
return import("./opener/Default.svelte");
|
||||||
|
case "pdf":
|
||||||
|
return import("./opener/Default.svelte");
|
||||||
|
case "txt":
|
||||||
|
case "md":
|
||||||
|
case "markdown":
|
||||||
|
return import("./opener/Default.svelte");
|
||||||
|
}
|
||||||
|
|
||||||
|
return import("./opener/Text.svelte");
|
||||||
|
|
||||||
|
}
|
10
web/opener/Default.svelte
Normal file
10
web/opener/Default.svelte
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let contentType: string;
|
||||||
|
export let filename: string;
|
||||||
|
export let slug: string;
|
||||||
|
export let response: Response;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Default opener
|
||||||
|
</div>
|
11
web/opener/Text.svelte
Normal file
11
web/opener/Text.svelte
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let contentType: string;
|
||||||
|
export let filename: string;
|
||||||
|
export let slug: string;
|
||||||
|
export let response: Response;
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Text opener
|
||||||
|
</div>
|
Loading…
Reference in New Issue
Block a user