feat: implement base dictionary - second iteration (#51)

This Pull Request implements the second iteration of the base
dictionary, it refactors the dictionary word directory, implements the
dictionary api `v1` and refactors all related integration in
acknowledgement of the change.

### Changes Made

- Moved all words from the `pages/browse` directory to the
`content/dictionary` directory as required for content collection
- Implemented static output builder in the `pages/browse/[...slug]` path
of the directory via integration of Astro Content Collection (with
`getCollection` and `getStaticPaths`); hence converting the
`pages/browse` to a directory that holds routes auto generated from the
`content/dictionary` directory at build time.
- Replace `Astro.glob` with `getCollection` as function used to compute
value for the `dictionary` object consumed by the `search` island in
`word.astro` layout and homepage.
- Modified computation of `editUrl` value on the `word.astro` layout in
acknowledgement of the new integration
- Modified the `search` island dictionary index store in acknowledgement
of the new integration
- Implemented the basic `v1` of the jargons browser (dictionary) api
with 2 endpoints/routes
- `api/v1/browse` - this endpoint returns a list of all words/jargons in
the dictionary
- `api/v1/browse/[...slug]` - this endpoint take the specified `slug`
and returns a word with matching slug in the dictionary

### Screencast

[screencast-bpconcjcammlapcogcnnelfmaeghhagj-2024.04.20-21_57_44.webm](https://github.com/babblebey/jargons.dev/assets/25631971/9948b9aa-51fd-4119-8188-3ad7c7965e11)

📖

Author: babblebey

src/components/islands/search.jsx

@@ -11,7 +11,7 @@ const searchIndex = new Flexsearch.Document({
   cache: 100,
   document: { 
     index: "title",
-    store: ["title", "url"] 
+    store: ["title", "slug"] 
   },
   tokenize: "full"
 });
@@ -23,14 +23,12 @@ const searchIndex = new Flexsearch.Document({
 export default function Search({ triggerSize, dictionary }) {
   const isSearchOpen = useStore($isSearchOpen);
 
-  let idx = 0;
   for (const word of dictionary) {
     searchIndex.add({
-      id: idx,
-      title: word.frontmatter.title,
-      url: word.url
+      id: word.id,
+      title: word.data.title,
+      slug: word.slug
     });
-    idx++;
   }
 
   return (
@@ -226,7 +224,7 @@ const SearchInfo = () => (
 
 /**
  * Search result
- * @param {{ result: Array<{ id: number, doc: { title: string, url: string }, searchTerm: string }> }} props
+ * @param {{ result: Array<{ id: number, doc: { title: string, slug: string }, searchTerm: string }> }} props
  */
 function SearchResult({ result = [], cursor, searchTerm }) { 
   const router = useRouter();
@@ -241,7 +239,10 @@ function SearchResult({ result = [], cursor, searchTerm }) {
       ) : ( 
         result.map(({ doc }, i) => (
           <a key={i}
-            href={doc.url}  
+            /**
+             * @todo find better ways - don't hardcode `browse` string to the word slug
+             */
+            href={`browse/${doc.slug}`}  
             onClick={(e) => {
               e.preventDefault();
               $addToRecentSearchesFn({

src/pages/browse/concatenate.mdx src/content/dictionary/concatenate.mdxsrc/pages/browse/concatenate.mdx renamed to src/content/dictionary/concatenate.mdx

@@ -1,11 +1,17 @@
 ---
 import BaseLayout from "./base.astro";
+import { getCollection } from "astro:content";
 import Navbar from "../components/navbar.astro";
 import Search from "../components/islands/search.jsx";
 
 const { frontmatter } = Astro.props;
-const dictionary = await Astro.glob("../pages/browse/*.mdx");
-const editUrl = `/editor/edit/${frontmatter.url.split("/")[2]}`;
+const dictionary = await getCollection("dictionary");
+
+/**
+ * @todo implement a better way to resolve the `slug` used in the `editUrl`
+ * `frontmatter.url.split("/")*****` will not scale when we bring in internationalization
+ */
+const editUrl = `/editor/edit/${frontmatter.url.split("/")[3].split(".")[0]}`;
 ---
 
 <BaseLayout pageTitle={ frontmatter.title }>

src/pages/browse/full-duplex.mdx src/content/dictionary/full-duplex.mdxsrc/pages/browse/full-duplex.mdx renamed to src/content/dictionary/full-duplex.mdx

@@ -2,5 +2,4 @@ export default `---
 layout: ../../layouts/word.astro
 title: "$title"
 ---
-
 $content`

src/pages/browse/singleton.mdx src/content/dictionary/singleton.mdxsrc/pages/browse/singleton.mdx renamed to src/content/dictionary/singleton.mdx

@@ -23,7 +23,7 @@ export async function writeNewWord(userOctokit, forkedRepoDetails, { title, cont
       owner: repoOwner,
       repo: repoName,
       branch,
-      path: `src/pages/browse/${normalizeAsUrl(title)}.mdx`,
+      path: `src/content/dictionary/${normalizeAsUrl(title)}.mdx`,
       content: content_encoded,
       message: `word: commit to "${title}"`
     });
@@ -83,7 +83,7 @@ export async function getExistingWord(userOctokit, repoDetails, wordTitle) {
       owner: repoOwner,
       repo: repoName,
       ref: repoBranchRef,
-      path: `src/pages/browse/${normalizeAsUrl(wordTitle)}.mdx`,
+      path: `src/content/dictionary/${normalizeAsUrl(wordTitle)}.mdx`,
     });
 
     const { content, ...responseData } = response.data;

src/pages/browse/tuple.mdx src/content/dictionary/tuple.mdxsrc/pages/browse/tuple.mdx renamed to src/content/dictionary/tuple.mdx

@@ -0,0 +1,31 @@
+import { getEntry } from "astro:content";
+
+/**
+ * Get a jargon (word) from the dictionary
+ * @param {import("astro").APIContext} context
+ */
+export async function GET({ params: { slug } }) {
+  const word = await getEntry("dictionary", slug);
+
+  if (!word) {
+    return new Response(JSON.stringify({ message: "Not Found" }), {
+      status: 404,
+      headers: {
+        "Content-type": "application/json"
+      }
+    });
+  }
+
+  const response = {
+    slug: word.slug,
+    title: word.data.title,
+    content: word.body
+  }
+
+  return new Response(JSON.stringify(response), {
+    status: 200,
+    headers: {
+      "Content-type": "application/json"
+    }
+  });
+}

src/layouts/word.astro

@@ -0,0 +1,25 @@
+import { getCollection } from "astro:content";
+
+/**
+ * Get all jargons (word) from the dictionary
+ * @param {import("astro").APIContext} context
+ * 
+ * @todo implement pagination
+ */
+export async function GET() {
+  const dictionary = await getCollection("dictionary");
+  const response = dictionary.map(word => {
+    return {
+      slug: word.slug,
+      title: word.data.title,
+      content: word.body
+    }
+  });
+
+  return new Response(JSON.stringify(response), {
+    status: 200,
+    headers: {
+      "Content-type": "application/json"
+    }
+  });
+}