feat: implement jargonsdev logo (#124)

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

This Pull Request introduces the `jargons.dev` logotype to the homepage
and in the navigation bar on the word layout and jargons editor.

**Changes Made:**

- Introduced the `JargonsdevLogo` component which returns an svg content
of the logo; it accepts a class prop that drills down to the svg's class
attribute for better styling.
- Integrated the `JargonsdevLogo` component in intended places
- Modified navigation return button to use icon only mode, relegating
the `returnLabel` text to screen-reader only
- Modified the strokeWidth of navigation return button and search form
icon for better visibility

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

NA

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


[screencast-localhost_4321-2024_12_06-20_37_38.webm](https://github.com/user-attachments/assets/f4ddb6d3-e4de-440c-8dc2-75f36efa5177)

### 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

Author: babblebey

public/jargons.dev.svg

@@ -22,7 +22,7 @@ export default function Profile({ isAuthed, userData, authUrl }) {
     <div className="relative">
       {/* Profile */}
       <button 
-        className={`${isDropdownOpen && "ring-4"} relative flex items-center justify-center size-10 hover:ring-4 ring-gray-200 overflow-hidden bg-transparent rounded-full transition-colors duration-700 cursor-pointer focus-visible:outline-none`}
+        className={`${isDropdownOpen && "ring-4"} relative bg-gray-200 flex items-center justify-center size-10 hover:ring-4 ring-gray-200 overflow-hidden bg-transparent rounded-full transition-colors duration-700 cursor-pointer focus-visible:outline-none`}
         onClick={() => setIsDropdownOpen(prev => !prev)}
       >
         {/* User Avatar */}

src/components/islands/profile.jsx

@@ -77,7 +77,7 @@ function SearchTrigger({ size = "md" }) {
         </kbd>
       </div>
       <button className="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">
+				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.8" 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>
 			</button>

src/components/islands/search.jsx

@@ -0,0 +1,28 @@
+---
+const { class:list } = Astro.props;
+---
+
+<svg class={list} 
+    xmlns="http://www.w3.org/2000/svg" 
+    xml:space="preserve" 
+    version="1.1" 
+    style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+    viewBox="0 0 2000 416"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+    <defs>
+    <style type="text/css">
+        <![CDATA[
+            .filWhite {fill:#FFFFFF}
+            .filBlack {fill:#000000}
+        ]]>
+    </style>
+    </defs>
+    <g id="Layer_x0020_1">
+        <metadata id="CorelCorpID_0Corel-Layer"/>
+        <g id="_333113168">
+            <path class="filWhite" d="M1750 99c7,-7 15,-10 25,-10l52 0c17,0 31,10 35,26l5 14 4 -14c5,-16 19,-26 36,-26l49 0c13,0 24,5 31,16 7,10 9,22 4,34l-61 171c-5,15 -19,25 -35,25l-59 0c-16,0 -29,-10 -35,-25l-5 -14c-10,12 -24,22 -39,30 -19,9 -41,12 -62,12 -25,0 -50,-5 -71,-17 -7,8 -17,14 -29,14l-49 0c-5,0 -11,-2 -15,-4 -12,5 -25,7 -38,7 -14,0 -28,-2 -41,-8 -14,-6 -26,-16 -35,-28 -3,-3 -5,-7 -7,-11 -3,11 -9,20 -17,28 -14,15 -34,19 -53,19 -20,0 -39,-4 -53,-19 -9,-9 -15,-20 -18,-33 -6,12 -14,21 -25,29 -23,18 -53,23 -81,23 -22,0 -44,-3 -64,-11 -2,-1 -3,-1 -5,-2 -7,6 -16,10 -25,10l-49 0c-12,0 -23,-6 -30,-15 -7,9 -17,15 -29,15l-50 0c-11,0 -22,-6 -29,-14 -6,3 -12,6 -19,9 -15,6 -32,8 -49,8 -15,0 -31,-2 -45,-7 -5,24 -18,44 -41,56 -26,15 -60,18 -90,18 -16,0 -32,-1 -47,-4 -13,-2 -26,-5 -37,-12 -12,-6 -22,-16 -28,-28 -5,-8 -7,-17 -8,-26l-129 0c-2,0 -4,-1 -5,-1 -2,0 -4,1 -5,1l-28 0c-14,0 -27,-3 -38,-10 -16,10 -34,13 -52,13 -24,0 -46,-6 -64,-22 -1,0 -1,-1 -1,-1 0,23 -7,44 -23,60 -17,19 -41,26 -66,26l-63 0c-20,0 -37,-17 -37,-37l0 -39c0,-20 17,-37 37,-37l29 0 0 -86 -29 0c-21,0 -38,-17 -38,-37l0 -39c0,-20 17,-37 38,-37l24 0c0,-3 0,-5 0,-8l0 -10c0,-16 6,-31 17,-42 13,-14 31,-18 50,-18 18,0 36,4 49,17 11,12 17,27 17,43l0 10c0,11 -2,21 -8,30 1,2 2,4 2,6 8,-8 16,-14 26,-19 20,-10 42,-13 64,-13 26,0 52,5 73,20 7,-10 18,-16 31,-16l88 0c8,0 16,2 22,7 11,-5 23,-7 35,-7l17 0c9,0 18,4 25,9 6,-3 13,-6 20,-8 13,-4 27,-5 41,-5 1,0 1,0 2,0 2,-4 6,-8 10,-12 12,-12 28,-17 44,-17l31 0c20,0 37,17 37,37l0 2c1,0 3,-1 4,-1 16,-7 32,-9 49,-9 17,0 34,2 49,9 7,2 13,5 19,9 7,-9 18,-14 29,-14l50 0c5,0 10,1 15,3 2,-1 4,-1 6,-2 10,-4 21,-5 31,-5 13,0 25,2 37,7 12,5 22,12 31,22 0,0 0,0 0,0 3,-2 5,-4 8,-7 23,-17 52,-22 80,-22 19,0 38,2 56,9 17,7 32,16 44,30 12,15 12,35 -1,49l-11 13c6,5 11,12 14,20 4,6 6,14 7,21 3,-4 6,-7 9,-11 14,-14 33,-19 53,-19 19,0 37,5 51,18 0,-1 0,-2 0,-3 0,-17 2,-34 7,-51 4,-14 10,-28 19,-40 9,-12 21,-21 35,-28 13,-5 27,-8 41,-8 5,0 11,0 16,1l0 -34c0,-21 17,-37 37,-37l49 0c21,0 37,16 37,37l0 46c4,-1 7,-3 10,-4 16,-6 32,-9 49,-9 16,0 33,3 48,9 4,1 7,3 11,5z"/>
+            <path class="filBlack" d="M44 325l66 0 0 -160 -66 0 0 -39 115 0 0 188c0,15 -4,26 -13,36 -8,9 -21,14 -39,14l-63 0 0 -39zm91 -221c-11,0 -19,-2 -23,-7 -5,-4 -7,-10 -7,-16l0 -10c0,-6 2,-12 7,-16 4,-5 12,-7 23,-7 10,0 18,2 22,7 5,4 7,10 7,16l0 10c0,6 -2,12 -7,16 -4,5 -12,7 -22,7zm216 193c-11,0 -19,-2 -25,-7 -6,-6 -10,-13 -11,-23l-2 0c-3,11 -9,20 -18,26 -9,5 -20,8 -34,8 -16,0 -30,-4 -40,-13 -10,-9 -15,-22 -15,-38 0,-18 7,-31 20,-40 13,-8 32,-13 57,-13l28 0 0 -8c0,-10 -3,-18 -7,-23 -5,-5 -13,-8 -24,-8 -11,0 -19,2 -26,6 -6,4 -12,9 -16,15l-27 -23c6,-10 15,-18 27,-24 12,-7 28,-10 47,-10 24,0 42,5 55,16 13,11 20,27 20,49l0 75 19 0 0 35 -28 0zm-71 -28c9,0 16,-2 22,-6 6,-4 9,-10 9,-18l0 -21 -26 0c-21,0 -31,7 -31,20l0 7c0,6 3,10 7,13 5,4 11,5 19,5zm109 -10l39 0 0 -94 -39 0 0 -39 88 0 0 49 3 0c1,-7 3,-13 6,-19 3,-5 7,-11 11,-15 4,-5 9,-8 16,-11 6,-3 13,-4 22,-4l16 0 0 45 -37 0c-12,0 -21,4 -27,11 -6,7 -10,16 -10,26l0 51 57 0 0 38 -145 0 0 -38zm344 56c0,18 -8,31 -23,40 -15,8 -39,13 -72,13 -16,0 -30,-1 -40,-3 -11,-2 -20,-5 -26,-8 -6,-4 -11,-8 -13,-13 -3,-5 -4,-10 -4,-16 0,-10 3,-17 9,-22 5,-5 14,-9 24,-11l0 -2c-7,-3 -13,-6 -17,-10 -5,-4 -7,-10 -7,-17 0,-9 3,-15 9,-19 5,-4 13,-7 22,-9l0 -2c-10,-5 -18,-12 -24,-21 -5,-9 -8,-19 -8,-32 0,-10 1,-19 5,-26 4,-8 9,-14 15,-19 7,-5 14,-9 24,-12 9,-3 19,-4 30,-4 11,0 21,1 30,4l0 -10c0,-6 3,-12 7,-16 5,-5 11,-7 19,-7l31 0 0 36 -41 0 0 3c9,5 16,12 21,20 5,9 8,19 8,31 0,10 -2,19 -5,26 -4,8 -9,14 -15,19 -7,6 -15,10 -24,12 -9,3 -20,4 -31,4 -5,0 -10,0 -15,-1 -4,0 -9,-1 -13,-2 -2,1 -4,3 -6,5 -2,2 -2,4 -2,8 0,2 0,4 2,6 1,1 3,3 5,3 2,1 5,2 8,2 3,0 6,0 10,0l39 0c12,0 23,1 31,4 9,2 16,6 21,10 6,4 10,10 12,16 3,6 4,12 4,20zm-46 3c0,-4 -2,-8 -6,-10 -3,-3 -10,-4 -20,-4l-59 0c-4,4 -6,8 -6,14 0,5 2,10 6,13 5,3 13,5 23,5l29 0c12,0 20,-1 25,-4 5,-4 8,-8 8,-14zm-50 -105c10,0 17,-2 22,-7 4,-5 7,-11 7,-19l0 -8c0,-7 -3,-14 -7,-18 -5,-5 -12,-8 -22,-8 -10,0 -17,3 -21,8 -5,4 -7,11 -7,18l0 8c0,8 2,14 7,19 4,5 11,7 21,7zm177 88c-13,0 -25,-2 -36,-6 -10,-4 -19,-10 -27,-18 -7,-7 -13,-17 -17,-28 -4,-11 -6,-23 -6,-37 0,-14 2,-27 6,-38 4,-11 10,-20 17,-28 8,-8 17,-14 27,-18 11,-4 23,-6 36,-6 14,0 26,2 36,6 11,4 20,10 27,18 8,8 13,17 17,28 4,11 6,24 6,38 0,14 -2,26 -6,37 -4,11 -9,21 -17,28 -7,8 -16,14 -27,18 -10,4 -22,6 -36,6zm0 -36c11,0 20,-4 26,-10 6,-7 9,-17 9,-30l0 -27c0,-13 -3,-22 -9,-29 -6,-7 -15,-10 -26,-10 -11,0 -19,3 -26,10 -6,7 -9,16 -9,29l0 27c0,13 3,23 9,30 7,6 15,10 26,10zm98 32l0 -171 49 0 0 31 2 0c2,-5 4,-9 7,-13 3,-5 6,-8 10,-11 5,-4 9,-6 15,-8 5,-2 11,-3 18,-3 8,0 16,1 23,4 7,3 12,7 17,13 5,5 9,12 12,20 2,8 4,17 4,27l0 111 -49 0 0 -104c0,-22 -10,-33 -29,-33 -4,0 -8,0 -11,1 -4,1 -7,3 -10,5 -3,2 -5,5 -7,8 -2,3 -2,7 -2,11l0 112 -49 0zm251 4c-19,0 -36,-3 -50,-8 -14,-6 -24,-14 -32,-24l28 -25c7,7 14,13 23,17 9,4 20,6 31,6 10,0 17,-2 23,-5 6,-3 8,-7 8,-13 0,-5 -2,-9 -5,-11 -4,-1 -9,-3 -16,-4l-27 -4c-8,-1 -15,-3 -22,-6 -7,-2 -12,-5 -17,-9 -5,-4 -9,-9 -12,-15 -3,-5 -4,-12 -4,-21 0,-17 7,-31 20,-42 14,-10 33,-15 58,-15 17,0 31,2 43,7 12,4 21,11 28,19l-24 28c-5,-5 -12,-10 -20,-14 -8,-4 -17,-5 -29,-5 -19,0 -28,5 -28,17 0,5 2,8 6,10 3,2 9,4 15,5l27 4c8,1 15,3 22,5 7,3 12,6 17,10 5,4 9,9 12,14 3,6 4,13 4,21 0,18 -6,32 -20,43 -14,10 -34,15 -59,15zm177 0c-12,0 -21,-2 -27,-8 -5,-5 -8,-12 -8,-19l0 -12c0,-7 3,-14 8,-19 6,-6 15,-8 27,-8 12,0 21,2 27,8 5,5 8,12 8,19l0 12c0,7 -3,14 -8,19 -6,6 -15,8 -27,8zm206 -35l-2 0c-5,10 -11,19 -19,25 -7,7 -18,10 -32,10 -9,0 -18,-1 -26,-5 -8,-4 -15,-9 -20,-16 -6,-8 -10,-17 -14,-28 -3,-11 -4,-25 -4,-40 0,-16 1,-29 4,-40 4,-12 8,-21 14,-28 5,-8 12,-13 20,-17 8,-3 17,-5 26,-5 7,0 13,1 18,3 6,2 10,4 14,7 4,3 8,7 11,11 3,5 6,9 8,15l2 0 0 -106 49 0 0 245 -49 0 0 -31zm-32 -3c9,0 16,-2 23,-6 6,-5 9,-11 9,-20l0 -50c0,-9 -3,-16 -9,-20 -7,-4 -14,-6 -23,-6 -11,0 -19,3 -25,10 -6,6 -9,16 -9,28l0 26c0,12 3,21 9,28 6,6 14,10 25,10zm181 38c-29,0 -50,-8 -65,-24 -15,-16 -22,-37 -22,-65 0,-14 1,-26 5,-37 4,-11 10,-21 17,-29 7,-8 16,-14 26,-18 10,-4 22,-6 35,-6 13,0 24,2 34,6 11,4 19,10 26,18 7,7 13,16 17,27 4,11 5,23 5,36l0 15 -117 0 0 3c0,11 4,20 11,26 6,7 17,10 30,10 10,0 19,-1 26,-5 7,-4 14,-9 19,-16l27 29c-7,8 -16,15 -28,21 -12,6 -27,9 -46,9zm-4 -144c-10,0 -19,4 -25,10 -7,7 -10,15 -10,26l0 3 69 0 0 -3c0,-11 -3,-20 -9,-26 -6,-7 -14,-10 -25,-10zm146 140l-62 -171 52 0 22 73 16 57 3 0 16 -57 23 -73 49 0 -61 171 -58 0z"/>
+        </g>
+    </g>
+</svg>

src/components/jargonsdev-logo.astro

@@ -1,15 +1,20 @@
 ---
+import JargonsdevLogo from "./jargonsdev-logo.astro";
+
 const { returnNav = { label: "Back", location: "../" } } = Astro.props;
 ---
 
 <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 class="hidden @md:flex">
-      { returnNav.label }
-    </span>       
-  </a>
+  <div class="flex items-center space-x-4 md:space-x-6">
+    <a href={ returnNav.location } class="flex items-center w-6 h-6 justify-center bg-black hover:bg-transparent text-white hover:text-black rounded-full border border-black transition-color ease-in-out duration-400">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" 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 class="sr-only">
+        { returnNav.label }
+      </span>       
+    </a>
+    <JargonsdevLogo class="drop-shadow drop-shadow-color-black h-10 md:h-12" />
+  </div>
   <slot />
 </nav>

src/components/navbar.astro

@@ -4,6 +4,7 @@ import BaseLayout from "../layouts/base.astro";
 import doAuth from "../lib/actions/do-auth.js";
 import Search from "../components/islands/search.jsx";
 import Profile from "../components/islands/profile.jsx";
+import JargonsdevLogo from "../components/jargonsdev-logo.astro";
 import RecentSearches from "../components/islands/recent-searches.jsx";
 
 const { isAuthed, authedData, getAuthUrl } = await doAuth(Astro);
@@ -32,23 +33,18 @@ const dictionary = await getCollection("dictionary");
 	<main class="w-full flex flex-col grow max-w-screen-lg p-5 justify-center mx-auto">
 		<!-- Title -->
 		<div class="mb-4 md:mb-6">
-			<h1 class="relative text-5xl md:text-7xl lg:text-8xl font-black w-fit">
-				<a href="/" class="absolute font-normal text-[0.6rem] md:text-xs right-0 md:top-1.5 lg:top-3">
-					jargons.dev
-				</a>
-				Dictionary
-			</h1>
+			<JargonsdevLogo class="drop-shadow-md drop-shadow-color-black w-[80%] md:w-[60%]"  />
 		</div>
 
 		<!-- Search -->
 		<Search triggerSize="md" dictionary={dictionary} client:load />
 
 		<!-- Browse words -->
 		<div class="ml-2 mt-4 md:mt-6">
-      <a href="/browse">
-        Browse Words
-      </a>
-    </div>
+			<a href="/browse">
+				Browse Words
+			</a>
+		</div>
 
 		<!-- Recent Word Look Up -->
 		<RecentSearches client:load />