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

astrospeed

v1.0.3

Published

Astrospeed is a performance monitor for your AstroJS codebase

Downloads

37

Readme

astroSpeed

Contributors Stargazers Issues MIT License LinkedIn

Summary

astroSpeed is a data collection and reporting suite that uses the Google Lighthouse SDK to automatically collect application metrics such as Performance and SEO in the background during the development process, after each commit.

Built With

  • Astro
  • React
  • Google LightHouse
  • TypeScript
  • Tailwind

Getting Started

astroSpeed is available in Node Package Manager and Github. The following steps detail installation from NPM.

Prerequisites

  • Node.js - 14.18.0 or higher.
  • Astro - 1.2.0 or higher.
  • Git

Installation & Usage

· watch the install demo here -or- follow instructions below...

  1. Start or open an Astro project.

  2. Install astroSpeed into the project as a dev dependency.

    npm install astrospeed --save-dev
  3. Optional - create astrospeed.config.json in your project's root directory if you want to manually configure astroSpeed. Add 1 or more of the below configurables to the config file, below values indicate the default.

    {
      "endpoints": ["/"],
      "port": 3000,
      "buildCommand": "npm run build",
      "outputDir": "dist",
      "useVite": 1
    }
  4. Commit new changes to your project's git repository. The post-commit Git hook will automatically start the astroSpeed report generation.

    git commit -a -m "your commit message here"
  5. The path to the newly generated astroSpeed report is written to stdout in your terminal (by default under the "astrospeed" folder in your project's root directory).

    git commit -a -m "your commit message here"
    [main 5958617] your commit message here
    1 files changed, 3 insertions(+), 2 deletions(-)
    Astrospeed report in progress...
    Astrospeed report available at <project-directory>/astrospeed/index.html
  6. You've launched! Open the report in a web browser to review the latest Google Lighthouse findings and compare them to previous commits.

  7. Each commit will regenerate the astroSpeed report, appending the latest Google Lighthouse scores to the report.

About

Google Lighthouse

Google Lighthouse is an open-source tool developed by Google for understanding the performance, quality, and correctness of your web apps (see Google Lighthouse on Github). astroSpeed uses Google Lighthouse metrics for Performance, Search Engine Optimization, Best Practices, and Accessibility diagnostics.

Git post-commit hook details

astroSpeed is configured to create a report after every commit using a git hook. astroSpeed's installation script attempts to add a post-commit hook. The installation script will notify you via the terminal if the attempt was successful or not. If successful, the the following line will be added to the file ./.git/hooks/post-commit.

npx astrospeed-snap

npx astrospeed-snap can also be used to generate a new report manually whenever you want. If you would would like to remove the post-commit hook, please don't uninstall astroSpeed. Simply remove the hook by using

npx astrospeed-hookuninstall

If you change your mind later and wish to reinstate the post-commit hook, you can add it back using

npx astrospeed-hookinstall

If you unfortunately decided to stop using astroSpeed, please uninstall the hook BEFORE uninstalling astroSpeed. Failure to do so will result in error messages after every commit about not being able to find astroSpeed. Your commits should still be successful, however. This unfortunate behavior is due to Node Package Manager removing the ability to create post uninstall scripts.

Roadmap

  • [ ] Upload report to astroSpeed.io and receive a shareable link.
  • [ ] Add Deep-dive performance metrics.
  • [ ] Create user authentication on astroSpeed.io.

See the open issues for a full list of proposed features (and known issues).

Contributing

Contributions are welcome! For feature requests, please create a new issue with the "enhancement" tag.

To contribute:

  1. Fork the Project.
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature).
  3. Commit your Changes (git commit -m 'Add some AmazingFeature'). Be sure to Lint your code!
  4. Push to the Branch (git push origin feature/AmazingFeature).
  5. Open a Pull Request to https://github.com/oslabs-beta/astrospeed/.

Join astroSpeed contributors on LinkedIn.

Acknowledgments & License

Distributed under the MIT License. See LICENSE for more information.