chore: go oss (#63) follow-up nits (#64)

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

This Pull request implements some tiny changes carried over from #63 and
addresses some todo that are simple enough.

#### Changes Made

- Implemented the submission visual cue on the word editor - this turns
the submission loading button green after a word submission is
successfully done before the redirection to he jargons editor dashboard
- Added "babblebey" to funding/sponsor this project section
- Extracted `addToRecentSearches` logic from `search` to `word.astro`
layout - this ensures that words are added to recent searches when
viewed and not only when they are searched using the search feature

### Related Issue
<!-- Please prefix the issue number with Fixes/Resolves - example: Fixes
#123 or Resolves #123 -->
- Resolves #10 
- #55 & #63

### Screenshots/Screencasts
<!-- Please provide screenshots or video recording that demos your
changes (especially if it's a visual change) -->

[screencast-bpconcjcammlapcogcnnelfmaeghhagj-2024.04.26-21_45_48.webm](https://github.com/babblebey/jargons.dev/assets/25631971/6ae8e447-9791-4de5-8ff9-46eb10bd2b8a)

### Notes to Reviewer
<!-- Please state here if you added a new npm packages, or any extra
information that can help reviewer better review you changes -->

_NA_

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: [babblebey]

README.md

@@ -75,4 +75,8 @@ We welcome contributions to jargons.dev! There are two main ways you can contrib
 2. **Other Contributions:**
   Theses are contributions other than adding or editing words in the dictionary, feel free to contribute in other ways such as code improvements, bug fixes, or feature enhancements.
 
-To get started with contributing, please refer to our [Contribution Guide](./CONTRIBUTING.md). Thank you for contributing to the jargons.dev project!
+To get started with contributing, please refer to our [Contribution Guide](./CONTRIBUTING.md). Thank you for contributing to the jargons.dev project!
+
+## Support 
+
+Do leave the project a star ⭐️

src/components/islands/search.jsx

@@ -156,14 +156,6 @@ function SearchDialog() {
       e.preventDefault();
       if (document.querySelector("._cursor")) {
         const word = document.querySelector("._cursor");
-        /**
-         * @todo extract this `$addToRecentSearchesFn` operation to `word` layout..
-         * ..so words are added to recent searches when viewed (not only when searched)
-         */
-        $addToRecentSearchesFn({
-          word: word.textContent,
-          url: word.href
-        });
         router.push(word.href);
       }
     }
@@ -249,14 +241,6 @@ function SearchResult({ result = [], cursor, searchTerm }) {
             href={`/browse/${doc.slug}`}  
             onClick={(e) => {
               e.preventDefault();
-              /**
-               * @todo extract this `$addToRecentSearchesFn` operation to `word` layout..
-               * ..so words are added to recent searches when viewed (not only when searched)
-               */
-              $addToRecentSearchesFn({
-                word: e.currentTarget.textContent,
-                url: e.currentTarget.href
-              });
               router.push(e.currentTarget.href);
             }}
             className={`${cursor === i && "bg-gray-100 _cursor"} flex items-center justify-between no-underline w-full p-2 md:p-4 hover:bg-gray-100`}

src/components/islands/word-editor.jsx

@@ -4,7 +4,7 @@ import { useStore } from "@nanostores/react";
 import useRouter from "../../lib/hooks/use-router.js";
 import { capitalizeText } from "../../lib/utils/index.js";
 import useWordEditor from "../../lib/hooks/use-word-editor.js";
-import { $isWordSubmitLoading } from "../../lib/stores/dictionary.js";
+import { $isWordSubmitLoading, $isWordSubmitted } from "../../lib/stores/dictionary.js";
 
 /**
  * Main Word Editor Component - Island
@@ -28,16 +28,21 @@ export default function WordEditor({ title = "", content = "", metadata = {}, ac
  * Detached Editor Submit Button Component - Island
  */
 export function SubmitButton({ children = "Submit" }) {
+  const isSubmitted = useStore($isWordSubmitted);
   const isSubmitLoading = useStore($isWordSubmitLoading);
 
   return (
-    <button className="flex items-center justify-center no-underline text-white bg-gray-900 hover:bg-gray-700 focus:ring-0 font-medium rounded-lg text-base px-5 py-2.5 text-center ml-1 sm:ml-3"
+    <button className={`flex items-center justify-center no-underline text-white ${isSubmitted ? "bg-green-700" : "bg-gray-900 hover:bg-gray-700"} focus:ring-0 font-medium rounded-lg text-base px-5 py-2.5 text-center ml-1 sm:ml-3`}
       type="submit"
       form="jargons.dev:word_editor"
-      disabled={isSubmitLoading}
+      disabled={isSubmitLoading || isSubmitted}
     >
       { isSubmitLoading ? (
         <div className="flex-none h-4 w-4 md:w-6 md:h-6 rounded-full border-2 border-gray-400 border-b-gray-200 border-r-gray-200 animate-spin" />
+      ) : !isSubmitLoading && isSubmitted ? (
+        <svg className="h-4 w-4 md:w-6 md:h-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 11.917 9.724 16.5 19 7.5"/>
+        </svg>
       ) : (
         children
       ) }
@@ -50,7 +55,11 @@ export function SubmitButton({ children = "Submit" }) {
  */
 function Editor({ eTitle, eContent, eMetadata, className, action, ...props }) {
   const router = useRouter();
+  const isSubmitted = useStore($isWordSubmitted);
+  const isSubmitLoading = useStore($isWordSubmitLoading);
   const { title, setTitle, content, setContent } = useWordEditor();
+
+  const isDone = isSubmitLoading || isSubmitted;
 
   useEffect(() => {
     setTitle(eTitle);
@@ -61,7 +70,6 @@ function Editor({ eTitle, eContent, eMetadata, className, action, ...props }) {
    * Word Submit Handler
    * @param {import("react").FormEvent} e 
    * 
-   * @todo implement a submitted State that updates after submission for visual cue before routing
    * @todo handle error for when submission isn't successful
    */
   async function handleSubmit(e) {
@@ -71,6 +79,8 @@ function Editor({ eTitle, eContent, eMetadata, className, action, ...props }) {
       method: "POST",
       body: formData,
     });
+    $isWordSubmitted.set(true);
+    $isWordSubmitLoading.set(false);
     response.status === 200 && router.push("/editor");
   }
 
@@ -91,17 +101,18 @@ function Editor({ eTitle, eContent, eMetadata, className, action, ...props }) {
         name="title"
         value={title}
         placeholder="New Word"
-        readOnly={action === "edit"}
         onChange={(e) => setTitle(e.target.value)}
-        className={`${action === "edit" && "cursor-not-allowed"} block w-full pb-2 mb-3 text-gray-900 border-b text-lg font-bold focus:outline-none`}
+        readOnly={action === "edit" || isDone}
+        className={`${(action === "edit" || isDone) && "cursor-not-allowed"} block w-full pb-2 mb-3 text-gray-900 border-b text-lg font-bold focus:outline-none`}
       />
       <textarea 
         required
         id="content"
         name="content"
         value={content}
         onChange={(e) => setContent(e.target.value)}
-        className="w-full h-1 grow resize-none appearance-none border-none focus:outline-none scrollbar"
+        readOnly={isDone}
+        className={`${isDone && "cursor-not-allowed select-none"} w-full h-1 grow resize-none appearance-none border-none focus:outline-none scrollbar`}
       />
       <input 
         type="hidden" 
@@ -182,7 +193,7 @@ const DummyPreviewNavbar = () => (
             <><span className="text-sm mr-0.5">⌘</span>K</>
           </kbd>
         </div>
-        <button className="flex @md:hidden font-bold">
+        <button className="cursor-not-allowed flex @md:hidden font-bold">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5">
             <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
           </svg>

src/layouts/word.astro

@@ -61,19 +61,11 @@ const editUrl = `/editor/edit/${frontmatter.url.split("/")[3].split(".")[0]}`;
     ..nice if we can find another means ;)
     -->
     <script>
-      /**
-       * This (Commented out for now) should rightfully add current word to recentSearches on view; which should..
-       * ..extract the functionality from the `search` island `onClick` search result..
-       * ..but see @todo below
-       * 
-       * @todo it's exhibiting similar behaviour reported in issue @link below
-       * @link https://github.com/babblebey/jargons.dev/issues/10
-       */
-      // import { $addToRecentSearchesFn } from "../lib/stores/search.js";
-      // $addToRecentSearchesFn({
-      //   word: document.querySelector("h1").textContent.trim(),
-      //   url: document.location.href
-      // });
+      import { $addToRecentSearchesFn } from "../lib/stores/search.js";
+      $addToRecentSearchesFn({
+        word: document.querySelector("h1").textContent.trim(),
+        url: document.location.href
+      });
     </script>
   </main>
 </BaseLayout>

src/lib/stores/dictionary.js

@@ -17,4 +17,6 @@ export const $wordEditor = map({
   content: ""
 });
 
-export const $isWordSubmitLoading = atom(false);
+export const $isWordSubmitLoading = atom(false);
+
+export const $isWordSubmitted = atom(false);

src/lib/stores/search.js

@@ -18,6 +18,9 @@ export const $recentSearches = map({});
  * @todo implement logic to allow holding maximum of 5 words by removing older words when new a one gets added
  */
 export function $addToRecentSearchesFn({ word, url }) {
+  // Re-initialise the state with current localStorage value
+  $recentSearches.set({...JSON.parse(localStorage.getItem("jargons.dev:recent_searches"))});
+
   const lowercaseKey = word.toLowerCase();
   const key = lowercaseKey.includes(" ") ? lowercaseKey.split(" ").join("-") : lowercaseKey;
   const isInRecentSearch = $recentSearches.get()[key];