diff --git a/src/app/[...file]/download.svg b/src/app/[...file]/download_dark.svg similarity index 90% rename from src/app/[...file]/download.svg rename to src/app/[...file]/download_dark.svg index ae7ebe5..eb1ae1d 100644 --- a/src/app/[...file]/download.svg +++ b/src/app/[...file]/download_dark.svg @@ -39,7 +39,7 @@ inkscape:groupmode="layer" id="layer1"> + + + + + + + + + + + diff --git a/src/app/[...file]/download_tty.css.ts b/src/app/[...file]/download_tty.css.ts new file mode 100644 index 0000000..622f116 --- /dev/null +++ b/src/app/[...file]/download_tty.css.ts @@ -0,0 +1,21 @@ +import { style } from '@vanilla-extract/css'; + +import * as colors from '../colors.css'; + +export const download_tty = style({ + display: 'block', + margin: 0, + border: 'none', + padding: '0', + outline: 'inherit', + fontFamily: 'monospace', + fontSize: '1.1em', + lineHeight: '2em', + background: 'none', + color: 'inherit', + transition: 'color 0.15s', + whiteSpace: 'pre-wrap', + ':hover': { + color: colors.accent, + }, +}); diff --git a/src/app/[...file]/download_tty.tsx b/src/app/[...file]/download_tty.tsx new file mode 100644 index 0000000..93fbb27 --- /dev/null +++ b/src/app/[...file]/download_tty.tsx @@ -0,0 +1,17 @@ +'use client' + +import { useState } from 'react'; + +import * as style from './download_tty.css'; + +export default function DownloadTTY({ text }: { text: string }) { + const [copied, set_copied] = useState(false); + function make_copy_text(text) { + return (event) => { + navigator.clipboard.writeText(text); + set_copied(true); + // setTimeout(() => { set_copied(false); }, 5000); + }; + } + return ; +} diff --git a/src/app/[...file]/page.css.ts b/src/app/[...file]/page.css.ts index dca9e75..f4b11f2 100644 --- a/src/app/[...file]/page.css.ts +++ b/src/app/[...file]/page.css.ts @@ -10,17 +10,23 @@ export const root = style({ }); export const center = style({ - width: '100%', - height: 'max-content', - padding: '2em', + boxSizing: 'border-box', + width: '100%', + height: 'max-content', + padding: '2em', }); export const title_group = style({ marginBottom: '1em', width: '100%', - height: '4em', + height: '3.5em', display: 'flex', - justifyContent: 'space-between' + justifyContent: 'space-between', + '@media': { + 'screen and (min-width: 768px)': { + height: '4em', + }, + }, }); export const title_text_group = style({ @@ -32,12 +38,23 @@ export const title_text_group = style({ export const title = style({ margin: 0, - fontSize: '2em', + fontSize: '1.5em', + '@media': { + 'screen and (min-width: 768px)': { + fontSize: '2em', + }, + }, }); export const supertitle = style({ - margin: 0, - color: colors.foreground2 + margin: 0, + color: colors.foreground2, + fontSize: '0.9em', + '@media': { + 'screen and (min-width: 768px)': { + fontSize: '1em', + }, + }, }); export const download_button = style({ @@ -46,22 +63,48 @@ export const download_button = style({ marginLeft: '2em', border: 0, padding: 0, - backgroundColor: colors.background2, + border: `1px solid ${colors.background2}`, + backgroundColor: colors.background, color: colors.foreground, }); -export const download_button_image = style({ +const download_button_image = style({ + width: 'auto', + height: '100%', + transition: 'background-color 0.35s', + ':hover': { + backgroundColor: colors.background2, + }, +}); + +export const download_button_image_dark = style([download_button_image, { display: 'block', - width: 'auto', - height: '100%', + '@media': { + '(prefers-color-scheme: light)': { + display: 'none', + }, + }, +}]); + +export const download_button_image_light = style([download_button_image, { + display: 'none', + '@media': { + '(prefers-color-scheme: light)': { + display: 'block', + }, + }, +}]); + +export const download_tty_group = style({ + display: 'none', + '@media': { + 'screen and (min-width: 768px)': { + display: 'block', + margin: 0, + marginBottom: '1em', + borderBottom: `1px solid ${colors.background2}`, + paddingBottom: '1em', + }, + }, }); -export const download_text_section = style({ - marginLeft: '1em', -}); - -export const download_text = style({ - margin: '0.5em 0', - fontFamily: 'monospace', - fontSize: '1.5em', -}); diff --git a/src/app/[...file]/page.tsx b/src/app/[...file]/page.tsx index f81e7e1..24e3c69 100644 --- a/src/app/[...file]/page.tsx +++ b/src/app/[...file]/page.tsx @@ -1,9 +1,11 @@ import type { Metadata, ResolvingMetadata } 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 from './download.svg'; +import download_image_dark from './download_dark.svg'; +import download_image_light from './download_light.svg'; type SearchParams = { [key: string]: string | string[] | undefined }; @@ -34,6 +36,12 @@ export default async function Page({ }: 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 (
@@ -44,13 +52,23 @@ export default async function Page({

{path}

+
+ {download_ttys.map((text, index) => )} +
diff --git a/src/app/[...file]/types/image.css.ts b/src/app/[...file]/types/image.css.ts new file mode 100644 index 0000000..f7f24ff --- /dev/null +++ b/src/app/[...file]/types/image.css.ts @@ -0,0 +1,5 @@ +import { style } from '@vanilla-extract/css' + +export const image = style({ + maxWidth: '100%', +}); diff --git a/src/app/[...file]/types/image.tsx b/src/app/[...file]/types/image.tsx index a58fcb4..eb7c473 100644 --- a/src/app/[...file]/types/image.tsx +++ b/src/app/[...file]/types/image.tsx @@ -1,5 +1,7 @@ +import * as style from './image.css'; + export default function Image({ src }: { src: string }) { return ( - + {`Image ); } diff --git a/src/app/colors.css.ts b/src/app/colors.css.ts index 5f36000..243e4ca 100644 --- a/src/app/colors.css.ts +++ b/src/app/colors.css.ts @@ -12,7 +12,7 @@ globalStyle(':root', { [background2]: '#303030', [foreground]: '#F0F0F0', [foreground2]: '#777777', - [accent]: '#9834D4', + [accent]: '#B454EA', }, '@media': { '(prefers-color-scheme: light)': {