Giter Club home page Giter Club logo

jsonforms2-website's Introduction

JSON Forms Website

The JSON Forms documentation website is built using Docusaurus 2, a modern static website generator.

The content of the website can be found within the content folder. All the logic for demos, the index and the support page can be found within the src folder. Some static files such as images, logos etc. can be found within the static folder.

Installation

Use Node >= 18

npm ci

Local Development

npm start

This command starts a local development server and opens up a Browser window. Most changes are reflected live without having to restart the server.

Build

npm build

This command generates static content into the build directory and can be served using any static contents hosting service.

Copy API docs

./copy-docs.sh <jsonforms-folder-location>

This command will copy the docs from each package of the jsonforms repository into the /static/api folder within this project. The command only takes one argument: The relative path to the jsonforms repository location (e.g. ../jsonforms)

Build with @next text

./build_with_next.sh

This script queries the latest preview version of JSON Forms from Github and writes it into the environment variables.

jsonforms2-website's People

Contributors

abraham avatar alexandrabuzila avatar clemens-msupply avatar dependabot[bot] avatar drewhoo avatar edgarmueller avatar eneufeld avatar freakpants avatar hauptmedia avatar kchobantonov avatar lucas-koehler avatar lukasboll avatar sdirix avatar shivgarg5676 avatar thezoker avatar waypar avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

jsonforms2-website's Issues

Polish Examples

There are multiple small issues in the Examples:

  • Name of page and entry in navigation are mostly inconsistent
  • The max length of 5 does not make any sense in the array control example. It seems weird that the example contains initial invalid data
  • Categorization example is currently broken. It only renders No applicable renderer found.
  • Inferring a UI schema and Inferring both schemata are partially broken. For one of the elements they also render No applicable renderer found.
  • The star renderer in custom control example does not properly showcase how a good custom renderer should look like. A label (for example Rating) is missing. Also the cursor on the star renderer looks weird.

Also see eclipsesource/jsonforms#853 and eclipsesource/jsonforms#854

How to sync state of listings

We should somehow sync the state between the seed and the listings on the website. Copy & paste is probably not the best approach.

Write script to copy generated API docs

When generating API docs via

lerna run build
lerna run doc

within $JSONFORMS_REPO it's tedious to copy the docs over to the website by hand. What I currently do is:

rm -rf $WEBSITE_REPO/public/api/{core, vanilla, material}
cp -r $JSONFORMS_REPO/packages/core/docs $WEBSITE_REPO/public/api/core
cp -r $JSONFORMS_REPO/packages/vanilla/docs $WEBSITE_REPO/public/api/vanilla
cp -r $JSONFORMS_REPO/packages/material/docsl $WEBSITE_REPO/public/api/material

It'd great if we could automate these steps.

Inconsistent description and behavior in rule example

The description of the Rule example (examples/rule) says:

This example uses a Rule to display an additional selection control if the 'Is Alive' checkbox is unchecked. If is is checked the control will be hidden. Give it a try!

However, in the example, the additional selection control is enabled when the 'Is Alive' checkbox is checked and is disabled (not hidden) when the checkbox is unchecked.

selection_564
selection_565

The example or the description should be updated.

Add file references for code samples

Looking at the 'Create a renderer', 'Create a tester', 'Register the renderer' sections, there's no mention about where the listed code should go e.g. index.js, rating.control.js etc.

Review Comments

Landing Page

  • Get Started Button on landing page does not work
  • Read the Docs Button on landing page does not work

Examples

  • Array Example missing the Wrapper to show data, schema and jsonschema
  • Rule Example missing the Wrapper to show data, schema and jsonschema
  • Categorization Example missing the Wrapper to show data, schema and jsonschema
  • Example landing missing
  • Inferring a UI schema Example missing
  • Inferring both schema Example missing
  • Custom controls Example missing

Docs

Support

  • missing

General

  • Can't click on the JSONForms Text in the title, only on the image
  • Copyright and imprint need spacing

Update to Docz 2

  • The site needs some overhaul regarding the theme
  • The embedded examples work but throw errors when switching tabs

