Comments (8)
hi @boyney123
Adding
/event-examples
directory would be a very logical solution.The tricky part will be the rendering part and I guess mostly the UI aspect, like where to put the example in the event details screen.
Where to put this?
Maybe an MDX Component that people can choose where to put it.
I might also explore some kind of component that allows people to put things side by side, in your example it could be
<Splitter>
<SchemaViewer/>
<EventExample example="example1" />
</Splitter>
This could render the things side by side and allow you to choose which event example to render
from eventcatalog.
@boyney123 The <splitter>
would be really interesting, since you typically want to have the example and schema properties in 1 view to be able to understand what is shown.
from eventcatalog.
Hi @thim81
Can the Code Examples feature help with your case?
from eventcatalog.
Hey @thim81 ,
Thanks for the idea, just looking at everything now, I was certain this was supported already but I can't find anything 😅, yeah great idea. I guess we could add /event-examples
directory or something inside the events and let peolpe just add any filetype they want and have the UI render it?
Following from @dytyniuk yeah I guess Code Examples could work there too, but I guess if we had an explicit place we could store this stuff might be better?
Any ideas on where we could store examples of the events? My thoughts is add a new directory and if events are in there maybe the UI can render them, or user opt-in into new component
from eventcatalog.
hi @boyney123
Adding /event-examples
directory would be a very logical solution.
The tricky part will be the rendering part and I guess mostly the UI aspect, like where to put the example in the event details screen.
Where to put this?
from eventcatalog.
hi @boyney123
I thought about your suggestion to add the event-examples
directory a bit. And here is what I have come through:
- At first I had a thought, it would be enough to have a single example of the event. Just like with its' schema -- if you have some other example, that could be lookling as a new version of the event. So, an example based on a single file looked legit.
- Although, I have realised, that the event can contain optional properties, and one may need to show more that one example.
- You have already implemeted the
examples
directory to keep code samples. How about adding an extra directory there? Something like this:
└─ events
├─ index.md
├─ schema.json
└─ examples
├─ code-sample.js
└─ event
├─ example-a.json
└─ example-b.json
@thim81 does look like something helping with your issue?
from eventcatalog.
hi @boyney123
I thought about your suggestion to add the
event-examples
directory a bit. And here is what I have come through:
- At first I had a thought, it would be enough to have a single example of the event. Just like with its' schema -- if you have some other example, that could be lookling as a new version of the event. So, an example based on a single file looked legit.
- Although, I have realised, that the event can contain optional properties, and one may need to show more that one example.
- You have already implemeted the
examples
directory to keep code samples. How about adding an extra directory there? Something like this:└─ events ├─ index.md ├─ schema.json └─ examples ├─ code-sample.js └─ event ├─ example-a.json └─ example-b.json
@thim81 does look like something helping with your issue?
Yeah I like this solution, keeping the examples code in the one place, I will implement it and see how it feels and make sure it does not impact the other components. Thanks!
from eventcatalog.
Just thinking of this some more, once this in is place, it would be interesting to extend the asyncapi generator to dump the "examples" in the appropriate files.
from eventcatalog.
Related Issues (20)
- Cannot run build step - Attempted import error: 'useSyncExternalStore' is not exported from 'react' (imported as 'React2'). HOT 8
- Path contains invalid characters HOT 1
- Building a newly created project fails with "Can't resolve '../eventcatalog.styles.css'" HOT 1
- Clicking a non Event/Service graph node results in a runtime error
- Overriding next.js config is for largePageDataBytes
- Security vulnerability: Regular Expression Denial of Service in trim HOT 3
- Glossary for terms used in the business/org
- Event Search clears when enter pressed
- Enable adding new pages to the site HOT 2
- Owners are being removed from domains index.md file
- Data Lake 404's in the demo site
- content security policy need to have unsafe-eval to render the generated event page from AWS event bridge
- Search directly via the URL HOT 1
- [plugin-doc-generator-amazon-eventbridge] customized parts get deleted on generate HOT 3
- Undefined values when rendering SQS as targets in Amazon Event Bridge HOT 2
- yarn build on windows give a lot of ERR and not spitting out the static pages under /out folder
- EventCatalog v2 - What's new, thoughts and plan HOT 11
- Build error related to Mermaid in /events & /services in default demo HOT 4
- EventCatalog sponsorship? HOT 4
- Link "Click on Visualiser" doesn't work when services are Open API specifications
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eventcatalog.