Embeautification

src/app/[...file]/components/copied_image_dark.svg

@@ -0,0 +1,18 @@
+<?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"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     id="rect1"
+     style="fill:#b454ea;fill-opacity:1;stroke-width:4.28002"
+     d="M 112.71619,29.347314 54.337221,87.726278 22.750479,56.139537 l -9.196537,9.196536 31.586742,31.586739 9.196537,9.196538 9.196536,-9.196538 58.378963,-58.378961 z" />
+</svg>

src/app/[...file]/components/copied_image_light.svg

@@ -0,0 +1,18 @@
+<?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"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     id="rect1"
+     style="fill:#9834d4;fill-opacity:1;stroke-width:4.28002"
+     d="M 112.71619,29.347314 54.337221,87.726278 22.750479,56.139537 l -9.196537,9.196536 31.586742,31.586739 9.196537,9.196538 9.196536,-9.196538 58.378963,-58.378961 z" />
+</svg>

src/app/[...file]/components/copy.css.ts

@@ -3,19 +3,83 @@ import { style } from '@vanilla-extract/css';
 import * as colors from '../../colors.css';
 
 export const copy = style({
-	display:    'block',
+	display: 'flex',
+	alignItems: 'center',
+	width: 'max-content',
+	backgroundColor: colors.background,
+});
+
+export const copy_button = style({
+	display:         'flex',
 	margin:          0,
 	border:          'none',
-	padding:    '0',
+	padding:         0,
 	outline:         'inherit',
 	fontFamily:      'monospace',
 	fontSize:        '1.1em',
 	lineHeight:      '2em',
-	background: 'none',
 	color:           'inherit',
-	transition: 'color 0.15s',
 	whiteSpace:      'pre-wrap',
+	transition:      'background-color 0.35s',
+	background:      'none',
+	width:           'max-content',
+	height:          '100%',
 	':hover': {
-		color: colors.accent,
+		backgroundColor: colors.background2,
 	},
 });
+
+const copy_image = style({
+	boxSizing:  'border-box',
+	border:     `1px solid ${colors.background2}`,
+	padding:    '0.75em',
+	width:      'auto',
+	height:     '100%',
+	selectors: {
+		[`${copy}:hover &`]: {
+		},
+	},
+});
+
+export const copy_image_dark = style([copy_image, {
+	display: 'block',
+	'@media': {
+		'(prefers-color-scheme: light)': {
+			display: 'none',
+		},
+	},
+}]);
+
+export const copy_image_light = style([copy_image, {
+	display: 'none',
+	'@media': {
+		'(prefers-color-scheme: light)': {
+			display: 'block',
+		},
+	},
+}]);
+
+export const copied_image_dark = style([copy_image, {
+	display: 'block',
+	'@media': {
+		'(prefers-color-scheme: light)': {
+			display: 'none',
+		},
+	},
+}]);
+
+export const copied_image_light = style([copy_image, {
+	display: 'none',
+	'@media': {
+		'(prefers-color-scheme: light)': {
+			display: 'block',
+		},
+	},
+}]);
+
+
+export const copy_text = style({
+	margin: 0,
+	marginLeft: '1em',
+	width:  'max-content',
+});

src/app/[...file]/components/copy.tsx

@@ -1,11 +1,16 @@
 'use client'
 
 import { useState } from 'react';
+import Image from 'next/image';
 
 import * as style from './copy.css';
+import copy_image_dark from './copy_image_dark.svg';
+import copy_image_light from './copy_image_light.svg';
+import copied_image_dark from './copied_image_dark.svg';
+import copied_image_light from './copied_image_light.svg';
 
