feat: asyncapi specification visualization integration #2898

AceTheCreator · 2024-04-22T19:22:16Z

Implementing the visualization component for the spec using Schyma, yeah I changed the name @derberg 😜.

What changed?

This feature brings a host of improvements that I'm thrilled about. For starters, you'll notice that the rendering quality is noticeably better, making the visualizations more appealing and more accessible to interpret.
I've also worked hard to ensure better compatibility across a wide range of browsers, so no matter what your preferred browsing tool is, you can expect a seamless experience.
I've boosted the overall performance, making everything run smoother and faster. This means less waiting for things to load and more time doing what you do best.

I'm confident these enhancements will make understanding the spec with our visualization component more productive and enjoyable.

What next?

I'm focusing on adding support for allof which seems to be missing in the latest release of Schyma, which to me is the only blocker for moving this PR forward

##TL;DR
Currently, the visualization can be found under /spec-json-schema, but it should be rendered on the docs page(cuz it's more of a doc, tbh). wyt @alequetzalli

cc @derberg @fmvilas @alequetzalli @akshatnema

netlify · 2024-04-22T19:22:33Z

✅ Deploy Preview for asyncapi-website ready!

Name	Link
🔨 Latest commit	`7c9a1ae`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/668d5b6f4cb23e00088a326d
😎 Deploy Preview	https://deploy-preview-2898--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 configuration.

asyncapi-bot · 2024-04-22T19:25:25Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	33
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🟠 PWA	56

Lighthouse ran on https://deploy-preview-2898--asyncapi-website.netlify.app/

derberg

This is beautiful ❤️ and imho deserves better promotion than just a link in a banner

Imho it is nothing different from docs, just differently rendered. So should be in navigation, as 3.0.0 - Visualizer or 3.0.0 - Explorer or whatever - but just there.

it should even be here imho, with some different background, to promote it a bit more

derberg · 2024-04-23T07:46:09Z

pages/docs/reference/specification/v3.0.0.md

@@ -1,3 +1,5 @@
+<DocsCards />


this file is just a copy, automation push it out from spec repo, so you cannot add manually anything here

derberg · 2024-04-23T07:47:48Z

pages/spec-json-schema/index.js

+import React from 'react'
+import Schyma from 'schyma';
+import 'schyma/dist/esm/style.css'
+import schema from '../../config/3.0.0.json';


good for now but of course a followup will be needed to make sure we have automation in place in spec-json-schema to push out all new updates to schema to the website repo

quetzalliwrites · 2024-05-09T23:46:06Z

Hey, @AceTheCreator, woooooooow 🤯 !! Great addition and so educational. I'M IN LOVE AND I'M SWOONING 😻

Yes, this can certainly belong in the docs. I think it makes sense to place it in the Reference section. I'd prob call it something along the lines of "V3 Visualizer."

akshatnema · 2024-06-06T17:03:10Z

components/layout/DocsLayout.tsx

@@ -86,50 +89,76 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou

  const navigation = posts.docsTree;

+  const sidebar = (


Can we have a separate component for the DocsSidebar then? It will be then better maintained in future UI tests, instead of creating multiple components in same file.

Nice suggestion @akshatnema, I'll do that :)

derberg · 2024-06-10T08:50:32Z

From my perspective - all good. So once you separate the component as @akshatnema mentioned, we are ready to go

…site into schyma-package

AceTheCreator · 2024-06-12T19:45:05Z

@akshatnema any idea why the lighthouse test is failing?

derberg · 2024-06-13T14:10:47Z

@AceTheCreator as contributor, next to failing check, don't you see Details link?

here is what logs in details say:

Error: 1 result for https://deploy-preview-2898--asyncapi-website.netlify.app/en
Report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1718220903993-56479.report.html

❌ `categories.best-practices` failure for `minScore` assertion
Expected >= 0.92, but found 0.83

AceTheCreator · 2024-06-13T15:09:23Z

@AceTheCreator as contributor, next to failing check, don't you see Details link?

here is what logs in details say:

Error: 1 result for https://deploy-preview-2898--asyncapi-website.netlify.app/en
Report: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1718220903993-56479.report.html

❌ `categories.best-practices` failure for `minScore` assertion
Expected >= 0.92, but found 0.83

Of course, I looked at the details 😄

I just wasn't sure if the test was failing because of my changes @derberg

AceTheCreator · 2024-06-13T15:16:34Z

I also ran the lighthouse test manually with the deploy URL myself, and everything looks good, hence why I wasn't sure why it's failing 🤷🏾‍♂️

akshatnema · 2024-06-14T05:26:13Z

@AceTheCreator The score is incredibly low compared to the threshold we have set. Can you please check it on the production environment? There should be some issue with the best practices in the code.

AceTheCreator · 2024-06-14T08:51:05Z

Thanks for the fix @akshatnema 🫶🏽

derberg · 2024-06-14T14:09:48Z

@akshatnema I guess you can approve and merge

akshatnema · 2024-06-15T14:20:51Z

config/3.0.0.json

@AceTheCreator are you generating this file from a script or it's a json schema for some validations?

It's the v3 of the spec-json-schema. The plan is to work on a follow-up pr to make sure we have automation in place in spec-json-schema to push out all new updates to schema to the website repo

akshatnema · 2024-06-18T10:55:09Z

styles/globals.css

+.explorer-menu-wrapper > div > div > div > button {
+  margin-top: 0px;
+}


Can't we add a className or span tag there instead of targeting so many nested div elements?

The reason I used nested div was that I want to tailor the change only to affect the menu in the Explorer view

akshatnema · 2024-06-20T05:38:04Z

markdown/docs/reference/specification/v3.0.0-explorer.md

@@ -0,0 +1 @@
+<Visualizer />


@AceTheCreator Can you please add metadata for this page, as it will be used as title and description in the head tag?

…o schyma-package

AceTheCreator added 7 commits January 31, 2024 14:31

.

4ad6eb7

Merge branch 'master' of https://github.com/AceTheCreator/website

f5bab9e

Merge branch 'master' of https://github.com/AceTheCreator/website

8d29596

adding schyma package

1930b68

Merge branch 'master' of https://github.com/AceTheCreator/website

6200f53

adding schyma for schema visualization

a05f1f2

schema update

8575e33

AceTheCreator requested review from quetzalliwrites, asyncapi-bot-eve, derberg, akshatnema, magicmatatjahu, anshgoyalevil and Mayaleeeee as code owners April 22, 2024 19:22

asyncapi-bot requested review from sambhavgupta0705, BhaswatiRoy, J0SAL, octonawish-akcodes, TRohit20 and VaishnaviNandakumar April 22, 2024 19:22

derberg reviewed Apr 23, 2024

View reviewed changes

Merge branch 'master' into schyma-package

fc1800e

quetzalliwrites previously approved these changes May 9, 2024

View reviewed changes

AceTheCreator added 3 commits May 17, 2024 13:36

bumped schyma version

a5f9b81

added visualizer to docs layout

b0c68e0

properly rendering visualizer

6d1bf78

AceTheCreator dismissed quetzalliwrites’s stale review via 6d1bf78 May 17, 2024 15:42

Merge branch 'master' into schyma-package

f5954b6

akshatnema reviewed Jun 6, 2024

View reviewed changes

AceTheCreator and others added 4 commits June 12, 2024 20:28

added docsnavwrapper component

b48560d

Merge branch 'master' into schyma-package

5f6322a

Merge branch 'schyma-package' of https://github.com/AceTheCreator/web…

06845d3

…site into schyma-package

fixed lint error

b5f7874

Trigger Lighthouse

07246c9

Merge branch 'master' into schyma-package

6dc4f9c

akshatnema reviewed Jun 18, 2024

View reviewed changes

akshatnema reviewed Jun 20, 2024

View reviewed changes

AceTheCreator and others added 6 commits June 21, 2024 05:45

Merge branch 'master' into schyma-package

e1c30cc

added metatag to the visualizer component

46a1060

type name change

ed128d6

Merge branch 'master' of https://github.com/AceTheCreator/website int…

20edc50

…o schyma-package

added suggested

a59c172

.

838f249

akshatnema approved these changes Jul 9, 2024

View reviewed changes

akshatnema added 2 commits July 9, 2024 20:58

Merge branch 'master' into schyma-package

0cd60c6

Merge branch 'master' into schyma-package

7c9a1ae

derberg approved these changes Jul 10, 2024

View reviewed changes

akshatnema merged commit 85a42be into asyncapi:master Jul 10, 2024
14 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: asyncapi specification visualization integration #2898

feat: asyncapi specification visualization integration #2898

AceTheCreator commented Apr 22, 2024 •

edited

Loading

netlify bot commented Apr 22, 2024 •

edited

Loading

asyncapi-bot commented Apr 22, 2024 •

edited

Loading

derberg left a comment

derberg Apr 23, 2024

derberg May 20, 2024

derberg Apr 23, 2024

quetzalliwrites commented May 9, 2024

akshatnema Jun 6, 2024

AceTheCreator Jun 7, 2024

derberg commented Jun 10, 2024

AceTheCreator commented Jun 12, 2024

derberg commented Jun 13, 2024

AceTheCreator commented Jun 13, 2024

AceTheCreator commented Jun 13, 2024

akshatnema commented Jun 14, 2024

AceTheCreator commented Jun 14, 2024

derberg commented Jun 14, 2024

akshatnema Jun 15, 2024

AceTheCreator Jun 21, 2024

akshatnema Jun 18, 2024

AceTheCreator Jun 19, 2024

akshatnema Jun 20, 2024

		@@ -86,50 +89,76 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou

		const navigation = posts.docsTree;

		const sidebar = (

		@@ -0,0 +1 @@
		<Visualizer />

feat: asyncapi specification visualization integration #2898

feat: asyncapi specification visualization integration #2898

Conversation

AceTheCreator commented Apr 22, 2024 • edited Loading

What changed?

What next?

netlify bot commented Apr 22, 2024 • edited Loading

✅ Deploy Preview for asyncapi-website ready!

asyncapi-bot commented Apr 22, 2024 • edited Loading

derberg left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

quetzalliwrites commented May 9, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

derberg commented Jun 10, 2024

AceTheCreator commented Jun 12, 2024

derberg commented Jun 13, 2024

AceTheCreator commented Jun 13, 2024

AceTheCreator commented Jun 13, 2024

akshatnema commented Jun 14, 2024

AceTheCreator commented Jun 14, 2024

derberg commented Jun 14, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AceTheCreator commented Apr 22, 2024 •

edited

Loading

netlify bot commented Apr 22, 2024 •

edited

Loading

asyncapi-bot commented Apr 22, 2024 •

edited

Loading