fix: header styling

Author: brettkolodny

src/client/Preview.tsx

@@ -14,11 +14,7 @@ import {
 } from "@/client/diagnostics";
 import { useDebouncedValue } from "@/client/hooks/debounce";
 import { useStore } from "@/client/store";
-import type {
-	Parameter,
-	ParserLog,
-	PreviewOutput,
-} from "@/gen/types";
+import type { Parameter, ParserLog, PreviewOutput } from "@/gen/types";
 import { cn } from "@/utils/cn";
 import ReactJsonView from "@microlink/react-json-view";
 import * as Dialog from "@radix-ui/react-dialog";
@@ -578,24 +574,26 @@ const Form: FC<FormProps> = ({ parameters }) => {
 
 type FormElementProps = { parameter: Parameter };
 const FormElement: FC<FormElementProps> = ({ parameter }) => {
+	const $form = useStore((state) => state.form);
+	const $setForm = useStore((state) => state.setFormState);
+
+	const value = useMemo(
+		() => $form[parameter.name] ?? parameter.default_value.value,
+		[$form, parameter],
+	);
+
+	const onValueChange = (value: string) => {
+		$setForm(parameter.name, value);
+	};
+
 	return (
 		<DynamicParameter
 			parameter={parameter}
+			value={value}
 			autofill={false}
-			onChange={() => null}
+			onChange={onValueChange}
 		/>
 	);
-	// const $form = useStore((state) => state.form);
-	// const $setForm = useStore((state) => state.setFormState);
-
-	// const value = useMemo(
-	// 	() => $form[parameter.name] ?? parameter.default_value.value,
-	// 	[$form, parameter],
-	// );
-
-	// const onValueChange = (value: string) => {
-	// 	$setForm(parameter.name, value);
-	// };
 
 	// if (parameter.form_type === ParameterFormType.ParameterFormTypeInput) {
 	// 	return (

src/client/components/Markdown.tsx

@@ -47,9 +47,9 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 					const isExternal = href?.startsWith("http");
 
 					return (
-						<a href={href} target={isExternal ? "_blank" : undefined}>
+						<NavLink to={href ?? ""} target={isExternal ? "_blank" : undefined}>
 							{children}
-						</a>
+						</NavLink>
 					);
 				},
 
@@ -113,6 +113,30 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 					return <TableCell>{children}</TableCell>;
 				},
 
+				h1: ({ children }) => {
+					return <h1 className="mt-8 mb-4 font-bold text-lg">{children}</h1>;
+				},
+
+				h2: ({ children }) => {
+					return <h2  className="mt-8 mb-4">{children}</h2>;
+				},
+
+				h3: ({ children }) => {
+					return <h3 className="mt-8 mb-4">{children}</h3>;
+				},
+
+				h4: ({ children }) => {
+					return <h4 className="mt-8 mb-4">{children}</h4>;
+				},
+
+				h5: ({ children }) => {
+					return <h5 className="mt-8 mb-4">{children}</h5>;
+				},
+
+				h6: ({ children }) => {
+					return <h6 className="mt-8 mb-4">{children}</h6>;
+				},
+
 				/**
 				 * 2025-02-10 - The RemarkGFM plugin that we use currently doesn't have
 				 * support for special alert messages like this:
@@ -239,7 +263,7 @@ function parseChildrenAsAlertContent(
 		isValidElement(node),
 	);
 	// biome-ignore lint/suspicious/noExplicitAny: In coder/coder this typeis difined as any
-		let parentChildren = (mainParentNode?.props as any).children;
+	let parentChildren = (mainParentNode?.props as any).children;
 	if (typeof parentChildren === "string") {
 		// Children will only be an array if the parsed text contains other
 		// content that can be turned into HTML. If there aren't any, you
@@ -356,58 +380,3 @@ const MarkdownGfmAlert: FC<MarkdownGfmAlertProps> = ({
 		</div>
 	);
 };
-
-// const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
-// 	fontSize: 16,
-// 	lineHeight: "24px",
-
-// 	"& h1, & h2, & h3, & h4, & h5, & h6": {
-// 		marginTop: 32,
-// 		marginBottom: 16,
-// 		lineHeight: "1.25",
-// 	},
-
-// 	"& p": {
-// 		marginTop: 0,
-// 		marginBottom: 16,
-// 	},
-
-// 	"& p:only-child": {
-// 		marginTop: 0,
-// 		marginBottom: 0,
-// 	},
-
-// 	"& ul, & ol": {
-// 		display: "flex",
-// 		flexDirection: "column",
-// 		gap: 8,
-// 		marginBottom: 16,
-// 	},
-
-// 	"& li > ul, & li > ol": {
-// 		marginTop: 16,
-// 	},
-
-// 	"& li > p": {
-// 		marginBottom: 0,
-// 	},
-
-// 	"& .prismjs": {
-// 		background: theme.palette.background.paper,
-// 		borderRadius: 8,
-// 		padding: "16px 24px",
-// 		overflowX: "auto",
-
-// 		"& code": {
-// 			color: theme.palette.text.secondary,
-// 		},
-
-// 		"& .key, & .property, & .inserted, .keyword": {
-// 			color: colors.teal[300],
-// 		},
-
-// 		"& .deleted": {
-// 			color: theme.palette.error.light,
-// 		},
-// 	},
-// });

tailwind.config.js

@@ -85,5 +85,5 @@ module.exports = {
 			},
 		},
 	},
-	plugins: [require("tailwindcss-animate"), ],
+	plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 };