npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

strapi-plugin-slugify

v2.3.8

Published

A plugin for Strapi Headless CMS that provides the ability to auto slugify a field for any content type.

Downloads

8,933

Readme

strapi-plugin-slugify

A plugin for Strapi that provides the ability to auto slugify a field for any content type. It also provides a findOne by slug endpoint as a utility.

Downloads Install size Package version

Requirements

The installation requirements are the same as Strapi itself and can be found in the documentation on the Quick Start page in the Prerequisites info card.

Supported Strapi versions

  • v4.x.x

NOTE: While this plugin may work with the older Strapi versions, they are not supported, it is always recommended to use the latest version of Strapi.

Installation

npm install strapi-plugin-slugify

# or

yarn add strapi-plugin-slugify

Configuration

The plugin configuration is stored in a config file located at ./config/plugins.js.

Please note that the field referenced in the configuration file must exist. You can add it using the Strapi Admin UI. Also note that adding a field at a later point in time will require you to unpublish, change, save and republish the entry/entries in order for this plugin to work correctly.

A sample configuration

module.exports = ({ env }) => ({
  // ...
  slugify: {
    enabled: true,
    config: {
      contentTypes: {
        article: {
          field: 'slug',
          references: 'title',
        },
      },
    },
  },
  // ...
});

This will listen for any record created or updated in the article content type and set a slugified value for the slug field automatically based on the title field.

Note that if you want to rewrite the same field (so title is both a reference and a slug) then you just put title for both the field and references properties.

IMPORTANT NOTE: Make sure any sensitive data is stored in env files.

Additional Requirement for GraphQL

Per #35 please ensure that the slugify plugin configuration is placed before the graphql plugin configuration.

The Complete Plugin Configuration Object

| Property | Description | Type | Default | Required | | -------- | ----------- | ---- | ------- | -------- | | contentTypes | The Content Types to add auto slugification and search findOne by slug search utility to | Object | {} | No | | contentTypes[modelName] | The model name of the content type (it is the singularName in the model schema) | String | N/A | Yes | | contentTypes[modelName]field | The name of the field to add the slug | String | N/A | Yes | | contentTypes[modelName]references | The name(s) of the field(s) used to build the slug. If an array of fields is set it will result in a compound slug | String or Array | N/A | Yes | | slugifyWithCount | Duplicate strings will have their occurrence appended to the end of the slug | Boolean | false | No | | shouldUpdateSlug | Allow the slug to be updated after initial generation. | Boolean | false | No | | skipUndefinedReferences | Skip reference fields that have no data. Mostly applicable to compound slug | Boolean | false | No | | slugifyOptions | The options to pass the the slugify function. All options can be found in the slugify docs | Object | {} | No |

Usage

Once the plugin has been installed, configured and enabled the configured content types will have the following additional functionality

Slugification

Any time the respective content types have an entity created or updated the slug field defined in the settings will be auto generated based on the provided reference field.

Find One by Slug

Hitting the /api/slugify/slugs/:modelName/:slug endpoint for any configured content types will return the entity type that matches the slug in the url. Additionally the endpoint accepts any of the parameters that can be added to the routes built into Strapi.

IMPORTANT The modelName is case sensitive and must match exactly with the name defined in the configuration.

Additional Requirements

Like all other created API endpoints the findSlug route must be allowed under User & Permissions -> Roles -> Public/Authenticated for the user to be able to access the route.

Examples

Example Request

Making the following request with the sample configuration will look as follows

REST

await fetch(`${API_URL}/api/slugify/slugs/article/lorem-ipsum-dolor`);
// GET /api/slugify/slugs/article/lorem-ipsum-dolor

GraphQL

{
  findSlug(modelName:"article",slug:"lorem-ipsum-dolor"){
    ... on ArticleEntityResponse{
      data{
        id
        attributes{
          title
        }
      }
    }
  }
}

Additionally if draftAndPublish is enabled for the content-type a publicationState arg can be passed to the GraphQL query that accepts either preview or live as input.

IMPORTANT Please beware that the request for an entry in preview will return both draft entries & published entries as per Strapi default.

{
  findSlug(modelName:"article",slug:"lorem-ipsum-dolor",publicationState:"preview"){
    ... on ArticleEntityResponse{
      data{
        id
        attributes{
          title
        }
      }
    }
  }
}

Example Response

If an article with the slug of lorem-ipsum-dolor exists the response will look the same as a single entity response

REST

Successful Response
{
  "data": {
    "id": 1,
    "attributes":{
      "title": "lorem ipsum dolor",
      "slug": "lorem-ipsum-dolor",
      "createdAt": "2022-02-17T01:49:31.961Z",
      "updatedAt": "2022-02-17T03:47:09.950Z",
      "publishedAt": null
    }
  }
}
Error Response

To be inline with Strapi's default behavior for single types if an article with the slug of lorem-ipsum-dolor does not exist a 404 error will be returned.

{
  "data": null,
  "error": { 
    "status": 404, 
    "name": "NotFoundError", 
    "message": "Not Found", 
    "details": {} 
  }
}

GraphQL

Successful Response
{
  "data": {
    "findSlug": {
      "data": {
        "id": "1",
        "attributes": {
          "title": "lorem ipsum dolor"
        }
      }
    }
  }
}
Error Response

To be inline with Strapi's default behavior for single types if an article with the slug of lorem-ipsum-dolor does not exist the data will be null.

{
  "data": {
    "findSlug": {
      "data": null
    }
  }
}

Bugs

If any bugs are found please report them as a Github Issue