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

yinaai

v0.0.4

Published

--- # Features ## 1. Pre label beautification ### Use in the website```<pre>az</pre>```You can see the beautification effect ## 2. Code label beautification ### Use in the website```<code>az</code>```You can see the beautification effect ## Web page

Downloads

13

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

slqwqslqwq

Keywords

Websitehandsome

Readme

Yinaai

| A crumb tool that can beautify your website

| You can quote our CSS to your website ->

| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yinaai/yinaai.min.css">

| In addition to using CSS, you can also use the js way ->

| <script src="https://cdn.jsdelivr.net/npm/yinaai/yinaai.min.js">

Selection guide

If your picture is convenient, you can use JS to introduce the method

If you use it normally, you can use the CSS introduction method

Features

1. Pre label beautification

Use in the website<pre>az</pre>You can see the beautification effect

2. Code label beautification

Use in the website<code>az</code>You can see the beautification effect

Web page background

Convert your <html> tag to <html data-theme="wbh"> to see the effect

Scrollbar

A scroll bar will be displayed when your webpage exceeds the current visibility(Directly modify the embedded style of Webkit kernel)

Motion animation (for FontAwesome / built-in)

On DOM load On hover On parent hover

faa-wrench animated faa-wrench animated-hover faa-wrench faa-ring animated faa-ring animated-hover faa-ring faa-horizontal animated faa-horizontal animated-hover faa-horizontal faa-vertical animated faa-vertical animated-hover faa-vertical faa-flash animated faa-flash animated-hover faa-flash faa-bounce animated faa-bounce animated-hover faa-bounce faa-spin animated faa-spin animated-hover faa-spin faa-float animated faa-float animated-hover faa-float faa-pulse animated faa-pulse animated-hover faa-pulse faa-shake animated faa-shake animated-hover faa-shake faa-tada animated faa-tada animated-hover faa-tada faa-passing animated faa-passing animated-hover faa-passing faa-passing-reverse animated faa-passing-reverse animated-hover faa-passing-reverse faa-burst animated faa-burst animated-hover faa-burst faa-falling animated faa-falling animated-hover faa-falling faa-rising animated faa-rising animated-hover faa-rising

If you want to use it, please add class=" the CLASS name provided above" to any tag

Small Tag / Note Tag

If you want to use Small Tag, please use <span class="inline-tag red">red tag</span><span class="inline-tag green">green tag</span><span class="inline-tag blue">Small blue label</span><span class="inline-tag yellow">Small yellow label</span><span class="inline-tag grey">Small gray label<span class="inline-tag grey"> /span>Insert anywhere on your website

If you want to use Note Tag, please set <p class='div-border green'>green</p><p class='div-border red'>red</p><p class='div -border yellow'>Yellow</p><p class='div-border grey'>Gray</p><p class='div-border blue'>Blue</p>Insert into your website Anywhere

Tip Tag

Please refer to Official Website But there may be some errors in the style, please ignore it, just insert it as usual

Snote Tag

If you want to use the Snote tag, please insert <div class="snote stylename"> anywhere in your website. The stylename can enter the css internal search reference

Other content can be explored by yourself