.gitignore

@@ -1,3 +1,4 @@
 .idea/
 node_modules
-*/dist/main.js
+*/dist/main.js
+*/dist/main.js.map

README.md

@@ -1,63 +1,69 @@
-![useful-forks banner](website/assets/useful-forks-banner.png "useful-forks banner")
+![useful-forks banner](website/assets/useful-forks-banner.png "Useful Forks banner")
 
 # Useful Forks
 [![License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/useful-forks/useful-forks.github.io/blob/master/LICENSE)
 [![Issues](https://img.shields.io/github/issues/useful-forks/useful-forks.github.io?logo=github&color=brightgreen&label=issues%20%28help%20appreciated%29)](https://github.com/useful-forks/useful-forks.github.io/issues)
 
 ---
 
-Adding a sorted list of starred forks to the GitHub forks page. Results are filtered out if there were never any commits pushed on the main branch since the fork was created.
+This tool enhances the discoverability of useful forks for open-source projects by providing a list of forks worth exploring.
 
-This is meant to help increase the discoverability of useful forks of open-source projects.
+The results are filtered to exclude forks that have never had any commits pushed to the main branch since their creation.
 
-Some times, a project might be abandoned, or someone had a different idea of how it should be implemented... and when you go looking for those interesting forks, you find yourself searching through potentially hundreds of them. This tool is here to help you discover the hidden jewels you were looking for!
+Sometimes, a project might be abandoned, or someone had a different idea of how it should be implemented... and when you go looking for those interesting forks, you find yourself searching through potentially hundreds of them. This tool is here to help you discover the hidden jewels you were looking for!
 
 ## Table of Content
 * [Releases](#releases)
-  * [Website](#website)
-  * [Chrome extension](#chrome-extension-wip) (WIP)
-  * [`refined-github`](#refined-github)
+  * [Online tool](#online-tool)
+  * [Chrome extension](#chrome-extension)
+  * [Bookmarklet](#bookmarklet)
 * [How it works](#how-it-works)
 * [Contributing](#contributing)
 * [Credits](#credits)
 
 ---
 
 ## Releases
-The project is released as:
-1. A website: great for people that just want to use this tool every now and then.
-2. A Chrome extension: has the advantage of always performing the search whenever you open a project's GitHub Forks page.
-3. A feature in [`refined-github`](https://github.com/sindresorhus/refined-github)
+There are several ways to access the tool.
 
-### Website
-The project is [available online](https://useful-forks.github.io/) thanks to GitHub Pages.
+If you use Chrome, your best option would be to download the [Chrome extension](#chrome-extension). For other browsers, you may want to use the [bookmarklet](#bookmarklet).
 
-You can query repository directly with the URL. Here is an example: https://useful-forks.github.io/?repository=kotcrab/vis-ui
+### Online tool
+The project is [available online](https://useful-forks.github.io/) for free thanks to GitHub Pages.
 
-![website example](media/website_demo.gif)
+You can query a repository directly with the URL. Click this link to get an example: https://useful-forks.github.io/?repo=payne911/PieMenu.
 
-### Chrome extension (WIP)
-Not published yet. If you want to install it:
-1. Clone this repository
-2. Change the [script file](plugin/useful-forks.js) so that `GITHUB_ACCESS_TOKEN`'s value is that of an [Access Token](https://github.com/settings/tokens/new?description=useful-forks%20(no%20scope%20required))
-3. Go to the `chrome://extensions` URL
-4. Enable `Developer mode` (switch at the top-right)
-5. Click `Load unpacked` (button at the top-left)
-6. Select the [`plugin` folder](plugin)
+Below is a recording of what a scan would look like:
 
-Once it's activated, the extension will automatically trigger itself whenever you open a Fork page, as shown by the GIF below:
+![website example](media/website_demo.gif "Website demo")
 
-![example](media/chrome_extension_demo.gif)
+### Chrome extension
+Head to [Chrome's Web Store](https://chrome.google.com/webstore/detail/useful-forks/aflbdmaojedofngiigjpnlabhginodbf) to install the published extension.
 
-### `refined-github`
-[`refined-github`](https://github.com/sindresorhus/refined-github) is an ensemble of tools and tweaks aimed at improving your GitHub experience.
+Once it's activated, the extension will automatically add a new "Useful" button on all GitHub repository pages:
 
-`useful-forks` is part of the dozens of features provided. In that context, it appears as a button which redirects you to the [`useful-forks` website](https://useful-forks.github.io/):
+![extension_btn](media/plugin_btn_highlighted.png "This is what the 'Useful' button looks like")
 
-![screenshot](https://user-images.githubusercontent.com/38117856/107463541-542e8500-6b2c-11eb-8b25-082f344c1587.png)
+Here is what happens when you click it:
+
+![example](media/chrome_extension_demo.gif "Chrome Extension demo")
+
+This button will only appear when you visit GitHub repositories, and clicking it opens a new tab that will automatically trigger a search using [the online tool](#online-tool).
+
+Please note that this project will not be updating the [GitHub Releases](https://github.com/useful-forks/useful-forks.github.io/releases) page anymore. We will now go through Chrome's Web Store to publish updates.
+
+### Bookmarklet
+
+The online tool can be used as a [bookmarklet](https://en.wikipedia.org/wiki/Bookmarklet). To add one manually, press `Ctrl+D` to create a new bookmark and add this code in the URL field:
+
+```js
+javascript:!function(){if(m=window.location.href.match(/github\.com\/([\w.-]+)\/([\w.-]+)/),m){window.open(`https://useful-forks.github.io/?repo=${m[1]}/${m[2]}`)}else window.alert("Not a GitHub repo")}();
+```
+
+When you're viewing a GitHub repo in your browser, you can press the newly created bookmarklet and this will open the online tool for the repo in a new tab.
 
 ## How it works
-![Activity_Diagram](media/query-diagram.png)
+![Activity_Diagram](media/query-diagram.png "High-level diagram describing the flow of Useful Forks")
 
 This Activity Diagram (UML) should clarify a bit the inner-workings of the algorithm, and why it may some times require so many API calls.
 
@@ -71,7 +77,11 @@ To run the website locally, you will need:
 * NodeJS (suggested v14.15+)
 * NPM (suggested v6.14+)
 
-Bring a terminal to the ``website`` folder and execute `npm install` and then `npm run dev`.
+Bring a terminal to the ``website`` folder and execute `npm install`, and then `npm run dev`.
+
+If after running `npm run dev` you get an error that mentions "`code: 'ERR_OSSL_EVP_UNSUPPORTED'`", [this](https://stackoverflow.com/a/69746937/9768291) should be able to help.
+
+Whenever you want to test changes to the `src/queries-logic.js` file, you will need to re-execute `npm run dev` for `dist/main.js` to recompile.
 
 ## Credits
 * Thanks to [raeleus](https://github.com/raeleus) for his design of the logo!
@@ -81,5 +91,5 @@ Bring a terminal to the ``website`` folder and execute `npm install` and then `n
   * Implement authenticated requests to the GitHub API (which increases the limit of calls)
   * Added some minimal feedback for certain edge-cases
   * Created an actual website for the feature
-  * Position the chrome extension's results where they won't move the other links of the page
-* Thanks to [`star-history`](https://star-history.t9t.io/#useful-forks/useful-forks.github.io)'s [open-source website](https://github.com/timqian/star-history/tree/master/website) which I adapted for this project
+  * The Chrome extension leads to the (more powerful) website
+* Thanks to [`star-history`](https://star-history.t9t.io/#useful-forks/useful-forks.github.io)'s [open-source website](https://github.com/bytebase/star-history/tree/c0e7aa7cc01d5bab9188fc7d2a2bac409d2915ec/website) which I adapted for this project