<div align="center">
<h1>Strapi Webtools</h1>
	
<p style="margin-top: 0;">Unique, flexible and autogenerated URLs for your Strapi managed web content.</p>
	
<p>
  <a href="https://www.npmjs.org/package/@pluginpal/webtools-core">
    <img src="https://img.shields.io/npm/v/@pluginpal/webtools-core/latest.svg" alt="NPM Version" />
  </a>
  <a href="https://www.npmjs.org/package/@pluginpal/webtools-core">
    <img src="https://img.shields.io/npm/dm/@pluginpal/webtools-core" alt="Monthly download on NPM" />
  </a>
  <a href="https://codecov.io/gh/pluginpal/strapi-webtools">
    <img src="https://img.shields.io/github/actions/workflow/status/pluginpal/strapi-webtools/tests.yml?branch=master" alt="CI build status" />
  </a>
  <a href="https://codecov.io/gh/pluginpal/strapi-webtools">
    <img src="https://codecov.io/gh/pluginpal/strapi-webtools/coverage.svg?branch=master" alt="codecov.io" />
  </a>
</p>
</div>

## This plugin is in BETA state

## ✨ Features

- **Unique URLs** Every page will get their own unique path
- **Auto generated** Automatically generated based on a pattern
- **Flexible** Overwrite single URLs
- **Frontend router** Get any page by it's unique path from the public API
- **Auto slugify** The URLs will automatically be slugified to ensure valid paths

## ⏳ Installation

Install the plugin in your Strapi project.

```bash
# using yarn
yarn add @pluginpal/webtools-core

# using npm
npm install @pluginpal/webtools-core --save
```

After successful installation you have to rebuild the admin UI so it'll include this plugin. To rebuild and restart Strapi run:

```bash
# using yarn
yarn build
yarn develop

# using npm
npm run build
npm run develop
```

Enjoy 🎉

## 🖐 Requirements

Complete installation requirements are the exact same as for Strapi itself and can be found in the [Strapi documentation](https://strapi.io/documentation).

**Supported Strapi versions**:

- Strapi 4.14.6 (recently tested)
- Strapi ^4.x

(This plugin may work with older Strapi versions, but these are not tested nor officially supported at this time.)

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

## 💡 Usage
This plugin is specifically designed for usage in Strapi managed websites. Hence the name **web**tools. The plugin offers a variety of functionalities which you'll have to manually enable in the admin interface.

See below a screenshot of how to enable webtools for a given collection type.

<img src="https://raw.githubusercontent.com/pluginpal/strapi-webtools/master/.github/enable-webtools.png" alt="Enable webtools" />

## 💡 URL alias
At the core of the plugin is URL alias. It's the idea that every page of a given collection type represents a page in your website frontend. Each of those pages will have a unique URL path which can be altered on the backend. Then all those URL paths can be used in your frontend to setup dynamic routing.

See below a screenshot of the URL alias popup that's used to set the unique path of your page.

<img src="https://raw.githubusercontent.com/pluginpal/strapi-webtools/master/.github/url-alias.png" alt="URL alias" />

## 🔌 URL pattern
To create dynamic URLs this plugin uses **URL patterns**. The URL pattern will be used to generate unique URLs based on the data available.

You can add URL patterns in the settings section of the plugin.

```
/pages/[my-title-field]
```

Fields can be injected in the pattern by escaping them with `[]`.

The following field types are allowed in a pattern:

- `id`
- `uid`
- `string`

See below a screenshot of the URL pattern creation form in Strapi.

<img src="https://raw.githubusercontent.com/pluginpal/strapi-webtools/master/.github/url-pattern.png" alt="URL pattern" />

## 🎨 Populate Creator fields

The plugin allows you to populate the creator fields in the `/router` endpoint.
To enable this feature; go to your content-types schema.json and enable the `populateCreatorFields`.

```
{
  // ...
  "options": {
    "populateCreatorFields": true,
  },
  // ...
}
```

The official Strapi documentation provides more information on how to use this feature:
https://docs.strapi.io/dev-docs/api/rest/guides/populate-creator-fields

## 📺  Frontend router

To make it all work you'll have to make use of the frontend router to setup dynamic routing based on the URL aliases in Strapi.

#### REST

```js
await fetch(`${API_URL}/api/webtools/router?path=/about-page`);
// GET /api/webtools/router?path=/about-page
```

## ✨ #StrapiPluginWeek

This plugin was initially made as an entry to the <a href="https://lu.ma/strapihacks">Strapi Plugin Week</a> hackathon. Back then it went under the name "URL alias". Since then a lot has changed and the plugin has been renamed to Webtools where the URL alias feature is just a part of it.

See the <a href="https://www.loom.com/share/5409b9415e3e4b66ad27eab967c393d0">demo video</a>.

## 🔗 Links

- [NPM package](https://www.npmjs.com/package/@pluginpal/webtools-core)
- [GitHub repository](https://github.com/pluginpal/strapi-webtools)

## 🌎 Community support

- For general help using Strapi, please refer to [the official Strapi documentation](https://strapi.io/documentation/).
- You can contact me on the Strapi Discord [channel](https://discord.strapi.io/).

## 📝 Resources

- [MIT License](LICENSE.md)
