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

@khulnasoft-opensource/opengraph.khulnasoft.com

v2.4.1

Published

OpenGraph dot KhulnaSoft OpenSource is a general purpose social card generator

Downloads

7

Readme

🍕 KhulnaSoft OpenSource OpenGraph Generator 🍕

The path to your next Open Source contribution

Code Size Commits Issues [Releases]labelColor=6A7EC2)](https://discord.gg/U2peSNf23P) Twitter

🚀 Live release environments

Production (main)

Beta (beta)

📖 Prerequisites

In order to run the project we need the following software binaries installed on our development machines:

  • [x] node>=18.15.0
  • [x] npm>=9.6.3
  • [ ] docker>=20.10.23

🖥️ Local development

To install the application:

npm ci

To start a local copy of the app on port 3001:

npm run start:dev

Local dev scripts

There are a few scripts that can be used to generate and test the social cards locally without having to deploy to the CDN. This is the way to go when developing & testing the interface for the social cards.

Generating user profile cards

npm run test:local:user

Generates user cards for all users in the test array inside test/local-dev/UserCards.ts and outputs them in dist/local-dev/ for testing.

The same goes for the other card types:

  • npm run test:local:insight is for generating insight cards.
  • npm run test:local:highlight is for generating highlight cards.

The output of these scripts can be found in the dist/local-dev/ folder as well.

📝 Environment variables

Some environment variables are required to run the application. You can find them in the .env.example file. While most of them are optional, some are required to run the application.

One can reverse engineer the named configs but some need a little explanation.

Boilerplate, changed mostly locally:

# GitHub private access tokens
GITHUB_PAT_USER=ghp_************************************

# DigitalOcean Spaces through aws-sdk configuration
DO_SPACES_ACCESS_KEY_ID=********************
DO_SPACES_SECRET_ACCESS_KEY=*******************************************

Ping @khulnasoft-opensource/maintainers to get the dev CDN keys for the DO_SPACES_* variables.

Other Digital Ocean S3 variables are sensibly set to default for local development, here are the defauls:

DO_SPACES_ENDPOINT=digitaloceanspaces.com
DO_SPACES_REGION=sfo3
DO_SPACES_BUCKET_NAME=opengraph-dev

It is also advised to set the following variables to true to avoid using the cached CDN during development:

DO_SPACES_CDN_DISABLED=true

If using a custom domain, you can set the following variable to the domain name:

DO_SPACES_SUBDOMAIN=beta.opengraph-cdn.okhulnasoft.com

Other API defaults you can change are not required in local development, but can sometimes appear configured differently for production:

API_HOST=0.0.0.0
API_PORT=3005
API_DOMAIN=opengraph.okhulnasoft.com
MEMORY_HEAP=200
MEMORY_RSS=3000
DISK_PERCENTAGE=0.7
DISK_SIZE=100

🎨 Code linting

To check the code and styles quality, use the following command:

npm run lint

This will also display during development, but not break on errors.

To fix the linting errors, use the following command:

npm run format

It is advised to run this command before committing or opening a pull request.

📕 Types

We have a couple of scripts to check and adjust missing types.

In order to dry run what types would be added to package.json:

npm run types:auto-check

In order to add any missing types to package.json:

npm run types:auto-add

🚀 Production deployment

A production deployment is a complete build of the project, including the build of the static assets.

npm run build

🤝 Contributing

We encourage you to contribute to KhulnaSoft OpenSource! Please check out the Contributing guide for guidelines about how to proceed.

🍕 Community

Got Questions? Join the conversation in our Discord.
Find KhulnaSoft OpenSource videos and release overviews on our YouTube Channel.

🎦 Repository Visualization

Below is visual representation of our code repository. It is generated by Octo Repo Visualizer.

This visualization is being updated on release to our default branch by our release workflow.

Visualization of this repository

⚖️ LICENSE

MIT © KhulnaSoft OpenSource