Error: A page will overwrite another page. Use distinct url values to resolve the conflict error with tag and category page

[officialrajdeepsingh]

I built a category and tag page and faced a conflict error with the tag and category page. On my website, I have more than 150 posts on it.

Error: A page will overwrite another page. Use distinct `url` values to resolve the conflict.
- page: /tag[49].tmpl.js
- previousPage: /tag[43].tmpl.js
- destination: /tag/npm-cli/index.html
    at Writer.savePage (https://deno.land/x/lume@v1.12.1/core/writer.ts:84:15)
    at async (https://deno.land/x/lume@v1.12.1/core/writer.ts:43:13)
    at async concurrent (https://deno.land/x/lume@v1.12.1/core/utils.ts:173:3)
    at async Writer.savePages (https://deno.land/x/lume@v1.12.1/core/writer.ts:40:5)
    at async Site.build (https://deno.land/x/lume@v1.12.1/core/site.ts:486:19)
    at async build (https://deno.land/x/lume@v1.12.1/cli/build.ts:36:3)
    at async Command.execute (https://deno.land/x/cliffy@v0.25.2/command/command.ts:1463:7)
    at async (https://deno.land/x/lume@v1.12.1/cli.ts:147:3)

I used search.tags() inbuilt function to genrate a tag

// tag.tmpl.js

export const layout = "layouts/tag.njk";

export default function* ({ search }) {

  for (const tag of search.tags()) {

    yield {
      url: `/tag/${tag}/`,
      title: `Tagged “${tag}”`,
      type:"tag",
      tag,
    };
  }
}

The tag page shows a specific category, myblog.com/tag/html

// tag.njk
---
layout: layouts/base.njk
title: Tags

---
<section class="section">
  <div class="container">
    <h1 class="title">Tags </h1>
    <div class="tags are-large">
      {% for page in search.pages("type=tag","tag") %}
        <a href="{{ page.data.url.trim().toLowerCase().split(' ').join("-") }}" class="tag is-link">{{ page.data.tag }} </a>
      {% endfor %}
    </div>
  </div>
</section>

To build a category page, I use the search.values("category") function to get all categories.

The categories page shows a list of all categories.

// categories.njk
---
layout: layouts/base.njk
title: Categories
---
<section class="section">

  <div class="container">

    <h1 class="title">Categories page</h1>

    <div class="tags are-large">

      {% for category in search.values("category") %}

        <a href="/category/{{ category | lower }}" class="tag is-link"> {{ category }} </a>
        
      {% endfor %}

    </div>

  </div>

</section>

---

The category page shows a specific category, myblog.com/category/html

// category.tmpl.js
export const layout = "layouts/category.njk";

export default function* (props) {

  console.log(props, ' props inside category ');

  const { search }= props

  for (const category of search.values("category") ) {
    yield {
      url: `/category/${category}/`,
      title: `Categoryed “${category}”`,
      type: "category",
      category,
    };
    
  }
}

I know my

[oscarotero]

Looks like you have two tags that outputs the same url, so they produce this error.
This check is done case insensitive, so /tags/NPM-cli/ and /tags/npm-cli/ are considered the same url, even if they are generated from two different tags. Probably you have the same tag with different cases.

[officialrajdeepsingh]

I recently solved it in my blog, but currently, I am working with 15 posts. If I am doing 150+ posts, it is tough to solve all tags. I find this behaviour is a bug. Because in my case, this error occurs due to two tags

1. lume does not recognise both /tags/Npm-cli/ and /tags/npm-cli/ tags are the same
2. The second in the other /tags/npm tags has space, and lume also considers a different tag.

[oscarotero]

Tags are not a special thing in Lume, just an array of values. If you're concerned about consistency, probably a good solution is a preprocessor to normalize the tags. For example:

site.preprocess([".md"], (page) => {
  let tags = page.data.tags;

  // Normalize tags
  tags = tags.map((tag) => tag.toLowerCase().trim());

  // Save the normalized tags 
  page.data.tags = tags;
});

[officialrajdeepsingh]

thanks @oscarotero