Update Permissions.astro

src/components/Permissions.astro

@@ -4,7 +4,10 @@
  * <Permissions plugin="authenticator" />
  */
 
-import type { MarkdownInstance } from 'astro';
+import { createMarkdownProcessor } from '@astrojs/markdown-remark';
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
 interface Props {
 	plugin: string;
@@ -13,14 +16,34 @@ interface Props {
 const { plugin } = Astro.props;
 
 async function importMDX(p: string): Promise<string> {
-	/* @vite-ignore */
-	// Apparently, this is working, but Vite is complaining https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
-	const dir = `../../packages/plugins-workspace/plugins/${p}/permissions/autogenerated/reference.md`;
-	return import(dir).then((a: MarkdownInstance<String>) => {
-		return a.compiledContent();
-	});
+	console.log(import.meta.url)
+	const base = fileURLToPath(import.meta.url);
+	const dirname = path.dirname(base);
+
+	const dir = path.join(
+		dirname,
+		'../../packages/plugins-workspace/plugins',
+		p,
+		'permissions/autogenerated',
+		'reference.md'
+	);
+
+	try {
+		const content = await fs.readFile(dir, 'utf-8');
+		return content;
+	} catch (err) {
+		console.error(`Error reading file ${dir}: ${err}`);
+		throw err;
+	}
 }
+const md = await createMarkdownProcessor();
+
 const pageContent: string = await importMDX(plugin);
+const content = await md.render(pageContent);
+
+const code = `<code dir="auto">${plugin}:	</code>`;
+const prefix = `Prefix: ${code}`;
 ---
 
-<Fragment set:html={pageContent} />
+<p set:html={prefix} />
+<Fragment set:html={content.code} />