Add feature for preview of markdown files

webui/package.json

@@ -25,7 +25,9 @@
 		"@connectrpc/connect": "^2.1.1",
 		"@connectrpc/connect-web": "^2.1.1",
 		"@solidjs/router": "^0.15.4",
+		"dompurify": "^3.2.0",
 		"fuse.js": "^7.1.0",
+		"marked": "^13.0.0",
 		"solid-js": "^1.9.5"
 	}
 }

webui/src/App.tsx

@@ -13,6 +13,7 @@ import { ChangeServerPasswordPage } from './page/ChangeServerPasswordPage'
 import { SettingsPage } from './page/SettingsPage'
 import { ServerSearchPage } from './page/ServerSearchPage'
 import { ServerProfilePage } from './page/ServerProfilePage'
+import { ServerMdPreviewPage } from './page/ServerMdPreviewPage'
 import { UpdatePage } from './page/UpdatePage'
 import { TransfersPage } from './page/TransfersPage'
 
@@ -66,6 +67,11 @@ const App: Component = () => {
 			component: ServerProfilePage,
 		},
 
+		{
+			path: '/server/:uuid/md/:username/*path',
+			component: ServerMdPreviewPage,
+		},
+
 		{
 			path: makeBrowsePath(':uuid', ':username', '*path'),
 			component: ServerBrowsePage,

webui/src/page/ServerBrowsePage.tsx

@@ -4,16 +4,24 @@ import styles from './ServerBrowsePage.module.css'
 
 import { useFileServerUrl, useGlobalState, useRpcClient } from '../ctx'
 import { ConnectError } from '@connectrpc/connect'
-import { A, useLocation, useParams } from '@solidjs/router'
+import {
+	A,
+	useLocation,
+	useNavigate,
+	useParams,
+	useSearchParams,
+} from '@solidjs/router'
 import { FileMeta } from '../../pb/clientrpc/v1/rpc_pb'
 import {
 	makeBrowsePath,
 	makeFileUrl,
+	makeMdPreviewPath,
 	normalizePath,
 	trimStrEllipsis,
 } from '../util'
 import { FileTable } from '../FileTable'
 import { QueueButton } from '../QueueButton'
+import { getAutoOpenReadme } from '../uiPrefs'
 
 const Page: Component = () => {
 	const {
@@ -25,6 +33,8 @@ const Page: Component = () => {
 	const state = useGlobalState()
 	const client = useRpcClient()
 	const fsUrl = useFileServerUrl()
+	const navigate = useNavigate()
+	const [searchParams] = useSearchParams<{ noauto?: string }>()
 
 	const server = state.getServerByUuid(uuid)
 	if (!server) {
@@ -44,13 +54,33 @@ const Page: Component = () => {
 		try {
 			setLoading(true)
 
+			const shouldAutoOpen =
+				searchParams.noauto !== '1' && getAutoOpenReadme()
+
 			const stream = client.getDirFiles({
 				serverUuid: server.uuid,
 				username: username,
 				path: path,
 			})
 
 			for await (const msg of stream) {
+				if (shouldAutoOpen) {
+					const readme = msg.content.find(
+						(f) =>
+							!f.isDir &&
+							f.name.toLowerCase() === 'readme.md',
+					)
+					if (readme) {
+						const pth = path === '/' ? '' : path
+						const readmePath = pth + '/' + readme.name
+						navigate(
+							makeMdPreviewPath(uuid, username, readmePath),
+							{ replace: true },
+						)
+						return
+					}
+				}
+
 				const res = [...files(), ...msg.content]
 				res.sort((a, b) => {
 					if (a.isDir && !b.isDir) {
@@ -161,24 +191,42 @@ const Page: Component = () => {
 							filePath,
 						)
 
+						const lowerName = item.meta.name.toLowerCase()
+						const isMarkdown =
+							lowerName.endsWith('.md') ||
+							lowerName.endsWith('.markdown')
+
+						const actions = (
+							<>
+								<a
+									title="Open File"
+									href={nonDlUrl}
+									target="_blank"
+								>
+									🔗
+								</a>
+								<QueueButton
+									serverUuid={uuid}
+									peerUsername={username}
+									filePath={filePath}
+									title="Download File"
+								/>
+							</>
+						)
+
+						if (isMarkdown) {
+							return {
+								href: makeMdPreviewPath(
+									uuid,
+									username,
+									filePath,
+								),
+								actions,
+							}
+						}
+
 						return {
-							actions: (
-								<>
-									<a
-										title="Open File"
-										href={nonDlUrl}
-										target="_blank"
-									>
-										🔗
-									</a>
-									<QueueButton
-										serverUuid={uuid}
-										peerUsername={username}
-										filePath={filePath}
-										title="Download File"
-									/>
-								</>
-							),
+							actions,
 							onClick: () => {
 								state.previewFile(uuid, username, filePath)
 							},