Add twitter section on the Async API website #562
Comments
|
Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request. |
|
@derberg What are your views on this? Should I implement this? |
|
I love that idea! :) We can further expand this task (in one PR, or by followups) by adding a so-called "newsroom" section, which would consist of the latest blog posts (currently implemented), articles in another pages (cc @Barbanio), the latest tweets and the latest recordings on YT. What do you think about it? |
|
I really like the idea, and I love @magicmatatjahu's suggestion. I think that way all the information about it would be organized and localized. |
|
I agree and think that transforming the blog section to a newsroom section would be a good move! However, I am worried that if we do this it will seem quite bulky at the end of the homepage. Perhaps we can show most recent news in this section and then create a new What do you think? @derberg @magicmatatjahu @Barbanio @fmvilas |
|
@mcturco @derberg @magicmatatjahu @Barbanio @fmvilas Glad you guys like the idea 😁. If possible can you guys provide mockups so I can start working on it? |
|
new newsroom view, with short preview on landing page sounds good to me, we will be able to place there much more things, even "current" livestreams. |
|
This issue looks quite silent to me 🤔 😄. Although, the idea of @magicmatatjahu @mcturco is anyone working on this issue right now? I'm not seeing anyone here. I do have some designs to show up for this page. What's your take? |
|
@akshatnema Go for it! Just be sure in your design mock up that you are referencing the current website design (you may even want to reference the styles made in this PR since the website style is about to drastically change) that way we are reusing as many existing components as possible, but also don't be afraid to introduce new layouts/ideas in conjunction. You may even choose to start implementing the new design straight in the code (maybe mock up is a waste of time, up to you) just make sure if you do this that you coordinate with @ritik307 since they were initially interested in working on this issue. Let me know if you have any questions! 😄 |
|
I'm all for what Missy wrote :) |
@mcturco Yeah, I do have some. I will like to know what are the exact sections needed to show up in the newsroom. I'm planning to make a separate page for
Is anything else needed in this section that I forgot to mention? Or something that I added more than it is needed 😄? Do clear me out about these sections so that I can start making designs according to them. |
|
@akshatnema I think that we don't need the new I think that you should try to create some YAML or JSON where people will pass new news by PR, something like we render blog posts, based on md, but in this case will one JSON/YAML as list of links to news/articles :) |
|
@akshatnema I would like to join you on this issue. It would be great if we could split the work out, it will be faster that way. 🙂 |
Thank You very much 🙌 @magicmatatjahu for saving me from another confusion. I recently got out from one such in my other PR 😄. Fine, then making my job quite easy, the design is quite easy to implement. I will get back to Missy by making one such design to get a review from her.
Thanks, @ritik307 for joining in. So now, let's collaborate and make it something amazing on the website 🚀. What I am planning is to use Twitter and Youtube APIs to render recent data on the website. This will automate these sections and we don't have to make it manually. @magicmatatjahu, I recently saw that we do need Google OAuth for Youtube API as well, so looks like we do have to discuss the variables (as mentioned in PR #609) for further implementation on this issue. Regarding news, releases and recent blogs, yeah we do have to make a JSON file to implement it, where the recent news and other related information can easily be updated using PR. |
|
@akshatnema About envs, I wrote comment how we should handle that :) #609 (comment) |
|
@magicmatatjahu @ritik307 @mcturco Here's the link to my Figma design - https://www.figma.com/file/Xqluwz9HIZWLVBIGpwio7W/AsyncAPI?node-id=0%3A1 It may seem to you that the design is going a bit wide or made for a seperate page, but honestly, I tried my best to fit all the things in a single section only and didn't look much ugly at the same time. I'm looking for the suggestions from your side 🙂. |
|
@akshatnema The design looks good but the colour theme is off as per the theme used by the official async API website. Can you kindly look into that? 😊 |
@ritik307 If you see PR #534, made by @mcturco, she is going to change the theme and styling of the website very soon. So, I have made the section according to the latest theme. Also, I messaged you in Slack regarding this. Kindly do check there as well. |
|
@akshatnema It looks awesome 🚀 however:
WDYT? |
@magicmatatjahu I should say you are right in the motive you want to show, but let me tell you a brief on how Twitter embed will look. Do check out this link - https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview. If you see, if we make that twitter section in middle, the text size inside the embed (where we have no control) will become very much larger than the outside text size on the website. It may not look good for it. I analyzed the size of the embed and the properties it will show, I found that place perfect and of correct dimension for the embed. Coming to the Youtube section, I think we have to show the thumbnail and title of the video in correct dimensions so that it becomes readable to everyone. So, I found the middle section appropriate for it. But if you think, we should give more influence to Twitter, then I will change the design a little bit, making it to center.
Yepp, there is an option in API to distinguish between live videos and recorded ones. But it can't happen that we live stream that video on our website, because Youtube API only returns thumbnails and the information related to the videos. I recommend you to check the Youtube API here - https://developers.google.com/youtube/v3/docs/search/list. I may be wrong here somewhere. If you find any option of live streaming Youtube videos on the website, do tell me 🙂. |
Ok! Thanks for explanation. Let's wait for @mcturco feedback. But could we just change the order of these sections? Blog posts, twitter, YT?
I had in mind thumbnail of that live stream :) So it's ok for me. |
sorry for the inconvenience caused 🙁. I was unaware of the new designs. |
|
@akshatnema Hi! Do you mind if I copy your file and make some tweaks so that the UI matches the design system of the new website styles? |
@mcturco No problem at all. I thought of it before in adding this design to the website design file, but you can go with it. |
|
Okay! I have created this loom video so I can explain my idea for this section. Let me know what you guys think! Website - Newsroom Section Mockup - Watch Video Here is the link to the Figma file -> https://www.figma.com/file/vPO7Go2C0v609Xw2L8eWS8/?node-id=287%3A723 And here is a picture of my initial layout sketch for this idea:
|
|
@mcturco I completely understand your point regarding the mess I made in design 😄. Truly, you made the explanation very easy for all of us and made your point correctly understandable to us ✨. So Fine, I think we should go with your design. But I have a suggestion over here that since we are making these sections so much informative to users, we should ideally keep it somewhere in middle instead of making it in last, just before the footer. There will be no importance of the latest news, streams, and tweets section to be at the very last. Already we are elongating it much through these sections, we should make it somewhere in the middle by pushing the less important stuff at last. It's my suggestion up to how I see this section split into multiple components. Regarding your question about thumbnails of YouTube videos (in the loom video), it is already providing high-quality thumbnails that can be used in the component. I have checked it and have taken those images directly from API only 😃. Also, I see that you changed the format of the |
|
@mcturco Awesome design! I like that idea of carousel of blog posts. I wonder if we should make also carousel for YT videos, not display then vertically, but horizontal, like these blog posts and then increase number of latest videos up to 5, not 3. I also agree that we should change order of rendering part in main page, I think that we can render that newsroom after Also regarding this date |
|
@akshatnema @magicmatatjahu Yeah I agree with moving the section further up on the page. Under the community section I think is good!
Yeah good idea! I can see how that looks in a mock up, it would probably just show 2 at a time, the second one overlapping off the screen like in the first section |
|
Perhaps something like this: |
Thanks, I really forgot about that. Thanks for mentioning it. So, looks like we are done with the design. Anything more we need to discuss? If not, I and @ritik307 can start working on this by dividing the work and making separate PRs for this. |
|
@magicmatatjahu How would you recommend they start working on this since my PR has a lot of the styles needed and it isn't merged yet? |
|
We should wait for your @mcturco PR :) Hopefully we should merge it to Friday :) |
|
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 ❤️ |
Reason/Context
Please try answering few of those questions
To let our users check our latest releases and updates directly from the website
Provide better user experience
Description
Please try answering a few of those questions
A new section on the Async API homepage.
Most changes are restricted to the homepage. If broken it will be mostly this page.
react-twitter-embednpm package.The text was updated successfully, but these errors were encountered: