Merge pull request #187 from felix-berlin/185-wrong-behavior-when-usi…

…ng-a-base-url-different-from

refactor: crumb generation

README.md

@@ -10,6 +10,7 @@
 ![GitHub file size in bytes](https://img.shields.io/github/size/felix-berlin/astro-breadcrumbs/src/Breadcrumbs.astro?label=component%20size&logo=astro&style=flat-square)
 ![GitHub file size in bytes](https://img.shields.io/github/size/felix-berlin/astro-breadcrumbs/src/breadcrumbs.css?label=CSS%20Size&logo=CSS3&style=flat-square)
 ![GitHub file size in bytes](https://img.shields.io/github/size/felix-berlin/astro-breadcrumbs/src/breadcrumbs.scss?label=SCSS%20Size&logo=SASS&style=flat-square)
+![GitHub file size in bytes](https://img.shields.io/github/size/felix-berlin/astro-breadcrumbs/src/lib/truncated.ts?label=Client%20JS%20size&logo=JS&style=flat-square)
 ![Dependent repos (via libraries.io)](https://img.shields.io/librariesio/dependent-repos/npm/astro-breadcrumbs?style=flat-square)
 
 Well configurable breadcrumb component for [Astro](https://astro.build/).

demo/astro.config.mjs

@@ -1,8 +1,10 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 
 import mdx from "@astrojs/mdx";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [mdx()]
-});
+  base: "/astro-breadcrumbs",
+  trailingSlash: "always",
+  integrations: [mdx()],
+});

demo/src/pages/en/category/astro/one.astro

@@ -0,0 +1,20 @@
+---
+import Layout from "../../../../layouts/Layout.astro";
+import Breadcrumbs from "../../../../../../src/Breadcrumbs.astro";
+---
+
+<Layout title="Welcome to Astro Breadcrumbs.">
+  <main>
+    <h2>
+      Example 7 - With trailing slash
+      <Breadcrumbs />
+    </h2>
+  </main>
+</Layout>
+<style>
+  main {
+    margin: auto;
+    padding: 1em;
+    max-width: 60ch;
+  }
+</style>

demo/src/pages/index.astro

@@ -1,71 +1,78 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
+import Breadcrumbs from "../../../src/Breadcrumbs.astro";
 ---
 
 <Layout title="Welcome to Astro Breadcrumbs.">
-	<main>
-		<h1>Welcome to <span class="text-gradient">Astro</span> Breadcrumbs</h1>
-		<p class="instructions">
-			Check out the <code>src/pages/en/category/astro/page.astro</code> directory
-			to see the code example.<br />
-		</p>
-		<ul role="list" class="link-card-grid">
-			<Card
-				href="/en/category/astro/page"
-				title="Examples"
-				body="Explore how to use Astro Breadcrumbs."
-			/>
-			<Card
-				href="https://github.com/felix-berlin/astro-breadcrumbs/"
-				title="Github"
-				body="Astro Breadcrumbs Github Page"
-			/>
-		</ul>
-	</main>
+  <main>
+    <h1>Welcome to <span class="text-gradient">Astro</span> Breadcrumbs</h1>
+    <Breadcrumbs />
+    <p class="instructions">
+      Check out the <code>src/pages/en/category/astro/page.astro</code> directory
+      to see the code example.<br />
+    </p>
+    <ul role="list" class="link-card-grid">
+      <Card
+        href="/en/category/astro/page"
+        title="Examples"
+        body="Explore how to use Astro Breadcrumbs."
+      />
+      <Card
+        href="/astro-breadcrumbs/en/category/astro/page"
+        title="Examples using base url"
+        body="Explore how to use Astro Breadcrumbs."
+      />
+      <Card
+        href="https://github.com/felix-berlin/astro-breadcrumbs/"
+        title="Github"
+        body="Astro Breadcrumbs Github Page"
+      />
+    </ul>
+  </main>
 </Layout>
 
 <style>
-	main {
-		margin: auto;
-		padding: 1.5rem;
-		max-width: 60ch;
-	}
-	h1 {
-		font-size: 3rem;
-		font-weight: 800;
-		margin: 0;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		line-height: 1.6;
-		margin: 1rem 0;
-		border: 1px solid rgba(var(--accent), 25%);
-		background-color: white;
-		padding: 1rem;
-		border-radius: 0.4rem;
-	}
-	.instructions code {
-		font-size: 0.875em;
-		font-weight: bold;
-		background: rgba(var(--accent), 12%);
-		color: rgb(var(--accent));
-		border-radius: 4px;
-		padding: 0.3em 0.45em;
-	}
-	.instructions strong {
-		color: rgb(var(--accent));
-	}
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 1rem;
-		padding: 0;
-	}
+  main {
+    margin: auto;
+    padding: 1.5rem;
+    max-width: 60ch;
+  }
+  h1 {
+    font-size: 3rem;
+    font-weight: 800;
+    margin: 0;
+  }
+  .text-gradient {
+    background-image: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 400%;
+    background-position: 0%;
+  }
+  .instructions {
+    line-height: 1.6;
+    margin: 1rem 0;
+    border: 1px solid rgba(var(--accent), 25%);
+    background-color: white;
+    padding: 1rem;
+    border-radius: 0.4rem;
+  }
+  .instructions code {
+    font-size: 0.875em;
+    font-weight: bold;
+    background: rgba(var(--accent), 12%);
+    color: rgb(var(--accent));
+    border-radius: 4px;
+    padding: 0.3em 0.45em;
+  }
+  .instructions strong {
+    color: rgb(var(--accent));
+  }
+  .link-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+    gap: 1rem;
+    padding: 0;
+  }
 </style>

src/Breadcrumbs.astro

@@ -8,8 +8,6 @@ export interface BreadcrumbsProps {
   ariaLabel?: string;
   crumbs?: Array<BreadcrumbItem>;
   schemaJsonScript?: boolean;
-  baseUrl?: string;
-  trailingSlash?: boolean;
   ellipsisAriaLabel?: string;
   truncated?: boolean;
 }
@@ -26,25 +24,21 @@ const {
   ariaLabel = "breadcrumbs",
   crumbs = [],
   schemaJsonScript = true,
-  baseUrl,
-  trailingSlash = false,
   ellipsisAriaLabel = "Show hidden navigation",
   truncated = false,
 } = Astro.props as BreadcrumbsProps;
 
-const hasBaseUrl = !!baseUrl?.length;
 const paths = Astro.url.pathname.split("/").filter((crumb: any) => crumb);
+const hasTrailingSlash = Astro.url.pathname.endsWith("/");
 const pathLength = paths?.length;
 const UUID = crypto.randomUUID();
 
-const parts = generateCrumbs(
-  baseUrl,
+const parts = generateCrumbs({
   crumbs,
   paths,
-  hasBaseUrl,
-  trailingSlash,
   indexText,
-);
+  hasTrailingSlash,
+});
 ---
 
 <astro-breadcrumbs