Review Website Comments

  • Link to Landing page should be on Full Logo including text in the upper left corner (see #16)

  • Tag line: Complex forms in the blink of an eye

  • Remove Read the Doc button from landing page

  • Add correct fav icon

  • Disclaimer on Landing page: Currently we support primarily

  • Getting started:

    • How do I get an empty react app
    • In case of create-react-app demo app where do I put my store? (=> index.js)
    • DispatchRenderer should be named JSONForms (moved to JSON Forms, see here).
    • Provide import code snippet:
      import Provider from 'react-redux';
      import DispatchRenderer from '@jsonforms/core';
    • Rewrite to match what needs to be done based on empty react app
    • Comments on text in this GDOC:
      https://docs.google.com/document/d/1QPlxKM4YjjttWfdbwoHeGmmy9bvY4fdzYiagepbPhec/edit?usp=sharing
      (please see my comments within the doc)
  • http://jsonforms-beta.de/docs/uischema: Box in Blue with info symbol

  • Docs: Indentation of the 2nd level items in the navigation should be increased otherwise they are on indentation level as selected items in the 1st level.

  • If possible simply: http://jsonforms-beta.de/docs/uischema should also list on the detail page all subitems as links. (simple, if duplicated, which I did for now)

  • Why does API doc open in separate window?

  • At the end: Trigger Website review by Sage (define boundaries!) (see #19)

Add to the support page what we had on http://jsonforms.io/#/support (see #15)

Examples:
http://jsonforms-beta.de/examples/categorization => broken (see respective JSON Forms issue #686)
http://jsonforms-beta.de/examples/custom-controls => Date control broken (fixed in JSON Forms)

Add Twitter link

Spacing and Links

jsonforms

  • There should be a little more whitespace within the white banner to not look cramped.
  • The icons are of different height. This leads to an uncomfortable viewing experience.
  • The links in the top right corner are not visible enough for my taste. Maybe style them bold?

Landing Page Form Breakable

  • Visit http://jsonforms.io
  • Form input Age is presented with a validation error is a required property
  • Enter a valid value for Age in the presented form (e.g. 89)
  • Remove the value again
  • The form shows a new validation error should be <= 100 should be >= 18 should be integer
  • The form is now completely broken and can no longer be used. The console is full of errors.

Deploy error

Failed to minify the code from this file:

    ./node_modules/@jsonforms/core/node_modules/uri-js/dist/esnext/uri.js:42 

Docz Initial Review

Major

  • Cookie banner is shown often:
    1. /docs/api banner is shown
    2. select Core
    3. use back button, banner is shown again
  • API links in /docs/available-actions link to localhost
  • /docs/available-actions "ref resolving" link in text points to non-existing path
  • /docs/tutorial: Materal UI link is broken
  • /docs/uischema/layouts: Links to layouts are broken

Minor

  • /docs/available-actions multi line API specification should be styled differently
  • /docs/custom-renderers: NOT_APPLICABL -> NOT_APPLICABLE
  • /docs/custom-renderers: switch -1 with NOT_APPICABLE
  • /docs/custom-renderers: enumeration has different font and is misaligned
  • /docs/getting-started: enumeration has different font and is misaligned
  • /docs/renderer-sets: Material ui link should link to its main site, not next.
  • /docs/uischema/layouts: First paragraph (in each section) is styled differently
  • /docs/uischema/layouts: There is only one demo link for one type of layout
  • /docs/uischema/rules: First paragraph is styled differently
  • /docs/what-is-jsonforms: How does it work, 2nd paragraph is styled differently
  • /examples/categorization: Should show both categories initially, looks broken with only one
  • /examples/categorization: Weird empty horizontal space before first category
  • order of doc sections is alphabetically sorted instead of content-wise

Nice to have

  • Add landing pages for docs and examples as the menus in the middle of the screen look weird
  • /docs/renderer-sets: There should be at least some words about other renderer sets than material and vanilla.
  • /docs/getting-started: command line should be npm ci instead of npm install
  • /docs/custom-renderers: command line should be npm ci instead of npm install
  • /docs/getting-started: getting started and the starting section in /docs/custom-renderers are redundant. Suggestion: Remove the one of /docs/custom-renderers and link to /docs/getting-started or extract a common component and reuse that in both.
  • /docs/available-actions API anchors will not survive any api change, see /docs/available-actions#initdata-any-schema-jsonschema-uischema-uischemaelement-options-initactionoptions--ajvajv

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.