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

image-set

v2.1.0

Published

A template containing a collection of images generated by Midjourney. Fork this repository to create a new image set.

Downloads

60

Readme

Image Set Template

CI npm version

This repository is a template for creating and publishing npm packages containing optimized image sets, designed to work seamlessly with Next.js projects.

DISCLAIMER

ALWAYS HAVE A BACKUP OF YOUR IMAGES OUTSIDE THIS PROJECT. THE SCRIPTS IN THIS PROJECT WILL MODIFY YOUR IMAGES.

See the LICENSE file.

Table of Contents

  1. Why I Created This
  2. How It Works
  3. Getting Started
  4. Image Compression
  5. Metadata & Tagging
  6. Publishing Your Package
  7. Using the Image Set in a Next.js Project
  8. License

Why I Created This

This repository was created to facilitate static image contributions for web projects without the need for complex database systems or user management infrastructure. The core concept is to simplify image contributions to the level of a pull request. Here's how it works:

  • Git manages the submission process
  • npm handles image packaging
  • Scripts optimize images

This solution may be suitable for you if:

  • You're developing an open-source project and want to encourage contributions (from others) for assets
  • You don't want to set up additional database or cloud services
  • You see value in separating image assets from your main codebase
  • Your project benefits from community-driven assets

How It Works

  1. The template provides a structure for organizing images and scripts for processing them.
  2. Images are automatically compressed and converted to WebP format.
  3. The resulting package can be easily imported and used in Next.js projects.

Workflow Overview

graph LR
    A[Image Set Package] -->|1. Publish| B[npm Registry]
    B -->|2. Install| C[Next.js Project]
    C -->|3. Use| D[Optimized Images]

This diagram illustrates how the Image Set package is published to npm, installed in a Next.js project, and then used to access optimized images.

Getting Started

Setting Up Your Own Image Set

  1. Clone this repository:

    git clone https://github.com/yourusername/image-set-template.git your-image-set-name
    cd your-image-set-name
  2. Install dependencies:

    npm install
  3. Update the package.json file:

    • Change the name field to a unique name for your image set
    • Update the description, keywords, and author fields
  4. Add your images:

    • Place your images in the public/images/ directory
    • The script will automatically create a subdirectory with your package name and move all images into it
  5. Process your images:

    npm run process-images

    This will run an interactive CLI where you may select between compressing images or tagging your images.

    • Compress images: You should run the Compress Images command first before tagging them. This will organize your images, compress them, convert them to WebP format, and replace the originals -- remember to back up your images outside the project before proceeding. See also Image Compression.

    • Tag images: You can manage tags or add from the list of existing tags. After compressing the images, you should normally add some of your own custom tags first before tagging your images. You may also manually edit the tag-config.json file to add or remove tags. It also prompts for other metadata such as the name, title and description. See also Metadata & Tagging.

  6. Update the LICENSE file with your preferred license

  7. Update this README with information about your specific image set

Folder Structure

The script will create a folder structure like this:

public/
  images/
    category1/
      image1.webp
      image2.webp
    category2/
      subcategory/
        image3.webp
      image4.webp

You can organize your images in any way you prefer within the images/ directory. The script will maintain your folder structure while compressing and converting the images.

Image Compression

This template uses the sharp library to automatically compress and convert images to the WebP format. The compression script: You may run the compression script by running npm run process-images and select Compress Images in the CLI, or access it directly via npm run compress-images.

The script:

  • Converts all images in the to WebP format
  • Reduces image quality to 80% (adjustable in scripts/process-images.js)
  • Replaces original images with compressed versions
  • Maintains the original folder structure within the folder

To customize compression settings, edit the scripts/process-images.js file.

Metadata & Tagging

Metadata

Each image can have associated metadata, including a filename, label, and tags. The metadata is stored in image-metadata.json.

Tagging

Images can be tagged with descriptive tags to facilitate search and organization. The tag configuration is stored in tag-config.json. You may manually edit the file or use the interactive CLI (npm run process-images) to manage tags.

Tag Configuration

Tags are organized into three categories:

  • Subject: Related to the subject of the image (e.g., Nature, Technology, People).
  • Version: Related to any version information (like a Movie season or Game version) of the image set (e.g., 1_0_0, 1_1_0, 2_0_0).
  • General: General tags (e.g., High Quality, Colorful, Monochrome). New tags added via the CLI are placed here by default.

All new tags added via the interactive CLI are placed in General. If you wish to add to Subject or Version, you may manually edit the tag-config.json file. Feel free to remove the default tags and add your own.

Publishing Your Package

To publish your package to npm:

  1. Make sure you have an npm account and are logged in locally
  2. Run the publish script:
    npm run publish-package
  3. Follow the prompts to bump the version and publish

NPM Tutorial for Beginners

If you're new to npm, here's a quick guide to get you started:

  1. Create an npm account:

    • Go to https://www.npmjs.com/ and click "Sign Up"
    • Follow the registration process
  2. Log in to npm from your terminal:

    npm login

    Enter your username, password, and email when prompted

  3. Prepare your package for publication:

    • Ensure your package.json file is correctly filled out
    • Run npm run compress-images to optimize your images
  4. Publish your package:

    npm publish

    If this is your first time publishing this package, it will create a new package on npm

  5. Updating your package:

    • Make your changes
    • Update the version number in package.json (e.g., from "1.0.0" to "1.0.1")
    • Run npm publish again
  6. Managing versions:

    • Use semantic versioning (MAJOR.MINOR.PATCH)
    • Increment PATCH for backwards-compatible bug fixes
    • Increment MINOR for new backwards-compatible functionality
    • Increment MAJOR for incompatible changes

Remember, once you publish a version, you can't overwrite it. Always increment the version number for new publications.

Using the Image Set in a Next.js Project

  1. Install the package in your Next.js project:

    npm install your-package-name
  2. Update your next.config.js:

    const path = require('path');
    
    module.exports = {
      webpack: (config, { dev, isServer }) => {
        config.resolve.modules.push(path.resolve('./node_modules/your-package-name/public'));
        return config;
      },
    };
  3. Use the images in your Next.js components:

    import Image from 'next/image';
    import { getImageSetName, getImageList, getImageMetadata, getTagConfig } from 'your-package-name';
       
    export default function MyComponent() {
      const imageSetName = getImageSetName();
      const images = getImageList();
      const metadata = getImageMetadata();
      const tagConfig = getTagConfig();
       
      // Filter images by tag
      const natureImages = images.filter(image => 
        getImageMetadata(image).tags.some(tag => tag.name === 'nature')
      );
       
      return (
        <div>
          {natureImages.map(image => (
            <Image 
              key={image}
              src={`/images/${imageSetName}/${image}`}
              width={500}
              height={300}
              alt={getImageMetadata(image).label || "Image"}
            />
          ))}
        </div>
      );
    }

Note: All images are compressed and converted to WebP format. Make sure to use the .webp extension when referencing them.

License

See the LICENSE file for details.