Modelina website

[jonaslagoni]

Reason/Context

As #636 focuses on the playground for Modelina, we need to also take a look at how we present Modelina as a whole. This probably means separating https://www.asyncapi.com/tools/modelina into it's own website.

This means that we will be able to show documentation, examples, playground, and roadmap for Modelina in one platform.

Documentation

It is important that everything flows through GitHub, this means that the documentation shown on the website should directly be taken from the docs in https:/asyncapi/modelina/tree/master/docs. This means that we need to figure out how we can render markdown files (dynamically, cause we don't want to manually update the website once changes are made).

Examples

Examples serve as a way to not only test that user can always do the specifics, but also give the user an easy way to see how and why one should use a specific feature. Therefore we need to find a way to dynamically show the different examples in the repository on the website in a way that improves user experience.

Maybe even with a Try with Playground button 🤔

Playground

While the playground gets improved by somebody else, we need to make it flow nicely between docs/examples and the playground.

Roadmap

Same as AsyncAPI as a whole as a vision, modelina should too, and explicitly show what and why we are pushing certain areas forward. Of course, this vision and roadmap are dynamic as community affects what is and should be focused on, but this gives us a way to display it publically 🙂

[Samridhi-98]

@jonaslagoni I really like the issue and would like to contribute to it. But before going ahead I have a query, which frontend framework are we going to use for its implementation?

[jonaslagoni]

@jonaslagoni I really like the issue and would like to contribute to it. But before going ahead I have a query, which frontend framework are we going to use for its implementation?

Depends on what fits the use-case best I would say. Any preference?

[Samridhi-98]

@jonaslagoni I really like the issue and would like to contribute to it. But before going ahead I have a query, which frontend framework are we going to use for its implementation?

Depends on what fits the use-case best I would say. Any preference?

I would like to go with Nextjs mostly because of server-side rendering and better rendering features.

[Samridhi-98]

I would like to work on this issue as part of the Mentorship program. 😊

[mcturco]

@jonaslagoni can we also add the "🎨 design" label to this issue? 🙏 It will help me create a list of issues that need a design contributor

[iipranavii]

I am interested in working on this Project as a UX UI designer!

[ayushpaharia]

Hello I'm interested in taking on this as a project as part of the Mentorship program.
Can I be pointed to some resources I get started with?
I'm a Frontend engineer and I also dabble in UI|UX design.

[iipranavii]

I have a Basic Wireframe in Mind
Would like to know more about the use case to create an elaborate design
@jonaslagoni @mcturco

[mcturco]

Hello I'm interested in taking on this as a project as part of the Mentorship program.
Can I be pointed to some resources I get started with?
I'm a Frontend engineer and I also dabble in UI|UX design.

Hi @ayushpaharia! Thank you for expressing your interest. I think this issue is small enough for one designer and one developer. I believe we have @iipranavii covered on the design side as they asked first, and looks like @Samridhi-98 would cover the development side. If @Samridhi-98 is no longer interested, I would say go for it! But best to check with them first 😄

👏 @iipranavii I am loving this layout direction so far!! 😍 We have a logo for Modelina in branded tools that I am working on merging into the @asyncapi/brand repo, you can download the logo files from my forked repo here: https:/mcturco/brand/tree/brand-guidelines/logos/tooling/modelina and usage documentation is here: https:/mcturco/brand/tree/brand-guidelines/brand-guidelines/branded-tools#modelina-logo-light

Keep going!! 🚀

[iipranavii]

I am loving this layout direction so far!! 😍 We have a logo for Modelina in branded tools that I am working on merging into the @asyncapi/brand repo, you can download the logo files from my forked repo here:

Awesome! I'd start designing some lofi frames, and some ideas that I have in mind for the flow for the home page, and for the documentation design.

Would also like to sync with @mcturco and @Samridhi-98 to ideate and work on a little timeline for the website!

[iipranavii]

Hey there, I have a mid-fi mockup in the works, would love to get feedback
@mcturco @Samridhi-98 @jonaslagoni

--

[Samridhi-98]

Hey there, I have a mid-fi mockup in the works, would love to get feedback @mcturco @Samridhi-98 @jonaslagoni

--

Looks good, nice work @iipranavii 😁

[jonaslagoni]

I love this 🤩 Great mockup @iipranavii 🔥

[mcturco]

This is looking great, @iipranavii! I would try to use the Modelina blue color as the accent/button color and use that as a base to create more shades to make up the color palette for this website. You can pair that with the shades of gray that are listed in the brand guidelines as well! So maybe refrain from using that yellow color, just a thought. But eager to see more! 😍

[iipranavii]

This is looking great, @iipranavii! I would try to use the Modelina blue color as the accent/button color and use that as a base to create more shades to make up the color palette for this website. You can pair that with the shades of gray that are listed in the brand guidelines as well! So maybe refrain from using that yellow color, just a thought. But eager to see more! 😍

Thank you for the feedback @mcturco, I agree with you, and I did change the button color that day itself, (even I didn't like it as much either)
I will be following the brand guidelines and creating a shade card for the modelina colors!
Will update soon with further sections of the website too!

[imabp]

This is so nice. I really liked the colors.
Thanks @iipranavii
I feel @mcturco , we got the directions for choosing our color scheme from this.

[imabp]

I still, feel something missing about the editor there, can we check on that, may be a box-shadow, or a border will make it look more appealing.
cc: @iipranavii

[iipranavii]

I still, feel something missing about the editor there, can we check on that, may be a box-shadow, or a border will make it look more appealing. cc: @iipranavii

I get what you mean, I am working on colors atm, for backgrounds too, we can do a border, but the main problem is the contrast, so I'll try to fix it with some tweaks in the bg colors!

[jonaslagoni]

As this issue was not chosen as part of the AsyncAPI mentoring program, everyone is welcome to work on this, and if you want mentoring in any way just ping me 🙂

@iipranavii do you still want to work on this?

[iipranavii]

Hey @jonaslagoni, I am really sorry for the sabbatical, I was going through some personal stuff, just came back last week, will resume work on modelina soon!
(always interested in design :D)

[samay-v]

Hey @jonaslagoni If there is still interest in taking this issue up I would love to contribute (design and development)

[jonaslagoni]

Hey @jonaslagoni If there is still interest in taking this issue up I would love to contribute (design and development)

Absolutely!

Let me know if you have any questions 👍

You can target the next branch and create a website directory to store all the files in 🙂

[samay-v]

@jonaslagoni Great! I'd like to take a jab at the design again, starting with a small sitemap and then a prototype that I can share here. Just to make sure i don't iterate in code.
What kind of timeline are you thinking for this?

Also, how similar are we hoping to keep it to the asyncapi.com, both codebase and design?

[jonaslagoni]

What kind of timeline are you thinking for this?

That is entirely you that sets that as a limit :) I would argue to start with a minimum viable product, maybe just a one-pager or something small. So we make small iterative changes and you would be able to see it slowly take form and continuously release the website as it progresses 💪

Also, how similar are we hoping to keep it to the asyncapi.com, both codebase and design?

Again, this is something you set, I have no preference, you would be the driver and code owner of it so do as you see fit 🙂 If you want feedback as you go that would, of course, be preferred and encouraged!

Just take into account that all our website projects up to date are React, so contributing and working on that stack would make it easier for others to contribute 🙂 So definitely something to keep in mind.

[samay-v]

@jonaslagoni here's what I am thinking wrt the basic structure for the landing page. What are your thoughts?

Also I'll be going with a NextJs+tailwind SSG hosted on Netlify as well. A few new things for me there but it's worth keeping the stack same.

[jonaslagoni]

Sounds like a plan, look great 👍 Keep on it!

[samay-v]

Super, in the next few weeks I'll iterate on a high fidelity prototype while I brush up on nextJs and Tailwind.

Do you mind assigning this issue to me @jonaslagoni ?

[jonaslagoni]

Do you mind assigning this issue to me @jonaslagoni ?

We don't assign issues, it's all about creating the PR 🙂

[jonaslagoni]

@samay-v let me know if you need anything from me, or is stuck on something 🙂

[samay-v]

@jonaslagoni im good for now. Slow but steady.
Considered 11ty to be able to skip the react. But it'll be better if I get up to speed and build it on nextJs

[jonaslagoni]

@samay-v do you want me to push a simple next.js app to Modelina for you to slowly progress with that automatically deploys to a host? 🙂

[sambhavgupta0705]

Hey @jonaslagoni I would like to contribute to this issue.

[jonaslagoni]

@sambhavgupta0705 we have a small website setup here: #1117 it will likely be the starting point for further improvements 🙂 Feel free to find ways to improve it. I will create a bunch of issue once its merged as well.

[sambhavgupta0705]

Ok @jonaslagoni ,will surely contribute to this one.
Just want to know where can I find preview of this PR.