feat(sitemap): add Uli sitemap page and layout (#830)

[Preetiaarya]

Summary

This PR adds a dedicated sitemap page for the Uli website, similar to the reference implementation on the Tattle site.

Changes

• Implemented Sitemap layout component for rendering sitemap content.
• Created a new /sitemap page.
• Structured the sitemap tree with clear parent-child hierarchy.
• Improved readability with aligned content, centered heading, and unfilled child bullets.
• Added a link to the sitemap in the Footer.

Reference

Based on the requirement in #830.
Tattle’s sitemap was used as a reference: https://tattle.co.in/sitemap/

This sitemap provides contributors and users a clear overview of the Uli website’s structure, improving navigation and discoverability.

http://localhost:8000/sitemap/

[Preetiaarya]

Hello @maanasb01,
I have created a PR for the Uli sitemap page. Please review it and share your feedback.
Thanks,

[maanasb01]

Hey @Preetiaarya, I have reviewed the changes. A few suggestions:

• Can you change the name and the filename of the page to just "Sitemap" instead of Uli Sitemap?
• The padding of the content is very small. Compared to the contents of the Navbar that is in the center, the contents of the body are much wider. You would just need to wrap the contents in the Box with some margin. You can take a reference from any of the similar JSX pages inside the pages directory, ex, "check-text", "an-offer-one-cant-refuse", etc.
• In the tree building logic, for each path, you are breaking it into parts, and for each part, you are creating a node. This is working currently, but it could cause a bug if a sub-path doesn't have a page.
  • For example, if you create a folder "Test" and inside it you create another folder "Test1", and inside that you create a page "abc.mdx".
  • Here, the routes "/test" and "test/test1" don't have any pages, but in the sitemap, they will be rendered as a route.
    

[maanasb01]

Hey @Preetiaarya, after the new changes, this looks good. A few suggestions:

• As mentioned in the issue, can you please remove all the nested pages from the Blog inside the sitemap? We only need to display "Blog" as an entry in the sitemap, not all the blogs themselves.
• I think we don't need the pruneEmpty function that you have implemented. This is primarily because the GraphQL query that you have written only returns the pages. In case of any empty directories, the query does not return them; therefore, we don't have to check for the empty directories.
• Can you format the text that is getting rendered? Currently, the routes like "abc-efg" are getting rendered. Instead, we should render the page name in normal format, like "Abc Efg". In the Tattle website, we have implemented a function generateDisplayName to format the text. You can directly use that function here as well. Link: https://github.com/tattle-made/website/blob/master/src/components/default-sitemap-layout.js
• Some pages that are not relevant, like 404.html, are still visible. Can you remove them? You don't have to change the tree logic for this. My suggestion is that you can create an array of the pages that should be ignored, and while rendering, you can just check if a given page is in that ignored array or not. We have done a similar thing for the tattle website's sitemap: https://github.com/tattle-made/website/blob/master/src/components/default-sitemap-layout.js. This is just a suggestion, please feel free to implement it anyway you want.

[maanasb01]

Hey @Preetiaarya, the changes look good! I am merging them. Thanks!