zaremate/file-hosting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

other fix to embeds

Browse Source
This commit is contained in:
ZareMate 2025-04-15 09:26:54 +02:00
parent e91446be99
commit 2eed080238
Signed by: zaremate
GPG Key ID: 369A0E45E03A81C3
2 changed files with 42 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/app/share/[id].tsx
View File

@ -1,53 +0,0 @@
// pages/share/[id].tsx
import Head from "next/head";
import type { GetServerSideProps } from "next";
interface FileDetails {
name: string;
size: number;
owner: string;
uploadDate: string;
id: string;
url: string;
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const id = context.query.id as string;
const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/share?id=${id}`);
if (!res.ok) {
return {
notFound: true,
};
}
const fileDetails: FileDetails = await res.json();
return {
props: {
fileDetails,
},
};
};
export default function SharePage({ fileDetails }: { fileDetails: FileDetails }) {
return (
<>
<Head>
<title>{fileDetails.name}</title>
<meta property="og:title" content={fileDetails.name} />
<meta property="og:description" content={`File shared by ${fileDetails.owner}`} />
<meta property="og:image" content={fileDetails.url} />
<meta property="og:url" content={`${process.env.NEXT_PUBLIC_PAGE_URL}/share?id=${fileDetails.id}`} />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="T3 File Share" />
</Head>
<main className="text-white flex flex-col items-center justify-center min-h-screen bg-black">
<h1 className="text-3xl font-bold mb-4">File: {fileDetails.name}</h1>
<p>Size: {(fileDetails.size / 1024).toFixed(2)} KB</p>
<p>Uploaded by: {fileDetails.owner}</p>
</main>
</>
);
}

51
src/app/share/page.tsx
View File

@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
import { useSearchParams, useRouter } from "next/navigation"; import { useSearchParams, useRouter } from "next/navigation";
import toast, { Toaster } from "react-hot-toast"; import toast, { Toaster } from "react-hot-toast";
import Head from "next/head"; import Head from "next/head";
import { number } from "zod";
// import { SharePage } from "~/components/SharePage"; // import { SharePage } from "~/components/SharePage";
@ -51,6 +52,47 @@ function UploadsPage() {
void fetchFileDetails(); // Use `void` to mark the promise as intentionally ignored void fetchFileDetails(); // Use `void` to mark the promise as intentionally ignored
}, [fileId]); }, [fileId]);
// set page og meta tags
useEffect(() => {
if (fileDetails) {
const ogTitle = `File Details: ${fileDetails.name}`;
// proper size conversion
const sizeInKB = fileDetails.size / 1024;
const sizeInMB = sizeInKB / 1024;
const sizeInGB = sizeInMB / 1024;
let sizeDescription: string = `${sizeInKB.toFixed(2)} KB`;
if (sizeInMB >= 1) {
sizeDescription = `${sizeInMB.toFixed(2)} MB`;
} else if (sizeInGB >= 1) {
sizeDescription = `${sizeInGB.toFixed(2)} GB`;
}
const ogDescription = `File Name: ${fileDetails.name}, Size: ${sizeDescription}, Owner: ${fileDetails.owner}, Upload Date: ${new Date(fileDetails.uploadDate).toLocaleString()}`;
document.title = ogTitle;
// if meta og tags are not present, create them
if (!document.querySelector('meta[name="description"]')) {
const metaDescription = document.createElement("meta");
metaDescription.name = "description";
document.head.appendChild(metaDescription);
}
if (!document.querySelector('meta[property="og:title"]')) {
const metaOgTitle = document.createElement("meta");
metaOgTitle.setAttribute("property", "og:title");
document.head.appendChild(metaOgTitle);
}
if (!document.querySelector('meta[property="og:description"]')) {
const metaOgDescription = document.createElement("meta");
metaOgDescription.setAttribute("property", "og:description");
document.head.appendChild(metaOgDescription);
}
document.querySelector('meta[name="description"]')?.setAttribute("content", ogDescription);
document.querySelector('meta[property="og:title"]')?.setAttribute("content", ogTitle);
document.querySelector('meta[property="og:description"]')?.setAttribute("content", ogDescription);
}
}, [fileDetails]);
const handleDownload = async () => { const handleDownload = async () => {
try { try {
if (!fileDetails) { if (!fileDetails) {
@ -138,15 +180,6 @@ function UploadsPage() {
return ( return (
<main className="relative flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white"> <main className="relative flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
<head>
<meta property="og:title" content={fileDetails.name} />
<meta property="og:description" content={`File details for ${fileDetails.name}`} />
<meta property="og:image" content={fileDetails.url} />
<meta property="og:url" content={`${window.location.origin}/share?id=${fileDetails.id}`} />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="File Hosting - Suchodupin" />
<meta property="og:locale" content="en_US" />
</head>
<Toaster position="top-right" reverseOrder={false} /> <Toaster position="top-right" reverseOrder={false} />
<div className="absolute top-4 left-4"> <div className="absolute top-4 left-4">
<button <button