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

penguist

v0.0.2

Published

Penguist is an embeddable presenation library written in Typescript, designated to make fast and simple presentations. It can be embedded via a single js file, as well as using npm package.

Downloads

7

Readme

Penguist

Penguist is an embeddable presenation library written in Typescript, designated to make fast and simple presentations. It can be embedded via a single js file, as well as using npm package.

Index

Example

<!DOCTYPE html>

<head>
  <title>W Rizz</title>
  <link rel="icon" href="penguist/assets/penguist.svg">
  <script src="penguist.min.js"></script>

  <style>
    body {
      font-family: 'Hack';
      margin: 4rem 8rem;
    }

    .title {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  </style>
</head>

<p-present>
  <p-slide class="title">
    <div>
      <template>
        <slot>sdasd</slot>
      </template>

      <panim-fade start="with-prev">
        <h1>(")> Penguist</h1>
        <p>An embeddable presentation library written in <strong style="color: darkblue;">slowscript</strong></p>
      </panim-fade>

      <panim-fade style="margin-top: 1rem;">
        <img src="penguist/assets/penguist.svg" width="256" alt="logo">
      </panim-fade>
    </div>
  </p-slide>
  <p-slide>
    <ptemp-main view-num="1" view-title="Hello Penguist">
      <p>Quisque nec risus pulvinar lacus aliquet accumsan. Proin varius molestie tortor ut pulvinar. Sed volutpat pretium eros eget bibendum. Integer pharetra, ante a pharetra laoreet, ipsum erat posuere diam, vel condimentum enim tortor eget nulla. Aliquam suscipit, magna tempus finibus semper, ex ex suscipit est, semper rhoncus velit nisl eu nunc. Aliquam vel quam dolor. Vivamus porttitor sapien quis dapibus porta. Nulla lobortis efficitur quam id sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin justo ipsum, tincidunt eu mauris tincidunt, placerat consectetur turpis.</p>
    </ptemp-main>
    <panim-fade start="with-prev" style="margin-top: 1rem;">
  </p-slide>
  <p-slide>
    <ptemp-main view-num="2" view-title="Hello Penguin">
      <p>Sed eget condimentum mi. Proin congue et lacus et pulvinar. Nam id blandit mi. Proin dui elit, rutrum vitae orci a, tincidunt pulvinar velit. Vivamus a diam egestas, convallis ligula quis, vestibulum purus. Ut lacus mauris, bibendum at convallis non, finibus at diam. Vestibulum scelerisque, erat non facilisis finibus, lorem metus dictum quam, eu maximus augue nisi accumsan nisl. Cras auctor varius elit, ut pharetra ligula porta vulputate. In eu turpis felis. Etiam vitae enim sed felis rutrum vestibulum in non nisi. Nulla facilisi. Pellentesque tincidunt consequat leo blandit congue.</p>
      <p>Maecenas massa lacus, cursus ut ullamcorper sit amet, venenatis sed velit. Phasellus consectetur arcu vel dui gravida mollis. Cras mollis quam sapien. Phasellus at orci at ante maximus egestas. Proin eget posuere diam, in blandit nulla. Maecenas in dictum nunc, non sagittis lectus. Aenean libero ante, blandit id dignissim quis, luctus in justo. Ut bibendum, justo et eleifend egestas, magna elit aliquet tellus, sit amet malesuada metus ex sit amet nisi. Quisque rhoncus accumsan dui. Nunc nec tellus vitae est imperdiet eleifend. Proin sed ipsum a nisi blandit cursus id non sapien. Fusce rhoncus ex sed convallis ullamcorper. Aliquam semper orci a blandit facilisis. Vivamus fringilla, orci nec malesuada accumsan, massa urna hendrerit ex, in porta quam nisl sed diam. Aenean maximus tortor in suscipit facilisis. Vivamus aliquet ex sed ex tincidunt viverra.</p>
      <p>Nunc felis lorem, dictum vel pulvinar eu, aliquam nec nulla. Maecenas eu vulputate ante. Phasellus tincidunt ac urna dapibus gravida. Nulla facilisi. Nunc pretium auctor lacus accumsan dapibus. Ut commodo sed libero ut blandit. Mauris nunc nisi, fermentum vel odio non, gravida posuere nisi. Maecenas eget elit mollis neque bibendum auctor. Donec a elementum neque. Fusce scelerisque faucibus risus, euismod efficitur leo egestas tempus. Aenean nisi lorem, fermentum pellentesque blandit eget, posuere id mauris. Suspendisse aliquet diam eu nunc aliquam, et laoreet nisl porttitor. Fusce at efficitur dui.</p>
      </ptemp-main>
  </p-slide>
  <p-slide>
    <h2>Goodbye Penguist</h2>
    <panim-test start="with-prev" style="width: fit-content; font-size: 32pt;">
      🐧
    </panim-test>
  </p-slide>
</p-present>

<script>
  Penguist.init()

  Penguist.template('main')
    .html(`
      <panim-fade start="with-prev">
        <h2>
          <span class="number">{{ num }}</span> {{ title }}
        </h2>

        <slot></slot>
      </panim-fade>
    `)
    .css(`
    .number {
      color: #333;
      background: #eee;
      font-weight: bold;
      padding: .2rem .6rem;
      border: 3px solid #333;
      border-radius: .5rem;
    }`)
    .define()

  Penguist.anim('test')
    .frames([
      { transform: "rotate(0)" },
      { transform: "rotate(360deg)" },
    ])
    .opts({
      duration: 1000,
      iterations: Infinity
    })
    .define()
</script>

Other contents are under construction 🏗