chore: implement feedback/nits from beta testing (#66)

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

This PR commits some fixes to bugs and improvement suggestions received
as feedback from the whirl version of jargons.dev.

#### Changes Made

- Added missing `default_branch_only` property to `fork` script, to
allow forking of only the project's default branch.
- Replaced implementation of `javascript:history.back()` on `editor/new`
page return navigation wih=th navigation back to `/editor` page
- Updated repo git link in README.md clone repo step to `git clone
https://github.com/jargons-dev/jargons.dev.git` following org transfer
- Updated hey.new link to hi.new in CODE_OF_CONDUCT.md support contact
and in `ISSUE_TEMPLATE/config.yml` `contact_link` url
- Added `browse words` link to homepage under the search trigger
- Wrote login page message (Fixes
#12)
- Made jargons editor mobile responsiveness (Related to
#9)
- Implemented temporary workaround for handling deletion of existing
reference/branch (Related to #52)
- Added `jargons.dev` logo/sticker to README.md
- Addressed some todos
  - todo: deprecated the `options` params in the `word-editor` script

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

- Fixes #12
- Related to #9
- Related to #52

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

![image](https://github.com/devjargons/jargons.dev/assets/25631971/9e50d713-87a7-41e9-99dc-b295f0cf8dfb)

### 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/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,5 @@
 blank_issues_enabled: true
 contact_links:
   - name: Project Security Vulnerabilities
-    url: https://hey.new/ola
-    about: Please report security vulnerabilities privately here.
+    url: https://hi.new/ola
+    about: Please report security vulnerabilities privately here.

CODE_OF_CONDUCT.md

@@ -57,7 +57,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [hey.new/ola](https://hey.new/ola). All
+reported by contacting the project team at [hi.new/ola](https://hi.new/ola). All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.
@@ -75,4 +75,4 @@ available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.ht
 [homepage]: https://www.contributor-covenant.org
 
 For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq
+https://www.contributor-covenant.org/faq

README.md

@@ -1,8 +1,7 @@
 <div align="center" style="margin-top: 12px">
   <a href="https://www.jargons.dev">
-   <img width="500" alt="jargons.dev" src="https://github.com/babblebey/jargons.dev/assets/25631971/f2adedb8-4324-439a-8663-d3e30fd68416">
+    <img width="700" alt="jargons.dev" src="https://github.com/devjargons/jargons.dev/assets/25631971/5d1db25d-18e0-4544-ac98-9aa4e1097e14">
   </a>
-
   <h1><tt>jargons.dev</tt></h1>
   <h3>The Software Engineering Dictionary</h3>
 </div>
@@ -34,7 +33,7 @@ To get set-up follow these steps:
 1. Clone the repository:
 
    ```sh
-   git clone https://github.com/babblebey/jargons.dev.git
+   git clone https://github.com/devjargons/jargons.dev.git
    ```
 
 2. Navigate to the project directory:
@@ -73,10 +72,10 @@ We welcome contributions to jargons.dev! There are two main ways you can contrib
   This includes adding new words to the dictionary or editing existing word entries. We highly recommend using our Jargons Editor at [jargons.dev/editor](https://jargons.dev/editor) for this purpose. This user-friendly interface streamlines your contribution allowing it end up as a pull request.
 
 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.
+  These are contributions other than adding or editing words in the dictionary, feel free to contribute in other ways such as issue reporting/triaging, code/documentation 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!
 
 ## Support 
 
-Do leave the project a star ⭐️
+Do leave the project a star ⭐️

dev/setup.js

@@ -6,7 +6,7 @@ import registerGitHubApp from "./lib/register-github-app/index.js";
 const appCredentials = await registerGitHubApp({
   // name of your app
   name: "jargons.dev-app-for-",
-  url: "https://github.com/babblebey/jargons.dev/CONTRIBUTING.md",
+  url: "https://github.com/devjargons/jargons.dev/CONTRIBUTING.md",
   default_permissions: {
     issues: "write",
   }
@@ -26,4 +26,4 @@ const envFileTemp = await fs.readFile(".env.example", "utf-8");
 const newEnvFileContent = envFileTemp
   .replace(/^GITHUB_APP_ID=.*$/m, `GITHUB_APP_ID=${appCredentials.id}`)
   .replace(/^GITHUB_APP_PRIVATE_KEY=.*$/m, `GITHUB_APP_PRIVATE_KEY="${singleLinePrivateKey}"`)
-await fs.writeFile(".env", newEnvFileContent);
+await fs.writeFile(".env", newEnvFileContent);

src/components/islands/recent-searches.jsx

@@ -5,7 +5,7 @@ import { $recentSearches } from "../../lib/stores/search.js";
 /**
  * Recent Searches Component - An Island that displays a user's last 5 searches
  * 
- * @todo implement a default list instead of `null` (now browse-word link) when no `$recentSearch` is found 
+ * @todo implement a default list instead of `null` when no `$recentSearch` is found 
  * @todo implement loading component to avoid flickering UI
  */
 export default function RecentSearches() {
@@ -16,7 +16,7 @@ export default function RecentSearches() {
   }, []);
 
   return Object.values(recentSearches).length ? (
-    <div className="space-y-3 mt-4 md:mt-6">
+    <div className="space-y-3 ml-2 mt-4 md:mt-6">
 			<h2 className="text-2xl md:text-4xl font-black">Recent</h2>
 			<ol className="space-y-1.5 underline">
         {Object.values(recentSearches).slice(0, 5).map((item, i) => (
@@ -28,11 +28,5 @@ export default function RecentSearches() {
         ))}
 			</ol>
 		</div>
-  ) : (
-    <div className="ml-2 mt-4 md:mt-6">
-      <a href="/browse">
-        Browse Words
-      </a>
-    </div>
-  );
+  ) : null;
 }

src/components/islands/search.jsx

@@ -59,10 +59,6 @@ function SearchTrigger({ size = "md" }) {
     return () => document.removeEventListener("keydown", handleOpenSearch);
   }, []);
 
-  /**
-   * @todo fix localstorage `recentSearches` getting overwitten on `SearchResult` click or select
-   * specific to this `sm` search trigger
-   */
   if (size === "sm") return (
     <div onClick={() => $isSearchOpen.set(!isSearchOpen)}>
       <div className="relative w-56 text-sm hidden md:flex items-center justify-between border pl-2.5 p-1 space-x-2 border-gray-400 rounded-lg cursor-text">

src/components/islands/word-editor.jsx

@@ -4,22 +4,25 @@ 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, $isWordSubmitted } from "../../lib/stores/dictionary.js";
+import { $isWordSubmitLoading, $isWordSubmitted, $togglePreview } from "../../lib/stores/dictionary.js";
 
 /**
  * Main Word Editor Component - Island
  */
 export default function WordEditor({ title = "", content = "", metadata = {}, action }) {
+  const togglePreview = useStore($togglePreview);
+
   return (
     <div className="w-full flex border rounded-lg">
       <Editor
         action={action}
         eTitle={title} 
         eContent={content} 
         eMetadata={metadata}
-        className="w-full h-full flex flex-col p-5 border-r"
+        className={` ${ !togglePreview ? "flex" : "hidden" } w-full h-full lg:!flex flex-col p-5 border-r`}
       />
-      <Preview className="w-full h-full flex flex-col p-5" />
+      <Preview className="w-full h-full hidden lg:flex flex-col p-5" />
+      <Preview className={`${ togglePreview ? "flex" : "hidden" } w-full h-full lg:!hidden flex-col p-5`} />
     </div>
   );
 }
@@ -32,7 +35,7 @@ export function SubmitButton({ children = "Submit" }) {
   const isSubmitLoading = useStore($isWordSubmitLoading);
 
   return (
-    <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`}
+    <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`}
       type="submit"
       form="jargons.dev:word_editor"
       disabled={isSubmitLoading || isSubmitted}
@@ -50,6 +53,18 @@ export function SubmitButton({ children = "Submit" }) {
   );
 }
 
+export function TogglePreview() {
+  const togglePreview = useStore($togglePreview);
+
+  return (
+    <label class="inline-flex lg:hidden items-center cursor-pointer border-r pr-2.5 mr-2.5">
+      <span class="me-3 text-sm font-medium text-gray-900 dark:text-gray-300">Preview</span>
+      <input type="checkbox" class="sr-only peer" onChange={() => $togglePreview.set(!togglePreview)} />
+      <div class="relative w-8 h-5 bg-gray-400 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-[75%] rtl:peer-checked:after:-translate-x-[75%] peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-black"></div>
+    </label>
+  );
+};
+
 /**
  * Editor Markdown Input Component
  */
@@ -79,9 +94,32 @@ function Editor({ eTitle, eContent, eMetadata, className, action, ...props }) {
       method: "POST",
       body: formData,
     });
-    $isWordSubmitted.set(true);
-    $isWordSubmitLoading.set(false);
-    response.status === 200 && router.push("/editor");
+    if (response && response.status === 200) {
+      $isWordSubmitted.set(true);
+      $isWordSubmitLoading.set(false);
+      router.push("/editor");
+    } else {
+      /**
+       * Temporary workaround for handling deletion of existing reference/branch
+       */
+      const data = await response.json();
+      $isWordSubmitLoading.set(false);
+      if (data.message === "Reference already exists") {
+        if (confirm("It appears you have an existing reference for the current word, do you wish to clear that reference?")) {
+          $isWordSubmitLoading.set(true);
+          const response = await fetch("/api/dictionary", {
+            method: "DELETE",
+            body: formData,
+          });
+          if (response.status === 200) {
+            $isWordSubmitLoading.set(false);
+            alert("Reference cleared successfully! Kindly publish your contribution again!");
+          }
+        } else {
+          router.push("/editor");
+        }
+      }
+    }
   }
 
   return (

src/components/navbar.astro

@@ -2,12 +2,12 @@
 const { returnNav = { label: "Back", location: "../" } } = Astro.props;
 ---
 
-<nav class="flex items-center justify-between px-5 md:px-6 py-4">
-  <a href={ returnNav.location } class="flex items-center">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+<nav class="@container flex items-center justify-between px-5 md:px-6 py-4">
+  <a href={ returnNav.location } class="flex items-center w-8 h-8 @md:w-auto @md:h-auto bg-black @md:bg-transparent text-white @md:text-black rounded-full @md:rounded-none">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mx-auto @md:mx-0">
       <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
     </svg> 
-    <span>
+    <span class="hidden @md:flex">
       { returnNav.label }
     </span>       
   </a>

src/lib/actions/do-contribution-stats.js

@@ -22,7 +22,7 @@ export default async function doContributionStats(astroGlobal) {
 
   /**
    * @todo [thoughts]: would be nice to have all these requests in one, and use a filter to separate by labels
-   * [potential bottleneck]: no wat to know whether a PR is "merged" considering that "closed" doesn't mean merged
+   * [potential bottleneck]: no way to know whether a PR is "merged" considering that "closed" doesn't mean merged
    */
   const { data: newType } = await userOctokit.request("GET /search/issues", {
     q: `${baseQuery} label:":book: new word" is:merged is:closed`

src/lib/branch.js

@@ -24,9 +24,7 @@ export async function createBranch(userOctokit, repoDetails, newBranchName) {
 
     return response.data
   } catch (error) {
-    throw new Error("error creating a new branch", { 
-      cause: error.message 
-    })
+    throw error;
   }
 }
 
@@ -50,4 +48,27 @@ export async function getBranch(userOctokit, repoFullname, ref) {
   });
 
   return response.data;
+}
+
+/**
+ * Delete a branch from a given repository
+ * @param {import("octokit").Octokit} userOctokit 
+ * @param {string} repoFullname
+ * @param {string} branchName
+ * @returns 
+ */
+export async function deleteBranch(userOctokit, repoFullname, branchName) {
+  const { repoName, repoOwner } = getRepoParts(repoFullname);
+
+  try {
+    const response = await userOctokit.request("DELETE /repos/{owner}/{repo}/git/refs/{ref}", {
+      owner: repoOwner,
+      repo: repoName,
+      ref: `heads/${branchName}`,
+    });
+
+    return response.status
+  } catch (error) {
+    throw error;
+  }
 }

src/lib/fork.js

@@ -36,6 +36,7 @@ export async function forkRepository(userOctokit, projectRepoDetails) {
     const response = await userOctokit.request("POST /repos/{owner}/{repo}/forks", {
       owner: repoOwner,
       repo: repoName,
+      default_branch_only: true,
     });
 
     return response.data.full_name;

src/lib/stores/dictionary.js

@@ -19,4 +19,6 @@ export const $wordEditor = map({
 
 export const $isWordSubmitLoading = atom(false);
 
-export const $isWordSubmitted = atom(false);
+export const $isWordSubmitted = atom(false);
+
+export const $togglePreview = atom(false);

src/lib/word-editor.js

@@ -5,28 +5,21 @@ import { getRepoParts, normalizeAsUrl } from "./utils/index.js";
  * Write and add a new word to user's forked dictionary
  * @param {import("octokit").Octokit} userOctokit 
  * @param {{ repoFullname: string, repoChangeBranchRef: string }} forkedRepoDetails 
- * @param {{ title: string, content: string }} word 
- * @param {{ env: "node" | "browser" }} options  
- * 
- * @todo deprecate the `options` params 
+ * @param {{ title: string, content: string }} word  
  */
-export async function writeNewWord(userOctokit, forkedRepoDetails, { title, content }, options) {
+export async function writeNewWord(userOctokit, forkedRepoDetails, { title, content }) {
   const { repoFullname, repoChangeBranchRef } = forkedRepoDetails;
   const { repoOwner, repoName } = getRepoParts(repoFullname);
   const branch = repoChangeBranchRef.split("/").slice(2).join("/");
   const wordFileContent = writeWordFileContent(title, content);
 
-  const content_encoded = options.env === "browser" 
-    ? btoa(wordFileContent) 
-    : Buffer.from(wordFileContent).toString("base64");
-
   try {
     const response = await userOctokit.request("PUT /repos/{owner}/{repo}/contents/{path}", {
       owner: repoOwner,
       repo: repoName,
       branch,
       path: `src/content/dictionary/${normalizeAsUrl(title)}.mdx`,
-      content: content_encoded,
+      content: Buffer.from(wordFileContent).toString("base64"),
       message: `word: commit to "${title}"`
     });
 
@@ -40,28 +33,21 @@ export async function writeNewWord(userOctokit, forkedRepoDetails, { title, cont
  * Update an existing word in user's forked dictionary
  * @param {import("octokit").Octokit} userOctokit 
  * @param {{ repoFullname: string, repoChangeBranchRef: string }} forkedRepoDetails 
- * @param {{ path: string, sha: string, title: string, content: string }} word  enter new content as value to `content` property
- * @param {{ env: "node" | "browser" }} options 
- * 
- * @todo deprecate the `options` params 
+ * @param {{ path: string, sha: string, title: string, content: string }} word  enter new content as value to `content` property 
  */
 export async function updateExistingWord(userOctokit, forkedRepoDetails, { path, sha, title, content }, options) {
   const { repoFullname, repoChangeBranchRef } = forkedRepoDetails;
   const { repoOwner, repoName } = getRepoParts(repoFullname);
   const branch = repoChangeBranchRef.split("/").slice(2).join("/");
   const wordFileContent = writeWordFileContent(title, content);
 
-  const content_encoded = options.env === "browser" 
-    ? btoa(wordFileContent) 
-    : Buffer.from(wordFileContent).toString("base64");
-
   try {
     const response = await userOctokit.request("PUT /repos/{owner}/{repo}/contents/{path}", {
       owner: repoOwner,
       repo: repoName,
       branch,
       path,
-      content: content_encoded,
+      content: Buffer.from(wordFileContent).toString("base64"),
       message: `word: edit commit to "${title}"`,
       sha
     });