chore(blog): add asyncapi vscode preview goes web now available in your browser 🚀#4484
chore(blog): add asyncapi vscode preview goes web now available in your browser 🚀#4484Ruchip16 wants to merge 16 commits intoasyncapi:masterfrom
Conversation
Ruchip16
requested review from
Mayaleeeee,
TRohit20,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
sambhavgupta0705 and
thulieblack
as code owners
❌ Deploy Preview for asyncapi-website failed.Built without sensitive environment variables
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
📝 WalkthroughWalkthroughAdds a new blog post announcing that the AsyncAPI VS Code Preview extension is now web-compatible (usable in vscode.dev and github.dev), describing technical changes for browser compatibility, usage steps, a demo, accessibility note, and maintenance status. (No code or exported declarations changed.) Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4484 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 796 796
Branches 146 146
=========================================
Hits 796 796 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4484--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
next-env.d.ts(1 hunks)pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md
[uncategorized] ~20-~20: The official name of this software platform is spelled with a capital “H”.
Context: ...Open any GitHub repo in vscode.dev or github.dev, and you can instantly preview As...
(GITHUB)
[grammar] ~21-~21: There might be a mistake here.
Context: ...your browser and an internet connection. 🔄 **Works consistently across desktop a...
(QB_NEW_EN)
[grammar] ~22-~22: There might be a mistake here.
Context: ..., providing the same preview experience. ## What Changed Under the Hood? Making the...
(QB_NEW_EN)
[style] ~30-~30: Consider using “incompatible” to avoid wordiness.
Context: ...Removed EDAVisualizer* (unmaintained, not compatible with webmode) - **Updated VS Code depen...
(NOT_ABLE_PREMIUM)
[grammar] ~37-~37: There might be a mistake here.
Context: ...lone repos locally just to preview files 🚀 **Teams adopting AsyncAPI in cloud-fi...
(QB_NEW_EN)
[grammar] ~38-~38: There might be a mistake here.
Context: ...rkflows** - Work entirely in the browser 💡 New users experimenting without n...
(QB_NEW_EN)
[grammar] ~39-~39: There might be a mistake here.
Context: ...ing** without needing to install VS Code This is a huge usability improvement...
(QB_NEW_EN)
[grammar] ~48-~48: There might be a mistake here.
Context: ...ll render beautifully in your browser 🚀 ## See It in Action *[Video demo section -...
(QB_NEW_EN)
[style] ~74-~74: For conciseness, consider replacing this expression with an adverb.
Context: ...ity - No new major features are planned at the moment - Community contributions for bug fixes...
(AT_THE_MOMENT)
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md
Outdated
Show resolved
Hide resolved
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md
Outdated
Show resolved
Hide resolved
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md
Outdated
Show resolved
Hide resolved
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md
Outdated
Show resolved
Hide resolved
|
Ruchip16
changed the title
Ruchip16
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md (2)
30-30: Consider rewording for clarity.Replace "not compatible with webmode" with "incompatible with webmode" for more concise phrasing.
-- **Removed EDAVisualizer integration** (unmaintained, not compatible with webmode) +- **Removed EDAVisualizer integration** (unmaintained, incompatible with webmode)
71-71: Simplify temporal adverb.Replace "at the moment" with "currently" for more concise language.
-- No new major features are planned at the moment +- No new major features are planned currently
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
next-env.d.ts(1 hunks)pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- next-env.d.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: asyncapi-bot
PR: asyncapi/website#0
File: :0-0
Timestamp: 2025-02-18T12:07:42.211Z
Learning: The following PR commands are supported in the asyncapi/website repository:
- `/please-take-a-look` or `/ptal`: Requests attention from reviewers who haven't reviewed the PR
- `/ready-to-merge` or `/rtm`: Triggers automerge when all conditions are met
- `/do-not-merge` or `/dnm`: Blocks automerge even if all conditions are met
- `/autoupdate` or `/au`: Adds autoupdate label to keep PR in sync with target branch
- `/update` or `/u`: One-time update of PR with latest changes from target branch
Learnt from: anshgoyalevil
PR: asyncapi/website#3950
File: scripts/utils/check-locales.ts:122-129
Timestamp: 2025-04-20T16:05:16.482Z
Learning: In the AsyncAPI website project, Next.js throws errors at runtime when locale files are missing, making additional validation for missing files unnecessary in the check-locales script.
Learnt from: akshatnema
PR: asyncapi/website#3423
File: tests/index.test.js:2-7
Timestamp: 2025-01-18T08:44:43.614Z
Learning: In the AsyncAPI website project, JavaScript test files must include the .ts extension when importing TypeScript files (e.g., `require('../scripts/build-rss.ts')`). This is a project-specific requirement enforced by the linting rules and build setup, even though it differs from typical Node.js behavior.
Learnt from: akshatnema
PR: asyncapi/website#3423
File: tests/index.test.js:2-7
Timestamp: 2025-01-18T08:44:43.614Z
Learning: In the AsyncAPI website project, JavaScript test files must include the .ts extension when importing TypeScript files (e.g., `require('../scripts/build-rss.ts')`). This is enforced by the project's configuration which uses `moduleResolution: "bundler"` in tsconfig.json and TypeScript-aware ESLint plugins. The .ts extensions are required even though the files are imported using CommonJS require statements.
Learnt from: akshatnema
PR: asyncapi/website#3423
File: tests/index.test.js:2-7
Timestamp: 2025-01-18T08:44:43.614Z
Learning: In JavaScript test files within the AsyncAPI website project, TypeScript file imports must include the .ts extension to avoid lint errors, even though the files being imported are JavaScript files.
📚 Learning: 2025-06-03T06:48:09.304Z
Learnt from: iambami
PR: asyncapi/website#4111
File: markdown/blog/community-spotlight-aayush.md:3-3
Timestamp: 2025-06-03T06:48:09.304Z
Learning: For AsyncAPI community spotlight blog posts, the frontmatter date should reflect the actual publication date, not the month being highlighted in the spotlight. For example, a "May Community Spotlight" can be published in June with a June date in the frontmatter.
Applied to files:
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md
🪛 LanguageTool
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md
[uncategorized] ~20-~20: The official name of this software platform is spelled with a capital “H”.
Context: ...Open any GitHub repo in vscode.dev or github.dev, and you can instantly preview As...
(GITHUB)
[style] ~30-~30: Consider using “incompatible” to avoid wordiness.
Context: ...Visualizer integration** (unmaintained, not compatible with webmode) - **Updated VS Code depen...
(NOT_ABLE_PREMIUM)
[style] ~71-~71: For conciseness, consider replacing this expression with an adverb.
Context: ...ity - No new major features are planned at the moment - Community contributions for bug fixes...
(AT_THE_MOMENT)
🔇 Additional comments (3)
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md (3)
10-10: Verify author photo matches author name.The avatar filename
lpgornicki.webpdoes not match the author name "Ruchi Pakhle". Please confirm whether this is a copy-paste error or an intentional reference.
7-7: Verify cover image is appropriate for this post.The cover image path references a May 2021 photo (
/img/posts/may-2021-at-asyncapi/cover.webp) for an October 2025 feature announcement. Please confirm this is the intended cover or update it to one that better reflects the web compatibility milestone.
1-82: Blog post content is well-structured and informative. ✅The announcement clearly communicates the web compatibility milestone, explains the technical changes, and provides actionable guidance for users. The timestamp format and demo section have been corrected from previous feedback. Once the author metadata and cover image are verified, this post will be ready to publish.
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
next-env.d.ts(1 hunks)pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- next-env.d.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: asyncapi-bot
PR: asyncapi/website#0
File: :0-0
Timestamp: 2025-02-18T12:07:42.211Z
Learning: The following PR commands are supported in the asyncapi/website repository:
- `/please-take-a-look` or `/ptal`: Requests attention from reviewers who haven't reviewed the PR
- `/ready-to-merge` or `/rtm`: Triggers automerge when all conditions are met
- `/do-not-merge` or `/dnm`: Blocks automerge even if all conditions are met
- `/autoupdate` or `/au`: Adds autoupdate label to keep PR in sync with target branch
- `/update` or `/u`: One-time update of PR with latest changes from target branch
Learnt from: anshgoyalevil
PR: asyncapi/website#3950
File: scripts/utils/check-locales.ts:122-129
Timestamp: 2025-04-20T16:05:16.482Z
Learning: In the AsyncAPI website project, Next.js throws errors at runtime when locale files are missing, making additional validation for missing files unnecessary in the check-locales script.
Learnt from: akshatnema
PR: asyncapi/website#3423
File: tests/index.test.js:2-7
Timestamp: 2025-01-18T08:44:43.614Z
Learning: In the AsyncAPI website project, JavaScript test files must include the .ts extension when importing TypeScript files (e.g., `require('../scripts/build-rss.ts')`). This is a project-specific requirement enforced by the linting rules and build setup, even though it differs from typical Node.js behavior.
Learnt from: akshatnema
PR: asyncapi/website#3423
File: tests/index.test.js:2-7
Timestamp: 2025-01-18T08:44:43.614Z
Learning: In the AsyncAPI website project, JavaScript test files must include the .ts extension when importing TypeScript files (e.g., `require('../scripts/build-rss.ts')`). This is enforced by the project's configuration which uses `moduleResolution: "bundler"` in tsconfig.json and TypeScript-aware ESLint plugins. The .ts extensions are required even though the files are imported using CommonJS require statements.
Learnt from: akshatnema
PR: asyncapi/website#3423
File: tests/index.test.js:2-7
Timestamp: 2025-01-18T08:44:43.614Z
Learning: In JavaScript test files within the AsyncAPI website project, TypeScript file imports must include the .ts extension to avoid lint errors, even though the files being imported are JavaScript files.
📚 Learning: 2025-06-03T06:48:09.304Z
Learnt from: iambami
PR: asyncapi/website#4111
File: markdown/blog/community-spotlight-aayush.md:3-3
Timestamp: 2025-06-03T06:48:09.304Z
Learning: For AsyncAPI community spotlight blog posts, the frontmatter date should reflect the actual publication date, not the month being highlighted in the spotlight. For example, a "May Community Spotlight" can be published in June with a June date in the frontmatter.
Applied to files:
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md
🪛 LanguageTool
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md
[uncategorized] ~20-~20: The official name of this software platform is spelled with a capital “H”.
Context: ...Open any GitHub repo in vscode.dev or github.dev, and you can instantly preview As...
(GITHUB)
[uncategorized] ~79-~79: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...er to demonstrate AsyncAPI concepts - Open source contributions - Lower barrier for rev...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
🔇 Additional comments (2)
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md (2)
7-7: Verify cover image is appropriate for this blog post.Line 7 references
/img/posts/may-2021-at-asyncapi/cover.webp. This appears to be a May 2021 image but the blog post is from October 2025 and announces the web extension release. Please confirm this is the intended cover image or provide a new one that visually represents the web compatibility announcement.
7-12: Fix author metadata: photo and link do not match author.Line 10's avatar path (
lpgornicki.webp) and the byline/link on lines 11-12 do not correspond to the author "Ruchi Pakhle" stated on line 9. This appears to be copied from a previous blog post. Please provide the correct photo path and Twitter/social link for Ruchi Pakhle.⛔ Skipped due to learnings
Learnt from: Siddhant-Pragyan-Sinha PR: asyncapi/website#4074 File: markdown/blog/open-nest.md:11-12 Timestamp: 2025-04-28T01:13:59.084Z Learning: For AsyncAPI blog posts, author photo filenames don't necessarily need to match the author's official name, as some authors may use pen names or nicknames (e.g., Aishat Muibudeen using "maya_picture.webp" for her avatar).Learnt from: anshgoyalevil PR: asyncapi/website#3557 File: tests/fixtures/markdown/check-edit-links-data.js:3-11 Timestamp: 2025-01-19T04:51:41.255Z Learning: In the AsyncAPI website repository, the test data in `tests/fixtures/markdown/check-edit-links-data.js` intentionally includes inconsistent paths (with and without 'docs' prefix) to verify the script's ability to normalize and handle ambiguous path structures.Learnt from: bandantonio PR: asyncapi/website#3393 File: markdown/blog/2024-Q1-docs-report.md:10-12 Timestamp: 2024-11-13T20:34:18.998Z Learning: In the markdown files for the AsyncAPI website, avatar image paths should be referenced without the `public` prefix (e.g., use `/img/avatars/...` instead of `/public/img/avatars/...`).
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md
Outdated
Show resolved
Hide resolved
thulieblack
changed the title
thulieblack
left a comment
thulieblack
left a comment
There was a problem hiding this comment.
@Ruchip16 can you please update your front matter details its not consistent. Some details show Lukasz's and also the date format is not rendering to the website.
sure i will update the PR |
|
@bandantonio can you share your review |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
markdown/blog/vsasyncapi-preview-extension.md (2)
19-19: Consider brand capitalization for consistency.For consistency with brand naming conventions, consider "GitHub.dev" (capital H) when referring to the service by name, similar to how "VS Code" is capitalized throughout the post.
✏️ Suggested capitalization fix
-Not anymore! We've made the extension fully web-compatible, which means you can now open any GitHub repository in vscode.dev or github.dev and instantly preview AsyncAPI files right in your browser. No downloads, no local setup – just open and preview. +Not anymore! We've made the extension fully web-compatible, which means you can now open any GitHub repository in vscode.dev or GitHub.dev and instantly preview AsyncAPI files right in your browser. No downloads, no local setup – just open and preview.
43-43: Deprecated HTML attribute in iframe.The
frameborder="0"attribute is deprecated in HTML5. While it still works, modern practice is to use CSS for styling frames. However, since YouTube's embed code often includes this attribute and it doesn't affect functionality, this is a minor stylistic issue.🎨 Modern iframe markup
If you prefer to use modern HTML5 standards, you can remove the deprecated attribute and add styling via CSS if needed:
-<iframe width="560" height="315" src="https://www.youtube.com/embed/JcS1VRyYmhE?si=DlqqYs3PmJtROTvF" title="AsyncAPI VS Code Preview Web Demo - Browser Extension Walkthrough" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> +<iframe width="560" height="315" src="https://www.youtube.com/embed/JcS1VRyYmhE?si=DlqqYs3PmJtROTvF" title="AsyncAPI VS Code Preview Web Demo - Browser Extension Walkthrough" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="border: none;"></iframe>
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
markdown/blog/vsasyncapi-preview-extension.mdpublic/img/avatars/ruchip16.webppublic/img/posts/vs-asyncapi-preview/image.webp
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: asyncapi-bot
Repo: asyncapi/website PR: 0
File: :0-0
Timestamp: 2025-02-18T12:07:42.211Z
Learning: The following PR commands are supported in the asyncapi/website repository:
- `/please-take-a-look` or `/ptal`: Requests attention from reviewers who haven't reviewed the PR
- `/ready-to-merge` or `/rtm`: Triggers automerge when all conditions are met
- `/do-not-merge` or `/dnm`: Blocks automerge even if all conditions are met
- `/autoupdate` or `/au`: Adds autoupdate label to keep PR in sync with target branch
- `/update` or `/u`: One-time update of PR with latest changes from target branch
📚 Learning: 2024-10-09T17:35:36.557Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3265
File: tests/fixtures/toolsObjectData.js:51-52
Timestamp: 2024-10-09T17:35:36.557Z
Learning: When reviewing code in the 'asyncapi/website' repository, akshatnema prefers that I do not provide committable code suggestions.
Applied to files:
markdown/blog/vsasyncapi-preview-extension.md
📚 Learning: 2025-12-29T14:21:43.887Z
Learnt from: sammy200-ui
Repo: asyncapi/website PR: 4804
File: components/navigation/Filter.tsx:32-41
Timestamp: 2025-12-29T14:21:43.887Z
Learning: For the asyncapi/website repository, maintainer guidance is to use eslint-disable comments with explanatory text for cases where useEffect/useMemo dependencies are intentionally omitted by design.
Applied to files:
markdown/blog/vsasyncapi-preview-extension.md
🪛 LanguageTool
markdown/blog/vsasyncapi-preview-extension.md
[uncategorized] ~19-~19: The official name of this software platform is spelled with a capital “H”.
Context: ... any GitHub repository in vscode.dev or github.dev and instantly preview AsyncAPI file...
(GITHUB)
[style] ~59-~59: Consider using a different verb to strengthen your wording.
Context: ...om/slack-invite) and let us know if you find any issues or have suggestions for impr...
(FIND_ENCOUNTER)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: cypress-run
🔇 Additional comments (6)
markdown/blog/vsasyncapi-preview-extension.md (6)
3-3: Verify the publish date.The date is set to December 7, 2025, but this PR was created on October 16, 2025. Given the PR comments mention "date format not rendering," please confirm whether this future date is intentional (scheduled publish) or should be corrected to reflect the actual announcement date.
21-28: Technical details are accurate and well-explained.The technical changes section clearly documents the modifications required for web compatibility and aligns with the PR objectives.
30-34: Compelling benefits section.The explanation of use cases and value proposition is clear and effectively communicates the impact of this change.
45-45: Excellent accessibility consideration.Including a note that references the text-based instructions for those who cannot access the video is a great accessibility practice.
47-53: Clear communication about project status.The sections effectively communicate the broader impact of web compatibility and set appropriate expectations by declaring maintenance mode while keeping the door open for community contributions.
55-59: Links verified and accessible.Both vscode.dev (HTTP 200) and the AsyncAPI Slack invite (HTTP 302 redirect) are working correctly. The section provides clear, actionable instructions for users to try the extension.
|
hi @thulieblack updated the review comments can u please take a look, i am looking to merge this PR asap |
|
@thulieblack @bandantonio we'll appreciate another round of review on this article 🙏🏽 |
|
One last change required, then we should be good to go! |
donee! Could you please check now? |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@markdown/blog/vsasyncapi-preview-extension.md`:
- Line 19: The prose contains a lowercase brand mention "github.dev"; update the
sentence fragment that reads "open any GitHub repository in vscode.dev or
github.dev" to use the correct brand capitalization by changing "github.dev" to
"GitHub.dev" (leave other words unchanged) so the sentence reads "...in
vscode.dev or GitHub.dev and instantly preview AsyncAPI files...".
|
|
8 participants
Description
Related issue(s)
Fixes #4450
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.