MDX: Fix hot reload

.changeset/green-maps-lick.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-mdx': patch
+---
+
+Fix hot reload

apps/docs/.env

@@ -7,4 +7,6 @@ ORAMA_INDEX_ID=hd6arq5e816mxigo5m6nakj1
 
 NEXT_PUBLIC_INKEEP_API_KEY=d8a7117087b982c1e9bb958281d346fabda53118990ce8b8
 NEXT_PUBLIC_INKEEP_INTEGRATION_ID=cm3lcaf2900birdj8ggx9bm44
-NEXT_PUBLIC_INKEEP_ORGANIZATION_ID=org_Wj76w48771HpvsVT
+NEXT_PUBLIC_INKEEP_ORGANIZATION_ID=org_Wj76w48771HpvsVT
+
+NEXT_PUBLIC_OPENPANEL_CLIENT_ID=9d67bc83-f661-4d57-8c2e-3e0eaf98b813

apps/docs/app/docs/[...slug]/page.tsx

@@ -27,7 +27,7 @@ import { AutoTypeTable } from '@/components/type-table';
 import { metadataImage } from '@/lib/metadata-image';
 import { File, Folder, Files } from 'fumadocs-ui/components/files';
 import { Mermaid } from '@theguild/remark-mermaid/mermaid';
-import { Rate } from '@/app/docs/[...slug]/page.client';
+import { Rate } from '@/components/rate';
 
 function PreviewRenderer({ preview }: { preview: string }): ReactNode {
   if (preview && preview in Preview) {

apps/docs/components/rate.tsx

@@ -43,8 +43,14 @@ function set(feedback: Feedback | null) {
   else localStorage.removeItem(key);
 }
 
+const clientId = process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID;
+if (!clientId)
+  throw new Error(
+    'environment variable missing: `NEXT_PUBLIC_OPENPANEL_CLIENT_ID`',
+  );
+
 const op = new OpenPanel({
-  clientId: '9d67bc83-f661-4d57-8c2e-3e0eaf98b813',
+  clientId,
 });
 
 export function Rate() {
@@ -58,8 +64,8 @@ export function Rate() {
 
   function submit(e?: SyntheticEvent) {
     e?.preventDefault();
+    if (opinion == null) return;
 
-    if (opinion !== 'good' && opinion !== 'bad') return;
     const feedback: Feedback = {
       opinion,
       message,

apps/docs/content/docs/ui/feedback.mdx

@@ -0,0 +1,35 @@
+---
+title: Feedback
+description: Receive feedback from your users
+---
+
+## Overview
+
+Feedback is crucial for knowing what your reader thinks, and help you to further improve documentation content.
+
+### Setup
+
+Copy the component.
+
+```json doc-gen:file
+{
+  "file": "./components/rate.tsx",
+  "codeblock": {
+    "lang": "tsx",
+    "meta": "title=\"components/rate.tsx\""
+  }
+}
+```
+
+The above example uses [OpenPanel](https://openpanel.dev), you can change the code in `submit()` to the platform you're using (e.g. PostHog).
+
+```ts
+import posthog from 'posthog-js';
+
+const feedback: Feedback = {
+  opinion,
+  message,
+};
+
+posthog.capture('on_rate_docs', feedback);
+```

apps/docs/content/docs/ui/meta.json

@@ -9,6 +9,7 @@
     "comparisons",
     "...",
     "---Setup---",
+    "feedback",
     "manual-installation",
     "static-export",
     "(integrations)",

packages/mdx/src/map/file-cache.ts

@@ -2,10 +2,10 @@ const map = new Map<string, unknown>();
 
 export const fileCache = {
   read<Data>(namespace: string, path: string) {
-    return map.get(`${namespace}.${path}}`) as Data;
+    return map.get(`${namespace}.${path}`) as Data;
   },
   write(namespace: string, path: string, data: unknown) {
-    map.set(`${namespace}.${path}}`, data);
+    map.set(`${namespace}.${path}`, data);
   },
   removeCache(path: string) {
     for (const key of map.keys()) {