feat: created newsroom section

[akshatnema]

Description
This PR creates a newsroom section on the homepage of the website. Since various sections are being created, this PR will be in draft until the complete implementation of the new sections. Feedback//suggestions for the changes made in this PR are welcomed ☺️.

Design
Figma file of the implemented design is here.

Related issue(s)
Resolves #562

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	f86deb8
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/62dec4696c9e7f0008666b9d
😎 Deploy Preview	https://deploy-preview-749--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 settings.

[akshatnema]

Hey @magicmatatjahu 👋, I need a quick review of yours in the below comments made by me. Since this PR contains a lot of changes, I request you to keep an eye on it I make any mistakes or wrongly implement something.

[akshatnema]

/au

[magicmatatjahu]

@akshatnema Great work! However found some bugs:

• Button should be aligned to the left (you should see this break on the left). Also, when I hover the blog post item the bottom shadow isn't visible. Please try fix it by some padding-bottom. Also buttons should have cursor: pointer style on hover.

• We should try add some white shadow on the right of carousel. Truncated blog posts are not welcome. I also wonder if we should render blog posts to the end of the right border of the screen. Not render in a closed object but "let it out". I hope you understand me. This solution will be much more difficult so let's ask @mcturco what she thinks about it.

• on mobile view we should have centered that buttons + maybe they should be much more small.

[magicmatatjahu]

@akshatnema If you want, I can help you with articles and Twitter API.

[mcturco]

@akshatnema @magicmatatjahu Is there a way to fix the Netlify preview link so I can review the changes?

[akshatnema]

@mcturco I recently resolved the commits from the GitHub code editor and hence not able to test it properly. I will soon update the PR to correct the errors.

[akshatnema]

@mcturco You can now use the preview URL to preview the changes.

[akshatnema]

@akshatnema If you want, I can help you with articles and Twitter API.

Thanks @magicmatatjahu, if any help will be needed, I will sure ping you.

@derberg @magicmatatjahu what is your idea to handle the latest news section? Should there be a .asyncapi type file link in the repository that should handle all the latest news and announcements in the community or do you have a different plan?

[derberg]

Why not have it like https://github.com/asyncapi/website/blob/master/config/meetings.json

[magicmatatjahu]

@akshatnema As Łukasz wrote, it should be written in json. The element of article should have:

• name of publisher (I don't know if we should also render avatar like in blog posts)
• url to article
• title
• published date

I know that in figma mock we have only title and published date, but we can extend it.

[akshatnema]

@magicmatatjahu @derberg I understood your approach in making it like meetings.json and it will be updated using Github actions automatically on each run of workflow. But as Maciej mentioned that we will be rendering articles there, can you show an example of the article present in the website which needs to be shown there, so that I can make the components according to it.

[mcturco]

This looks awesome @akshatnema 🎉

I think the only thing that I'm not a fan of is the Press section on mobile. Can we convert that to a vertical slider instead of the overflow scroll on mobile only? Or maybe we can only show 3 at a time and have a button that says "Load more" and then 3 more show up every time you press the button?

Other than that small thing, I think it is good to go!

[akshatnema]

Can we convert that to a vertical slider instead of the overflow scroll on mobile only?

Yeah, I can understand that it's not usual according to mobile view. But if we do such an implementation, we're making the page long in mobile view and you can see (in the above messages) that we have plans to add some press sections on the page as well. So, what's in my view is to leave it with the present implementation as right now. It isn't looking ugly at all from my perspective in mobile view 😄. But I certainly want views regarding this from you all? @derberg @magicmatatjahu

[magicmatatjahu]

It an so long that I would have already accepted it and fix errors in another PRs :)

[mcturco]

@magicmatatjahu Sounds good, let's merge it!

[magicmatatjahu]

LGTM! 🚀 @derberg Do you wanna add something before merge?

[derberg]

one small change in workflow is needed, left a comment to @akshatnema in a thread

[akshatnema]

@magicmatatjahu Sorry, you again have to review and approve the changes.
@derberg Done with the changes required in the workflow file.

[derberg]

Amazing stuff @akshatnema 👏🏼

[akshatnema]

@derberg @magicmatatjahu also, as soon as you finished merging this PR, do take a look on PR #804. Since, we already fixed the Nodejs version error in v14.19.3, better let's shift the production to v14 and also come up with upgraded Tailwind versions so that we can use better classes and animations in newer version.

And a suggestion, if possible, move the repo to node v16 so that any new contributors don't face any error with package-lock.json file versions.

[magicmatatjahu]

@akshatnema We need use v16 of nodejs because swiper lib uses the ESM :)

[magicmatatjahu]

/rtm

[derberg]

fyi workflow that updates lists works #889

I also can confirm it doesn't fail if something happens with scripts. As I ran it first, and there was error with token to YouTube, but error was just logged, and workflow run was green

[akshatnema]

@derberg so even after the workflow gets into an error, it only logs the error and continues to make the PR with changes?

[derberg]

@akshatnema no, it does not create a PR as there is no actual change, as there was API call failure. If there would be some new meetings, it would work, only videos would not be refreshed.

Basically what I'm trying to say is that this workflow will never fail, will always be green even if tokens expire or stuff like that. We need to improve it, and I think the only solution is to use https://www.npmjs.com/package/@actions/core in devDependency and when appropriate, throw an error with core.setFailed. @akshatnema you can create an issue and mark as good first issue if you want.

anyway, works now, data is refreshed -> https://www.asyncapi.com/community/newsroom and I can only say: amazing work @akshatnema 👏🏼 🚀