refactor: enhance card component and navigation structure; add icons and improve layout on blog page plus more idk

Author: LinuxJava7

src/components/Card.astro

@@ -1,7 +1,15 @@
 ---
 import { Image } from "astro:assets";
 
-const { name, url, description, image, alt = "", background } = Astro.props;
+const {
+  name,
+  url,
+  description,
+  image,
+  alt = "",
+  background,
+  showButton = true,
+} = Astro.props;
 ---
 
 <style>
@@ -13,7 +21,7 @@ const { name, url, description, image, alt = "", background } = Astro.props;
     margin: 0;
     padding: 0;
     border-radius: 1.1rem;
-    background-color: oklab(0 0 0/5%);
+    background-color: oklab(0 0 0/3%);
     @media (prefers-color-scheme: dark) {
       background-color: oklab(1 0 0/5%);
     }
@@ -112,16 +120,31 @@ const { name, url, description, image, alt = "", background } = Astro.props;
   }
 </style>
 
-<div class="card">
-  <a href={url}>
-    <Image src={image} alt={alt} />
-  </a>
-  <div class="card_text">
-    <slot />
-  </div>
-  <a class="button" href={url}>
-    <span class="front">
-      Visit {name}
-    </span>
-  </a>
-</div>
+{
+  showButton ? (
+    <div class="card">
+      {image && (
+        <a href={url}>
+          <Image src={image} alt={alt} />
+        </a>
+      )}
+
+      <div class="card_text">
+        <slot />
+      </div>
+
+      {url && (
+        <a class="button" href={url}>
+          <span class="front">Visit {name}</span>
+        </a>
+      )}
+    </div>
+  ) : (
+    <a href={url} class="card" style="text-decoration: none;">
+      {image && <Image src={image} alt={alt} />}
+      <div class="card_text">
+        <slot />
+      </div>
+    </a>
+  )
+}

src/components/Navigation/Headerbar.astro

@@ -37,13 +37,14 @@ const { pageTitle } = Astro.props;
     .headerbar-title {
       display: none;
       margin: 0;
-      font-size: 16px;
-      font-weight: 590;
+      font-size: 15px;
+      font-weight: 500;
       text-align: center;
       background-color: oklch(from var(--accent-color) 0.98 0.03 h / 90%);
       padding: 4px 16px;
       border-radius: 18px;
       backdrop-filter: blur(2px);
+      line-height: 119%;
 
       box-shadow:
         0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),

src/components/Navigation/TabBarLarge.astro

@@ -1,12 +1,12 @@
 ---
-
+import { pages } from "./nav.js";
+import { icons } from "./icons.js";
 ---
 
 <style>
   #tab-bar-large {
     padding: 0.25rem;
     width: fit-content;
-    height: fit-content;
     backdrop-filter: blur(2px);
     border-radius: 999px;
     background-color: oklch(from var(--accent-color) 0.98 0.03 h / 90%);
