fix: make the last part of breadcrumb lowercase in specific tag page

satnaing · Jan 29, 2023 · c556202 · c556202
1 parent c192cd8
commit c556202
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/components/Breadcrumbs.astro b/src/components/Breadcrumbs.astro
@@ -22,7 +22,11 @@ breadcrumbList[0] === "posts" &&
       breadcrumbList.map((breadcrumb, index) =>
         index + 1 === breadcrumbList.length ? (
           <li>
-            <span class={`${index > 0 ? "lowercase" : ""}`} aria-current="page">
+            <span
+              class={`${index > 0 ? "lowercase" : "capitalize"}`}
+              aria-current="page"
+            >
+              {/* make the last part lowercase in Home > Tags > some-tag */}
               {breadcrumb}
             </span>
           </li>
@@ -44,10 +48,12 @@ breadcrumbList[0] === "posts" &&
   .breadcrumb ul li {
     @apply inline;
   }
-  .breadcrumb ul li a,
-  .breadcrumb ul li span {
+  .breadcrumb ul li a {
     @apply opacity-70 capitalize;
   }
+  .breadcrumb ul li span {
+    @apply opacity-70;
+  }
   .breadcrumb ul li:not(:last-child) a {
     @apply hover:opacity-100;
   }