niklas/s3-share
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added code splitting and basic opener

Browse Source
This commit is contained in:
Djeeberjr 2022-05-10 16:01:07 +02:00
parent af763d828a
commit 761701d2e9
6 changed files with 123 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -6,11 +6,9 @@
<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'>
<script defer src='/build/bundle.js'></script>
<script defer type="module" src='/build/main.js'></script>
</head>
<body>

4
rollup.config.js
View File

@ -34,9 +34,9 @@ export default {
input: 'web/main.ts',
output: {
sourcemap: true,
format: 'iife',
format: 'es',
name: 'app',
file: 'public/build/bundle.js'
dir: "public/build"
},
plugins: [
svelte({

43
web/App.svelte
View File

@ -1,27 +1,46 @@
<script lang="ts">
import { onMount } from "svelte";
import { onMount } from "svelte";
import getComponentForShare from "./contentType";
const slug = window.location.pathname.split("/").pop();
let data: String = null
let component = null;
onMount(async () => {
const regex = /filename="(.*)"/gm;
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>
<main>
<div>{ slug }</div>
<div>{slug}</div>
<div>
{#if data === null}
Loading data...
{:else}
{data}
{/if}
{#if component === null}
Loading data...
{:else}
{#await component}
Loading data...
{:then v }
<svelte:component this={v.default} />
{/await}
{/if}
</div>
</main>
<style>
</style>
</style>

68
web/contentType.ts Normal file
View 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
View 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
View 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>