added file size

.gitignore

@@ -1,2 +1,3 @@
 /node_modules/
 /public/build/
+/build/

Makefile

@@ -0,0 +1,18 @@
+BINARY = s3share
+BUILD_DIR = build
+
+.PHONY: all
+all: clean build
+
+.PHONY:build
+build: $(BUILD_DIR)/$(BINARY) $(BUILD_DIR)/public
+
+$(BUILD_DIR)/$(BINARY):  
+	go build -o $(BUILD_DIR)/$(BINARY) cmd/s3share.go 
+
+$(BUILD_DIR)/public:
+	npm run build && cp -r public/ $(BUILD_DIR)/public
+
+.PHONY:clean
+clean:
+	rm -rf $(BUILD_DIR) && rm -rf public/build/

web/App.svelte

@@ -1,17 +1,26 @@
 <script lang="ts">
-	import { onMount } from "svelte";
 	import getComponentForShare from "./contentType";
+	import NotFound from "./NotFound.svelte";
+	import sizeToReadable from "./sizeToReadable";
 
 	const regex = /filename="(.*)"/gm;
 	const slug = window.location.pathname.split("/").pop();
 
-	let component = null;
+	let notFound = false;
 	let contentType: string;
 	let filename: string;
+	let fileSize: number = 0;
 
-	async function getFileHeadAndComponent() {
+	async function getFileHead() {
 		const res = await fetch(`/s/${slug}`,{method:"HEAD"});
+
+		if (res.status === 404){
+			notFound = true;
+			return;
+		}
+
 		contentType = res.headers.get("Content-Type");
+		fileSize = parseInt(res.headers.get("Content-Length"));
 
 		let match;
 		while ((match = regex.exec(res.headers.get("Content-Disposition"))) !== null) {
@@ -21,19 +30,30 @@
 			}
 			filename = match[1];
 		}
-		
-		return getComponentForShare(contentType,filename);
+
+		document.title = filename;
 	}
 </script>
 
-<div class="dl">
-	<a href="/s/{slug}">Download</a>
-</div>
+{#if !notFound}
+	<div class="dl">
+		<a href="/s/{slug}">Download ({sizeToReadable(fileSize)})</a>
+	</div>
+{/if}
 <main>
-	{#await getFileHeadAndComponent()}
+	{#await getFileHead()}
 		Loading data...
-	{:then v } 
-		<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
+	{:then}
+
+		{#if notFound}
+			<NotFound />
+		{:else}
+			{#await getComponentForShare(contentType, filename)}
+				Loading component...
+			{:then v} 
+				<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
+			{/await}
+		{/if}
 	{/await}
 </main>
 

web/NotFound.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+
+</script>
+
+<p>Share not found</p>
+
+<style>
+    p{
+        color: var(--color-secondary);
+        font-size: 3rem;
+    }
+</style>

web/opener/Default.svelte

@@ -5,5 +5,21 @@
 </script>
 
 <div>
-	Default opener
+	<header>{filename}</header>
+	<main>
+		Unable to preview this share.
+	</main>
 </div>
+
+<style>
+	header{
+		font-size: 3rem;
+		color: var(--color-secondary);
+		text-align: center;
+	}
+
+	main{
+		color: var(--color-secondary);
+		font-size: 1.5rem;
+	}
+</style>

web/sizeToReadable.ts

@@ -0,0 +1,10 @@
+function sizeToReadable(size: number): string {
+	if (size == 0)
+		return "0 B"
+	const i = Math.floor(Math.log(size) / Math.log(1024))
+	const num = (size / Math.pow(1024, i))
+	return (num.toFixed(1).endsWith("0")?num.toFixed(0):num.toFixed(1)) + " " + ["B", "kB", "MB", "GB", "TB"][i]
+
+}
+
+export default sizeToReadable