Added this website as content to hobbies, refactored some items into site-layout

src/components/Footer.astro

@@ -1,10 +1,23 @@
 ---
+import InlineLink from "@components/InlineLink.astro";
 
+const { pathname } = Astro.url;
 ---
 
 <footer
   class="border-t-caperren-green-dark text-caperren-green-dark z-50 flex w-full max-w-full items-center justify-between border-t bg-black px-6 py-2 text-sm"
 >
   <span>{import.meta.env.PUBLIC_BUILD_ENVIRONMENT || "development"}</span>
+  <div>
+    <InlineLink
+      class:list={[
+        "text-caperren-green-dark hover:text-caperren-green",
+        pathname === "/hobby/this-website"
+          ? "border-caperren-green-dark hover:border-caperren-green border-b-2"
+          : false,
+      ]}
+      href="/hobby/this-website">About This Website</InlineLink
+    >
+  </div>
   <span>{import.meta.env.PUBLIC_REPO_VERSION_HASH || "invalid"}</span>
 </footer>

src/components/InlineLink.astro

@@ -7,16 +7,10 @@ interface Props extends ComponentPropsBase {
 }
 
 const { class: className, href, target } = Astro.props;
+const { pathname } = Astro.url;
 
-let finalTarget: string | undefined = target;
-
-if (target === undefined) {
-  if (href.startsWith("/")) {
-    finalTarget = "";
-  } else {
-    finalTarget = "_blank";
-  }
-}
+const finalTarget =
+  target === undefined ? (href.startsWith("/") ? undefined : "_blank") : target;
 ---
 
 <>
@@ -24,6 +18,7 @@ if (target === undefined) {
     class:list={["text-blue-500", "hover:text-blue-300", className]}
     href={href}
     target={finalTarget}
+    aria-current={pathname === href ? "page" : undefined}
   >
     <slot />
   </a>

src/components/NestedNavbarEntries.astro

@@ -1,20 +1,12 @@
 ---
 import type { navLink } from "@interfaces/site-layout.ts";
 
+import { getHrefPath, getNavLinkSuffix } from "@data/site-layout.ts";
+
 const items: navLink[] = Astro.props.items;
 const depth: number = Astro.props.depth ?? 0;
 const paths: string[] = Astro.props.paths ?? [];
 
-const getNavLinkSuffix = (entry: navLink): string => {
-  return "-" + [...paths, entry.path].join("-");
-};
-const getHrefPath = (entry: navLink): string => {
-  return entry.pubpath
-    ? entry.pubpath
-    : "/" +
-        (paths && paths.length ? [...paths, entry.path].join("/") : entry.path);
-};
-
 const { pathname } = Astro.url;
 ---
 
@@ -29,21 +21,22 @@ const { pathname } = Astro.url;
   {
     items.map(
       (entry) =>
-        (entry.enabled ?? true) && (
+        (entry.enabled ?? true) &&
+        !(entry.hidden ?? false) && (
           <li class="">
             {Array.isArray(entry.children) && entry.children.length ? (
               <div>
                 <button
-                  id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
+                  id={"dropdownNavbarLink" + getNavLinkSuffix(paths, entry)}
                   data-dropdown-toggle={
-                    "dropdownNavbar" + getNavLinkSuffix(entry)
+                    "dropdownNavbar" + getNavLinkSuffix(paths, entry)
                   }
                   data-dropdown-placement="bottom-start"
                   data-dropdown-offset-distance="5"
                   data-dropdown-offset-skidding="12"
                   class:list={[
                     "hover:text-caperren-green-light lg:hover:text-caperren-green-light flex w-full items-center justify-between lg:p-0 lg:hover:bg-transparent",
-                    pathname.startsWith(getHrefPath(entry))
+                    pathname.startsWith(getHrefPath(paths, entry))
                       ? "border-caperren-green border-b-2"
                       : false,
                   ]}
@@ -65,7 +58,7 @@ const { pathname } = Astro.url;
                   </svg>
                 </button>
                 <div
-                  id={"dropdownNavbar" + getNavLinkSuffix(entry)}
+                  id={"dropdownNavbar" + getNavLinkSuffix(paths, entry)}
                   class="border-caperren-green z-10 hidden w-max max-w-screen border bg-black px-6 shadow-sm"
                 >
                   <Astro.self
@@ -78,16 +71,18 @@ const { pathname } = Astro.url;
             ) : (
               <div>
                 <a
-                  href={getHrefPath(entry)}
-                  target={getHrefPath(entry).startsWith("/") ? "" : "_blank"}
+                  href={getHrefPath(paths, entry)}
+                  target={
+                    getHrefPath(paths, entry).startsWith("/") ? "" : "_blank"
+                  }
                   class:list={[
                     "hover:text-caperren-green-light ring-caperren-green-dark block bg-transparent lg:p-0",
-                    pathname === getHrefPath(entry)
+                    pathname === getHrefPath(paths, entry)
                       ? "border-caperren-green border-b-2"
                       : false,
                   ]}
                   aria-current={
-                    pathname === getHrefPath(entry) ? "page" : undefined
+                    pathname === getHrefPath(paths, entry) ? "page" : undefined
                   }
                 >
                   {entry.navText}

src/components/PopoverWordDefinition.astro

@@ -14,6 +14,7 @@ const keys: { [key: string]: string } = {
   TDD: "Test driven development",
   UPS: "Uninterruptible power supply",
   VISA: "Virtual instrument software architecture",
+  VPS: "Virtual private server",
 };
 
 const key: string | undefined = Astro.props.key;

src/components/Ul.astro

@@ -13,7 +13,11 @@ const { class: className, lineItems, depth = 0 } = Astro.props;
 ---
 
 <ul
-  class:list={["list-inside list-disc", className, depth > 0 ? "ps-3" : false]}
+  class:list={[
+    "list-outside list-disc",
+    className,
+    depth > 0 ? "ps-3" : "ms-3",
+  ]}
 >
   {
     lineItems ? (