+
{
- uploadingFiles.value = noSerialize(Object.values((e.target as HTMLInputElement).files || {}));
- await uploadFiles();
+ uploadingFile.value = noSerialize((e.target as HTMLInputElement).files![0]);
+ await uploadFile();
}}
- multiple
/>
diff --git a/src/components/dashboard/File.tsx b/src/components/File.tsx
similarity index 57%
rename from src/components/dashboard/File.tsx
rename to src/components/File.tsx
index 50c1e02..3d82ba3 100644
--- a/src/components/dashboard/File.tsx
+++ b/src/components/File.tsx
@@ -1,9 +1,9 @@
-import { $, component$, Signal, useSignal, useTask$ } from "@builder.io/qwik";
+import { $, component$ } from "@builder.io/qwik";
import { useNanostore$ } from "~/hooks/nanostores";
import { api } from "~/lib/api";
import { dashboardFiles } from "~/lib/stores";
import { StereoFile } from "~/lib/types";
-import { SolarClipboardAddBold, SolarDownloadMinimalisticBold, SolarTrashBin2Bold } from "../misc/Icons";
+import { SolarClipboardAddBold, SolarDownloadMinimalisticBold, SolarTrashBin2Bold } from "./Icons";
type FileProps = {
file: StereoFile;
@@ -19,9 +19,9 @@ const formatSize = (bytes: number) => {
export default component$(({ file }: FileProps) => {
const files = useNanostore$(dashboardFiles);
- const deleteFile = $(async (id: string) => {
+ const deleteFile = $(async (uid: string, name: string) => {
if (!confirm("Are you sure you want to delete this file?")) return;
- await api.delete(id);
+ console.log(await api.delete(uid, name));
files.value = await api.list();
});
@@ -65,20 +65,22 @@ export default component$(({ file }: FileProps) => {
return (
= useSignal("other");
- const extension = file.Name.split('.').pop()?.toLowerCase() || "";
-
- useTask$(async () => {
- if (
- ["png", "jpg", "jpeg", "gif"]
- .includes(extension)) type.value = "image";
-
- else if (
- ["mp4", "webm", "ogg", "avi", "mov", "mkv"]
- .includes(extension)) type.value = "video";
- else if (
- ["mp3", "wav", "ogg", "flac", "aac"]
- .includes(extension)) type.value = "audio";
-
- else type.value = "other";
- });
-
- switch (type.value) {
- case "image":
- return (
- (dashboardFiles);
-
- const {
- highlight,
- onDragOver,
- onDragLeave,
- onInputChange,
- triggerFileInput,
- fileInputRef,
- } = useDropzone();
-
- useVisibleTask$(() => {
- const dropzone = document.getElementById("dropzone");
- if (!dropzone) return;
- const handler = async (e: DragEvent) => {
- e.preventDefault();
- highlight.value = false;
- const files = Array.from(e.dataTransfer?.files || []);
- for (const file of files) {
- const name = file.name.replace(/[^a-zA-Z0-9_.-]/g, "_");
- const f = new File([file], name, { type: file.type });
- await api.upload(f);
- dashfiles.value = await api.list();
- }
- };
- dropzone.addEventListener("drop", handler);
- return () => dropzone.removeEventListener("drop", handler);
- });
-
- return (
- ();
- const mouse1 = useRelativeMouse(ref1);
-
- const ref2 = useSignal();
- const mouse2 = useRelativeMouse(ref2);
-
- return (
- ();
-
- useOnDocument("DOMContentLoaded", $(async () => {
- if (!id) return;
-
- try {
- const response = await ky.get(`https://api.lanyard.rest/v1/users/${id}`).json();
- lanyard.value = response;
- console.log("Lanyard data:", lanyard.value);
- } catch (error) {
- console.error("Error fetching lanyard data:", error);
- }
- }));
-
- return (
- (undefined);
-
- return {
- highlight,
- onDragOver: $((e: DragEvent) => {
- e.preventDefault();
- highlight.value = true;
- }),
- onDragLeave: $((e: DragEvent) => {
- e.preventDefault();
- highlight.value = false;
- }),
- onInputChange,
- triggerFileInput: $(() => {
- fileInputRef.value?.click();
- }),
- fileInputRef,
- };
-}
\ No newline at end of file
diff --git a/src/hooks/mouse.ts b/src/hooks/mouse.ts
deleted file mode 100644
index 151b8aa..0000000
--- a/src/hooks/mouse.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { $, Signal, useOnDocument, useStore } from "@builder.io/qwik";
-
-export const useMouse = () => {
- const pos = useStore({ x: 0, y: 0 });
-
- useOnDocument("mousemove", $((event: MouseEvent) => {
- const { clientX, clientY } = event;
- pos.x = clientX;
- pos.y = clientY;
- }));
-
- return pos
-}
-
-export const useRelativeMouse = (ref: Signal) => {
- const pos = useStore({ x: 0, y: 0 });
-
- useOnDocument("mousemove", $((event: MouseEvent) => {
- const el = ref.value;
- if (!el) return;
- const rect = el.getBoundingClientRect();
- pos.x = event.clientX - rect.left;
- pos.y = event.clientY - rect.top;
- }));
-
- return pos;
-};
\ No newline at end of file
diff --git a/src/lib/api.ts b/src/lib/api.ts
index c75a9b8..b25f5dc 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -5,14 +5,16 @@ export const client = ky.create({
prefixUrl: '/api',
credentials: 'include'
});
-
+// TODO: make wrapper for apiclient fr
export const api = {
- file: async (uid: string) => await client.get(uid),
+ file: async (file_id: string) => await client.get(file_id),
list: async () => await client.get('list').json(),
upload: async (file: File) => {
const formData = new FormData();
formData.append('file', file);
return await client.post('upload', { body: formData });
},
- delete: async (uid: string) => await client.delete(uid).json(),
+ delete: async (uid: string, file: string) => {
+ return await client.delete(`${uid}/${file}`).json();
+ },
}
\ No newline at end of file
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 861bacc..63354f2 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,8 +1,6 @@
export type StereoFile = {
- ID: string;
Name: string;
Owner: string;
- Size: number;
CreatedAt: string;
- Mime: string;
+ Size: number;
}
\ No newline at end of file
diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx
index 98a3864..3211fe1 100644
--- a/src/routes/dashboard/index.tsx
+++ b/src/routes/dashboard/index.tsx
@@ -1,9 +1,8 @@
-import { component$, useVisibleTask$ } from "@builder.io/qwik";
+import { $, component$, useOnDocument } from "@builder.io/qwik";
import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city";
-import Controlbar from "~/components/dashboard/Controlbar";
-// import Dropzone from "~/components/Dropzone";
-import File from "~/components/dashboard/File";
-import { SolarUploadLinear, SvgSpinnersBarsRotateFade } from "~/components/misc/Icons";
+import Controlbar from "~/components/Controlbar";
+import File from "~/components/File";
+import { SolarUploadLinear, SvgSpinnersBarsRotateFade } from "~/components/Icons";
import { useNanostore$ } from "~/hooks/nanostores";
import { api } from "~/lib/api";
import { areFilesLoaded, dashboardFiles } from "~/lib/stores";
@@ -12,6 +11,7 @@ import { StereoFile } from "~/lib/types";
export const useAuthCheck = routeLoader$(({ cookie, redirect: r }) => {
const jwt = cookie.get("jwt");
if (jwt) return {};
+
throw r(302, "/");
});
@@ -19,42 +19,32 @@ export default component$(() => {
const files = useNanostore$(dashboardFiles);
const loaded = useNanostore$(areFilesLoaded);
- useVisibleTask$(async () => {
+ useOnDocument("DOMContentLoaded", $(async () => {
loaded.value = false;
files.value = await api.list();
console.log("Files loaded:", files.value);
loaded.value = true;
- });
+ }));
return (
<>
- {/*
-
- 
+ )}
)
-})
-
-const FilePreview = component$(({ file }: FileProps) => {
- type FileType =
- | "image"
- | "video"
- | "audio"
- | "other";
-
- const type: Signal
-
+
+ { (file.Name.endsWith(".png") || file.Name.endsWith(".jpg") || file.Name.endsWith(".jpeg")) && (
+
- 
-
- );
- case "video":
- return (
-
-
-
- );
- case "audio":
- return (
-
-
-
- );
- case "other":
- default:
- return (
-
-
- );
- }
-});
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/src/components/misc/Icons.tsx b/src/components/Icons.tsx
similarity index 100%
rename from src/components/misc/Icons.tsx
rename to src/components/Icons.tsx
diff --git a/src/components/misc/StereoLogo.tsx b/src/components/StereoLogo.tsx
similarity index 100%
rename from src/components/misc/StereoLogo.tsx
rename to src/components/StereoLogo.tsx
diff --git a/src/components/dashboard/Dropzone.tsx b/src/components/dashboard/Dropzone.tsx
deleted file mode 100644
index 71e4698..0000000
--- a/src/components/dashboard/Dropzone.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { component$, useVisibleTask$ } from "@builder.io/qwik";
-import { useDropzone } from "~/hooks/dropzone";
-import { useNanostore$ } from "~/hooks/nanostores";
-import { api } from "~/lib/api";
-import { dashboardFiles } from "~/lib/stores";
-import { StereoFile } from "~/lib/types";
-
-export default component$(() => {
- const dashfiles = useNanostore$- Preview not available -
-
-
- );
-});
\ No newline at end of file
diff --git a/src/components/landing/CallToAction.tsx b/src/components/landing/CallToAction.tsx
deleted file mode 100644
index 1b4fc31..0000000
--- a/src/components/landing/CallToAction.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { component$ } from "@builder.io/qwik";
-import { OAUTH_LINK } from "~/lib/constants";
-
-export default component$(() => (
- drop file ehre
- -
-
-));
\ No newline at end of file
diff --git a/src/components/landing/Footer.tsx b/src/components/landing/Footer.tsx
deleted file mode 100644
index 16fef9d..0000000
--- a/src/components/landing/Footer.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { component$ } from "@builder.io/qwik";
-import StereoLogo from "../misc/StereoLogo";
-
-export default component$(() => {
- return (
- - ready to try the stereo experience? -
-- join over 100k other people hosting their files with stereo! -
- - get started - -
-
- )
-})
\ No newline at end of file
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
deleted file mode 100644
index 298c35b..0000000
--- a/src/components/landing/Hero.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { component$, useSignal } from "@builder.io/qwik";
-import { useRelativeMouse } from "~/hooks/mouse";
-import { OAUTH_LINK } from "~/lib/constants";
-import GradientBorder from "../misc/GradientBorder";
-
-export default component$(() => {
- const ref1 = useSignal
-
-
-
-
-
-
-
-
-
-
- );
-});
\ No newline at end of file
diff --git a/src/components/landing/Navbar.tsx b/src/components/landing/Navbar.tsx
deleted file mode 100644
index 85fb716..0000000
--- a/src/components/landing/Navbar.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { component$ } from "@builder.io/qwik";
-import StereoLogo from "../misc/StereoLogo";
-
-export default component$(() => {
- const items = [
- { text: "Synopsis", href: "#" },
- { text: "Discord", href: "#" },
- { text: "Dashboard", href: "/dashboard", highlighted: true },
- { text: "Pricing", href: "#" },
- { text: "Terms", href: "#" }
- ];
-
- return (
-
-
-
-
- - you bring the files, we'll bring the magic. -
-- stereo is no-bs file-host inspired by Tixte, that you'll love to use -
- -
-
- 
-
-
- 
-
-
-
-
-
-
- )
-});
\ No newline at end of file
diff --git a/src/components/landing/Stats.tsx b/src/components/landing/Stats.tsx
deleted file mode 100644
index 0da6ea6..0000000
--- a/src/components/landing/Stats.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { component$ } from "@builder.io/qwik";
-
-export default component$(() => {
- type StatProps = {
- stat: string,
- description: string;
- }
-
- const Stat = component$(({ stat, description }: StatProps) => (
-
-
-
-
- stereo.cat
-
-
-
- ) );
-
- return (
-
-
- - {stat.includes("+") ? stat.substring(0, stat.length - 1) : stat} - {stat.endsWith("+") ? + : ""} -
-{description}
-
-
- )
-});
\ No newline at end of file
diff --git a/src/components/landing/Testimonials.tsx b/src/components/landing/Testimonials.tsx
deleted file mode 100644
index 5303576..0000000
--- a/src/components/landing/Testimonials.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { $, component$, useOnDocument, useSignal } from "@builder.io/qwik";
-import ky from "ky";
-
-export default component$(() => {
- type TestimonialProps = {
- nickname: string;
- pfp?: string;
- id?: string;
- quote: string;
- };
-
- type LanyardResponse = {
- data: {
- discord_status: "online" | "idle" | "dnd";
- discord_user: {
- avatar: string;
- }
- },
- success: boolean;
- }
-
- const Testimonial = component$(({ nickname, id, quote, pfp }: TestimonialProps) => {
- const lanyard = useSignal
-
- statistics
-- we know what you're thinking, and we have the numbers to prove it. -
-
-
-
-
- );
- });
-
- return (
-
- 
-
-
-
-
- “
-- {quote} -
-— {nickname}
-
-
- );
-});
\ No newline at end of file
diff --git a/src/components/misc/GradientBorder.tsx b/src/components/misc/GradientBorder.tsx
deleted file mode 100644
index 4507345..0000000
--- a/src/components/misc/GradientBorder.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { component$, CSSProperties, QwikIntrinsicElements, Slot } from "@builder.io/qwik";
-
-type GradientProps = {
- size: string;
- from: string;
- to: string;
- direction?: string;
-};
-
-export default component$((props: GradientProps & QwikIntrinsicElements["div"]) => {
- const {
- size,
- from,
- to,
- direction,
- style: userStyle,
- ...rest
- } = props;
-
- const borderStyle: CSSProperties = {
- padding: size,
- background: `linear-gradient(${direction || "to bottom"}, ${from}, ${to})`,
- display: "inline-block",
- };
-
- // Only spread userStyle if it's an object
- const mergedStyle =
- userStyle && typeof userStyle === "object"
- ? { ...borderStyle, ...userStyle }
- : borderStyle;
-
- return (
-
-
- testimonials
-- don't just take our word for it, hear it from our users. -
-
-
- - and many, many more... -
-
-
- );
-});
\ No newline at end of file
diff --git a/src/global.css b/src/global.css
index 402189e..49a69bf 100644
--- a/src/global.css
+++ b/src/global.css
@@ -3,5 +3,6 @@
@theme {
--font-sans: 'DM Sans', sans-serif;
- --color-stereo: #ff264e;
-}
\ No newline at end of file
+}
+
+@plugin 'tailwind-scrollbar';
\ No newline at end of file
diff --git a/src/hooks/dropzone.ts b/src/hooks/dropzone.ts
deleted file mode 100644
index e1817fe..0000000
--- a/src/hooks/dropzone.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { $, useSignal } from '@builder.io/qwik';
-
-export const useDropzone = () => {
- const highlight = useSignal(false);
-
- const onInputChange = $(async (e: Event) => {
- e.preventDefault();
- });
-
- const fileInputRef = useSignalloading your files...
- please wait... ⏳ + please wait ⏳
-
)
: (
- { - [ - "┻━┻︵ \\(°□°)/ ︵ ┻━┻", - "┻━┻︵ヽ(`Д´)ﾉ︵ ┻━┻", - "ʕノ•ᴥ•ʔノ ︵ ┻━┻", - "(╯°Д°）╯︵ /(.□ . \\)", - "┬─┬ ︵ /(.□. \\）", - "(/ .□.)\\ ︵╰(゜Д゜)╯︵ /(.□. \\)" - ].sort(() => Math.random() - 0.5)[0] - }
+{"┻━┻︵ \\(°□°)/ ︵ ┻━┻"}
you haven't uploaded any files yet!
- click the
+
{files.value.map((file) => (
-
-
-
- );
-});
-
-export const head: DocumentHead = {
- title: "Welcome to Qwik",
- meta: [
- {
- name: "description",
- content: "Qwik site description",
- },
- ],
-};
\ No newline at end of file
+ return (
+
+ );
+});
\ No newline at end of file
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
index fe816c8..78cbe47 100644
--- a/src/routes/layout.tsx
+++ b/src/routes/layout.tsx
@@ -1,25 +1,9 @@
-import { $, component$, Slot, useOnDocument } from '@builder.io/qwik';
-import AOS from 'aos';
-import 'aos/dist/aos.css';
-
+import { component$, Slot } from '@builder.io/qwik';
+
export default component$(() => {
- useOnDocument("DOMContentLoaded", $(() => {
- AOS.init({
- once: true,
- duration: 1000,
- offset: 100,
- easing: 'ease-in-out',
- });
- }))
-
- return (
-
-
- );
+ return (
+
+ );
});
\ No newline at end of file