Merge pull request #182 from felix-berlin/feature/trailing-slash

Feature/trailing slash

demo/package.json

@@ -13,10 +13,10 @@
     "preinstall": "npx only-allow pnpm"
   },
   "dependencies": {
-    "@astrojs/mdx": "^2.0.0",
-    "astro": "^4.0.2"
+    "@astrojs/mdx": "^2.1.0",
+    "astro": "^4.2.6"
   },
   "devDependencies": {
-    "sass": "^1.69.5"
+    "sass": "^1.70.0"
   }
 }

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

@@ -113,7 +113,7 @@ const crumbsWithCustomAttributes = [
     />
 
     <h2>Example 6 - Base URL with Custom index and separator</h2>
-    <Breadcrumbs baseUrl="base">
+    <Breadcrumbs baseUrl="https://base.url">
       <!-- Add custom element for the first element (home icon?) -->
       <svg
         slot="index"
@@ -146,6 +146,16 @@ const crumbsWithCustomAttributes = [
         ><polyline points="9 18 15 12 9 6"></polyline></svg
       >
     </Breadcrumbs>
+
+    <h2>
+      Example 7 - With trailing slash
+    </h2>
+    <Breadcrumbs trailingSlash={true} />
+
+    <h2>
+      Example 7 - With trailing slash and baseUrl
+    </h2>
+    <Breadcrumbs trailingSlash={true} baseUrl="https://base.url" />
   </main>
 </Layout>
 <style lang="scss">

docs/package.json

@@ -10,13 +10,13 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.15.0",
-    "astro": "^4.0.2",
-    "astro-breadcrumbs": "^1.8.0",
-    "astro-matomo": "^1.4.0",
-    "sharp": "^0.33.0"
+    "@astrojs/starlight": "^0.17.0",
+    "astro": "^4.2.6",
+    "astro-breadcrumbs": "^1.8.1",
+    "astro-matomo": "^1.4.2",
+    "sharp": "^0.33.2"
   },
   "devDependencies": {
-    "sass": "^1.69.5"
+    "sass": "^1.70.0"
   }
 }

docs/src/content/docs/configuration/properties.mdx

@@ -33,7 +33,15 @@ import { Breadcrumbs } from "astro-breadcrumbs";
 
 **Default:** `c-breadcrumbs`
 
-BEM root.
+CSS BEM root class.
+
+:::caution
+If you use the optional SCSS file, make sure you set the same class name in you're SCSS config file. [$bem-root](/styling/scss-api/#bem-root) needs to be adjusted.
+:::
+
+:::danger
+If you use the optional CSS file, all styles will be broken. Please add your own CSS or use the SCSS styles with customized [$bem-root](/styling/scss-api/#bem-root) prop.
+:::
 
 **Usage:**
 
@@ -85,7 +93,11 @@ interface BreadcrumbItem {
 
 **Default:** `[]`
 
-This property expects an array of objects that describe the breadcrumbs "manually". There are two required key value pairs: `text: ''` and `href: ''`, every additional pair will add an attribute to this specific element. For example: `title: 'Part of the breadcrumb list'`, will add an title attribute. If set dynamic creation will be disabled, [`indexText`](#indextext) and [`baseUrl`](#baseurl) will have no affect.
+This property expects an array of objects that describe the breadcrumbs "manually". There are two required key value pairs: `text: ''` and `href: ''`, every additional pair will add an attribute to this specific element. For example: `title: 'Part of the breadcrumb list'`, will add an title attribute.
+
+:::note
+If set dynamic creation will be disabled, [`indexText`](#indextext) and [`baseUrl`](#baseurl) will have no affect.
+:::
 
 **Usage:**
 
@@ -144,7 +156,13 @@ const customCrumbs = [
 
 By default Astro-Breadcrumbs creates all links with relative urls. If you have other requirements you can use this property to customize the start of the url.
 
+:::note
+Make sure you pass the the URL without a trailing slash. Otherwise you get an console warning and the URLs will be fallback to relative.
+:::
+
+:::caution
 If you use custom [`crumbs`](#crumbs), [`baseUrl`](#baseurl) will be disabled.
+:::
 
 **Usage:**
 
@@ -218,3 +236,25 @@ import { Breadcrumbs } from "astro-breadcrumbs";
   }
 </script>
 ```
+
+## trailingSlash
+
+**Type:** `boolean`
+
+**Default:** `false`
+
+If set to `true` all links will have a trailing slash.
+
+**Usage:**
+
+```astro
+---
+import { Breadcrumbs } from "astro-breadcrumbs";
+---
+
+<Breadcrumbs trailingSlash={true} />
+```
+
+**Rendered Component:**
+
+<Breadcrumbs trailingSlash={true} />

docs/src/content/docs/styling/scss-api.mdx

@@ -13,7 +13,11 @@ In addition, a few variables set the initial value for the associated CSS variab
 
 **Type:** `string`
 
-Defines the basic BEM class. Attention, the class name must be the same as [mainBemClass](/en/properties#mainbemclass).
+Defines the basic BEM class.
+
+:::caution
+The class name must be the same as [mainBemClass](/configuration/properties/#mainbemclass).
+:::
 
 **Usage:**