unsight.dev

Detect duplicate GitHub issues, areas of concern and more across related repositories

• 👉  Check it out

✨ 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

and other Chromium browsers

🛝 Try it out locally

You can try the app out locally (for tweaking the UI) using the deployed API.

corepack enable
pnpm i
pnpm dev --ui-only

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

corepack enable
pnpm i

Start a local tunnel

npx ngrok http 3000

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

1. Navigate to the GitHub Apps Settings panel and click ‘New GitHub App’.

2. Fill out the form, not changing any defaults:

• undefinedGitHub App name: Pick any name at all. I normally add [dev] at the end of any apps I’m using in development only.
• undefinedHomepage URL: Doesn’t matter; just pick a URL: https://unsight.dev would be fine.
• undefinedSetup URL: http://localhost:3000. Tick the ‘Redirect on update’ checkbox underneath.
• undefinedWebhook 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.
• undefinedRepository permissions: Select ‘Issues’: ‘Read-only’.
• undefinedSubscribe to events: Select ‘Installation target’, ‘Issues’, ‘Meta’ and ‘Repository’.

1. Note down the App ID: in your GitHub App settings.

2. 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.

3. 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:

openssl pkcs8 -topk8 -inform PEM -outform PEM -nocrypt -in <path to the downloaded file>.pem -out <path to your repo>-unsight-pkcs8.key

(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):

NUXT_WEBHOOK_GITHUB_SECRET_KEY=<random GUID or password you put in the Webhook Secret field when creating your GitHub App>
NUXT_PUBLIC_GITHUB_APP_SLUG=<your app slug you saw in the URL of your GitHub App settings>
NUXT_GITHUB_APP_ID=<GitHub App ID you saw in your GitHub App settings>
NUXT_GITHUB_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----
MIIEvcIBADAEBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoABADDbja1oaWVufjdT
...
+qWpvAnlgrGQqvbsuY+XuRnt
-----END PRIVATE KEY-----"

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:

cd packages/web/
npx nuxthub link

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.

# disable the feature entirely
DEV_REPOS_TO_INDEX=false

# specify a comma-separated list of repositories
DEV_REPOS_TO_INDEX=unjs/h3,vuejs/core

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.