refactor: modify codebase to astro@v5 (#151)

### Description
<!-- Please add PR description (don't leave blank) - example: This PR
[adds/removes/fixes/replaces] the [feature/bug/etc] -->

This Pull Request refactors the codebase to meet the new requirement of
`astro@v5` following the upgrade in
#147; It introduces
several changes to improve the handling of word slugs across the
codebase, streamline content collection definitions, and enhance utility
functions. The most significant updates include replacing hardcoded
slugs with dynamically generated slugs, refactoring content collection
logic, and introducing new utility functions for building word slugs.

#### Word Slug Improvements:
*
[`src/components/islands/search.jsx`](diffhunk://#diff-9b7b1c6e6107530c0f69ea6f9a66511c9dab654d0eff83736b92475dba39858aL30-R31):
Updated the `slug` property to use the new `buildWordSlug` utility
function instead of hardcoding values. This change improves flexibility
and consistency in slug generation.
* `src/pages/browse/[alpha]/[page].astro`: Replaced hardcoded slugs with
dynamically generated slugs using the `buildWordSlug` utility function
in the word list rendering logic.
([src/pages/browse/[alpha]/[page].astroL46-R47](diffhunk://#diff-c87fe48708b5daee9f4aa138cb2970623ed74a334fa0912fef67f3a71905ee39L46-R47))
* `src/pages/browse/[...slug].astro`: Refactored the `getStaticPaths`
function to use `word.id` instead of `word.slug`, ensuring alignment
with the new slug generation approach.
([src/pages/browse/[...slug].astroL2-R19](diffhunk://#diff-5b7720b6f66d6cb09271ebf726a219ddf89ea09f9e3e4cb1e27c4088e8dd6796L2-R19))

#### Content Collection Refactoring:
*
[`src/content.config.ts`](diffhunk://#diff-0d78708eb6a4cf32e1758b9f04d0f05b751a26662664493a7c066252a0012f35R1-R8):
Introduced a new `dictionary` collection definition using
`astro:content` to simplify and centralize content loading.

#### Utility Enhancements:
*
[`src/lib/utils/index.js`](diffhunk://#diff-15cd75e36ffbf7470b9767c164c4cbc65fb58d685753f23441ee7b050998193eR81-R89):
Added the `buildWordSlug` utility function to dynamically generate slugs
based on word IDs, improving maintainability and reducing duplication.

#### Dependency and Import Updates:
*
[`astro.config.mjs`](diffhunk://#diff-e0f0c5adbe0b9ca5d0b57caf5cea33a8d88899fd02a43df1e9862b185f8a1e5fR4-L6):
Updated the `vercel` integration to use the default export from
`@astrojs/vercel` instead of the `serverless` variant.
*
[`src/lib/actions/do-edit-word.js`](diffhunk://#diff-b56e8ad6eb2e7f82bcca6ecffe96fce797e5bd64259ffbf637712d46994260a4R2):
Added the `decrypt` utility to the imports, potentially for future use
in word editing functionality.

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: babblebey

astro.config.mjs

@@ -1,9 +1,9 @@
 import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
 import react from "@astrojs/react";
+import vercel from "@astrojs/vercel";
 import tailwind from "@astrojs/tailwind";
 import partytown from "@astrojs/partytown";
-import vercel from "@astrojs/vercel/serverless";
 
 // https://astro.build/config
 export default defineConfig({

src/components/islands/search.jsx

@@ -2,9 +2,10 @@ import Flexsearch from "flexsearch";
 import { useEffect, useState } from "react";
 import { useStore } from "@nanostores/react";
 import useRouter from "../../lib/hooks/use-router.js";
+import { buildWordPathname, buildWordSlug } from "../../lib/utils/index.js";
 import useIsMacOS from "../../lib/hooks/use-is-mac-os.js";
 import useLockBody from "../../lib/hooks/use-lock-body.js";
-import { $isSearchOpen, $addToRecentSearchesFn } from "../../lib/stores/search.js";
+import { $isSearchOpen } from "../../lib/stores/search.js";
 
 // Create Search Index
 const searchIndex = new Flexsearch.Document({
@@ -25,9 +26,13 @@ export default function Search({ triggerSize, dictionary }) {
 
   for (const word of dictionary) {
     searchIndex.add({
+      /**
+       * `word.id` could be a `slug` or a `slug` with the `mdx` extension i.e. `word-id.mdx`
+       * @see https://github.com/withastro/astro/issues/14073
+       */
       id: word.id,
       title: word.data.title,
-      slug: word.slug
+      slug: buildWordPathname(buildWordSlug(word.id))
     });
   }
 
@@ -231,10 +236,7 @@ function SearchResult({ result = [], cursor, searchTerm }) {
       ) : ( 
         result.map(({ doc }, i) => (
           <a key={i}
-            /**
-             * @todo find better ways - don't hardcode `browse` string to the word slug
-             */
-            href={`/browse/${doc.slug}`}  
+            href={doc.slug}  
             onClick={(e) => {
               e.preventDefault();
               router.push(e.currentTarget.href);

src/content.config.ts

@@ -0,0 +1,8 @@
+import { glob } from "astro/loaders";
+import { defineCollection, z } from "astro:content";
+
+const dictionary = defineCollection({
+    loader: glob({ pattern: "**/*.mdx", base: "./src/content/dictionary" }),
+});
+
+export const collections = { dictionary };

src/lib/actions/do-edit-word.js

@@ -1,4 +1,5 @@
 import app from "../octokit/app.js";
+import { decrypt } from "../utils/crypto.js";
 import { getExistingWord } from "../word-editor.js";
 import { PROJECT_REPO_DETAILS } from "../../../constants.js";
 

src/lib/utils/index.js

@@ -77,4 +77,22 @@ export function generateBranchName(action, wordTitle) {
  */
 export function buildStatsUrl(repoFullname, queryString) {
   return `https://github.com/${repoFullname}/pulls?q=${encodeURIComponent(queryString)}`;
+}
+
+/** 
+ * Build Word Pathname From Slug
+ * @param {string} slug
+ * @returns {string}
+ */
+export function buildWordPathname(slug) {
+  return `/browse/${slug}`;
+}
+
+/**
+ * Build Word Slug From ID
+ * @param {string} id
+ * @returns {string}
+ */
+export function buildWordSlug(id) {
+  return id.split(".")[0];
 }

src/pages/browse/[...slug].astro

@@ -1,18 +1,19 @@
 ---
-import { getCollection } from "astro:content";
-
-const { entry } = Astro.props;
-
-//@ts-expect-error - `entry` is percieved as "never" type
-const { Content } = await entry.render();
+import { buildWordSlug } from "../../lib/utils";
+import { getCollection, render } from "astro:content";
 
 export const prerender = true;
 
 export async function getStaticPaths() {
   const dictionary = await getCollection("dictionary");
-  return dictionary.map(entry => ({
-    params: { slug: entry.slug }, props: { entry },
-  }));
+  return dictionary.map(word => ({
+      params: { slug: buildWordSlug(word.id) },
+      props: { word }
+    })
+  );
 }
+
+const { word } = Astro.props;
+const { Content } = await render(word);
 ---
 <Content />

src/pages/browse/[alpha]/[page].astro

@@ -4,6 +4,7 @@ import { ALPHABETS } from "../../../../constants.js";
 import BaseLayout from "../../../layouts/base.astro";
 import Navbar from "../../../components/navbar.astro";
 import Search from "../../../components/islands/search";
+import { buildWordPathname } from "../../../lib/utils/index.js";
 import ContributionCTA from "../../../components/contribution-cta.astro";
 
 const { page } = Astro.props;
@@ -16,6 +17,7 @@ export const prerender = true;
 export async function getStaticPaths({ paginate }) {
   const dictionary = await getCollection("dictionary");
   return ALPHABETS.flatMap(alpha => {
+    // @ts-expect-error - `slug` property is not defined in `CollectionEntry` type - see https://github.com/withastro/astro/issues/14070
     const filteredWords = dictionary.filter(word => word.slug[0] === alpha);
     return paginate(filteredWords, {
       params: { alpha },
@@ -43,7 +45,7 @@ export async function getStaticPaths({ paginate }) {
     <!-- Words List -->
     <div>
       {page.data.length ? page.data.map(word => (
-        <a href={`/browse/${word.slug}`}
+        <a href={buildWordPathname(word.slug)}
           class="flex items-center md:text-lg justify-between no-underline w-full p-4 even:bg-gray-100 hover:bg-gray-100/50"
         >
           <span>{ word.data.title }</span>