a glitch in github's markdown preview fails to parse "width: 22.5%;" correctly due to the decimal point, so I've removed it.

find and fix a ton of spelling typos using the "typos" rust tool from: "https://github.com/crate-ci/typos" . it's quite impressive I must say

Author: omar-azmi

readme.md

@@ -8,7 +8,7 @@ This is a Chromium and Firefox extension for viewing github Repository sizes, an
 
 <p float="left">
   <img src="./public/screenshots/desktop.png" style="width: 75%;" />
-  <img src="./public/screenshots/mobile.png" style="width: 22.5%;" />
+  <img src="./public/screenshots/mobile.png" style="width: 22%;" />
   <img src="./public/screenshots/desktop_option_page.png" style="width: 98%;" />
 </p>
 
@@ -177,7 +177,7 @@ flowchart TD
 	394730(("E")) --> 633740
 	842277 --> 222161
 	842277 --> 394730
-	subgraph 977297["bundling enpoints"]
+	subgraph 977297["bundling endpoints"]
 		633740
 		339264
 	end
@@ -237,10 +237,10 @@ bundling with code-splitting also comes with the advantage of smaller total outp
 
 first, you need to know that the extension is supposed to be a single javascript file that is executed after your designated injection-target website has loaded (this being "github.com" for this extension). <br>
 the javascript file to be ran is specified in the manifest file ([`/src/manifest.json`](./src/manifest.json)), under `manifest["content_scripts"][0]["js"][0]`. <br>
-the global context available to this javascript of yours is simply the same as the one available to the target webpage (i.e. you are in the `window` environment), in addition to having a limitied number of browser-extension features, such as: `chrome.storage` and `chrome.runtime` (or in the case of firefox: `browser.storage` and `browser.runtime`). <br>
+the global context available to this javascript of yours is simply the same as the one available to the target webpage (i.e. you are in the `window` environment), in addition to having a limited number of browser-extension features, such as: `chrome.storage` and `chrome.runtime` (or in the case of firefox: `browser.storage` and `browser.runtime`). <br>
 moreover, by web-security design, you cannot do static imports in any content_script (so `import {x, y, z} from "./abc.js"` is disallowed). <br>
 however, you *can* dynamically import using `const {x, y, z} = await import("./abc.js")`, but it **will** require that the target webpage has access to that imported file, which it currently doesn't, because the file sits locally in your browser. <br>
-hence, you will need to give the target webiste *access* to your imported javascript files, which is done by specifying the `manifest["web_accessible_resources"]` entry in the manifest file. <br>
+hence, you will need to give the target website *access* to your imported javascript files, which is done by specifying the `manifest["web_accessible_resources"]` entry in the manifest file. <br>
 here's how it should look: <br>
 ```ts
 // manifest.json
@@ -282,7 +282,7 @@ see [`license.md`](./license.md). but for a quick summary:
   - enable only the `public_repo` checkbox if you will NOT be viewing your private repository's stats
   - enable the whole `repo` group checkbox otherwise
 - Scroll to the bottom and click on the `Generate token` button
-- You will now be presented with the access token. MAKE SURE TO COPY AND SAVE IT NOW! This token will forever disapear after you close the dialog, so make sure to save it
+- You will now be presented with the access token. MAKE SURE TO COPY AND SAVE IT NOW! This token will forever disappear after you close the dialog, so make sure to save it
 - Paste the token into this browser extension
 
 For a visual guide, see one of:

src/js/content_script.ts

@@ -5,7 +5,7 @@
  * so, for that, we have to create an async iife to execute the script.
  * furthermore, the imported script MUST have external-resource security clearance to be imported here.
  * for that, we have to specify in "manifest.json": `web_accessible_resources = [{resources: ["*.js"], matches: "<all_urls>"}]`.
- * which is basically saying: javacript within "<all_urls>" in this extension can load the resource url_pattern "*.js" (all javascript files).
+ * which is basically saying: javascript within "<all_urls>" in this extension can load the resource url_pattern "*.js" (all javascript files).
 */
 
 // dynamic imports of the following are done in `runMain()`:

src/lib/deps.ts

@@ -214,7 +214,7 @@ class BrowserStorage<SCHEMA extends Record<string, ({} | undefined)>> extends So
 		// here, we simply check if `this.storage.get(key)[key] === undefined`,
 		// because, if that key had ever been set to `undefined` via our `set` method, then it would've internally converted it to `null`,
 		// and we would've actually gotten `this.storage.get(key)[key] === null` instead.
-		// but actually, it seems far more reasonable to simply check of the `key` exists in the returned storge value object via `key in (await this.storage.get(key as any))`
+		// but actually, it seems far more reasonable to simply check of the `key` exists in the returned storage value object via `key in (await this.storage.get(key as any))`
 		// but i don't want to do that right now, unless i encounter an issue with my current way.
 		return (await this.storage.get(key as any))[key] === undefined
 	}

src/lib/easter_egg.ts

@@ -3,7 +3,7 @@ import { shuffledDeque } from "./deps.ts"
 const seppuku_slogans = /* @__PURE__ */[
 	"you are one step away from retaining your honor",
 	"your honor lies on the other side",
-	"sudoku must be commited before a large audience",
+	"sudoku must be committed before a large audience",
 	"know that kermit the frog is proud of you",
 	"sudoku fills you with determination",
 	"sudoku is now legal in canada! visit your local doctor find out more!",
@@ -30,7 +30,7 @@ const seppuku_slogans = /* @__PURE__ */[
 	"your organs will become a fine art",
 	"gunshot is a lazy sudoku",
 	"nippon has the best sudoku knives in the world",
-	"at the end of every journey, lies the begining of a new sudoku",
+	"at the end of every journey, lies the beginning of a new sudoku",
 	"sudoku is an honor, not a punishment",
 	"you are a hero, and sudoku is your reward",
 	"sudoku is now tax deductible! save money and your honor!",
@@ -51,7 +51,7 @@ const seppuku_slogans = /* @__PURE__ */[
 	"pray that you become a good piece of art as you fall into eternal slumber",
 	"bodily ketchup will gush out of your guts",
 	"did you enjoy your final obento onee-san prepared for you?",
-	"there is no esekai for commiters of sudoku. break free of the cycle!",
+	"there is no esekai for committers of sudoku. break free of the cycle!",
 	"sudoku lets you become one with the void",
 	`<pre style="margin: -2rem 0 0 0; text-align: center; font-size: 1rem; line-height: calc(1rem * (1.0 - exp(-1)));">┌───┬───┬───┐
 │S  │  K│ILL│

