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

@alephmatic/aleph0

v0.0.2

Published

To install dependencies:

Downloads

7

Readme

aleph0

To install dependencies:

pnpm install

To run:

pnpm run src/index.ts

Test cases

CONSOLA_LEVEL=4 pnpm src/index.ts gen "add a form that creates a blog post" -p ../examples/next
CONSOLA_LEVEL=4 pnpm src/index.ts gen "create a prisma schema file with a blog model" -p ../examples/next

Debug

CONSOLA_LEVEL=4 pnpm run src/index.ts gen "add a file named agam.ts in the app/ folder" -p ../examples/next -rd false

Snippets in aleph0

Overview

Snippets are key components in aleph0, providing valuable context to the AI. They offer insights into how various frameworks are used and demonstrate our coding conventions and patterns.

Snippet Structure

  • Location: Snippets are located in the snippets folder.
  • Types of Snippets:
    • General Technology Snippets: These explain general aspects of a framework. For instance how page.tsx is a special file in Next.js.
    • Metadata.ts: This file contains details about the snippet, like its purpose, file paths, and references to framework-related files. It helps the AI understand the snippet's context.
    • Code Examples: Other files in the snippets directory typically contain raw code examples showing how to implement the snippet.

Example Structure

Here's how snippets are organized:

snippets/
  next14/
    metadata.ts - Metadata for Next.js general tech snippets.
    route.ts - Example of a route in Next.js version 14 (general tech snippet).
    toaster/
      metadata.ts - Metadata for the toaster snippet.
      toaster.tsx - Example of a toaster in Next.js version 14.

Example metadata.ts

export const metadata: Metadata = {
  name: "Toaster",
  description:
    "A toast component example - A short message that is displayed temporarily.",
  // comment
  path: "toaster", // directory path for the snippet
  long: `multiline
  
multiline`,
  files: [
    {
      name: "Toaster Component",
      file: "toaster.tsx",
      explanation:
        "The toaster should be placed on the frontend in a `toasters/<TOASTER>.ts` file.",
      references: ["page.tsx"], // extra information related to the snippet like next.js's `page.tsx` conventions.
    },
  ],
};