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

@enhance/arc-image-plugin

v1.4.0

Published

Enhance/Architect plugin for transforming images

Downloads

72

Readme

An Architect plugin for transforming images

What it does

Drop large images in the static folder of an Architect app and request a transformed version.

Install

You can install the plugin for any Architect app with npm install @enhance/arc-image-plugin. You can then add it to your app manifest like this:

#app.arc
@app
image-app

@plugins
enhance/arc-image-plugin

Use

The Architect framework serves static assets from a local folder that becomes an S3 bucket when deployed to AWS. You drop your giant.jpeg image in the public folder, and then once deployed, you can access it from anywhere. In your app you can request http://example.com/_static/giant.jpeg or with a root relative path at /_public/giant.jpeg.

With the image plugin, you can request the same image by swapping the “_static” for “transform” and include query parameters to get a different size (/transform/width_100,height_100/giant.jpeg). This will scale the image to fit in those dimensions while maintaining the aspect ratio.

Other examples:

  • /transform/format_avif,width_100,quality_50/_public/elephant.jpg
  • /transform/format_webp,width_100,height_500/_public/elephant.png

Supported formats

  • png
  • jpeg
  • avif
  • webp
  • jxl
  • gif

Parameters

  • quality: specify the quality setting for lossy formats.
  • format: The requested image format for the output.
  • width: Output width
  • height: Output height
  • fit: type of placement
    • 'contain'(default): output will fit inside the specified height and width
    • 'cover': output will cover the height and width with the remaining portion cropped.
  • focus: If the image is cropped what area is maintained as the focal point.
    • Options: 'top', 'right', 'bottom', 'left', 'top-right', 'bottom-right', 'bottom-left', 'top-left', 'center', 'point'
    • Default: 'center'
  • mark: adds a marker to the chosen focal point of the image to temporarily identify the focal point.
    • Use with focus=point, x=, and y=
  • x,y: Mark a focal point from the top left by percentage. Used with focus=point

The transformation maintains aspect ratio.

Image transform flowchart

The first time a request is made, it is transformed in a lambda and that new version is saved to an S3 bucket. The next request for that size is served from the cache.