@@ -33,23 +33,21 @@
       gap: 0.25rem;
 
       .nav-item {
-        background: transparent;
         border-radius: 999px;
 
         a {
           padding: 0.25rem 1.25rem;
           border-radius: inherit;
-          display: inline-block;
-          font-weight: 600;
           display: flex;
           align-items: center;
           gap: 0.3rem;
+          font-weight: 600;
           line-height: 150%;
           text-decoration: none;
           color: var(--text-color);
         }
 
-        a[href]:hover {
+        a:hover {
           background-color: oklch(0 0 0 / 0.07);
           @media (prefers-color-scheme: dark) {
             background-color: oklch(1 0 0 / 0.06);
@@ -77,57 +75,33 @@
 
 <script>
   const links = document.querySelectorAll(".nav-item a");
-  const current = location.href;
+  const current = location.pathname;
 
-  links.forEach((linkElement) => {
-    const link = linkElement.href;
+  links.forEach((link) => {
+    const href = new URL(link.href).pathname;
 
-    if (link === location.origin + "/") {
-      if (current === link) {
-        linkElement.classList.add("active");
-      }
+    if (href === "/" && current === "/") {
+      link.classList.add("active");
       return;
     }
 
-    if (current.startsWith(link)) {
-      linkElement.classList.add("active");
+    if (href !== "/" && current.startsWith(href)) {
+      link.classList.add("active");
     }
   });
 </script>
 
 <div id="tab-bar-large">
   <ul class="nav">
-    <!-- first button  -->
-    <li class="nav-item">
-      <a href="/">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-          <g fill="currentColor">
-            <path
-              d="m 12 16 c 1.660156 0 3 -1.339844 3 -3 v -6 c 0 -0.929688 -0.414062 -1.8125 -1.128906 -2.410156 l -4.460938 -3.71875 c -0.816406 -0.679688 -2.003906 -0.679688 -2.820312 0 l -4.460938 3.71875 c -0.714844 0.597656 -1.128906 1.480468 -1.128906 2.410156 v 6 c 0 1.660156 1.339844 3 3 3 z m -9 -3 v -6 c 0 -0.335938 0.148438 -0.65625 0.410156 -0.871094 l 4.460938 -3.71875 c 0.074218 -0.0625 0.183594 -0.0625 0.257812 0 l 4.460938 3.71875 c 0.261718 0.214844 0.410156 0.535156 0.410156 0.871094 v 6 c 0 0.546875 -0.453125 1 -1 1 h -8 c -0.546875 0 -1 -0.453125 -1 -1 z m 0 0"
-            ></path>
-            <path
-              d="m 7 8 h 2 c 0.90781 0 1 0.449219 1 1 v 5 c 0 0.90781 -0.449219 1 -1 1 h -2 c -0.90781 0 -1 -0.449219 -1 -1 v -5 c 0 -0.90781 0.449219 -1 1 -1 z m 0 0"
-            ></path>
-          </g>
-        </svg>
-        home</a
-      >
-    </li>
-    <!-- second button -->
-    <li class="nav-item">
-      <a href="/blog">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-          <g fill="currentColor">
-            <path
-              d="m 4.199219 2 c -0.453125 0 -0.84375 0.300781 -0.964844 0.738281 l -3.234375 11.261719 h 2.066406 l 0.808594 -3 l 2.125 -0.003906 l 2.121094 0.003906 l 0.808594 3 h 2.070312 l -3.238281 -11.261719 c -0.117188 -0.4375 -0.511719 -0.738281 -0.960938 -0.738281 z m 0.785156 2 h 0.015625 h 0.011719 c 0.121093 -0.003906 0.238281 0.011719 0.289062 0.207031 l 1.320313 4.792969 h -3.242188 l 1.316406 -4.792969 c 0.054688 -0.195312 0.171876 -0.210937 0.289063 -0.207031 z m 0 0"
-            ></path>
-            <path
-              d="m 10 0 v 1 h 2 v 14 h -2 v 1 h 2.5 l 0.5 -0.5 l 0.5 0.5 h 2.5 v -1 h -2 v -14 h 2 v -1 h -2.5 l -0.5 0.5 l -0.5 -0.5 z m 0 0"
-            ></path>
-          </g>
-        </svg>
-        blog</a
-      >
-    </li>
+    {
+      pages.map((page) => (
+        <li class="nav-item">
+          <a href={page.url}>
+            {icons[page.url] && <Fragment set:html={icons[page.url]} />}
+            {page.title.toLowerCase()}
+          </a>
+        </li>
+      ))
+    }
   </ul>
 </div>

src/components/Navigation/TabBarSmall.astro

@@ -1,5 +1,6 @@
 ---
-
+import { pages } from "./nav.js";
+import { icons } from "./icons.js";
 ---
 
 <style>
@@ -33,33 +34,29 @@
       list-style: none;
       margin: 0;
       padding: 0;
-      gap: 0rem;
 
       .nav-item {
-        background: transparent;
         border-radius: 999px;
         display: flex;
-        justify-content: stretch;
 
         a {
-          flex-direction: column;
           width: 102px;
           padding: 8px;
           border-radius: inherit;
-          display: inline-block;
-          font-weight: 600;
           display: flex;
+          flex-direction: column;
           align-items: center;
           justify-content: center;
+          gap: 0.2rem;
+          font-weight: 600;
+          font-size: 13px;
           line-height: 100%;
           text-decoration: none;
           color: var(--text-color);
-          font-size: 13px;
-          gap: 0.2rem;
           box-sizing: border-box;
         }
 
-        a[href]:hover {
+        a:hover {
           background-color: oklch(0 0 0 / 0.06);
           @media (prefers-color-scheme: dark) {
             background-color: oklch(1 0 0 / 0.06);
@@ -87,57 +84,33 @@
 
 <script>
   const links = document.querySelectorAll(".nav-item a");
-  const current = location.href;
+  const current = location.pathname;
 
-  links.forEach((linkElement) => {
-    const link = linkElement.href;
+  links.forEach((link) => {
+    const href = new URL(link.href).pathname;
 
-    if (link === location.origin + "/") {
-      if (current === link) {
-        linkElement.classList.add("active");
-      }
+    if (href === "/" && current === "/") {
+      link.classList.add("active");
       return;
     }
 
-    if (current.startsWith(link)) {
-      linkElement.classList.add("active");
+    if (href !== "/" && current.startsWith(href)) {
+      link.classList.add("active");
     }
   });
 </script>
 
 <div id="tab-bar-small">
   <ul class="nav">
-    <!-- first button  -->
-    <li class="nav-item">
-      <a href="/">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-          <g fill="currentColor">
-            <path
-              d="m 12 16 c 1.660156 0 3 -1.339844 3 -3 v -6 c 0 -0.929688 -0.414062 -1.8125 -1.128906 -2.410156 l -4.460938 -3.71875 c -0.816406 -0.679688 -2.003906 -0.679688 -2.820312 0 l -4.460938 3.71875 c -0.714844 0.597656 -1.128906 1.480468 -1.128906 2.410156 v 6 c 0 1.660156 1.339844 3 3 3 z m -9 -3 v -6 c 0 -0.335938 0.148438 -0.65625 0.410156 -0.871094 l 4.460938 -3.71875 c 0.074218 -0.0625 0.183594 -0.0625 0.257812 0 l 4.460938 3.71875 c 0.261718 0.214844 0.410156 0.535156 0.410156 0.871094 v 6 c 0 0.546875 -0.453125 1 -1 1 h -8 c -0.546875 0 -1 -0.453125 -1 -1 z m 0 0"
-            ></path>
-            <path
-              d="m 7 8 h 2 c 0.90781 0 1 0.449219 1 1 v 5 c 0 0.90781 -0.449219 1 -1 1 h -2 c -0.90781 0 -1 -0.449219 -1 -1 v -5 c 0 -0.90781 0.449219 -1 1 -1 z m 0 0"
-            ></path>
-          </g>
-        </svg>
-        home</a
-      >
-    </li>
-    <!-- second button -->
-    <li class="nav-item">
-      <a href="/blog">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-          <g fill="currentColor">
-            <path
-              d="m 4.199219 2 c -0.453125 0 -0.84375 0.300781 -0.964844 0.738281 l -3.234375 11.261719 h 2.066406 l 0.808594 -3 l 2.125 -0.003906 l 2.121094 0.003906 l 0.808594 3 h 2.070312 l -3.238281 -11.261719 c -0.117188 -0.4375 -0.511719 -0.738281 -0.960938 -0.738281 z m 0.785156 2 h 0.015625 h 0.011719 c 0.121093 -0.003906 0.238281 0.011719 0.289062 0.207031 l 1.320313 4.792969 h -3.242188 l 1.316406 -4.792969 c 0.054688 -0.195312 0.171876 -0.210937 0.289063 -0.207031 z m 0 0"
-            ></path>
-            <path
-              d="m 10 0 v 1 h 2 v 14 h -2 v 1 h 2.5 l 0.5 -0.5 l 0.5 0.5 h 2.5 v -1 h -2 v -14 h 2 v -1 h -2.5 l -0.5 0.5 l -0.5 -0.5 z m 0 0"
-            ></path>
-          </g>
-        </svg>
-        blog</a
-      >
-    </li>
+    {
+      pages.map((page) => (
+        <li class="nav-item">
+          <a href={page.url}>
+            {icons[page.url] && <Fragment set:html={icons[page.url]} />}
+            {page.title.toLowerCase()}
+          </a>
+        </li>
+      ))
+    }
   </ul>
 </div>

src/components/Navigation/icons.js

@@ -0,0 +1,30 @@
+import paintbrush from "../../styles/paintbrush-symbolic.svg?raw";
+
+export const icons = {
+  "/": `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <g fill="currentColor">
+      <path
+        d="m 12 16 c 1.660156 0 3 -1.339844 3 -3 v -6 c 0 -0.929688 -0.414062 -1.8125 -1.128906 -2.410156 l -4.460938 -3.71875 c -0.816406 -0.679688 -2.003906 -0.679688 -2.820312 0 l -4.460938 3.71875 c -0.714844 0.597656 -1.128906 1.480468 -1.128906 2.410156 v 6 c 0 1.660156 1.339844 3 3 3 z m -9 -3 v -6 c 0 -0.335938 0.148438 -0.65625 0.410156 -0.871094 l 4.460938 -3.71875 c 0.074218 -0.0625 0.183594 -0.0625 0.257812 0 l 4.460938 3.71875 c 0.261718 0.214844 0.410156 0.535156 0.410156 0.871094 v 6 c 0 0.546875 -0.453125 1 -1 1 h -8 c -0.546875 0 -1 -0.453125 -1 -1 z m 0 0"
+      ></path>
+      <path
+        d="m 7 8 h 2 c 0.90781 0 1 0.449219 1 1 v 5 c 0 0.90781 -0.449219 1 -1 1 h -2 c -0.90781 0 -1 -0.449219 -1 -1 v -5 c 0 -0.90781 0.449219 -1 1 -1 z m 0 0"
+      ></path>
+    </g>
+  </svg>
+  `,
+  "/blog": `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <g fill="currentColor">
+      <path
+        d="m 4.199219 2 c -0.453125 0 -0.84375 0.300781 -0.964844 0.738281 l -3.234375 11.261719 h 2.066406 l 0.808594 -3 l 2.125 -0.003906 l 2.121094 0.003906 l 0.808594 3 h 2.070312 l -3.238281 -11.261719 c -0.117188 -0.4375 -0.511719 -0.738281 -0.960938 -0.738281 z m 0.785156 2 h 0.015625 h 0.011719 c 0.121093 -0.003906 0.238281 0.011719 0.289062 0.207031 l 1.320313 4.792969 h -3.242188 l 1.316406 -4.792969 c 0.054688 -0.195312 0.171876 -0.210937 0.289063 -0.207031 z m 0 0"
+      ></path>
+      <path
+        d="m 10 0 v 1 h 2 v 14 h -2 v 1 h 2.5 l 0.5 -0.5 l 0.5 0.5 h 2.5 v -1 h -2 v -14 h 2 v -1 h -2.5 l -0.5 0.5 l -0.5 -0.5 z m 0 0"
+      ></path>
+    </g>
+  </svg>
+  `,
+
+  "/portfolio": paintbrush,
+};

src/components/Navigation/nav.js

@@ -0,0 +1,21 @@
+const pages = Object.entries(
+  import.meta.glob("/src/pages/*.astro", { eager: true }),
+)
+  .map(([path, mod]) => {
+    const file = path
+      .split("/")
+      .pop()
+      .replace(/\.(astro|md|mdx)$/, "");
+
+    const url = file === "index" ? "/" : `/${file}`;
+
+    const title = file === "index" ? "home" : (mod.frontmatter?.title ?? file);
+
+    return {
+      url,
+      title,
+    };
+  })
+  .sort((a, b) => a.url.localeCompare(b.url));
+
+export { pages };