jy95 / docusaurus-json-schema-plugin Goto Github PK
View Code? Open in Web Editor NEWJSON Schema viewer / editor in Docusaurus
Home Page: https://jy95.github.io/docusaurus-json-schema-plugin/
License: GNU Affero General Public License v3.0
JSON Schema viewer / editor in Docusaurus
Home Page: https://jy95.github.io/docusaurus-json-schema-plugin/
License: GNU Affero General Public License v3.0
I created a page to display all my json-schema (i,e /schema), I used schema.mdx
file to display it
In each of the mdx
file, it looks something like this but importing different json file
import JSONSchemaViewer from "@theme/JSONSchemaViewer"
import schema from "@site/static/schema/geo.json"
<JSONSchemaViewer schema={schema} />
In local development, it works as expected.
But when I build and serve it, it doesn't load the content
Not sure if it matters but I'm using javascript
setup of docusaurus
instead of typescript
.
Let me know if more information is required, or if this is a docusaurus
issue, then I can redirect over to their repo.
Thanks!
Describe the bug
A schema with an empty "examples" array at the top level leads to a page crash with the error
Docusaurus error: the <Tabs>
component requires at least one <TabItem>
children component
To Reproduce
The following page will demonstrate the crash
<JSONSchemaViewer
schema={ {
"$schema": "http://json-schema.org/draft-07/schema#",
"examples": []
} }
viewerOptions={
{
"showExamples": true,
}
}
/>
Demonstrated with Docusaurus 3.4.0, docusaurus-json-schema-plugin 1.12.1
Expected behavior
Behave as if the examples array was not present
Screenshots
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
When showing examples within the schema, they are currently output as a single line of JSON, which may be rather long.
Describe the solution you'd like
It would seem helpful to pretty-print the examples somehow. Color would be nice to have, but just adding newlines / indentation would be an easy win.
Additional context
I'm getting my head around the codebase - I think the change needs to go here?
Is it as simple as adding JSON.stringify(item.value, null, 4)
to the <CreateValue>
on line 53?
I hesitate to report this as an issue since it was found while using swizzled source code against the latest Docusaurus beta, so maybe it's not a concern, but I found that the downstream parsing of the return value from this line doesn't work because it is a Set[]
instead of an string[]
(or whatever is in the original array).
docusaurus-json-schema-plugin/src/theme/JSONSchemaViewer/utils/detectTypes.ts
Lines 138 to 140 in 604908b
I believe the TypeScript issue is reported, but I've had no luck with configuring TypeScript compile this to be an array, and had to patch with:
- return [...new Set(declaredTypes)];
+ return Array.from(new Set(declaredTypes));
It would be nice if we could use #
in the url to link directly to specific fields in the json schema representation
Hi,
I was wondering whether it's possible to show the description above the type, which is particularly useful for objects with a lot of fields.
I found that the text and description in the card of the landing page are text-aligned left for
###From:
Is it possible to support it?
A sample
{ $jsonSchema: <JSON Schema object> }
{
$jsonSchema: {
required: [ "name", "major", "gpa", "address" ],
properties: {
name: {
bsonType: "string",
description: "must be a string and is required"
},
address: {
bsonType: "object",
required: [ "zipcode" ],
properties: {
"street": { bsonType: "string" },
"zipcode": { bsonType: "string" }
}
}
}
}
}
If it does, I imagine I would use the same way I did before to display it
import JSONSchemaViewer from "@theme/JSONSchemaViewer"
import schema from "@site/static/schema/mongo.json"
<JSONSchemaViewer schema={schema} />
Thanks
Hi there! thanks for this wonderful plugin :)
Any hint on how to customize the colors used by the JSONSchemaViewer React component and override the ones given by docusaurus?
thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.