fix(config): base

gabrielmeloc22 · Oct 17, 2024 · 5a36d92 · 5a36d92
1 parent a780a90
commit 5a36d92
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 17 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -6,5 +6,6 @@ import tailwind from "@astrojs/tailwind";
 
 export default defineConfig({
   site: "https://gabrielmeloc22.github.io",
+  base: "blog",
   integrations: [mdx(), sitemap(), tailwind()],
 });
diff --git a/src/components/ArrowCard.astro b/src/components/ArrowCard.astro
@@ -1,15 +1,20 @@
 ---
 import { formatDate } from "@lib/utils";
 import type { CollectionEntry } from "astro:content";
+import Link from "./Link.astro";
 
 type Props = {
-  entry: CollectionEntry<"blog">
-}
+  entry: CollectionEntry<"blog">;
+};
 
 const { entry } = Astro.props;
 ---
 
-<a href={`/${entry.collection}/${entry.slug}`} class="relative group flex flex-nowrap py-3 px-4 pr-10 rounded-lg border border-black/15 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
+<Link
+  href={`/${entry.collection}/${entry.slug}`}
+  underline={false}
+  className="relative group flex flex-nowrap py-3 px-4 pr-10 rounded-lg border border-black/15 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out"
+>
   <div class="flex flex-col flex-1 truncate">
     <div class="font-semibold">
       {entry.data.title}
@@ -21,11 +26,21 @@ const { entry } = Astro.props;
       {formatDate(entry.data.date)}
     </div>
   </div>
-  <svg 
-    xmlns="http://www.w3.org/2000/svg" 
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    class="absolute top-1/2 right-2 -translate-y-1/2 size-5 stroke-2 fill-none stroke-current">
-    <line x1="5" y1="12" x2="19" y2="12" class="translate-x-3 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out" />
-    <polyline points="12 5 19 12 12 19" class="-translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out" />
+    class="absolute top-1/2 right-2 -translate-y-1/2 size-5 stroke-2 fill-none stroke-current"
+  >
+    <line
+      x1="5"
+      y1="12"
+      x2="19"
+      y2="12"
+      class="translate-x-3 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"
+    ></line>
+    <polyline
+      points="12 5 19 12 12 19"
+      class="-translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out"
+    ></polyline>
   </svg>
-</a>
+</Link>
diff --git a/src/components/Link.astro b/src/components/Link.astro
@@ -5,15 +5,21 @@ type Props = {
   href: string;
   external?: boolean;
   underline?: boolean;
-}
+  className?: string;
+};
 
-const { href, external, underline = true, ...rest } = Astro.props;
+const { className, href, external, underline = true, ...rest } = Astro.props;
 ---
 
-<a 
-  href={href} 
-  target={ external ? "_blank" : "_self" } 
-  class={cn("inline-block decoration-black/15 dark:decoration-white/30 hover:decoration-black/25 hover:dark:decoration-white/50 text-current hover:text-black hover:dark:text-white transition-colors duration-300 ease-in-out", underline && "underline underline-offset-2")}
-  {...rest}>
-  <slot/>
+<a
+  href={external ? href : `/blog/${href}`}
+  target={external ? "_blank" : "_self"}
+  class={cn(
+    "inline-block decoration-black/15 dark:decoration-white/30 hover:decoration-black/25 hover:dark:decoration-white/50 text-current hover:text-black hover:dark:text-white transition-colors duration-300 ease-in-out",
+    underline && "underline underline-offset-2",
+    className
+  )}
+  {...rest}
+>
+  <slot />
 </a>