chore(blog): add asyncapi vscode preview goes web now available in your browser 🚀 #4484
Conversation
Ruchip16
requested review from
Mayaleeeee,
TRohit20,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
sambhavgupta0705 and
thulieblack
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
![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.
WalkthroughAdds a Next.js TypeScript declaration file ( Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 780 780
Branches 144 144
=========================================
Hits 780 780 ☔ 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/...`).
| See the AsyncAPI VS Code Preview running in web mode below: | ||
|
|
||
| [](https://docs.google.com/videos/d/1a9raPb68NdEjj6qExkp81CBQicLPwqYg3V9WeG_P1lg/edit?usp=sharing "Click to watch demo") |
There was a problem hiding this comment.
Replace Google Drive video links with accessible demo format.
The video demo section uses Google Drive sharing URLs that are not suitable for direct embedding or browser preview. Readers will be redirected away from the blog to external video services rather than seeing the demo inline. Please replace with:
- An embedded video iframe if hosting on YouTube, Vimeo, or similar
- A linked thumbnail + caption describing the demo steps
- Or remove the section if video is not yet ready
🤖 Prompt for AI Agents
In
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md
around lines 52 to 54, the demo uses Google Drive viewing URLs that cannot be
embedded and force readers offsite; replace this with an accessible demo
solution by either embedding a proper iframe from YouTube/Vimeo (if the video is
hosted there), or by replacing the current markdown link with a linked thumbnail
image plus a short caption summarizing the demo steps, or remove the block if
the video isn’t ready—ensure the new markup uses an embeddable source or a
local/static thumbnail and includes alt text and a descriptive caption.
| We're excited to bring AsyncAPI Preview into the browser, making it even easier for developers to adopt and explore AsyncAPI. This web compatibility opens up new possibilities for: | ||
|
|
||
| - **Educational content** - Easier to demonstrate AsyncAPI concepts | ||
| - **Open source contributions** - Lower barrier for reviewing and contributing to AsyncAPI projects |
There was a problem hiding this comment.
Use hyphen for compound adjective.
Line 79 reads "Open source contributions" but when used as a compound adjective modifying a noun, it should be hyphenated: "open-source contributions".
Apply this diff:
- **Open source contributions** - Lower barrier for reviewing and contributing to AsyncAPI projects
+ **open-source contributions** - Lower barrier for reviewing and contributing to AsyncAPI projects📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - **Open source contributions** - Lower barrier for reviewing and contributing to AsyncAPI projects | |
| - **open-source contributions** - Lower barrier for reviewing and contributing to AsyncAPI projects |
🧰 Tools
🪛 LanguageTool
[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)
🤖 Prompt for AI Agents
In
pages/blog/asyncapi-vs-code-preview-goes-web-now-available-in-your-browser-.md
around line 79, the phrase "Open source contributions" should be hyphenated when
used as a compound adjective; change it to "open-source contributions"
(lowercase initial letter if following sentence casing) to correctly form the
compound modifier.
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 |
5 participants
Description
Related issue(s)
Fixes #4450
Summary by CodeRabbit