Nefariously Pushing Master

    strapi-plugin-live-preview-content
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.19 • Public • Published

    Strapi - Preview Content Plugin

    All Contributors

    NPM Version Monthly download on NPM

    This plugin has been inspired by VirtusLab - strapi-molecules/strapi-plugin-preview

    A plugin for Strapi Headless CMS that provides content preview to integrate with any frontend:

    This is what the plugin looks like when editing content:

    Example of buttons in edit Content Type

    This is what the plugin looks like when we are in list view:

    Example of buttons in list view

    🖐 Requirements

    Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under Installation Requirements.

    Supported Strapi versions:

    • Strapi v3.6.x only version v1.0.0
    • Strapi v3.4.x only version v0.2.76

    We recommend always using the latest version of Strapi to start your new projects.

    Installation

    # npm
    npm install strapi-plugin-preview-content
    
    # yarn
    yarn add strapi-plugin-preview-content

    📁 Copy required files

    Inside 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

    Example of buttons in list view

    Copy the folder named content-manager inside your <project-root>/extensions folder

    👍 Active content type as previewable

    To 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):

    {
      "pluginOptions": {
    +    "preview-content": {
    +      "previewable": true
    +    }
      }
    }

    🚀 Run your project

    After successful installation you've to build a fresh package that includes plugin UI. To archive that simply use:

    # npm
    npm run build && npm run develop
    
    # yarn
    yarn build && yarn develop

    ✏️ Usage

    Go to Settings > Preview Content

    Preview Content Settings

    Base url

    Here 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).

    Default preview url

    This 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:

    Parameter Description
    :baseUrl See section above for explanation
    :contentType The content type to query
    :id The id of content to query

    For example in NextJS you can make use of serverless functions to make an URL like this:

    :baseUrl/api/preview/:contentType/:id

    With your base url being http://localhost:3000, for example.

    And put the logic there to render content.

    Custom preview url

    You can also provide a custom url per content type in its *.settings.json. To do so, add this line to its options:

    {
      "pluginOptions": {
        "preview-content": {
          "previewable": true,
    +      "url": ":baseUrl/your-path/:contentType/:id?a-custom-param=true"
        }
      }
    }

    Here 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.

    Adding data to the url

    To tell the plugin to allow injection of an entry's data add the following to your model's *.settings.json:

    {
      "pluginOptions": {
        "preview-content": {
          "previewable": true,
    +      "url": ":baseUrl/your-path/:contentType/<%= slug %>?a-custom-param=<%= title %>",
    +      "usesValuesInUrl": true
        }
      }
    }

    The plugin will now replace <%= slug %> and <%= title %> with the correct values. What you put in the brackets (<%= %>) has to be a name of the an attribute. The syntax used here is lodash's template syntax.

    Features

    🛠 API

    There are some functions that make all of this posible

    function route method description notes
    isPreviewable /is-previewable/:contentType GET Get if preview services is active in the current current type
    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
    getPreviewUrl /preview-url/:contentType/:id GET Get preview url of content type

    Contributing

    Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome! To learn how, head here.

    Community support

    For general help using Strapi, please refer to the official Strapi documentation. For additional help, you can use one of these channels to ask a question:

    • Slack We're present on official Strapi slack workspace. Look for @danestves and DM.
    • GitHub (Bug reports, Contributions, Questions and Discussions)

    License

    MIT License Copyright (c) 2020 Daniel Esteves & Strapi Solutions.

    Contributors

    Thanks goes to these wonderful people (emoji key):


    polcode-dzielonka

    💻

    p_0g_8mm3_

    💻

    Ahmed Rafik Ibrahim

    💻

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Keywords

    none

    Install

    npm i strapi-plugin-live-preview-content

    DownloadsWeekly Downloads

    0

    Version

    1.3.19

    License

    MIT

    Unpacked Size

    179 kB

    Total Files

    127

    Last publish

    Collaborators

    • miguelbinpar