felix-berlin / astro-breadcrumbs Goto Github PK

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency semantic-release to v24

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Describe the bug
I need to set a base in astro.config.mjs that contains a slash, like foo/bar.
This unfortunately is not handled correctly, as it generates both a "Home" and homepage-name link on the home page (same for deeper pages). The "Home" link also goes back one level too deep, i.e. it links to /foo.

To Reproduce
Set the base property in astro.config.mjs to foo/bar.

Expected behavior
The "Home" crumb links to foo/bar and there is not an additional link for the home page.

Can you add this feature back please?
My is a headless frontend for Drupal and Strapi.
I have basicly 2 baseurls for the breadcrums:
/strapi/en/about-us
/drupal/en/about-us

But both should only show About Us as the breadcrumb. With the remove of the baseUrl parameter this is not possible anymore. @felix-berlin

Originally posted by @DavithkbY in #187 (comment)

https://schema.org/BreadcrumbList - description of the markup. It helps for SEO.

It would be nice to have this markup as an option in your package.

Breadcrumbs without markup:

<ol>
  <li>
    <a href="https://example.com/dresses">Dresses</a>
  </li>
  <li>
    <a href="https://example.com/dresses/real">Real Dresses</a>
  </li>
</ol>

Breadcrumbs with Microdata markup:

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

Describe the bug
When modifying the base parameter, the breadcrumbs crumbles.

You should drop the baseUrl prop and use import.meta.env.BASE_URL instead ?

To Reproduce
Steps to reproduce the behavior:

1. npm run dev -- --base /astro/
2. Gives : Home > astro > my page when browsing http://localhost:4321/astro/my-page/
   Home is linked to http://localhost:4321/ (which gives an error of course).

Expected behavior
Home > my page when base is set to /astro and browsing http://localhost:4321/astro/my-page/
Home should be linked to http://localhost:4321/astro/

Additional context
I'm using 'trailingSlash': 'always' which report a warning :

Astro Breadcrumbs Base URL should not have a trailing slash. Falling back to relative URL.

I don't understand why a base URL should not have a trailing slash.

Thank you for your job 👍

After the CLI-Installation and the copy and pasting as described, no output is occuring. Does it need two additional lines in astro.config.mjs like this?

import breadcrumbs from "@astrojs/breadcrumbs"; 
...
 breadcrumbs()

Is it possible to put the Component into the Layout or does it have to be in the page? Can it handle paths generated with getStaticPaths() too?

Thanks a lot for the work!!

Hi! 👋

Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch [email protected] for the project I'm working on.

I was having an issue where if the URL for example is products/category1/123, I wanted the breadcrumbs to be as follows with sentence case enabled:

Products > Category1 > Product Name

But by default, I get:

Products > Category1 > 123

So I only wanted to change the lastItem text, so I added variable lastText to fix such a scenario

Here is the small fix that solved my problem:

diff --git a/node_modules/astro-breadcrumbs/src/Breadcrumbs.astro b/node_modules/astro-breadcrumbs/src/Breadcrumbs.astro
index bc494bc..622e140 100644
--- a/node_modules/astro-breadcrumbs/src/Breadcrumbs.astro
+++ b/node_modules/astro-breadcrumbs/src/Breadcrumbs.astro
@@ -13,6 +13,7 @@ export interface BreadcrumbsProps {
   ellipsisAriaLabel?: string;
   truncated?: boolean;
   linkTextFormat?: "lower" | "capitalized" | "sentence";
+  lastText?: string;
   customBaseUrl?: string;
   excludeCurrentPage?: boolean;
 }
@@ -32,6 +33,7 @@ const {
   ellipsisAriaLabel = "Show hidden navigation",
   truncated = false,
   linkTextFormat,
+  lastText,
   customBaseUrl,
   excludeCurrentPage = false,
 } = Astro.props as BreadcrumbsProps;
@@ -49,6 +51,7 @@ const parts = generateCrumbs({
   linkTextFormat,
   customBaseUrl,
   excludeCurrentPage,
+  lastText,
 });
 
 const isLastElement = (index: number, array: any[]) =>
diff --git a/node_modules/astro-breadcrumbs/src/lib/generateCrumbs.ts b/node_modules/astro-breadcrumbs/src/lib/generateCrumbs.ts
index 39384d2..0b97699 100644
--- a/node_modules/astro-breadcrumbs/src/lib/generateCrumbs.ts
+++ b/node_modules/astro-breadcrumbs/src/lib/generateCrumbs.ts
@@ -9,6 +9,7 @@ type GenerateCrumbs = {
   linkTextFormat: BreadcrumbsProps["linkTextFormat"];
   customBaseUrl: BreadcrumbsProps["customBaseUrl"];
   excludeCurrentPage: BreadcrumbsProps["excludeCurrentPage"];
+  lastText: BreadcrumbsProps["lastText"];
 };
 
 export const generateCrumbs = ({
@@ -19,6 +20,7 @@ export const generateCrumbs = ({
   linkTextFormat,
   customBaseUrl,
   excludeCurrentPage,
+  lastText,
 }: GenerateCrumbs) => {
   /**
    * If crumbs are passed, use them.
@@ -113,5 +115,9 @@ export const generateCrumbs = ({
     parts.pop();
   }
 
+  if (lastText) {
+    parts[parts.length - 1].text = lastText;
+  }
+
   return parts;
 };

This issue body was partially generated by patch-package.

I'm encountering an issue with the using astro-breadcrumbs with Astrowind template on my website. I'm using the astro-breadcrumbs integration to display breadcrumbs. However, after running the build command pnpm run build, the links in the breadcrumbs are having trailing slashes appended to them, despite having set the trailing slash option to "never." Additionally, I've included trailingSlash={false} in the Breadcrumb component for added assurance. It seems the problem only pertains to the links generated by the breadcrumbs. Can you suggest any potential solutions?

Thanks for this package!

The breadcrumbs now always show the current page as well, but in our case we usually display that page title as a header right below the breadcrumbs. So it looks a bit redundant.

It would be nice if there is a property to not display the last/current crumb.

Is your feature request related to a problem? Please describe.
I'd like the text of the links to be formatted without the "-" hyphen.

Describe the solution you'd like
You should be able to replace the hyphen with a space and decide which kind of formatted text you'd like.

Describe alternatives you've considered

export function unslugify(slug: string, {
    separator = "-",
    replaceWith = " ",
    format = "none",
} = {}): string | undefined {
    // Throw an error if the slug parameter is not a valid non-null string
    if (!slug || typeof slug !== "string") {
        throw new Error("Slug must be a non-null string");
    }

    // First remove extra separator
    slug = slug.replace(new RegExp(`[${separator}]+`, "g"), separator);

    // Split the slug on the separator,
    // replace the separator with the desired string then trim unecessary whitespace
    const unslugified = slug.split(separator).join(replaceWith).trim();

    switch (format) {
        case "none":
            return unslugified;

        case "lowercase":
            return unslugified.toLowerCase();

        case "uppercase":
            return unslugified.toUpperCase();

        case "capitalize":
            return unslugified.replace(/\w\S*/g, (txt) => {
                return txt.charAt(0).toUpperCase() + txt.substring(1).toLowerCase();
            });

        case "capitalize-first":
            return unslugified.charAt(0).toUpperCase() + unslugified.substring(1).toLowerCase();

        default:
            return unslugified
    }
}

Additional context
I'm no professional developer so you should check the code but it seems pretty straightforward.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

astro latest