Merge pull request #186 from felix-berlin/feature/truncated-on-mobile

Feature/truncated on mobile

.github/workflows/unit-test.yml

@@ -36,6 +36,8 @@ jobs:
         run: pnpm run test:unit:coverage
 
       - name: Codecov
-        uses: codecov/codecov-action@v3.1.5
+        uses: codecov/codecov-action@v4
         with:
-          directory: ./coverage
+          directory: ./tests/unit/coverage
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

demo/package.json

@@ -13,8 +13,8 @@
     "preinstall": "npx only-allow pnpm"
   },
   "dependencies": {
-    "@astrojs/mdx": "^2.1.0",
-    "astro": "^4.2.6"
+    "@astrojs/mdx": "^2.1.1",
+    "astro": "^4.3.0"
   },
   "devDependencies": {
     "sass": "^1.70.0"

demo/src/pages/de/category/astro/long-path/index.astro

@@ -0,0 +1,30 @@
+---
+import Layout from "../../../../../layouts/Layout.astro";
+import Breadcrumbs from "../../../../../../../src/Breadcrumbs.astro";
+---
+
+<Layout title="Welcome to Astro Breadcrumbs.">
+  <main>
+    <h1><span class="text-gradient">Astro</span> Breadcrumbs Examples</h1>
+
+    <h2>Example 1 - Custom separator</h2>
+    <div style="max-width: 500px; margin: 0 auto">
+      <Breadcrumbs indexText={"home"} truncated={true}>
+        <!-- Add icon or text here -->
+        <svg
+          slot="separator"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          ><polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+      </Breadcrumbs>
+    </div>
+  </main>
+</Layout>

docs/astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 import matomo from "astro-matomo";
+import starlightLinksValidator from "starlight-links-validator";
 
 // https://astro.build/config
 export default defineConfig({
@@ -50,6 +51,7 @@ export default defineConfig({
           ],
         },
       ],
+      plugins: [starlightLinksValidator()],
     }),
     matomo({
       enabled: import.meta.env.PROD,

docs/package.json

@@ -10,11 +10,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.17.0",
-    "astro": "^4.2.6",
+    "@astrojs/starlight": "^0.17.2",
+    "astro": "^4.3.0",
     "astro-breadcrumbs": "^1.9.0",
     "astro-matomo": "^1.4.2",
-    "sharp": "^0.33.2"
+    "sharp": "^0.33.2",
+    "starlight-links-validator": "^0.5.2"
   },
   "devDependencies": {
     "sass": "^1.70.0"

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

@@ -5,13 +5,13 @@ description: "Learn more about the properties of the Astro Breadcrumbs component
 
 import { Breadcrumbs } from "astro-breadcrumbs";
 
-## indexText
+## ariaLabel
 
 **Type:** `string`
 
-**Default:** `Home`
+**Default:** `breadcrumbs`
 
-Label of the first nav element.
+Controls the `aria-label` on the parent element (`<nav>`).
 
 **Usage:**
 
@@ -20,27 +20,27 @@ Label of the first nav element.
 import { Breadcrumbs } from "astro-breadcrumbs";
 ---
 
-<Breadcrumbs indexText="Home" />
+<Breadcrumbs ariaLabel="a structured list of pages" />
 ```
 
 **Rendered Component:**
 
-<Breadcrumbs indexText="Home" />
+<Breadcrumbs ariaLabel="a structured list of pages" />
 
-## mainBemClass
+## baseUrl
 
 **Type:** `string`
 
-**Default:** `c-breadcrumbs`
+**Default:** `undefined`
 
-CSS BEM root class.
+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.
 
-:::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.
+:::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.
 :::
 
-:::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.
+:::caution
+If you use custom [`crumbs`](#crumbs), [`baseUrl`](#baseurl) will be disabled.
 :::
 
 **Usage:**
@@ -50,34 +50,12 @@ If you use the optional CSS file, all styles will be broken. Please add your own
 import { Breadcrumbs } from "astro-breadcrumbs";
 ---
 
-<Breadcrumbs mainBemClass="o-bread-crumb" />
-```
-
-**Rendered Component:**
-
-<Breadcrumbs mainBemClass="o-bread-crumb" />
-
-## ariaLabel
-
-**Type:** `string`
-
-**Default:** `breadcrumbs`
-
-Controls the `aria-label` on the parent element (`<nav>`).
-
-**Usage:**
-
-```astro
----
-import { Breadcrumbs } from "astro-breadcrumbs";
----
-
-<Breadcrumbs ariaLabel="a structured list of pages" />
+<Breadcrumbs baseUrl="https://base.url/page" />
 ```
 
 **Rendered Component:**
 
-<Breadcrumbs ariaLabel="a structured list of pages" />
+<Breadcrumbs baseUrl="https://base.url/page" />
 
 ## crumbs
 
@@ -124,7 +102,6 @@ const customCrumbs = [
 ---
 
 <Breadcrumbs crumbs={customCrumbs} />
-
 ```
 
 **Rendered Component:**
@@ -148,20 +125,64 @@ const customCrumbs = [
   ]}
 />
 
-## baseUrl
+## ellipsisAriaLabel
 
 **Type:** `string`
 
-**Default:** `undefined`
+**Default:** `Show hidden navigation`
 
-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.
+`aria-label` of the ellipsis button (`.c-breadcrumbs__truncated-button`).
 
-:::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.
-:::
+**Usage:**
+
+```astro
+---
+import { Breadcrumbs } from "astro-breadcrumbs";
+---
+
+<Breadcrumbs ellipsisAriaLabel="a structured list of pages" />
+```
+
+**Rendered Component:**
+
+<Breadcrumbs ellipsisAriaLabel="Show nav" />
+
+## indexText
+
+**Type:** `string`
+
+**Default:** `Home`
+
+Label of the first nav element.
+
+**Usage:**
+
+```astro
+---
+import { Breadcrumbs } from "astro-breadcrumbs";
+---
+
+<Breadcrumbs indexText="Home" />
+```
+
+**Rendered Component:**
+
+<Breadcrumbs indexText="Home" />
+
+## mainBemClass
+
+**Type:** `string`
+
+**Default:** `c-breadcrumbs`
+
+CSS BEM root class.
 
 :::caution
-If you use custom [`crumbs`](#crumbs), [`baseUrl`](#baseurl) will be disabled.
+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](/styling/setup-scss-config/) with customized [$bem-root](/styling/scss-api/#bem-root) prop.
 :::
 
 **Usage:**
@@ -171,12 +192,12 @@ If you use custom [`crumbs`](#crumbs), [`baseUrl`](#baseurl) will be disabled.
 import { Breadcrumbs } from "astro-breadcrumbs";
 ---
 
-<Breadcrumbs baseUrl="https://base.url/page" />
+<Breadcrumbs mainBemClass="o-bread-crumb" />
 ```
 
 **Rendered Component:**
 
-<Breadcrumbs baseUrl="https://base.url/page" />
+<Breadcrumbs mainBemClass="o-bread-crumb" />
 
 ## schemaJsonScript
 
@@ -258,3 +279,44 @@ import { Breadcrumbs } from "astro-breadcrumbs";
 **Rendered Component:**
 
 <Breadcrumbs trailingSlash={true} />
+
+## truncated
+
+**Type:** `boolean`
+
+**Default:** `false`
+
+With the setting `true`, the breadcrumbs that no longer fit in a line are truncated and an ellipsis button is displayed.
+
+Only the first element and the last element are displayed, with the ellipsis button in between.
+
+A click on the ellipsis button shows all truncated elements.
+
+The calculation is carried out using ResizeObserver and is therefore responsive.
+
+The width of all elements is calculated together and compared with the available width. If the elements are larger than the available width, they are truncated.
+
+**Usage:**
+
+```astro
+---
+import { Breadcrumbs } from "astro-breadcrumbs";
+---
+
+<Breadcrumbs truncated={true} />
+```
+
+:::caution
+If you use the SCSS style file, you need to opt-in `$truncated: true` within the [SCSS Style Api](/styling/scss-api/#truncated). (This does not apply to the CSS variant.)
+:::
+
+```scss
+// astro-breadcrumbs-config.scss
+@use "astro-breadcrumbs/breadcrumbs.scss" with (
+  $truncated: true
+);
+```
+
+**Rendered Component:**
+
+<Breadcrumbs truncated={true} />