Changes

- Added 'curl' and 'wget' commands. TODO: Add feedback when user clicks on them to copy (probably need a not bajillion years outdated Inkscape with icons that aren't completely broken first though :/)
- Fixed some light theme issues
- Fixed some sizing issues on mobile
- Download button actually works now

src/app/[...file]/download_dark.svg

@@ -39,7 +39,7 @@
      inkscape:groupmode="layer"
      id="layer1">
     <rect
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.830298;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.830298;stroke-dasharray:none;stroke-opacity:1"
        id="rect4"
        width="60.391628"
        height="11.312016"
@@ -47,7 +47,7 @@
        y="19.924133"
        transform="rotate(45)" />
     <rect
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.830298;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.830298;stroke-dasharray:none;stroke-opacity:1"
        id="rect4-3"
        width="60.391628"
        height="11.312016"
@@ -55,7 +55,7 @@
        y="-127.10163"
        transform="rotate(135)" />
     <rect
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.977747;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.977747;stroke-dasharray:none;stroke-opacity:1"
        id="rect4-3-2"
        width="83.745499"
        height="11.312016"

src/app/[...file]/download_light.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   sodipodi:docname="download.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#222222"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="false"
+     inkscape:deskcolor="#3d3d3d"
+     inkscape:document-units="px"
+     inkscape:zoom="1.6531383"
+     inkscape:cx="271.90707"
+     inkscape:cy="288.23964"
+     inkscape:window-width="2560"
+     inkscape:window-height="1403"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.830298;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4"
+       width="60.391628"
+       height="11.312016"
+       x="66.7099"
+       y="19.924133"
+       transform="rotate(45)" />
+    <rect
+       style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.830298;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4-3"
+       width="60.391628"
+       height="11.312016"
+       x="-29.155479"
+       y="-127.10163"
+       transform="rotate(135)" />
+    <rect
+       style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.977747;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4-3-2"
+       width="83.745499"
+       height="11.312016"
+       x="22.514505"
+       y="-73.397362"
+       transform="rotate(90)" />
+  </g>
+</svg>

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,
+	},
+});

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 <button onClick={make_copy_text(text)} className={style.download_tty}>{text}</button>;
+}

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',
-});

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 (
 		<div className={style.root}>
@@ -44,13 +52,23 @@ export default async function Page({
 						<p className={style.title}>{path}</p>
 					</div>
 					<button className={style.download_button}>
-						<Image
-							className={style.download_button_image}
-							src={download_image}
-							alt="Download Button"
-						/>
+						<a className={style.download_link} 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>

src/app/[...file]/types/image.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css'
+
+export const image = style({
+	maxWidth: '100%',
+});

src/app/[...file]/types/image.tsx

@@ -1,5 +1,7 @@
+import * as style from './image.css';
+
 export default function Image({ src }: { src: string }) {
 	return (
-		<img src={src} />
+		<img className={style.image} src={src} alt={`Image from ${src}`} />
 	);
 }

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)': {