+
{
- uploadingFile.value = noSerialize((e.target as HTMLInputElement).files![0]);
- await uploadFile();
+ uploadingFiles.value = noSerialize(Object.values((e.target as HTMLInputElement).files || {}));
+ await uploadFiles();
}}
+ multiple
/>
diff --git a/src/components/dashboard/Dropzone.tsx b/src/components/dashboard/Dropzone.tsx
new file mode 100644
index 0000000..71e4698
--- /dev/null
+++ b/src/components/dashboard/Dropzone.tsx
@@ -0,0 +1,62 @@
+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$(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 (
+ (dashboardFiles);
- const deleteFile = $(async (uid: string, name: string) => {
+ const deleteFile = $(async (id: string) => {
if (!confirm("Are you sure you want to delete this file?")) return;
- console.log(await api.delete(uid, name));
+ await api.delete(id);
files.value = await api.list();
});
@@ -65,22 +65,20 @@ 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 (
+ ();
+ 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
new file mode 100644
index 0000000..151b8aa
--- /dev/null
+++ b/src/hooks/mouse.ts
@@ -0,0 +1,27 @@
+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 b25f5dc..c75a9b8 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -5,16 +5,14 @@ export const client = ky.create({
prefixUrl: '/api',
credentials: 'include'
});
-// TODO: make wrapper for apiclient fr
+
export const api = {
- file: async (file_id: string) => await client.get(file_id),
+ file: async (uid: string) => await client.get(uid),
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, file: string) => {
- return await client.delete(`${uid}/${file}`).json();
- },
+ delete: async (uid: string) => await client.delete(uid).json(),
}
\ No newline at end of file
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 63354f2..861bacc 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,6 +1,8 @@
export type StereoFile = {
+ ID: string;
Name: string;
Owner: string;
- CreatedAt: string;
Size: number;
+ CreatedAt: string;
+ Mime: string;
}
\ No newline at end of file
diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx
index 3211fe1..98a3864 100644
--- a/src/routes/dashboard/index.tsx
+++ b/src/routes/dashboard/index.tsx
@@ -1,8 +1,9 @@
-import { $, component$, useOnDocument } from "@builder.io/qwik";
+import { component$, useVisibleTask$ } from "@builder.io/qwik";
import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city";
-import Controlbar from "~/components/Controlbar";
-import File from "~/components/File";
-import { SolarUploadLinear, SvgSpinnersBarsRotateFade } from "~/components/Icons";
+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 { useNanostore$ } from "~/hooks/nanostores";
import { api } from "~/lib/api";
import { areFilesLoaded, dashboardFiles } from "~/lib/stores";
@@ -11,7 +12,6 @@ import { StereoFile } from "~/lib/types";
export const useAuthCheck = routeLoader$(({ cookie, redirect: r }) => {
const jwt = cookie.get("jwt");
if (jwt) return {};
-
throw r(302, "/");
});
@@ -19,32 +19,42 @@ export default component$(() => {
const files = useNanostore$(dashboardFiles);
const loaded = useNanostore$(areFilesLoaded);
- useOnDocument("DOMContentLoaded", $(async () => {
+ useVisibleTask$(async () => {
loaded.value = false;
files.value = await api.list();
console.log("Files loaded:", files.value);
loaded.value = true;
- }));
+ });
return (
<>
+ {/*
+
+ );
+});
\ No newline at end of file
diff --git a/src/components/File.tsx b/src/components/dashboard/File.tsx
similarity index 57%
rename from src/components/File.tsx
rename to src/components/dashboard/File.tsx
index 3d82ba3..50c1e02 100644
--- a/src/components/File.tsx
+++ b/src/components/dashboard/File.tsx
@@ -1,9 +1,9 @@
-import { $, component$ } from "@builder.io/qwik";
+import { $, component$, Signal, useSignal, useTask$ } 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 "./Icons";
+import { SolarClipboardAddBold, SolarDownloadMinimalisticBold, SolarTrashBin2Bold } from "../misc/Icons";
type FileProps = {
file: StereoFile;
@@ -19,9 +19,9 @@ const formatSize = (bytes: number) => {
export default component$(({ file }: FileProps) => {
const files = useNanostore$drop file ehre
+ +
-
- { (file.Name.endsWith(".png") || file.Name.endsWith(".jpg") || file.Name.endsWith(".jpeg")) && (
- 
- )}
+
+
)
-})
\ No newline at end of file
+})
+
+const FilePreview = component$(({ file }: FileProps) => {
+ type FileType =
+ | "image"
+ | "video"
+ | "audio"
+ | "other";
+
+ const type: Signal
+
+ 
+
+ );
+ case "video":
+ return (
+
+
+
+ );
+ case "audio":
+ return (
+
+
+
+ );
+ case "other":
+ default:
+ return (
+
+
+ );
+ }
+});
\ No newline at end of file
diff --git a/src/components/landing/CallToAction.tsx b/src/components/landing/CallToAction.tsx
new file mode 100644
index 0000000..1b4fc31
--- /dev/null
+++ b/src/components/landing/CallToAction.tsx
@@ -0,0 +1,23 @@
+import { component$ } from "@builder.io/qwik";
+import { OAUTH_LINK } from "~/lib/constants";
+
+export default component$(() => (
+ + Preview not available +
+
+
+));
\ No newline at end of file
diff --git a/src/components/landing/Footer.tsx b/src/components/landing/Footer.tsx
new file mode 100644
index 0000000..16fef9d
--- /dev/null
+++ b/src/components/landing/Footer.tsx
@@ -0,0 +1,29 @@
+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
new file mode 100644
index 0000000..298c35b
--- /dev/null
+++ b/src/components/landing/Hero.tsx
@@ -0,0 +1,83 @@
+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
new file mode 100644
index 0000000..85fb716
--- /dev/null
+++ b/src/components/landing/Navbar.tsx
@@ -0,0 +1,41 @@
+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
new file mode 100644
index 0000000..0da6ea6
--- /dev/null
+++ b/src/components/landing/Stats.tsx
@@ -0,0 +1,40 @@
+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
new file mode 100644
index 0000000..5303576
--- /dev/null
+++ b/src/components/landing/Testimonials.tsx
@@ -0,0 +1,112 @@
+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
new file mode 100644
index 0000000..4507345
--- /dev/null
+++ b/src/components/misc/GradientBorder.tsx
@@ -0,0 +1,40 @@
+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/components/Icons.tsx b/src/components/misc/Icons.tsx
similarity index 100%
rename from src/components/Icons.tsx
rename to src/components/misc/Icons.tsx
diff --git a/src/components/StereoLogo.tsx b/src/components/misc/StereoLogo.tsx
similarity index 100%
rename from src/components/StereoLogo.tsx
rename to src/components/misc/StereoLogo.tsx
diff --git a/src/global.css b/src/global.css
index 49a69bf..402189e 100644
--- a/src/global.css
+++ b/src/global.css
@@ -3,6 +3,5 @@
@theme {
--font-sans: 'DM Sans', sans-serif;
-}
-
-@plugin 'tailwind-scrollbar';
\ No newline at end of file
+ --color-stereo: #ff264e;
+}
\ No newline at end of file
diff --git a/src/hooks/dropzone.ts b/src/hooks/dropzone.ts
new file mode 100644
index 0000000..e1817fe
--- /dev/null
+++ b/src/hooks/dropzone.ts
@@ -0,0 +1,28 @@
+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
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
index 78cbe47..fe816c8 100644
--- a/src/routes/layout.tsx
+++ b/src/routes/layout.tsx
@@ -1,9 +1,25 @@
-import { component$, Slot } from '@builder.io/qwik';
-
+import { $, component$, Slot, useOnDocument } from '@builder.io/qwik';
+import AOS from 'aos';
+import 'aos/dist/aos.css';
+
export default component$(() => {
- return (
-
- );
+ useOnDocument("DOMContentLoaded", $(() => {
+ AOS.init({
+ once: true,
+ duration: 1000,
+ offset: 100,
+ easing: 'ease-in-out',
+ });
+ }))
+
+ return (
+
+
+ );
});
\ No newline at end of file