feat: added vocab search (#24)

Author: parnavh

.changeset/happy-turkeys-knock.md

@@ -0,0 +1,5 @@
+---
+"gregmat-buddy": minor
+---
+
+added vocab search page

README.md

@@ -1,17 +1,18 @@
 # GregMat Buddy
 
-🏗️ IN ACTIVE DEVELOPMENT
-
 Adds useful quality of life features to the GregMat and PrepSwift website.
 
 ## Features
 
 - Adds progress stats for PrepSwift
+- Allows you to search through vocab mountain
+- Auto marks PrepSwift lectures as complete when the video ends
 - Remembers your playback speed on GregMat and PrepSwift
 - Remembers if you dismissed a banner at the top of the website.
 - Adds custom keybinds for vocab mountain
   - Moves to next word automatically after you mark it
   - Adds vim keybinds for cursor movement
+- Tweak your enabled features in the extension options page
 
 ## Install
 

package.json

@@ -24,6 +24,7 @@
     "autoprefixer": "^10.4.20",
     "bits-ui": "^0.21.16",
     "clsx": "^2.1.1",
+    "fast-glob": "^3.3.2",
     "svelte": "^4.2.19",
     "svelte-check": "^3.8.6",
     "tailwind-merge": "^2.5.4",
@@ -34,8 +35,9 @@
     "wxt": "^0.19.13"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.8.2",
     "@vimeo/player": "^2.24.0",
-    "fast-glob": "^3.3.2",
-    "lucide-svelte": "^0.453.0"
+    "fuse.js": "^7.0.0",
+    "lucide-svelte": "^0.454.0"
   }
 }

pnpm-lock.yaml

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { Checkbox as CheckboxPrimitive } from "bits-ui";
+  import Check from "lucide-svelte/icons/check";
+  import Minus from "lucide-svelte/icons/minus";
+  import { cn } from "@/utils";
+
+  type $$Props = CheckboxPrimitive.Props;
+  type $$Events = CheckboxPrimitive.Events;
+
+  let className: $$Props["class"] = undefined;
+  export let checked: $$Props["checked"] = false;
+  export { className as class };
+</script>
+
+<CheckboxPrimitive.Root
+  class={cn(
+    "border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+    className,
+  )}
+  bind:checked
+  {...$$restProps}
+  on:click
+>
+  <CheckboxPrimitive.Indicator
+    class={cn("flex h-4 w-4 items-center justify-center text-current")}
+    let:isChecked
+    let:isIndeterminate
+  >
+    {#if isChecked}
+      <Check class="h-3.5 w-3.5" />
+    {:else if isIndeterminate}
+      <Minus class="h-3.5 w-3.5" />
+    {/if}
+  </CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>

src/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};

src/components/ui/checkbox/index.ts

@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+};

src/components/ui/popover/index.ts

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Popover as PopoverPrimitive } from "bits-ui";
+  import { cn, flyAndScale } from "@/utils";
+
+  type $$Props = PopoverPrimitive.ContentProps;
+  let className: $$Props["class"] = undefined;
+  export let transition: $$Props["transition"] = flyAndScale;
+  export let transitionConfig: $$Props["transitionConfig"] = undefined;
+  export { className as class };
+</script>
+
+<PopoverPrimitive.Content
+  {transition}
+  {transitionConfig}
+  class={cn(
+    "bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+    className,
+  )}
+  {...$$restProps}
+>
+  <slot />
+</PopoverPrimitive.Content>

src/components/ui/popover/popover-content.svelte

@@ -0,0 +1,15 @@
+import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+
+import Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
+const Input = RadioGroupPrimitive.Input;
+
+export {
+	Root,
+	Input,
+	Item,
+	//
+	Root as RadioGroup,
+	Input as RadioGroupInput,
+	Item as RadioGroupItem,
+};

src/components/ui/radio-group/index.ts

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+  import Circle from "lucide-svelte/icons/circle";
+  import { cn } from "@/utils";
+
+  type $$Props = RadioGroupPrimitive.ItemProps;
+  type $$Events = RadioGroupPrimitive.ItemEvents;
+
+  let className: $$Props["class"] = undefined;
+  export let value: $$Props["value"];
+  export { className as class };
+</script>
+
+<RadioGroupPrimitive.Item
+  {value}
+  class={cn(
+    "border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+    className,
+  )}
+  {...$$restProps}
+  on:click
+>
+  <div class="flex items-center justify-center">
+    <RadioGroupPrimitive.ItemIndicator>
+      <Circle class="h-2.5 w-2.5 fill-current text-current" />
+    </RadioGroupPrimitive.ItemIndicator>
+  </div>
+</RadioGroupPrimitive.Item>

src/components/ui/radio-group/radio-group-item.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+  import { cn } from "@/utils";
+
+  type $$Props = RadioGroupPrimitive.Props;
+
+  let className: $$Props["class"] = undefined;
+  export let value: $$Props["value"] = undefined;
+  export { className as class };
+</script>
+
+<RadioGroupPrimitive.Root
+  bind:value
+  class={cn("grid gap-2", className)}
+  {...$$restProps}
+>
+  <slot />
+</RadioGroupPrimitive.Root>

src/components/ui/radio-group/radio-group.svelte

@@ -1,3 +1,10 @@
 export default defineBackground(() => {
-  console.log('Hello background!', { id: browser.runtime.id });
+  console.log("Hello background!", { id: browser.runtime.id });
+
+  browser.runtime.onMessage.addListener((req, sender) => {
+    if (sender.id != browser.runtime.id) return;
+    if (req.type === "redirect") {
+      browser.tabs.create({ url: req.url });
+    }
+  });
 });

src/entrypoints/background.ts

@@ -1,10 +1,53 @@
 import { registerUrl } from "@/utils";
 import { main as vocabMountain } from "./vocab-mountain";
+import { greVocabMountain, toeflVocabMountain } from "@/utils/storage";
 
 export default defineContentScript({
   matches: ["*://*.gregmat.com/*"],
   runAt: "document_idle",
   main() {
     registerUrl("vocab-mountain", vocabMountain);
+    storeVocab();
   },
 });
+
+async function storeVocab() {
+  const greReq = fetch("https://www.gregmat.com/mountains/vocab-mountain");
+  const toeflReq = fetch(
+    "https://www.gregmat.com/mountains/toefl-vocab-mountain"
+  );
+
+  const req = await Promise.all([greReq, toeflReq]);
+
+  const body = await Promise.all([req[0].text(), req[1].text()]);
+
+  const parser = new DOMParser();
+
+  const lookup = [greVocabMountain, toeflVocabMountain] as const;
+
+  body.forEach((b, idx) => {
+    const doc = parser.parseFromString(b, "text/html");
+
+    const data = doc.getElementById("__NUXT_DATA__");
+    if (!data) return;
+
+    const json = JSON.parse(data.innerHTML);
+
+    const processed = json[7].map((idx: number) =>
+      json[json[idx].mountain_contents]
+        .map((entry: number) => json[entry])
+        .map((word: any) => {
+          const temp = document.createElement("div");
+          temp.innerHTML = json[word.description];
+          return {
+            title: json[word.title],
+            description: json[word.description],
+            pronunciation: json[word.pronunciation],
+            text: temp.textContent?.replaceAll(/[\n\t]+/g, " ").trim() ?? "",
+          };
+        })
+    );
+
+    lookup[idx].setValue(processed);
+  });
+}