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

w2r

v2023.8.106

Published

版本配置文件,每次图片发布后github action会自动修改

Downloads

69

Readme

npm_image_url

利用npm和github action搭建一个简易图床

友情提示:

不要fork仓库,容易泄露隐私,自己下载代码,新建仓库并上传代码

简介

手动上传文件到github后,自动触发action上传图片到npm,并将图片链接推送到telegram,同时利用telegram备份图片 效果图如下: https://qyucloud.ml/t/K4iTaT

代码说明

github action 运行代码来源于:我的图床解决方案 - YFun's Blog ,原版本使用不方便,需要上传图片后,手动更新release触发action,还要自己修改文件链接,还不能看到图片以及备份图片 本人仅做部分修改,具体修改内容如下:

  • 修改node-version,12.x --> 16.X
  • 安装python3及依赖库
  • 增加telegram推送,每次github上传图片后后,自动发送图片链接到telegram(相当于备份图片)
  • 更改action的触发方式, release --> push
准备工作

首先注册npm账号,注册地址:npm注册,注册后点击右上角的头像,然后选择Access Token,点击页面中的Generate New Token,classic token,生成Access Token,格式类似: npm_hF0123456789****

安装教程

登录你的github账号,新建仓库,设置为私有(保护隐私),下载代码并push到自己仓库

不会push的请按以下过程手动操作:

第一步: https://github.com/w2r/npm_image_url/archive/refs/heads/main.zip 下载代码并解压,点击Add file,选择上传post2tg.py和package.json文件到仓库

第二步: 然后点击新建文件,文件名为rawimg/.gitkeep , 内容空白即可, 同理创建webpimg/.gitkeep

第三部: 复制.github/workflows/main.yml里面的内容,然后点击action,选择new workflow,点击 set up a workflow yourself,把前面复制main.yml内容粘贴进去,最后保存

点击仓库的setting, 选择Secrets and variable-->Action,新增四个Secrets ,分别如下

# 准备工作里npm的Access Token
NPM_TOKEN -->  npm_hF0123456789****************
# botfather(https://t.me/BotFather )新建机器人,并获得机器人的api token 
TELEGRAM_TOKEN --> 1384839096:AAGWot30iO4************
# 随意转发一条信息给机器人https://t.me/getidsbot, 可以获得telegram用户id
USER_ID --> 561661***
# 镜像选择,优先推荐jsDelivr,国内外速度都很优秀
# 可用参数jsdelivr/zhimg/bdstatic/eleme/unpkg
# 详情查看推荐镜像地址
CDN  -->  jsdelivr

给予Action读写权限 setting --> action --> General, 选择Read and write permissions 如下图:

文件说明

workfolws-->main.yml action运行文件,无需修改

rawimg和webpimg为临时储存文件夹,rawimg储存上传图片,webpimg储存压缩后的图片,推送到npm后,action会自动删除所有图片,避免github图片滥用封号

package.json, 主要记录版本号和用户名称,name和version可自行修改

{
  "name": "w2r",
  "version": "1.2.22",
  "description": "版本配置文件,每次图片发布后github action会自动修改",
  "author": "cherbim@MJJ"
}

post2tg.py 推送到telegram(默认文件无需修改)

使用说明

将图片文件上传至仓库的 rawimg/ 文件夹下,也可以使用第三方工具上传(比如PicGo / UPic 等) github action的触发方式为rawimg/文件夹push文件,所以每次上传完图片,会自动运行action,并推送图片链接到tg

图片使用链接介绍

以 jsDelivr 为例,原图链接为:

https://cdn.jsdelivr.net/npm/[package-name]@[version]/rawimg/[filename].[suffix]

压缩后的图片链接:

https://cdn.jsdelivr.net/npm/[package-name]@[version]/rawimg/[filename].webp

参数值说明:

-[package-name]             package.json文件中name的值
-[version]                  package.json文件中的version的值
-[filename]                 文件名
-[suffix]                   文件后缀名称
推荐镜像地址
https://cdn.jsdelivr.net/npm/  # jsDelivr  
https://unpkg.zhimg.com/ # 知乎  
https://code.bdstatic.com/npm/ # 百度 (不推荐)  
https://shadow.elemecdn.com/npm/ # 饿了么  
https://unpkg.com/ # Unpkg
特殊说明

github action push代码有时抽风,导致push失败,需要手动修改一下版本号码 详细如下如,如果action运行结果出现publish package错误,请手动修改package.json的version(必须大于workflow出错图中的版本号,否则npm 无法publish)