内容摘录
unsight.dev
Detect duplicate GitHub issues, areas of concern and more across related repositories
<p align="center">
<a href="https://unsight.dev/" target="_blank">
<img width="1090" alt="Screenshot of unsight.dev showing a cluster of issues on nuxt/nuxt" src="https://github.com/user-attachments/assets/281b5167-eef6-4e08-be50-a6ff047c613b">
</a>
</p>
👉 Check it out
<!--
TODO: add listing on app stores
A browser extension (work in progress) that enhances GitHub issue pages by adding a "Similar Issues" section to the issue header. This feature helps users discover related issues more easily.
-->
✨ Features
Built on Nuxt
Nitro server API routes
GitHub API and a GitHub App
UnoCSS
Deployed on Cloudflare with NuxtHub, using Workers AI, Workers KV and Vectorize
🌎 Browser extension
[link-chrome]: https://chromewebstore.google.com/detail/unsight/dnkemphgofcdnnfjblcpclofbkeimpnc 'Version published on Chrome Web Store'
[link-firefox]: https://addons.mozilla.org/firefox/addon/unsight/ 'Version published on Mozilla Add-ons'
<!-- [link-safari]: https://apps.apple.com/app/ 'Version published on the Mac App Store' -->
[<img src="https://raw.githubusercontent.com/alrra/browser-logos/90fdf03c/src/chrome/chrome.svg" width="48" alt="Chrome" valign="middle">][link-chrome] [<img valign="middle" src="https://img.shields.io/chrome-web-store/v/dnkemphgofcdnnfjblcpclofbkeimpnc.svg?label=%20">][link-chrome] and other Chromium browsers
[<img src="https://raw.githubusercontent.com/alrra/browser-logos/90fdf03c/src/firefox/firefox.svg" width="48" alt="Firefox" valign="middle">][link-firefox] [<img valign="middle" src="https://img.shields.io/amo/v/unsight.svg?label=%20">][link-firefox]
<!-- [<img src="https://raw.githubusercontent.com/alrra/browser-logos/90fdf03c/src/safari/safari_128x128.png" width="48" alt="Safari" valign="middle">][link-safari] [<img valign="middle" src="https://img.shields.io/itunes/v/<id>.svg?label=%20">][link-safari] on Mac, iOS and iPadOS -->
🛝 Try it out locally
You can try the app out locally (for tweaking the UI) using the deployed API.
This will fire up a dev server but use the remote API to populate it.
🚧 Development environment
Setting up a full development environment takes a little extra effort because unsight.dev is implemented as a GitHub App. Here's how to set things up.
Setup
Start a local tunnel
Note the URL under Forwarding. It should look something like https://<GUID>.ngrok-free.app/. We'll use this in the next step.
Create a GitHub App for development
Navigate to the GitHub Apps Settings panel and click 'New GitHub App'.
Fill out the form, not changing any defaults:
**GitHub App name**: Pick any name at all. I normally add [dev] at the end of any apps I'm using in development only.
**Homepage URL**: Doesn't matter; just pick a URL: https://unsight.dev would be fine.
**Setup URL**: http://localhost:3000. Tick the 'Redirect on update' checkbox underneath.
**Webhook URL**: Put the URL you got when starting ngrok, plus /github/webhook: https://<GUID>.ngrok-free.app/github/webhook. For the 'Secret' field underneath the URL, create a random GUID or password and make a note of it.
**Repository permissions**: Select 'Issues': 'Read-only'.
**Subscribe to events**: Select 'Installation target', 'Issues', 'Meta' and 'Repository'.
Note down the App ID: in your GitHub App settings.
Note the 'slug' of your GitHub App. You should be at a URL that looks something like this https://github.com/settings/apps/unsight-dev. This last piece (unsight-dev) is your app slug.
Scroll down to the bottom of the GitHub App setings and click 'Generate a private key'. It should download. Unfortunately this private key is in PKCS#1 format, but we need PKCS#8 in a Cloudflare environment. Run the following command:
(This outputs a private key file you'll use in the next step.)
Configure your secrets
Create a packages/web/.env file with the following content (the private key was generated in the last step and can be multi-line, just add a quote before and after it):
Link your Cloudflare account
We use Workers AI and to do that locally we'll need to hook up to Cloudflare. This project uses NuxtHub to do that. You can get going by creating a free NuxtHub account at https://admin.hub.nuxt.com.
Then run this command in your app directory:
You can select 'Create a new project'. Any storage region should be fine. Your Nuxt dev server should restart, and you'll see a new NUXT_HUB_PROJECT_KEY variable in your packages/web/.env file.
You can now visit http://localhost:3000 and click 'Install as a GitHub app'.
You can now directly visit http://localhost:3000/<your-user-name>/<your-repo> to view your clusters.
Preset repo
By default, in local development, we'll also index nuxt/nuxt and nitrojs/nitro so you don't have to register the GitHub app on any repository in order to see and play around with the cluster algorithm.
If you want to customise this, you can configure the DEV_REPOS_TO_INDEX environment variable.
These repositories will automatically be indexed when you start your dev server.
[!IMPORTANT]
This only has an effect in development mode.
Credits
❤️ Thanks to Alvaro Saburido for the lovely logo!
License
Made with ❤️
Published under MIT License.