Upgrade Astro and Astro Paper to v5
This commit is contained in:
parent
8ebf7d5996
commit
e719f7ccca
105 changed files with 7099 additions and 1939 deletions
|
@ -1,72 +0,0 @@
|
|||
---
|
||||
// Remove current url path and remove trailing slash if exists
|
||||
const currentUrlPath = Astro.url.pathname.replace(/\/+$/, "");
|
||||
|
||||
// Get url array from path
|
||||
// eg: /tags/tailwindcss => ['tags', 'tailwindcss']
|
||||
const breadcrumbList = currentUrlPath.split("/").slice(1);
|
||||
|
||||
// if breadcrumb is Home > Posts > 1 <etc>
|
||||
// replace Posts with Posts (page number)
|
||||
breadcrumbList[0] === "posts" &&
|
||||
breadcrumbList.splice(0, 2, `Posts (page ${breadcrumbList[1] || 1})`);
|
||||
|
||||
// if breadcrumb is Home > Tags > [tag] > [page] <etc>
|
||||
// replace [tag] > [page] with [tag] (page number)
|
||||
breadcrumbList[0] === "tags" &&
|
||||
!isNaN(Number(breadcrumbList[2])) &&
|
||||
breadcrumbList.splice(
|
||||
1,
|
||||
3,
|
||||
`${breadcrumbList[1]} ${
|
||||
Number(breadcrumbList[2]) === 1 ? "" : "(page " + breadcrumbList[2] + ")"
|
||||
}`
|
||||
);
|
||||
---
|
||||
|
||||
<nav class="breadcrumb" aria-label="breadcrumb">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
<span aria-hidden="true">»</span>
|
||||
</li>
|
||||
{
|
||||
breadcrumbList.map((breadcrumb, index) =>
|
||||
index + 1 === breadcrumbList.length ? (
|
||||
<li>
|
||||
<span
|
||||
class={`${index > 0 ? "lowercase" : "capitalize"}`}
|
||||
aria-current="page"
|
||||
>
|
||||
{/* make the last part lowercase in Home > Tags > some-tag */}
|
||||
{decodeURIComponent(breadcrumb)}
|
||||
</span>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<a href={`/${breadcrumb}/`}>{breadcrumb}</a>
|
||||
<span aria-hidden="true">»</span>
|
||||
</li>
|
||||
)
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.breadcrumb {
|
||||
@apply mx-auto mb-1 mt-8 w-full max-w-3xl px-4;
|
||||
}
|
||||
.breadcrumb ul li {
|
||||
@apply inline;
|
||||
}
|
||||
.breadcrumb ul li a {
|
||||
@apply capitalize opacity-70;
|
||||
}
|
||||
.breadcrumb ul li span {
|
||||
@apply opacity-70;
|
||||
}
|
||||
.breadcrumb ul li:not(:last-child) a {
|
||||
@apply hover:opacity-100;
|
||||
}
|
||||
</style>
|
Loading…
Add table
Add a link
Reference in a new issue