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-extended-seo-v2

v1.2.1

Published

Extends SEO meta field

Downloads

27

Readme

DatoCMS-plugin: Extended SEO v2

This plugin extends the DatoCMS SEO meta field. This plugin allows users to see a preview of different sources generated from Heads Up.

About this repo :scroll:

This project was build using:

  • React.js
  • Javascript
  • HTML/CSS

Table of contents

What does this plugin do?

  • Enables user to see extended SEO card previews
  • Use data from the model you are working on
  • Edit SEO fields and save it directly as SEO data.
  • Using the Voorhoede Heads Up

extended seo plugin

Editor can edit fields

To edit the SEO-settings, the user can click on the configure button to open a modal with all the editable SEO-fields.

edit fields

Upload an image

The user can also upload an image that will be shown in the cards.

upload image section

Remove/reset settings

The user can click on the reset button to remove all data from the editable SEO-settings. The user can also remove an uploaded image by opening the SEO-settings modal and hover over the image uploader. A button will appear, and once pressed, the uploaded image will be removed.

remove or replace button

Installation on DatoCMS

First add this plugin via DatoCMS Settings > Plugins > Add (/admin/plugins/new). Secondly add an API token to the global settings of the plugin.

Installation for development

Cloning

Make sure you have Node installed on your machine if you want to install this plugin for development. Start a new project in your code-editor and run the following command:

    git clone https://github.com/voorhoede/datocms-plugin-extended-seo

Node Modules 📦

The following step is to install the node modules/packages. Install the packages by running the following command in your terminal:

npm install

Starting the application :collision:

Now that all the node modules are installed, you can start the application by entering the following command in your terminal:

npm start

Adding plugin to DatoCMS for development

To add the plugin to your DatoCMS project, start by navigating to your DatoCMS project settings, go to plugins and add a new plugin. Fill in the name of the plugin and the needed information. As entry point URL either fill in:

Please make sure to run your project locally so the project instantly changes while you save. If you are running your project locally fill in the following:

http://localhost:3000

If you already deployed the plugin, fill in your netlify (or your deployed site link) link in the entry point URL.

Make sure you enter the correct Field ID in the plugin model. You can do this by navigating to your models settings, edit the model settings and fill in your correct Field ID. Also don't forget to fill in the name of your plugin in the field editor under the heading "Presentation":

correct field id settings

About DatoCMS :cloud:

DatoCMS is a cloudbased headless CMS. See datocms.md.

Contributing

See contributing.md.