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

datocms-plugin-better-linking

v0.2.1

Published

This datoCMS plugin enables a custom UI, to have better controll over your record, assets, urls, telephone or email links

Downloads

187

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

colindorrcolindorr

Keywords

datocms-plugindatocmsrecordasseturlteltelephonetelephone numberphone numberemailtargetcustom textnew windowlinklinkingaccessibilityaria-label

Readme

DatoCMS plugin: Better Linking

Welcome to the Better Linking plugin! This DatoCMS plugin allows you to easily create a complex link field, containing:

  • Different link types (records, assets, URLs, email links, or telephone numbers)
  • Custom styling/link classes
  • Custom link text overrides
  • Aria-label text overrides
  • Target window controls

Installation

  1. Install the plugin.
  2. Go to the plugin and fill in the Link Settings and Styling Settings. These values will be your default link field values.
  3. Create a new JSON field.
  4. Fill in your preferred name, fieldId, and localization (leave all other fields empty for now).
  5. Go to Presentation and choose the Better Linking appearance.
  6. Optionally, go to the Link Settings and Styling Settings to override the default values.
  7. Save the settings and the field.
  8. You can now add this field to your site and start using it.

cms plugin settings

How it works

After installing the plugin and creating a new field (see installation instructions), you can start using the new Better Linking field. Better Linking allows you to set default settings in the plugin window and customize those settings for each field in the field appearance window. The settings of the plugin, field, and its content will be saved as a JSON object. The JSON data will be hidden in the CMS/frontend and will be replaced with a user-friendly UI, which helps the user to easily create a link with customized data, giving them more control over their links.

preview userfriendly link ui

Development

When using the plugin, a JSON data object will be generated with all the settings and filled-in content. This data will be hidden in the CMS/frontend but is accessible using GraphQL and the CDA Playground. When querying the data of a Better Linking field, the whole JSON data object will be returned, containing all the data and selected options, allowing developers full access to the detailed information of the link. This might look a bit intimidating at first glance, but don't be scared. In the JSON data object, you will also find an object called formatted. This object contains a minimized representation of all link data. In most cases, this data will be more than enough to handle your links.

formatted response