src/lib/gh_graphql_api.ts

@@ -66,22 +66,22 @@ export class GraphQLAPI extends GithubAPI {
 		const
 			{ owner, repo, branch } = this.repo,
 			branch_colon_path = branch + ":" + folder_pathname,
-			reqest_header: HeadersInit = {
+			request_header: HeadersInit = {
 				"content-type": "application/json",
 				"accept": "application/vnd.github+json",
 				"authorization": `bearer ${this.auth}`,
 			},
 			response = await (await fetch(config.api.graphql, {
 				method: "POST",
-				headers: reqest_header,
+				headers: request_header,
 				body: JSON.stringify({
 					query: create_recursive_query(options.recursion),
 					variables: { owner, repo, branch_colon_path }
 				}),
 			})).json() as GraphQLResponse<GraphQLRepositoryData>
 		if (response.errors) {
 			const error_messages = response.errors.map((error) => (error.message)).join("\n\t")
-			throw Error(`encoutered GraphQL query errors:\n\t${error_messages}`)
+			throw Error(`encountered GraphQL query errors:\n\t${error_messages}`)
 		}
 		const folder_contents = response.data.repository.object.entries
 		const sumup_entry_bytesizes = (file_or_folder_entry: GraphQLRepositoryFolderEntry | GraphQLRepositoryFileEntry): number => {
@@ -101,22 +101,22 @@ export class GraphQLAPI extends GithubAPI {
 	async getDiskspace(): Promise<number> {
 		const
 			{ owner, repo } = this.repo,
-			reqest_header: HeadersInit = {
+			request_header: HeadersInit = {
 				"content-type": "application/json",
 				"accept": "application/vnd.github+json",
 				"authorization": `bearer ${this.auth}`,
 			},
 			response = await (await fetch(config.api.graphql, {
 				method: "POST",
-				headers: reqest_header,
+				headers: request_header,
 				body: JSON.stringify({
 					query: create_diskspace_query(),
 					variables: { owner, repo }
 				}),
 			})).json() as GraphQLResponse<GraphQLRepositoryDiskspaceData>
 		if (response.errors) {
 			const error_messages = response.errors.map((error) => (error.message)).join("\n\t")
-			throw Error(`encoutered GraphQL query errors:\n\t${error_messages}`)
+			throw Error(`encountered GraphQL query errors:\n\t${error_messages}`)
 		}
 		return response.data.repository.diskUsage * 1024 // `diskUsage` is actually in kilobytes instead of bytes, so we need to convert it to bytes
 	}

src/lib/gh_rest_api.ts

@@ -24,35 +24,35 @@ export class RestAPI extends GithubAPI {
 		const
 			{ owner, repo, branch } = this.repo,
 			recursion_query = ((options.recursion ?? 1) > 1) ? "recursive=true" : "",
-			reqest_header_auth: { authorization: string } | {} = this.auth ? { "authorization": `bearer ${this.auth}` } : {},
+			request_header_auth: { authorization: string } | {} = this.auth ? { "authorization": `bearer ${this.auth}` } : {},
 			// we first need to fetch the tree's associated SHA1 hash value.
 			// for this, it is crucial that we use the header `{ "accept": "application/vnd.github.object" }`,
 			// otherwise the standard json response will not contain the SHA1 info (it'll just be a plain array of child content entries).
 			folder_tree_sha1 = (await (
 				await fetch(config.api.rest + `/${owner}/${repo}/contents/${folder_pathname}?ref=${branch}`, {
 					method: "GET",
-					headers: { "accept": "application/vnd.github.object", ...reqest_header_auth },
+					headers: { "accept": "application/vnd.github.object", ...request_header_auth },
 				})
 			).json())["sha"] as (string | undefined)
 		if (!folder_tree_sha1) {
-			throw Error("failed to fetch folder's tree SHA1.\n\tfetch reuest was made for folder_pathname: " + folder_pathname)
+			throw Error("failed to fetch folder's tree SHA1.\n\tfetch request was made for folder_pathname: " + folder_pathname)
 		}
 		// with the folder's SHA1 info at hand, we can request the info on all deeply nested directory and file entries.
 		// the `recursion_query` specifies whether or not deep entries should be reported back. if it's not there, only direct entries of the folder are reported.
 		const folder_deep_contents: RestTreeResponse["tree"] = (await (
 			await fetch(config.api.rest + `/${owner}/${repo}/git/trees/${folder_tree_sha1}?${recursion_query}`, {
 				method: "GET",
-				headers: { "accept": "application/vnd.github+json", ...reqest_header_auth },
+				headers: { "accept": "application/vnd.github+json", ...request_header_auth },
 			})
 		).json())["tree"]
 		if (!array_isArray(folder_deep_contents)) {
-			throw Error("failed to fetch folder contents in correct format.\n\tfetch reuest was made for folder_pathname: " + folder_pathname + "\n\twith folder tree SHA1: " + folder_tree_sha1)
+			throw Error("failed to fetch folder contents in correct format.\n\tfetch request was made for folder_pathname: " + folder_pathname + "\n\twith folder tree SHA1: " + folder_tree_sha1)
 		}
 		// we now need to sum the bytesizes of all deeply nested entries into the top subfolder's size
 		const folder_content_sizes: { [entry_name: string]: number } = {}
 		folder_deep_contents.forEach((deep_entry) => {
 			const
-				// the top subfolder or file's name always preceeds the first "/" (if there's any)
+				// the top subfolder or file's name always precedes the first "/" (if there's any)
 				top_dir_or_file_name = deep_entry.path.split("/", 1)[0],
 				deep_entry_size = deep_entry.size ?? 0
 			folder_content_sizes[top_dir_or_file_name] ??= 0
@@ -67,11 +67,11 @@ export class RestAPI extends GithubAPI {
 	async getDiskspace(): Promise<number> {
 		const
 			{ owner, repo } = this.repo,
-			reqest_header_auth: { authorization: string } | {} = this.auth ? { "authorization": `bearer ${this.auth}` } : {},
+			request_header_auth: { authorization: string } | {} = this.auth ? { "authorization": `bearer ${this.auth}` } : {},
 			repo_info = await (
 				await fetch(config.api.rest + `/${owner}/${repo}`, {
 					method: "GET",
-					headers: reqest_header_auth
+					headers: request_header_auth
 				}).then((response) => { return response.ok ? response : new Response("{}") })
 			).json()
 		if (!number_isFinite(repo_info.size)) {

src/lib/modify_ui.ts

@@ -91,7 +91,7 @@ class DirectoryEntry {
 		const
 			displayed_name = (this.dom.querySelector("div:first-child") as HTMLElement).innerText,
 			// folders with exactly one subfolder are displayed as "folder/subfolder" (for example ".github/workflows" is quite common).
-			// in that case, we need to get the actual name of the entry, which preceeds the slash ("/").
+			// in that case, we need to get the actual name of the entry, which precedes the slash ("/").
 			// in summary, "folder/subfolder" will get parsed as "folder", and ".github/workflows" will be parsed as ".github", as it should be
 			actual_name = displayed_name.split("/", 1)[0]
 		return actual_name
@@ -129,7 +129,7 @@ export const previewSizes = async (event: MouseEvent) => {
 	try {
 		folder_size_info = await api_caller.getFolderSizeInfo(folder_pathname, { recursion: recursion_depth })
 	} catch (error) {
-		// turn the "size" button red in order to indicate a faliure while fetching
+		// turn the "size" button red in order to indicate a failure while fetching
 		modifyElementStyleTemporarily(event.target as HTMLButtonElement, 500, "background-color: red;")
 		console.log(error)
 	}
@@ -157,7 +157,7 @@ export const previewDiskspace = async (text_element: HTMLElement) => {
 	try {
 		total_bytesize = await api_caller.getDiskspace()
 	} catch (error) {
-		// turn the "download" button red in order to indicate a faliure while fetching
+		// turn the "download" button red in order to indicate a failure while fetching
 		modifyElementStyleTemporarily(text_element, 500, "background-color: red;")
 		console.log(error)
 	}