From 036fb0f0b1423ab70863e398330da34ff2b1d99b Mon Sep 17 00:00:00 2001
From: Gnarwhal <git.aspect893@passmail.net>
Date: Mon, 23 Sep 2024 21:21:45 +0000
Subject: [PATCH] Can now view markdown both rendered and raw

---
 src/app/[...file]/components/content.tsx      |  6 +-
 src/app/[...file]/components/tab_group.css.ts | 48 +++++++++++++++
 src/app/[...file]/components/tab_group.tsx    | 19 ++++++
 .../[...file]/components/types/image.css.ts   |  1 +
 .../[...file]/components/types/markdown.tsx   | 60 ++++++++++++++-----
 .../components/types/terminal.css.ts          |  1 +
 .../[...file]/components/types/text.css.ts    |  1 +
 src/app/[...file]/components/types/text.tsx   |  2 +
 src/app/[...file]/page.css.ts                 |  3 +-
 9 files changed, 121 insertions(+), 20 deletions(-)
 create mode 100644 src/app/[...file]/components/tab_group.css.ts
 create mode 100644 src/app/[...file]/components/tab_group.tsx

diff --git a/src/app/[...file]/components/content.tsx b/src/app/[...file]/components/content.tsx
index fd95921..a5b2351 100644
--- a/src/app/[...file]/components/content.tsx
+++ b/src/app/[...file]/components/content.tsx
@@ -57,7 +57,7 @@ export default function Content({ src }: { src: string}) {
 			};
 		}
 	}, {
-		content_type: /application\/octet-stream/,
+		content_type: /(text\/markdown|application\/octet-stream)/,
 		path: /.*\.md/i,
 		emit: () => {
 			return {
@@ -70,7 +70,7 @@ export default function Content({ src }: { src: string}) {
 			};
 		}
 	}, {
-		content_type: /(text\/\w+)|(application\/octet-stream)/,
+		content_type: /(text\/\w+|application\/octet-stream)/,
 		emit: () => {
 			return {
 				process: (response: Response) => {
@@ -86,7 +86,7 @@ export default function Content({ src }: { src: string}) {
 
 	useEffect(() => {
 		if (content == undefined) {
-			const result = fetch(src)
+			const result = fetch(src, { cache: "no-cache" })
 				.then(response => {
 					if (response.status < 400) {
 						for (const type of recognized_types) {
diff --git a/src/app/[...file]/components/tab_group.css.ts b/src/app/[...file]/components/tab_group.css.ts
new file mode 100644
index 0000000..f2238ce
--- /dev/null
+++ b/src/app/[...file]/components/tab_group.css.ts
@@ -0,0 +1,48 @@
+import { style } from '@vanilla-extract/css';
+
+import * as colors from '../../colors.css';
+
+export const tab_group = style({
+	display: 'flex',
+	justifyContent: 'center',
+	alignItems: 'center',
+	width: '100%',
+	height: '2em',
+	borderBottom: `1px solid ${colors.background2}`,
+	'@media': {
+		'screen and (max-width: 768px)': {
+			height: '1.75em',
+		}
+	}
+});
+
+export const tab = style({
+	border: 'none',
+	outline: 'none',
+	backgroundColor: 'inherit',
+	color: 'inherit',
+	width: '10em',
+	fontSize: '1em',
+	height: '100%',
+	flexGrow: 0,
+	transition: 'color 0.35s, background-color 0.35s',
+	':hover': {
+		backgroundColor: colors.background2,
+	},
+	'@media': {
+		'screen and (max-width: 768px)': {
+			fontSize: '0.9em',
+		}
+	},
+});
+
+export const active = style({
+	backgroundColor: colors.background2,
+});
+
+export const separator = style({
+	width: '1px',
+	height: '100%',
+	backgroundColor: colors.background2,
+});
+
diff --git a/src/app/[...file]/components/tab_group.tsx b/src/app/[...file]/components/tab_group.tsx
new file mode 100644
index 0000000..3953ec6
--- /dev/null
+++ b/src/app/[...file]/components/tab_group.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import React from 'react';
+import { useState } from 'react';
+
+import * as style from './tab_group.css';
+
+export default function TabGroup({ tabs, initial, tab_callback }: { tabs: string[], initial: number, tab_callback: (active: number) => void }) {
+	const [active, set_active] = useState(initial);
+	return (
+		<div className={style.tab_group}>
+			<div className={style.separator}></div>
+			{tabs.map((tab, index) => <React.Fragment key={index}>
+				<button onClick={() => { set_active(index); tab_callback(index); }} className={`${style.tab} ${index == active ? style.active : ''}`}>{tab}</button>
+				<div className={style.separator}></div>
+			</React.Fragment>)}
+		</div>
+	);
+}
diff --git a/src/app/[...file]/components/types/image.css.ts b/src/app/[...file]/components/types/image.css.ts
index f7f24ff..8aefb9b 100644
--- a/src/app/[...file]/components/types/image.css.ts
+++ b/src/app/[...file]/components/types/image.css.ts
@@ -1,5 +1,6 @@
 import { style } from '@vanilla-extract/css'
 
 export const image = style({
+	marginTop: '1em',
 	maxWidth: '100%',
 });
diff --git a/src/app/[...file]/components/types/markdown.tsx b/src/app/[...file]/components/types/markdown.tsx
index 2d4e605..3af8455 100644
--- a/src/app/[...file]/components/types/markdown.tsx
+++ b/src/app/[...file]/components/types/markdown.tsx
@@ -1,24 +1,54 @@
+'use client'
+
+import { useRef } from 'react';
 import Markdown from 'react-markdown';
 
 import * as style from './markdown.css';
+import TabGroup from '../tab_group';
 import Copy from '../copy';
 import Text from './text';
 import { map_to_type } from './text';
 
+const initial = 0;
+
 export default function MarkdownContent({ text }: { text: string }) {
-	return (
-		<Markdown 
-			components={{
-				'code': (props) => {
-					const split = props.className?.split('-') ?? ['none'];
-					return (
-						<div className={style.code_bounds}>
-							<Copy className={style.copy} text={props.children as string}></Copy>
-							<Text language={split.length == 0 ? 'none' : map_to_type(split[split.length - 1])} text={props.children as string} line_numbers={false} />
-						</div>
-					);
-				}
-			}}
-		>{text}</Markdown>
-	);
+	/*
+	 * Originally used 'useState', but switching back to the 'Rendered'
+	 * tab from 'Raw' was expensive and caused a hiccup
+	 *
+	 * Now, keep them both loaded in the DOM and use display to switch
+	 * which is being rendered. It's less "Reactive" or whatever, but
+	 * it is simply faster ¯\_(ツ)_/¯
+	 */
+	const refs = [
+		useRef<HTMLDivElement | null>(null),
+		useRef<HTMLDivElement | null>(null),
+	]
+
+	function tab_callback(active: number) {
+		for (const [index, ref] of refs.entries()) {
+			ref.current!.style.display = index == active ? 'block' : 'none';
+		}
+	}
+
+	return <>
+		<TabGroup tabs={[ 'Rendered', 'Raw' ]} initial={initial} tab_callback={tab_callback} />
+		{[
+			<Markdown
+				key={0}
+				components={{
+					'code': (props) => {
+						const split = props.className?.split('-') ?? ['none'];
+						return (
+							<div className={style.code_bounds}>
+								<Copy className={style.copy} text={props.children as string}></Copy>
+								<Text language={split.length == 0 ? 'none' : map_to_type(split[split.length - 1])} text={props.children as string} line_numbers={false} />
+							</div>
+						);
+					}
+				}}
+			>{text}</Markdown>,
+			<Text key={1} language={"markdown"} text={text} line_numbers={true} />
+		].map((tab, index) => <div key={index} ref={refs[index]} style={{ display: index == initial ? 'block' : 'none' }}>{tab}</div>)}
+	</>;
 }
diff --git a/src/app/[...file]/components/types/terminal.css.ts b/src/app/[...file]/components/types/terminal.css.ts
index 63bb315..ab2914f 100644
--- a/src/app/[...file]/components/types/terminal.css.ts
+++ b/src/app/[...file]/components/types/terminal.css.ts
@@ -2,6 +2,7 @@ import { style } from '@vanilla-extract/css'
 
 export const content = style({
 	margin:     0,
+	marginTop:  '0.9em',
 	fontFamily: 'monospace',
 	fontSize:   '1.1em',
 	lineHeight: '1.4em',
diff --git a/src/app/[...file]/components/types/text.css.ts b/src/app/[...file]/components/types/text.css.ts
index 46f31bf..ccfee53 100644
--- a/src/app/[...file]/components/types/text.css.ts
+++ b/src/app/[...file]/components/types/text.css.ts
@@ -3,6 +3,7 @@ import { style } from '@vanilla-extract/css'
 import * as colors from '../../../colors.css'
 
 export const group = style({
+	marginTop:     '0.5em',
 	display:       'flex',
 	fontFamily:    'monospace',
 	fontSize:      '1em',
diff --git a/src/app/[...file]/components/types/text.tsx b/src/app/[...file]/components/types/text.tsx
index 100e177..0755cb6 100644
--- a/src/app/[...file]/components/types/text.tsx
+++ b/src/app/[...file]/components/types/text.tsx
@@ -36,6 +36,8 @@ const type_map = {
 	py:         'python',
 	python:     'python',
 	json:       'json',
+	md:         'markdown',
+	markdown:   'markdown',
 	none:       'none',
 }
 
diff --git a/src/app/[...file]/page.css.ts b/src/app/[...file]/page.css.ts
index 7b85dc3..8ac63df 100644
--- a/src/app/[...file]/page.css.ts
+++ b/src/app/[...file]/page.css.ts
@@ -18,7 +18,6 @@ export const center = style({
 });
 
 export const title_group = style({
-	marginBottom:   '0.5em',
 	width:          '100%',
 	height:         '3.5em',
 	display:        'flex',
@@ -101,7 +100,7 @@ export const download_tty_group = style({
 		'screen and (min-width: 768px)': {
 			display:       'block',
 			margin:        0,
-			marginBottom:  '1em',
+			marginTop:     '0.5em',
 			borderBottom:  `1px solid ${colors.background2}`,
 			paddingBottom: '0.5em',
 		},