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 🙏

© 2021 – Pkg Stats / Ryan Hefner

nuxt-magpie

v0.0.17

Published

During full static generation, download all remote images and add them to the dist folder, replacing file names in html and static payloads

Downloads

104

Readme

nuxt-magpie

npm version npm downloads Github Actions CI Codecov License

Build module for Nuxt.js to download remote images and include them as local files in the generated build when performing full static generation.

📖 Release Notes

✨🐦 Shiny!

Magpie aims to take Nuxt's full static generation a step further, to create a standalone build with no API calls and no remote image assets.

Features

  • Downloads local copies of all remote images to your /dist folder
  • For each generated route, replaces all image urls in the page's html and payload/state to use the local copies
  • Use it with a locally hosted CMS to create a build ready to be deployed on static hosts (e.g. Netlify)
  • Requires nuxt version >= 2.14.0

Before starting

In its current version, even with full static generation enabled, nuxt still runs the fetch and asyncData calls when navigating to another route (as documented here). To prevent these calls from overriding the urls replaced by magpie, you can add a check in your fetch or asyncData to bail fetching if the requested data is already available.

Setup

  1. Add nuxt-magpie dependency to your project
yarn add nuxt-magpie # or npm install nuxt-magpie
  1. Add nuxt-magpie to the buildModules section of nuxt.config.js
{
  buildModules: [
    // Simple usage
    "nuxt-magpie",

    // With options
    [
      "nuxt-magpie",
      {
        /* module options */
      }
    ]
  ];
}
  1. Enable full static generation in nuxt.config.js:
{
  ssr: true,
  target: 'static'
}
  1. Run nuxt generate

Options

All options and their default values:

{
  path: '/_images', // dir inside /dist where downloaded images will be saved
  extensions: ['jpg', 'jpeg', 'gif', 'png', 'webp'],
  baseUrl: '', // only download images from a certain url (e.g. your backend url)
  verbose: false, // show additional log info
  concurrency: 10, // max concurrent image downloads
  keepFolderStructure: false, // re-creates original image paths when saving local copies
  replaceInChunks: true, // attempts to replace image urls in the generated javascript chunks
  alias: null // see below for details
}

Alias

You can provide aliases to be replaced before image lookup. For example, Strapi doesn't return the full image urls when using the default upload provider, but instead uses the format /uploads/image-name.

You can use the alias option to make sure all image paths are parsed correctly:

{
  /* ... Magpie options */
  alias: {
    '/uploads': 'http://localhost:1337/uploads'
  }
}

Development

  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Start development server using npm run dev

License

MIT License

Copyright (c) Emilio Bondioli