feat: add table of contents in case study

[Shurtu-gal]

Description

• Refactored case study page's code to decrease code repetition.
• Added dynamic table of contents.

Related issue(s)
Fixes #1502 #1505

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	7d3565c
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/6582f31a4d992a00087c5f7d
😎 Deploy Preview	https://deploy-preview-1673--asyncapi-website.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.

[Shurtu-gal]

@derberg I have made the required changes.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	21
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🔴 PWA	30

Lighthouse ran on https://deploy-preview-1673--asyncapi-website.netlify.app/

[akshatnema]

@Shurtu-gal When clicking on any of the TOC of the webpage, it doesn't get bold. Kindly look into it.

[Shurtu-gal]

@Shurtu-gal When clicking on any of the TOC of the webpage, it doesn't get bold. Kindly look into it.

@akshatnema Done.

[derberg]

Perfect ❤️

[derberg]

@akshatnema please approve

[akshatnema]

Case study webpage becomes highly unresponsive in mobile view. Kindly correct it.

[Shurtu-gal]

Case study webpage becomes highly unresponsive in mobile view. Kindly correct it.

There was no problem from my end. Can you tell the specific screen size for this?

[akshatnema]

@Shurtu-gal This is the mobile view of the webpage and this error is on every mobile screen view.

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	27
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-1673--asyncapi-website.netlify.app/

[Shurtu-gal]

@Mayaleeeee I have made the required changes. I am sorry that this took so much time 😢.

[Mayaleeeee]

@Mayaleeeee I have made the required changes. I am sorry that this took so much time 😢.

No worries, @Shurtu-gal.

So here are my reviews:

1. The chevron-down icon you used is supposed to be on the right side and given enough spacing because it's too close to the text. Please check the navigation bar texts with that icon to see how it's positioned and done.

2. That's not the right colour to use. Please use hex code #242929, which is Grey-500.
   

[Shurtu-gal]

@Mayaleeeee I have made the required changes. I am sorry that this took so much time 😢.

No worries, @Shurtu-gal.

So here are my reviews:

1. The chevron-down icon you used is supposed to be on the right side and given enough spacing because it's too close to the text. Please check the navigation bar texts with that icon to see how it's positioned and done.
2. That's not the right colour to use. Please use hex code #242929, which is Grey-500.

@Mayaleeeee The requested changes are done.

[Mayaleeeee]

@Mayaleeeee I have made the required changes. I am sorry that this took so much time 😢.

No worries, @Shurtu-gal.
So here are my reviews:

1. The chevron-down icon you used is supposed to be on the right side and given enough spacing because it's too close to the text. Please check the navigation bar texts with that icon to see how it's positioned and done.
2. That's not the right colour to use. Please use hex code #242929, which is Grey-500.

@Mayaleeeee The requested changes are done.

Looks good. However, I noticed that the active color (black) does not remain visible on "More details about AsyncAPI" until I scroll down to "Schema". Please update this to ensure it remains visible. @Shurtu-gal

[Shurtu-gal]

@Mayaleeeee Done now the parent remains active until another nav item at the same level doesn't pass through the viewport.

[akshatnema]

Hey @Shurtu-gal , I do have a feature issue here 😅. As we scroll down, the menus should get expanded and closed automatically. But don't worry for it in this PR. We can target this feature in another PR or issue. LGTM ✔️

[akshatnema]

@Mayaleeeee your review required!!!!

[Shurtu-gal]

As we scroll down, the menus should get expanded and closed automatically.

I will try to resolve this too and open a PR as soon as possible.

[derberg]

imho we can merge, Maya had enough time to do review. If there are some issues, we can always follow up later

[akshatnema]

imho we can merge, Maya had enough time to do review. If there are some issues, we can always follow up later

@derberg, @Mayaleeeee has requested changes on this PR. She has to approve it then. Should I bypass the branch protections to merge the PR?

[Mayaleeeee]

imho we can merge, Maya had enough time to do review. If there are some issues, we can always follow up later

@derberg, @Mayaleeeee has requested changes on this PR. She has to approve it then. Should I bypass the branch protections to merge the PR?

Yes, please.
I'm viewing on mobile and I can't really see anything unless I view on my laptop.

If I see any changes that needs to be made from the laptop view, I'll update this comment.

[akshatnema]

@Mayaleeeee Can you please approve the PR, since you requested changes before?