-export default function Copy({ className, text, children }: { className?: string, text: string, children?: React.ReactNode }) {
+export default function Copy({ className, text, show_text }: { className?: string, text: string, show_text?: boolean }) {
-	const [copied, set_copied ] = useState(false);
+	const [copied, set_copied] = useState(false);
 	function make_copy_text(text: string) {
 		return () => {
 			navigator.clipboard.writeText(text);
@@ -13,5 +18,33 @@ export default function Copy({ className, text, children }: { className?: string
 			setTimeout(() => { set_copied(false); }, 2000);
 		};
 	}
-	return <button onClick={make_copy_text(text)} className={`${style.copy} ${className ?? ''}`}>{copied ? '[ Copied ]' : '[  Copy  ]'} {children}</button>
+	return <div className={`${style.copy} ${className ?? ''}`}>
+		<button onClick={make_copy_text(text)} className={`${style.copy_button}`}>
+			{copied ? <>
+				<Image
+					className={style.copied_image_dark}
+					src={copied_image_dark}
+					alt="Copied"
+				/>
+				<Image
+					className={style.copied_image_light}
+					src={copied_image_light}
+					alt="Copied"
+				/>
+			</> :
+			<>
+				<Image
+					className={style.copy_image_dark}
+					src={copy_image_dark}
+					alt="Copy"
+				/>
+				<Image
+					className={style.copy_image_light}
+					src={copy_image_light}
+					alt="Copy"
+				/>
+			</>}
+		</button>
+		{show_text ? <p className={style.copy_text}>{text}</p> : <></>}
+	</div>;
 }

src/app/[...file]/components/copy_image_dark.svg

@@ -0,0 +1,25 @@
+<?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"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       id="rect2"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:3.3485"
+       d="m 21.474141,39.977921 v 9.251632 64.762967 9.25164 h 9.252148 46.258675 9.252148 v -9.25164 -9.25214 h -9.252148 v 9.25214 H 30.726289 V 49.229553 h 9.251632 v -9.251632 h -9.251632 z" />
+    <path
+       id="rect2-1"
+       style="fill:#f0f0f0;fill-opacity:1;stroke-width:3.3485"
+       d="m 49.229553,12.22251 v 9.251631 74.014603 h 9.252148 55.510819 V 86.237112 21.474141 16.848584 12.22251 H 58.481701 Z m 9.252148,9.251631 H 104.74038 V 86.237112 H 58.481701 Z" />
+  </g>
+</svg>

src/app/[...file]/components/copy_image_light.svg

@@ -0,0 +1,25 @@
+<?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"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       id="rect2"
+       style="fill:#171717;fill-opacity:1;stroke-width:3.3485"
+       d="m 21.474141,39.977921 v 9.251632 64.762967 9.25164 h 9.252148 46.258675 9.252148 v -9.25164 -9.25214 h -9.252148 v 9.25214 H 30.726289 V 49.229553 h 9.251632 v -9.251632 h -9.251632 z" />
+    <path
+       id="rect2-1"
+       style="fill:#171717;fill-opacity:1;stroke-width:3.3485"
+       d="m 49.229553,12.22251 v 9.251631 74.014603 h 9.252148 55.510819 V 86.237112 21.474141 16.848584 12.22251 H 58.481701 Z m 9.252148,9.251631 H 104.74038 V 86.237112 H 58.481701 Z" />
+  </g>
+</svg>

src/app/[...file]/components/types/markdown.css.ts

@@ -14,4 +14,10 @@ export const code_bounds = style({
 export const copy = style({
 	position: 'absolute',
 	right:    0,
+	height:   '5em',
+	'@media': {
+		'screen and (max-width: 768px)': {
+			width: '3em',
+		}
+	}
 });

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

@@ -7,60 +7,48 @@
    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"
+     id="layer1"
-     inkscape:groupmode="layer"
+     transform="matrix(0.85941469,0,0,0.85941469,9.5223114,9.5223114)">
-     id="layer1">
     <rect
-       style="fill:#f0f0f0;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.86752;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:#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"
-       x="-29.155479"
-       y="-127.10163"
-       transform="rotate(135)" />
-    <rect
-       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"
+       width="65.927635"
        height="11.312016"
-       x="22.514505"
+       x="15.364706"
-       y="-73.397362"
+       y="-73.389343"
+       transform="rotate(90)" />
+    <path
+       id="rect4-3-2-8"
+       style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.748136;stroke-dasharray:none;stroke-opacity:1"
+       d="M 94.404613,46.399197 67.733515,73.070294 41.062052,46.398832 l -7.998771,7.998771 26.671463,26.671463 7.998771,7.998767 7.998771,-7.998767 26.671094,-26.671098 z" />
+    <rect
+       style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:1.09344;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4-3-2-9"
+       width="104.73725"
+       height="11.312016"
+       x="-120.10196"
+       y="-120.10195"
+       transform="scale(-1)" />
+    <rect
+       style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.697454;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4-3-2-5"
+       width="42.612877"
+       height="11.312016"
+       x="77.489075"
+       y="-26.676722"
+       transform="rotate(90)" />
+    <rect
+       style="fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.697454;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4-3-2-5-0"
+       width="42.612877"
+       height="11.312016"
+       x="77.489082"
+       y="-120.10196"
        transform="rotate(90)" />
   </g>
 </svg>

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

@@ -7,60 +7,48 @@
    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"
+     id="layer1"
-     inkscape:groupmode="layer"
+     transform="matrix(0.85941469,0,0,0.85941469,9.5223114,9.5223114)">
-     id="layer1">
     <rect
-       style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.830298;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.86752;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"
+       width="65.927635"
        height="11.312016"
-       x="22.514505"
+       x="15.364706"
-       y="-73.397362"
+       y="-73.389343"
+       transform="rotate(90)" />
+    <path
+       id="rect4-3-2-8"
+       style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.748136;stroke-dasharray:none;stroke-opacity:1"
+       d="M 94.404613,46.399197 67.733515,73.070294 41.062052,46.398832 l -7.998771,7.998771 26.671463,26.671463 7.998771,7.998767 7.998771,-7.998767 26.671094,-26.671098 z" />
+    <rect
+       style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:1.09344;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4-3-2-9"
+       width="104.73725"
+       height="11.312016"
+       x="-120.10196"
+       y="-120.10195"
+       transform="scale(-1)" />
+    <rect
+       style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.697454;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4-3-2-5"
+       width="42.612877"
+       height="11.312016"
+       x="77.489075"
+       y="-26.676722"
+       transform="rotate(90)" />
+    <rect
+       style="fill:#171717;fill-opacity:1;stroke:none;stroke-width:0.697454;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4-3-2-5-0"
+       width="42.612877"
+       height="11.312016"
+       x="77.489082"
+       y="-120.10196"
        transform="rotate(90)" />
   </g>
 </svg>

src/app/[...file]/page.css.ts

@@ -12,12 +12,13 @@ export const root = style({
 export const center = style({
 	boxSizing: 'border-box',
 	width:     '100%',
+	maxWidth:  '90em',
 	height:    'max-content',
 	padding:   '2em',
 });
 
 export const title_group = style({
-	marginBottom:   '1em',
+	marginBottom:   '0.5em',
 	width:          '100%',
 	height:         '3.5em',
 	display:        'flex',
@@ -102,8 +103,13 @@ export const download_tty_group = style({
 			margin:        0,
 			marginBottom:  '1em',
 			borderBottom:  `1px solid ${colors.background2}`,
-			paddingBottom: '1em',
+			paddingBottom: '0.5em',
 		},
 	},
 });
 
+export const download_tty = style({
+	padding: '0.25em 0',
+	height: '3em',
+})
+

src/app/[...file]/page.tsx

@@ -67,7 +67,7 @@ export default async function Page({
 					</button>
 				</div>
 				<div className={style.download_tty_group}>
-					{download_ttys.map((text, index) => <Copy key={index} text={text}>{text}</Copy>)}
+					{download_ttys.map((text, index) => <Copy key={index} className={style.download_tty} text={text} show_text={true}></Copy>)}
 				</div>
 				{(!enable_repointing && searchParams['root'] != undefined) ?
 					<p>Error: this instance of Motto does not have repointing enabled</p> :