Fumadocs

Feedback

Receive feedback from your readers.

Setup

The Feedback component sends feedback from the browser. Handle it on your server with an Astro Action, which requires an adapter.

npx @fumadocs/cli feature feedback

It installs the component, adds it to your page module, and creates the action:

import { defineAction } from 'astro:actions';
import { pageFeedback, type ActionResponse } from '@/components/feedback/schema';

export const server = {
  pageFeedback: defineAction({
    // validates the input
    input: pageFeedback,
    async handler(feedback): Promise<ActionResponse> {
      console.log(feedback);
      return {};
    },
  }),
};

For block feedback, add a blockFeedback action with the blockFeedback schema, and pass it to FeedbackText the same way.

Add the remark-block-id plugin:

npm i @fumadocs/satteri
astro.config.mjs
import { remarkBlockId } from '@fumadocs/satteri/remark-block-id';

fumadocs({
  mdastPlugins: [remarkBlockId({ addDataAttribute: 'feedback' })],
});

Without an adapter, the CLI keeps onSendAction in the browser. Send feedback from there, like to your analytics.

To report feedback to GitHub Discussions, call onPageFeedbackAction() from the GitHub integration in the handler.

How is this guide?

Last updated on