Provide design and implement first simple case study UI

[derberg]

Reason/Context

We started collecting data -> https://github.com/asyncapi/website/pull/921/files
Now we just need to display it in the UI too.

Description

Top nav

Case studies it not docs only related and not community only related. Case studies are something in between, but kinda separate 😄

In other words, IMHO, we need new item in the top navigation, between Docs and Community

Landing page

• we need to have a place where we have some intro:
  • explanation what people can find
  • and how people can contribute to the list of case studies
• we need a filter where users can filter case studies by industry (this can be added later once we have more case studies)
• I personally do not like pages like https://kubernetes.io/case-studies/ that just link icons, I think we can do it better, like our TSC cards for example. So display cards with
  • company logo and some additional metadata info like, name, description and industry.
  • when I click the card, I should see more details

Details page about single case study

• example but the one I do not like, super hard to read -> https://kubernetes.io/case-studies/adidas/
• you will find a lot of answers about each section in this template with descriptions https://github.com/asyncapi/website/pull/921/files#diff-ef50e5b0659a50bec167363acfe10448ec9bcd7f93f5ae98c3d56c4c9a09b504
• you can preview existing adeo use case in https://codebeautify.org/yaml-editor-online to see it more structured - https://github.com/asyncapi/website/pull/921/files#diff-302cb646d6acc811c39f82cf0045abcad5d4dd223635c0520d37660df218b857
• detail page consists of the following main sections (names match the structure I linked above):
  • company (header name: Company Details): where we display all details about company, to pay credit to them that they shared data publicly
  • challenges (header name: Challenges): where we display challenges that company had
  • solution (header name: Solution): where we display what was solution for a company
  • technical (header name: Technical Details): - where we display all additional technical information about company
  • schemas (header name: Schemas Usage): - where we display all info about schemas
  • asyncapi (header name: AsyncAPI): - we display all info about AsyncAPI
  • additionalResources - it is not a section, just below the whole case study, we should render this as a kind of panel/box saying "Learn more".
• because there are so many sections, I believe we need table of contents, to navigate easily

Let me know if you need more clarification.
Later we need to figure more UI where we consume data from the case study files, for example UI where we display only data from asyncapi.fullExample, so in one UI somebody can see only examples. But that is something for later

[Mayaleeeee]

I would love to work on the UI part for the case study@derberg

[akshatnema]

@derberg I always wonder why you consider the website repository built in Typescript, although we have 98.5% of code written in Javascript 😆.

In other words, IMHO, we need new item in the top navigation, between Docs and Community

I just want to inform you that we already have a big nav with various options and menus specified in it, which makes the mobile navbar extremely long and scrollable. Do you have any other alternative? From my perspective, you can add an option of Case Studies in Docs menu, but specify the route of the case studies to be entirely different in the codebase.

[AceTheCreator]

@Mayaleeeee @derberg I'd recommend you take a look at Hasura's case studies UI for inspiration https://hasura.io/case-studies/.

Kindly share your thoughts :)

[Mayaleeeee]

This as really nice @AceTheCreator. Thank you🥰

However, I would love to have more examples for inspiration.

And here are the ones I have seen so far

https://knative.dev/docs/about/case-studies/puppet/

https://www.hashicorp.com/resources/making-movie-magic-with-hashicorp-nomad

[AceTheCreator]

This as really nice @AceTheCreator. Thank you🥰

However, I would love to have more examples for inspiration.

And here are the ones I have seen so far

https://knative.dev/docs/about/case-studies/puppet/

https://www.hashicorp.com/resources/making-movie-magic-with-hashicorp-nomad

Let me know if any help is needed :)

[derberg]

@derberg I always wonder why you consider the website repository built in Typescript, although we have 98.5% of code written in Javascript 😆.

@akshatnema ah, they're pushing this crap (TS) all over the place now, and it just got into my brain too deep 😆

I just want to inform you that we already have a big nav with various options and menus specified in it, which makes the mobile navbar extremely long and scrollable. Do you have any other alternative? From my perspective, you can add an option of Case Studies in Docs menu, but specify the route of the case studies to be entirely different in the codebase.

We can always get rid of Jobs as nobody is really using it 😄

I would love to work on the UI part for the case study@derberg

@Mayaleeeee go ahead ❤️ just remember to have it aligned with rest of the website, and the brand

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[sambhavgupta0705]

closing this as now we have our first ever case study on the website