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}
 | 
				
			||||||
    	{/if}
 | 
									Loading data...
 | 
				
			||||||
 | 
								{:then v } 
 | 
				
			||||||
 | 
									<svelte:component this={v.default} />
 | 
				
			||||||
 | 
								{/await}
 | 
				
			||||||
 | 
							{/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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user