75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import Image from 'next/image';
|
|
|
|
import DownloadTTY from './download_tty';
|
|
import Content from './content';
|
|
import * as style from './page.css';
|
|
import download_image_dark from './download_dark.svg';
|
|
import download_image_light from './download_light.svg';
|
|
|
|
type SearchParams = { [key: string]: string | string[] | undefined };
|
|
|
|
type Props = {
|
|
params: { file: string[] },
|
|
searchParams: SearchParams,
|
|
};
|
|
|
|
function get_path(file: string[]) {
|
|
return file.join("/");
|
|
}
|
|
|
|
function get_root(search_params: SearchParams) {
|
|
return search_params['root'] ?? 'raw.monodon.me';
|
|
}
|
|
|
|
export async function generateMetadata(
|
|
{ params, searchParams }: Props,
|
|
): Promise<Metadata> {
|
|
return {
|
|
title: `${get_path(params.file)} | ${get_root(searchParams)}`,
|
|
};
|
|
}
|
|
|
|
export default async function Page({
|
|
params, searchParams
|
|
}: Props) {
|
|
const path = get_path(params.file);
|
|
const root = `https://${get_root(searchParams)}/`;
|
|
const full = `${root}${path}`;
|
|
|
|
const download_ttys = [
|
|
`curl -O ${root}${path}`,
|
|
`wget ${root}${path}`,
|
|
];
|
|
|
|
return (
|
|
<div className={style.root}>
|
|
<div className={style.center}>
|
|
<div className={style.title_group}>
|
|
<div className={style.title_text_group}>
|
|
<p className={style.supertitle}>{root}</p>
|
|
<p className={style.title}>{path}</p>
|
|
</div>
|
|
<button className={style.download_button}>
|
|
<a href={full} download>
|
|
<Image
|
|
className={style.download_button_image_dark}
|
|
src={download_image_dark}
|
|
alt="Download Button"
|
|
/>
|
|
<Image
|
|
className={style.download_button_image_light}
|
|
src={download_image_light}
|
|
alt="Download Button"
|
|
/>
|
|
</a>
|
|
</button>
|
|
</div>
|
|
<div className={style.download_tty_group}>
|
|
{download_ttys.map((text, index) => <DownloadTTY key={index} text={text} />)}
|
|
</div>
|
|
<Content src={`${root}${path}`} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|