ADR list sortable and link to respective pages.

[PGaigole]

• The ADR's listing should be sortable
• The ADR listing should link to the ADR page which shows all the attributes of the ADR and the content

[netlify]

✅ Deploy Preview for axelerant-engg-handbook ready!

Name	Link
🔨 Latest commit	ac3cd11
🔍 Latest deploy log	https://app.netlify.com/sites/axelerant-engg-handbook/deploys/66853eb301afc500087d79c6
😎 Deploy Preview	https://deploy-preview-191--axelerant-engg-handbook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[hussainweb]

@PGaigole, I see you are sorting by date and that's fine. But we could probably give some links to control the sorting (in a future issue).

More importantly here, let's show the metadata in the ADR view. Right now, only the markdown is rendered on the pages. Let's show the metadata from the ADR in a box in the beginning. I get that the markdown can duplicate some content and that is fine.

Edit: A "box" is just an idea. Feel free to design this in a way that makes sense.

[hussainweb]

@PGaigole, I see the categories filter. This is great and thank you for your work here. We can talk about design later. The metadata display point is still open. Let's discuss that in another PR. Or please look at the comments here and see if you want to do this together here.

If you want to do it here, I had another idea to show the metadata. On regular pages, we have the table of contents on the right. We can use that area to show the metadata first and then the table of contents. The problem there is that the right area is hidden on narrow screens and we may have to do something about that.

[hussainweb]

How do you feel about replacing this with the ternary operator?

[hussainweb]

Suggested change

	if (category === 'All' || categories.includes(category)) {
	card.style.display = 'block';
	} else {
	card.style.display = 'none';
	}
	});
	card.style.display = (category === 'All' || categories.includes(category)) ? 'block' : 'none';
	});

[hussainweb]

Suggested change

	if (buttonText === category) {
	button.classList.add('active');
	} else if (category === 'All' && buttonText === 'All') {
	button.classList.add('active');
	} else {
	button.classList.remove('active');
	}
	button.classList.remove('active');
	if (buttonText === category) {
	button.classList.add('active');
	}