![\"Logo](\"public/logo-2x.png\"){kind=logo}
\n Strapi Preview Button
\nA plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.
\n \n![\"Latest](\"https://img.shields.io/npm/v/strapi-plugin-preview-button.svg\")
\n ![\"Strapi](\"https://img.shields.io/badge/strapi-v5-blue\"){kind=icon}
\n ![\"Screenshot](\"public/screenshot.png\")
\n\n A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.
\n \n\n![\"Screenshot](\"public/list-view.png\")
\n\n## π© Extending\nIf you need to apply more advanced logic to the preview URL, you can accomplish this with the `plugin/preview-button/before-build-url` hook included with this plugin.\n\nYour Strapi app will need a **custom plugin** in order to use this hook.\n\n> See [Plugins Development](https://docs.strapi.io/dev-docs/plugins/developing-plugins) in Strapi docs for more info.\n\n#### Example\nIn the code below, we register the hook and the plugin in the `register` method of the plugin's `admin/src/index.ts` file.\n\nThe callback receives `draft` and `published` parameters which are the same as the UID configs from `config/plugins.ts`. So if you are editing a `Page`, you will get the `draft` and `published` configs for `api::page.page` from your plugin config passed into the callback. The `data` and `uid` props are also provided to help mutate the `draft` and `published` configs.\n\nIn this example, we are just adding on a `foo=bar` query parameter to demonstrate how this hook can be utilized for more dynamic URLs.\n\n```ts\n// ./admin/src/index.ts\nexport default {\n register(app) {\n app.registerHook('plugin/preview-button/before-build-url', ({ data, draft, published, uid }) => {\n const draftQuery = draft?.query ?? {};\n\n // Return an object with modified `draft` and `published` props.\n return {\n draft: {\n ...draft,\n query: {\n ...draftQuery,\n foo: 'bar',\n },\n },\n published,\n };\n });\n\n app.registerPlugin({\n id: 'example',\n name: 'Example',\n });\n },\n};\n```\n\nFinally, don't forget to enable your plugin in your app by adding it to `config/plugins.ts`.\n\n```ts\n// ./config/plugins.ts`\nexport default () => ({\n example: {\n enabled: true,\n resolve: './src/plugins/example',\n },\n});\n```\n\n## π User Guide\n\n### How does this work with my frontend app?\nThe **Open live view** button will lead directly to the live page URL.\n\nThe **Open draft preview** button should lead to an endpoint that redirects to the appropriate preview page based on the query parameters passed to it.\n\nFor in-depth examples and instructions, please reference the links below to learn how this can be accomplished with Next.js and Strapi.\n\n* [Next.js Preview Mode](https://nextjs.org/docs/pages/building-your-application/configuring/preview-mode)\n* [Next.js Preview Mode example with Strapi](https://github.com/vercel/next.js/tree/canary/examples/cms-strapi)\n\n## π© Troubleshooting\n\n#### In general\nRemember to **rebuild your app** after making changes to some config or other code.\n\n```bash\nyarn build\n# OR\nyarn develop\n```\n\n## π Migration\nFollow the [migration guides](MIGRATION.md) to keep your preview button plugin up-to-date.\n\n## β€οΈ Support or Donate\nIf you are enjoying this plugin and feel extra appreciative, you can [buy me a beer or 3 πΊπΊπΊ](https://www.buymeacoffee.com/mattmilburn).\n","readmeFilename":"README.md"}