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",
"react": "^18",
"react-dom": "^18",
"react-markdown": "^9.0.1",
"rehype-highlight": "^7.0.0"
"react-markdown": "^9.0.1"
},
"devDependencies": {
"@types/node": "^20",

View file

@ -34,7 +34,7 @@ function is_type(response: Response, type: ContentType<any>) {
}
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>[] = [{
content_type: /image\/\w+/,

View file

@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
import * as colors from '../../colors.css';
export const download_tty = style({
export const copy = style({
display: 'block',
margin: 0,
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({
position: 'absolute',
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 * as style from './markdown.css';
import Copy from '../copy';
import Text from './text';
import { map_to_type } from './text';
@ -12,7 +13,7 @@ export default function MarkdownContent({ text }: { text: string }) {
const split = props.className.split('-');
return (
<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} />
</div>
);

View file

@ -1,9 +1,9 @@
import type { Metadata } from 'next';
import Image from 'next/image';
import DownloadTTY from './components/download_tty';
import Content from './components/content';
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_light from './download_light.svg';
@ -66,7 +66,7 @@ export default async function Page({
</button>
</div>
<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>
<Content src={`${root}${path}`} />
</div>