DEV Community: JW

Check repo package detail as quick as possible

JW — Wed, 06 Jul 2022 03:21:35 +0000

Recently I meet a problem, sometimes I will read some awesome repos' source code to improve my code skills.

Also I will read package.json file, find some useful and interesting packages. However, npm packages listed in package.json in Github never display npm readme. It is difficult to infer from the npm package name what function it has.

I always copy npm package name, and search in google(or in alfred npm workflow). It's really annoying. Is there anyway to list all npm readme at once?

As a front-end developer, I know npm provide public npm-package-info API, also fetch Github repo package.json detail api is public. So why not create a web extensions to save my time?

This Web extension should as simple as possible, it should only contains A simple button, click it, then show me all npm package readme.

After spending almost a week time, include off-hours and weekends. Now, It launches in the chrome webstore, you can click here to install it.

Usage is very simple.

Go to any Github repo page (which include at least a package.json file)
Click web extensions popup Icon (on the right top of the chrome browser).

It displays all npm package readme in a modal page, by default, it ignores @types/* packages.

Also it supports monorepo, you can switch different package.json file on the right top of the modal.

Welcome to send feedback in comments or open Github issue

JiangWeixian / repo-stack.ext

Display repo package detail.

Show me repo dependencies & devDependencies details

repo-stack.mp4

View on GitHub

Open website shortcuts directly from alfred

JW — Sat, 01 Jan 2022 07:28:37 +0000

TL;DR

open website shortcuts from alfred. There is workflow

Some website provide shortcuts like repo.new to create project on github.

There are simliar shortcuts like

repo.new - create github repo
codespace.new - create github codespace
gist.new - create github gist
depoly.new - create depolyment on vercel
dev.new - create depolyment on railway
pen.new - create codepen ...

you can see all awesome website shortcuts here

Now you open those url directly from alfred by this workflow

Sync latest template repo

JW — Wed, 01 Dec 2021 14:11:10 +0000

My Workflow

I create cheatsheets app based on github, everyone can use this cheatsheets as template to create own cheatsheet app. But I want every user repo code update to date. So, I create github action to fetch latest changes from original repo, then create a pr.

Submission Category:

Must-Haves

Yaml File or Link to Code

ohmycheatsheet / actions-updater

fetch remote source repo and update current repo

@omcs/actions-updater

fetch remote source repo and update current repo

features

In default, this action will diff source-template-repo and current-repo by filepath recursive

deleted: if current/a.file not exist in source, a.file will be deleted.
add: if current/a.file not exist, but source/a.file exist, a.file will be added.
update: if current/a.file and source/a.file exist, force update current/a.file

Friendly pr

read changelog as pr body
bump version like dependabot

usage

create file updater.yml in .github/workflows
add following code to updater.yml file

name: "updater"

on:
  schedule:
    - cron: "0 23 * * *"

jobs:
  # test action works running from the schedule
  cronjob:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: ohmycheatsheet/actions-updater@v1
      with:
        repo: ohmycheatsheet/cheatsheets
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

variables

name	description	type	required
repo	(input) source repo	string	true
ignores	(input) ignore update files

…

View on GitHub

name: "updater"

on:
  schedule:
    - cron: "0 23 * * *"

jobs:
  cronjob:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: ohmycheatsheet/actions-updater@v1
      with:
        repo: ohmycheatsheet/cheatsheets
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Additional Resources / Info

there is a example repo

JiangWeixian / cheatsheets

a cheatsheets app based on github

Built with ❤️ by ohmycheatsheet. Cheatsheets is a part of ohmycheatsheet project, a self-host cheatsheet management app! It sync your github issues to website with friendly UI~

features

🚀 Easy and Fast develop
🔍 Search cheasheet with algolia
🌥️ Cool Website
- ✨ Support code-share with url or image
🤖 Useful Assistants Tools
- 📩 Slack bot - Support send your recently/some-day-your-created cheatsheets with slack-bot

snapshots

▲ cheatsheets-homepage

usage

vercel

Use this repo as template
New dataset from algolia
Set below github repo secrets
- ALGOLIA_APPID=<ALGOLIA_APPID> - copy from algolia-api-keys
- ALGOLIA_APP_KEY=<ALGOLIA_APP_KEY> - copy from algolia-api-keys
- SLACK_WEBHOOK=<SLACK_WEBHOOK> - check actions-friday usage
Deploy to Vercel'now, in Vercel deployments settings, set below env variables as Production & Preview & Development Environment Variables
- GITHUB_TOKEN
- NEXT_PUBLIC_ALGOLIA_APPID - copy from algolia-api-keys
- NEXT_PUBLIC_ALGOLIA_SEARCH_KEY - copy from algolia-api-keys
- ALGOLIA_APP_KEY - copy from algolia-api-keys
new issue on github'issue

netlify

Use this repo as template
New dataset from algolia
Set below github…

View on GitHub