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

instalike

v0.0.7

Published

Embeddable like button for anything.

Downloads

8

Readme

Instalike Build Status npm version

Attractive, anonymous, globally-aware like buttons for anything. Simple embed an iframe in your website and it will use the public API. Or, you can self-host the API in order to add a custom like button to your nodejs project. You can use Instalike buttons to hold informal polls, to ask the internet for approval, and even to impress your friends.

preview.gif

Usage

There are 2 ways you can use Instalike: with the public API, or as a self-hosted node package.

Option 1: Use the public API

Place the <iframe> into your HTML, and specify a THING to keep track of. (Thing names are case-sensitive and can contain any Unicode characters.) That's it! The http://instalike.click website will automatically use the public API to keep track of the like count for your "thing." Optionally, you can specify align=right to make the button right-aligned (default is left-aligned).

<iframe src="//instalike.click/button/?thing=THING&align=left" frameborder="0" scrolling="0" width="140px" height="20px">
</iframe>

API hosting provided by Cimpress. The API supports GET/POST/PATCH http://instalike.click/api/THING.

Option 2: Host the API yourself

Install the npm module if you want to host the API yourself. This is perfect for on-premesis enterprise installations.

$ sudo npm install -g gulp
$ npm install instalike
$ redis-server & # or start it as a service
$ npm start

# Note: stop redis safely using redis-cli
$ redis-cli
127.0.0.1:6379> shutdown
2002:M 20 Jul 16:50:13.137 # User requested shutdown...
2002:M 20 Jul 16:50:13.137 * Saving the final RDB snapshot before exiting.
2002:M 20 Jul 16:50:13.138 * DB saved on disk
2002:M 20 Jul 16:50:13.138 # Redis is now ready to exit, bye bye...
not connected> exit
Job 1, 'redis-server &' has ended

Development

Pull requests welcome. The tech stack is very simple:

  • Backend (api)
    • Node.js
    • Express.js
    • Swagger-Tools
    • Mocha for testing
    • Hosted on-prem
  • Frontend (buttons)
    • Source is JS (zero external dependencies)
    • Source is HTML + CSS3
    • Uses FontAwesome icons
    • Built by Gulp

The ./public directory contains all the source files:

  • index.html — the demo page hosted at http://instalike.click
  • button/index.html — iframe target heavily inspired by https://github.com/mdo/github-buttons.
  • button/script.js — use API to get/increment like count, use localStorage for button state.
  • button/style.css — supports modern browsers.
  • button/icons — fontawesome minimal subset via http://icomoon.io.

Here are examples of calls to the JSON API:

GET /api/{thingName} HTTP/1.1
Host: instalike.click
Accept: application/json

200 OK
{
  "thing": "{thingName}",
  "count": 42
}
POST /api/{thingName} HTTP/1.1
Host: instalike.click
Accept: application/json

200 OK
{
  "thing": "{thingName}",
  "count": 43
}
PATCH /api/{thingName} HTTP/1.1
Host: instalike.click
Accept: application/json

200 OK
{
  "thing": "{thingName}",
  "count": 42
}