feat: add dumb yaml detection

app/routes/_data.acls._index/editor.tsx

@@ -1,9 +1,10 @@
 import { json } from '@codemirror/lang-json'
+import { yaml } from '@codemirror/lang-yaml'
 import { useFetcher } from '@remix-run/react'
 import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
 import CodeMirror from '@uiw/react-codemirror'
 import clsx from 'clsx'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import CodeMirrorMerge from 'react-codemirror-merge'
 import { toast } from 'react-hot-toast/headless'
 
@@ -18,12 +19,14 @@ type EditorProperties = {
 	readonly data: {
 		hasAclWrite: boolean;
 		currentAcl: string;
+		aclType: string;
 	};
 }
 
 export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
 	const [light, setLight] = useState(false)
 	const fetcher = useFetcher()
+	const aclType = useMemo(() => data.aclType === 'json' ? json() : yaml(), [data.aclType])
 
 	useEffect(() => {
 		const theme = window.matchMedia('(prefers-color-scheme: light)')
@@ -35,7 +38,6 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
 	}, [])
 
 	return (
-
 		<>
 			<div className={clsx(
 				'border border-gray-200 dark:border-gray-700',
@@ -47,7 +49,7 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
 						value={acl}
 						maxHeight='calc(100vh - 20rem)'
 						theme={light ? githubLight : githubDark}
-						extensions={[json()]}
+						extensions={[aclType]}
 						readOnly={!data.hasAclWrite}
 						onChange={value => {
 							setAcl(value)
@@ -65,12 +67,12 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
 							<CodeMirrorMerge.Original
 								readOnly
 								value={data.currentAcl}
-								extensions={[json()]}
+								extensions={[aclType]}
 							/>
 							<CodeMirrorMerge.Modified
 								readOnly
 								value={acl}
-								extensions={[json()]}
+								extensions={[aclType]}
 							/>
 						</CodeMirrorMerge>
 					</div>

app/routes/_data.acls._index/route.tsx

@@ -20,10 +20,11 @@ export async function loader() {
 		throw new Error('No ACL configuration is available')
 	}
 
-	const acl = await getAcl()
+	const { data, type } = await getAcl()
 	return {
 		hasAclWrite: context.hasAclWrite,
-		currentAcl: acl
+		currentAcl: data,
+		aclType: type
 	}
 }
 
@@ -85,7 +86,7 @@ export default function Page() {
 				<Tab.List className={clsx(
 					'flex border-t border-gray-200 dark:border-gray-700',
 					'w-fit rounded-t-lg overflow-hidden',
-					'text-gray-300 dark:text-gray-500'
+					'text-gray-400 dark:text-gray-500'
 				)}
 				>
 					<Tab as={Fragment}>

app/utils/config.ts

@@ -2,7 +2,7 @@ import { type FSWatcher, watch } from 'node:fs'
 import { access, constants, readFile, writeFile } from 'node:fs/promises'
 import { resolve } from 'node:path'
 
-import { type Document, parseDocument } from 'yaml'
+import { type Document, parse, parseDocument } from 'yaml'
 
 type Duration = `${string}s` | `${string}h` | `${string}m` | `${string}d` | `${string}y`
 
@@ -141,11 +141,19 @@ export async function getAcl() {
 	}
 
 	if (!path) {
-		return ''
+		return { data: '', type: 'json' }
 	}
 
 	const data = await readFile(path, 'utf8')
-	return data
+
+	// Naive check for YAML over JSON
+	// This is because JSON.parse doesn't support comments
+	try {
+		parse(data)
+		return { data, type: 'yaml' }
+	} catch {
+		return { data, type: 'json' }
+	}
 }
 
 // This is so obscenely dangerous, please have a check around it
@@ -339,3 +347,4 @@ async function hasAclW() {
 
 	return false
 }
+