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

@oak-digital/webtools-core

v1.0.0-beta.6

Published

This is the description of the plugin.

Downloads

2

Readme

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.

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

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

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

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

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

📺 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

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 Strapi Plugin Week 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 demo video.

🔗 Links

🌎 Community support

📝 Resources