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

@0x4447/avocado

v1.8.1

Published

🥑 build the output of a front-end page to be hosted on S3 and delivered by CloudFront

Downloads

165

Readme

🥑 Avocado

After having created the useful 0x4447 Potato 🥔 CLI, we found that deploying a simple HTML page to AWS CloudFront, a page that is not build around a framework, is annoying and time consuming. This is why we came up with the idea for Avocado: a CLI that will build the final page out of a simple folder structure by using the awesome templating engine–Hogan.

How to Install

] sudo npm install -g @0x4447/avocado

How to Use

] avocado -s PATH_TO_FOLDER

Where to get Help

] avocado -h

What to Expect

  • Removes the _preview and _output folder, this way we have a clean slate.
  • Creates empty _preview and _output folder.
  • Reads the JSON files from the data folder.
  • Reads the JSON files from the env.json file.
  • Merge the two data sets together.
  • Renders the final page using Hogan.
  • Save the result in the _preview and _output folder.

Folder Structure of the Source Site

The root folder will contain the _input folder where the content of the site is located. The data, and views folders holds the data and the HTML files which are used to generate the previews and final output.

  • Root
  • _input/
    • assets/ - all your images, js, css and other.
    • data/ - JSON files for each page from the view folder to enrich the page using Hogan.
    • views/ - all pages in HTML form which can be organized using sub folders.
    • any file to be included in the final page.
  • env.json - a JSON file that holds the environment variables that are uniquer per page deployment, and should not committed to the repository. Worth knowing: use the help option to find out how to pass different env file.

If you'd like to try out Avocado, you can take a look at our company website repository for reference.

How to deliver the site locally

If you have just a single page it is easy to check the page by opening the individual HTML file. But if you'd like to have a local setup with a custom local domain and a self signed SSL cert, you can check our configuration that we use.

Companion Software

This CLI tools works well also with the following software:

  • Potato: it helps you host and upload your work on to AWS S3 and deliver the site through AWS CloudFront.
  • Broccoli: it helps you create a Nginx configuration to work one the site from your local machine.

The End

If you enjoyed this project, please consider giving it a 🌟. And check out our 0x4447 GitHub account, where we have additional resources that you might find useful or interesting.

Sponsor 🎊

This project is brought to you by 0x4447 LLC, a software company specializing in build custom solutions on top of AWS. Find out more by following this link: https://0x4447.com or, say [email protected].