Removed unused build, refactored H1-3 to use slot based setup, added visual and aria page highlighting for navbar links, switched all pages to use custom H1-3, better new page/tab handling for inline links

src/components/CustomHtmlWrappers/H2.astro

@@ -1,5 +0,0 @@
----
-
----
-
-<h2 class="my-4 font-bold md:text-2xl">{Astro.props.text}</h2>

src/components/CustomHtmlWrappers/H3.astro

@@ -1,5 +0,0 @@
----
-
----
-
-<h3 class="mt-4 mb-2 font-bold md:text-lg">{Astro.props.text}</h3>

src/components/H1.astro

@@ -0,0 +1,5 @@
+---
+
+---
+
+<h1 class="text-xl font-extrabold md:text-3xl"><slot /></h1>

src/components/H2.astro

@@ -0,0 +1,5 @@
+---
+
+---
+
+<h2 class="my-4 font-bold md:text-2xl"><slot /></h2>

src/components/H3.astro

@@ -0,0 +1,5 @@
+---
+
+---
+
+<h3 class="mt-4 mb-2 font-bold md:text-lg"><slot /></h3>

src/components/InlineLink.astro

@@ -1,14 +1,30 @@
 ---
-interface Props {
+import type { ComponentPropsBase } from "@interfaces/components.ts";
+
+interface Props extends ComponentPropsBase {
   href: string;
   target?: string;
 }
 
-const { href, target = "_blank" } = Astro.props;
+const { class: className, href, target } = Astro.props;
+
+let finalTarget: string | undefined = target;
+
+if (target === undefined) {
+  if (href.startsWith("/")) {
+    finalTarget = "";
+  } else {
+    finalTarget = "_blank";
+  }
+}
 ---
 
 <>
-  <a class="text-blue-500 hover:text-blue-300" href={href} target={target}>
+  <a
+    class:list={["text-blue-500", "hover:text-blue-300", className]}
+    href={href}
+    target={finalTarget}
+  >
     <slot />
   </a>
 </>

src/components/NestedNavbarEntries.astro

@@ -14,6 +14,8 @@ const getHrefPath = (entry: navLink): string => {
     : "/" +
         (paths && paths.length ? [...paths, entry.path].join("/") : entry.path);
 };
+
+const { pathname } = Astro.url;
 ---
 
 <ul
@@ -26,14 +28,20 @@ const getHrefPath = (entry: navLink): string => {
         (entry.enabled ?? true) && (
           <li>
             {Array.isArray(entry.children) && entry.children.length ? (
-              <div>
+              <div
+                class={
+                  pathname.startsWith(getHrefPath(entry))
+                    ? "border-caperren-green border-b-2"
+                    : ""
+                }
+              >
                 <button
                   id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
                   data-dropdown-toggle={
                     "dropdownNavbar" + getNavLinkSuffix(entry)
                   }
                   data-dropdown-placement="bottom"
-                  class="hover:text-caperren-green-light lg:hover:text-caperren-green-light flex w-full items-center justify-between px-3 py-2 lg:border-0 lg:p-0 lg:hover:bg-transparent"
+                  class="hover:text-caperren-green-light lg:hover:text-caperren-green-light flex w-full items-center justify-between px-3 py-2 lg:p-0 lg:hover:bg-transparent"
                 >
                   {entry.navText}
                   <svg
@@ -63,13 +71,24 @@ const getHrefPath = (entry: navLink): string => {
                 </div>
               </div>
             ) : (
-              <a
-                href={getHrefPath(entry)}
-                class="hover:text-caperren-green-light ring-caperren-green-dark block bg-transparent px-3 py-2 lg:p-0"
-                aria-current="page"
+              <div
+                class={
+                  pathname === getHrefPath(entry)
+                    ? "border-caperren-green border-b-2"
+                    : ""
+                }
               >
-                {entry.navText}
-              </a>
+                <a
+                  href={getHrefPath(entry)}
+                  target={getHrefPath(entry).startsWith("/") ? "" : "_blank"}
+                  class="hover:text-caperren-green-light ring-caperren-green-dark block bg-transparent px-3 py-2 lg:p-0"
+                  aria-current={
+                    pathname === getHrefPath(entry) ? "page" : undefined
+                  }
+                >
+                  {entry.navText}
+                </a>
+              </div>
             )}
           </li>
         ),