- Clone this repository.
- Update the package name in
package.json
. Make sure to follow the formatswup-[plugin name]-plugin
. - Update the description, repository url and author in
package.json
. - Add functionality to your plugin in
src/index.js
. It must be a class extending@swup/plugin
. Make sure to update the class name as well as thename
property in PascalCase:swup-name-plugin
→SwupNamePlugin
- Update this readme and document the features of your plugin. Make sure to replace each
SwupNamePlugin
placeholder with the actual name of your plugin in PascalCase. - Run
npm run build
to build a transpiled dist version of the plugin. The build command is run before publishing to npm automatically. - Publish your plugin to npm using
npm publish
. This assumes you have an npm account and are logged in via their CLI.
- Check out existing plugins before creating a new one.
- The swup instance is automatically assigned to the plugin instance and can be accessed at
this.swup
in themount
/unmount
methods. - If you think your new plugin has broad appeal and should live in the
@swup
org as an official plugin, get in touch at gmarcuk@gmail.com.
This is a plugin for swup – the complete, flexible, extensible, and easy-to-use page transition library for your server-side rendered website.
Swup plugin for highlighting links to the current page.
Install the plugin from npm and import it into your bundle.
npm install swup-highlight-current-page-plugin
import SwupHighlightCurrentPagePlugin from 'swup-highlight-current-page-plugin';
Or include the minified production file from a CDN:
<script src="https://unpkg.com/swup-highlight-current-page-plugin@latest"></script>
To run this plugin, include an instance in the swup options.
const swup = new Swup({
plugins: [new SwupHighlightCurrentPagePlugin()]
});
Plugin options:
const swup = new Swup({
plugins: [new SwupHighlightCurrentPagePlugin({
selector: 'a',
className: 'current',
ariaCurrent: 'page',
})]
});
Add CSS to actually make the highlighting visible:
a[aria-current="page"] {
text-decoration: underline;
text-decoration-thickness: 0.1em;
text-underline-offset: 0.1em;
cursor: inherit;
}