Compare commits

...

2 commits

8 changed files with 25 additions and 41 deletions

View file

@ -14,8 +14,7 @@
"prism-react-renderer": "^2.4.0", "prism-react-renderer": "^2.4.0",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",
"react-markdown": "^9.0.1", "react-markdown": "^9.0.1"
"rehype-highlight": "^7.0.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20", "@types/node": "^20",

View file

@ -34,7 +34,7 @@ function is_type(response: Response, type: ContentType<any>) {
} }
export default function Content({ src }: { src: string}) { export default function Content({ src }: { src: string}) {
const [content, set_content] = useState<JSX.Element>(); const [content, set_content] = useState<React.ReactNode>();
const recognized_types: ContentType<any>[] = [{ const recognized_types: ContentType<any>[] = [{
content_type: /image\/\w+/, content_type: /image\/\w+/,

View file

@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
import * as colors from '../../colors.css'; import * as colors from '../../colors.css';
export const download_tty = style({ export const copy = style({
display: 'block', display: 'block',
margin: 0, margin: 0,
border: 'none', border: 'none',

View file

@ -0,0 +1,17 @@
'use client'
import { useState } from 'react';
import * as style from './copy.css';
export default function Copy({ className, text, children }: { className?: string, text: string, children: React.ReactNode }) {
const [copied, set_copied ] = useState(false);
function make_copy_text(text: string) {
return () => {
navigator.clipboard.writeText(text);
set_copied(true);
setTimeout(() => { set_copied(false); }, 2000);
};
}
return <button onClick={make_copy_text(text)} className={`${style.copy} ${className ?? ''}`}>{copied ? '[ Copied ]' : '[ Copy ]'} {children}</button>
}

View file

@ -1,17 +0,0 @@
'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: string) {
return () => {
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>;
}

View file

@ -14,20 +14,4 @@ export const code_bounds = style({
export const copy = style({ export const copy = style({
position: 'absolute', position: 'absolute',
right: 0, right: 0,
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,
},
}); });

View file

@ -1,6 +1,7 @@
import Markdown from 'react-markdown'; import Markdown from 'react-markdown';
import * as style from './markdown.css'; import * as style from './markdown.css';
import Copy from '../copy';
import Text from './text'; import Text from './text';
import { map_to_type } from './text'; import { map_to_type } from './text';
@ -12,7 +13,7 @@ export default function MarkdownContent({ text }: { text: string }) {
const split = props.className.split('-'); const split = props.className.split('-');
return ( return (
<div className={style.code_bounds}> <div className={style.code_bounds}>
<button onClick={() => { navigator.clipboard.writeText(props.children); }} className={style.copy}>[ Copy ]</button> <Copy className={style.copy} text={props.children}></Copy>
<Text language={split.length == 0 ? 'none' : map_to_type(split[split.length - 1])} text={props.children} line_numbers={false} /> <Text language={split.length == 0 ? 'none' : map_to_type(split[split.length - 1])} text={props.children} line_numbers={false} />
</div> </div>
); );

View file

@ -1,9 +1,9 @@
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import Image from 'next/image'; import Image from 'next/image';
import DownloadTTY from './components/download_tty';
import Content from './components/content';
import * as style from './page.css'; import * as style from './page.css';
import Content from './components/content';
import Copy from './components/copy';
import download_image_dark from './download_dark.svg'; import download_image_dark from './download_dark.svg';
import download_image_light from './download_light.svg'; import download_image_light from './download_light.svg';
@ -66,7 +66,7 @@ export default async function Page({
</button> </button>
</div> </div>
<div className={style.download_tty_group}> <div className={style.download_tty_group}>
{download_ttys.map((text, index) => <DownloadTTY key={index} text={text} />)} {download_ttys.map((text, index) => <Copy key={index} text={text}>{text}</Copy>)}
</div> </div>
<Content src={`${root}${path}`} /> <Content src={`${root}${path}`} />
</div> </div>