{"id":17617562,"url":"https://github.com/danestves/strapi-plugin-preview-content","last_synced_at":"2025-08-22T00:32:36.582Z","repository":{"id":47298484,"uuid":"323531066","full_name":"danestves/strapi-plugin-preview-content","owner":"danestves","description":"A plugin for Strapi Headless CMS that provides content preview to integrate with any frontend","archived":false,"fork":false,"pushed_at":"2021-09-03T04:58:55.000Z","size":872,"stargazers_count":64,"open_issues_count":10,"forks_count":27,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-12-10T21:25:51.413Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danestves.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-22T05:34:06.000Z","updated_at":"2024-04-25T09:08:43.000Z","dependencies_parsed_at":"2022-08-27T10:21:41.781Z","dependency_job_id":null,"html_url":"https://github.com/danestves/strapi-plugin-preview-content","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danestves%2Fstrapi-plugin-preview-content","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danestves%2Fstrapi-plugin-preview-content/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danestves%2Fstrapi-plugin-preview-content/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danestves%2Fstrapi-plugin-preview-content/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danestves","download_url":"https://codeload.github.com/danestves/strapi-plugin-preview-content/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230542289,"owners_count":18242332,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-22T19:14:27.581Z","updated_at":"2024-12-20T06:07:24.140Z","avatar_url":"https://github.com/danestves.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Strapi - Preview Content Plugin\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.org/package/strapi-plugin-preview-content\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/strapi-plugin-preview-content/latest.svg\" alt=\"NPM Version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.org/package/strapi-plugin-preview-content\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/strapi-plugin-preview-content.svg\" alt=\"Monthly download on NPM\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e **This plugin has been inspired by [VirtusLab](https://github.com/VirtusLab/) - [strapi-molecules/strapi-plugin-preview](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-preview)**\n\nA plugin for [Strapi Headless CMS](https://github.com/strapi/strapi) that provides content preview to integrate with any frontend:\n\nThis is what the plugin looks like when editing content:\n\n\u003cimg src=\"https://github.com/danestves/strapi-plugin-preview-content/blob/main/public/assets/example1.png?raw=true\" alt=\"Example of buttons in edit Content Type\" /\u003e\n\nThis is what the plugin looks like when we are in list view:\n\n\u003cimg src=\"https://github.com/danestves/strapi-plugin-preview-content/blob/main/public/assets/example2.png?raw=true\" alt=\"Example of buttons in list view\" /\u003e\n\n### 🖐 Requirements\n\nComplete installation requirements are exact same as for Strapi itself and can be found in the documentation under \u003ca href=\"https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/installation/cli.html#step-1-make-sure-requirements-are-met\"\u003eInstallation Requirements\u003c/a\u003e.\n\n**Supported Strapi versions**:\n\n- Strapi v3.6.x only version v1.0.0\n- Strapi v3.4.x only version v0.2.76\n\n**We recommend always using the latest version of Strapi to start your new projects**.\n\n### ⏳ Installation\n\n```bash\n# npm\nnpm install strapi-plugin-preview-content\n\n# yarn\nyarn add strapi-plugin-preview-content\n```\n\n### 📁 Copy required files\n\nInside `strapi-files` we have a list of folders with the Strapi version, enter to the version that correspond with your installation, and you will see this files\n\n\u003cimg src=\"https://github.com/danestves/strapi-plugin-preview-content/blob/main/public/assets/folder.png?raw=true\" alt=\"Example of buttons in list view\" /\u003e\n\nCopy the folder named `content-manager` inside your `\u003cproject-root\u003e/extensions` folder\n\n### 👍 Active content type as previewable\n\nTo enable content type to be previewable and see preview, or clone entry, you've to add option previewable to true in a configuration json file (`*.settings.json`):\n\n```diff\n{\n  \"pluginOptions\": {\n+    \"preview-content\": {\n+      \"previewable\": true\n+    }\n  }\n}\n```\n\n### 🚀 Run your project\n\nAfter successful installation you've to build a fresh package that includes plugin UI. To archive that simply use:\n\n```bash\n# npm\nnpm run build \u0026\u0026 npm run develop\n\n# yarn\nyarn build \u0026\u0026 yarn develop\n```\n\n### ✏️ Usage\n\nGo to Settings \u003e Preview Content\n\n\u003cimg src=\"https://github.com/danestves/strapi-plugin-preview-content/blob/main/public/assets/settings.png?raw=true\" alt=\"Preview Content Settings\" /\u003e\n\n#### Base url\n\nHere you can configure the base url of your frontend. This is a seperate field because it will be different depending on whether your project is running locally (e.g. `http://localhost:3000`) oder in production (e.g. `https://your-site.com`).\n\n#### Default preview url\n\nThis is the default preview url the plugin uses for when your content type doesn't have its own url defined. For the default preview url there are three parameters provided by this plugin:\n\n| Parameter       | Description                       |\n|-----------------|-----------------------------------|\n| `:baseUrl`      | See section above for explanation |\n| `:contentType`  | The content type to query         |\n| `:id`           | The id of content to query        | \n\nFor example in NextJS you can make use of [serverless functions](https://nextjs.org/docs/api-routes/introduction) to make an URL like this:\n\n`:baseUrl/api/preview/:contentType/:id`\n\nWith your base url being `http://localhost:3000`, for example.\n\nAnd put the logic there to render content.\n\n#### Custom preview url\n\nYou can also provide a custom url per content type in its `*.settings.json`. To do so, add this line to its options:\n\n```diff\n{\n  \"pluginOptions\": {\n    \"preview-content\": {\n      \"previewable\": true,\n+      \"url\": \":baseUrl/your-path/:contentType/:id?a-custom-param=true\"\n    }\n  }\n}\n```\n\nHere you can see how the base url comes in handy: You cannot change the model in production, but you can change the base url in the settings.\n\n#### Adding data to the url\n\nTo tell the plugin to allow injection of an entry's data add the following to your model's `*.settings.json`:\n\n```diff\n{\n  \"pluginOptions\": {\n    \"preview-content\": {\n      \"previewable\": true,\n+      \"url\": \":baseUrl/your-path/:contentType/\u003c%= slug %\u003e?a-custom-param=\u003c%= title %\u003e\",\n+      \"usesValuesInUrl\": true\n    }\n  }\n}\n```\n\nThe plugin will now replace `\u003c%= slug %\u003e` and `\u003c%= title %\u003e` with the correct values. What you put in the brackets (`\u003c%=` `%\u003e`) has to be a name of the an attribute.\nThe syntax used here is [lodash's template syntax](https://lodash.com/docs/4.17.15#template).\n\n### ✨ Features\n\n### 🛠 API\n\nThere are some functions that make all of this posible\n\n| function        | route                           | method | description                                                   | notes                                                                          |\n| --------------- | ------------------------------- | ------ | ------------------------------------------------------------- | ------------------------------------------------------------------------------ |\n| `isPreviewable` | `/is-previewable/:contentType`  | `GET`  | Get if preview services is active in the current current type |                                                                                |\n| `findOne`       | `/:contentType/:id`             | `GET`  | Find a content type by id                                     | You may want to active this route as public to make request from your frontend |\n| `getPreviewUrl` | `/preview-url/:contentType/:id` | `GET`  | Get preview url of content type                               |                                                                                |\n\n## Contributing\n\nFeel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome! To learn how, head [here](/CONTRIBUTING.md).\n\n## Community support\n\nFor general help using Strapi, please refer to [the official Strapi documentation](https://strapi.io/documentation/). For additional help, you can use one of these channels to ask a question:\n\n- [Slack](http://slack.strapi.io) We're present on official Strapi slack workspace. Look for @danestves and DM.\n- [GitHub](https://github.com/danestves/strapi-plugin-preview-content/issues) (Bug reports, Contributions, Questions and Discussions)\n\n## License\n\n[MIT License](LICENSE.md) Copyright (c) 2020 [Daniel Esteves](https://danestves.com/) \u0026amp; [Strapi Solutions](https://strapi.io/).\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/polcode-dzielonka\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/70939074?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003epolcode-dzielonka\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/danestves/strapi-plugin-preview-content/commits?author=polcode-dzielonka\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/pr0gr8mm3r\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/37022952?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ep_0g_8mm3_\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/danestves/strapi-plugin-preview-content/commits?author=pr0gr8mm3r\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://ahmedrafik.me\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/25823409?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAhmed Rafik Ibrahim\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/danestves/strapi-plugin-preview-content/commits?author=armaaar\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanestves%2Fstrapi-plugin-preview-content","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanestves%2Fstrapi-plugin-preview-content","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanestves%2Fstrapi-plugin-preview-content/lists"}