Skip to content

Commit 7a88fff

Browse files
bhchbhch
committed
Update docs
1 parent e68cf13 commit 7a88fff

File tree

17 files changed

+871
-123
lines changed

17 files changed

+871
-123
lines changed

‎docs/.eleventy.cjs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
2+
const markdownIt = require('markdown-it');
3+
const markdownItAnchor = require('markdown-it-anchor');
4+
5+
module.exports = function(eleventyConfig) {
6+
eleventyConfig.addPassthroughCopy('static');
7+
eleventyConfig.addPassthroughCopy('apple-touch-icon.png');
8+
eleventyConfig.addPassthroughCopy('favicon.ico');
9+
10+
eleventyConfig.addPlugin(syntaxHighlight);
11+
12+
eleventyConfig.setLibrary(
13+
'md',
14+
markdownIt({html: true}).use(markdownItAnchor, {
15+
permalink: markdownItAnchor.permalink.linkInsideHeader()
16+
})
17+
);
18+
19+
eleventyConfig.addLiquidFilter('navLinkIsActive', function(item, pageUrl) {
20+
if (item.isBase && item.url !== '/')
21+
return pageUrl.startsWith(item.url);
22+
return item.url === pageUrl;
23+
});
24+
25+
return {
26+
pathPrefix: '/react-json-form/'
27+
};
28+
};

‎docs/_data/docToc.cjs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = function() {
2+
return {
3+
header: 'Documentation',
4+
items: [
5+
{title: 'Install', url: '/docs/install/'},
6+
{title: 'Using in Node', url: '/docs/usage/node/'},
7+
{title: 'Using in Browser', url: '/docs/usage/browser/'},
8+
{title: 'Schema', url: '/docs/schema/'},
9+
{title: 'Developing', url: '/docs/developing/'},
10+
],
11+
};
12+
};

‎docs/_data/project.cjs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
var pjson = require('../../package.json');
2+
3+
4+
module.exports = function() {
5+
return {
6+
node_env: process.env.NODE_ENV || 'development',
7+
version: pjson.version,
8+
title: 'React JSON Form',
9+
name: pjson.name,
10+
url: 'https://bhch.github.io/react-json-form/',
11+
github: pjson.repository.url.replace('.git', ''),
12+
topNav: [
13+
{title: 'Home', url: '/'},
14+
{title: 'Docs', url: '/docs/', isBase: true},
15+
{title: 'Install', url: '/docs/install/', className: 'd-sm-none'},
16+
{title: 'Using in Node', url: '/docs/usage/node/', className: 'd-sm-none'},
17+
{title: 'Using in Browser', url: '/docs/usage/browser/', className: 'd-sm-none'},
18+
{title: 'Schema', url: '/docs/schema/', className: 'd-sm-none'},
19+
{title: 'Developing', url: '/docs/developing/', className: 'd-sm-none'},
20+
{title: 'Playground', url: '/playground/'},
21+
{title: 'Github', url: pjson.repository.url.replace('.git', ''), icon: 'github'},
22+
],
23+
footerNav: [
24+
{title: 'View on Github', url: pjson.repository.url.replace('.git', ''), icon: 'github'},
25+
],
26+
};
27+
};

‎docs/_includes/base.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="h-100">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>{% if title %}{{ title }} - {% endif %}{{ project.title }}</title>
7+
<meta name="description" content="react-json-form docs, live demos and playground">
8+
<link rel="icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}">
9+
<link rel="apple-touch-icon" href="{{ '/apple-touch-icon.png' | url }}" sizes="180x180">
10+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css">
11+
<link rel="stylesheet" type="text/css" href="{{ '/static/css/docs.css' | url }}">
12+
{% if project.node_env == 'production' %}
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
16+
{% endif %}
17+
</head>
18+
19+
<body class="d-flex flex-column h-100">
20+
<div class="flex-grow-1 flex-shrink-0">
21+
<div class="top-nav">
22+
<div class="container-xl">
23+
<div class="row">
24+
<div class="col-12 col-sm-3">
25+
<a href="{{ '/' | url }}" class="d-inline-block">
26+
<img src="{{ '/static/img/logo.svg' | url }}" alt="{{ project.title }}" class="logo">
27+
</a>
28+
<button id="topNavToggler" class="hamburger d-sm-none float-right" type="button">
29+
<span class="hamburger-box">
30+
<span class="hamburger-inner"></span>
31+
</span>
32+
</button>
33+
</div>
34+
<div class="col-12 col-sm-9 d-none d-sm-block top-nav-menu" id="topNavMenu">
35+
<nav class="nav nav-pills justify-content-end">
36+
{%- for item in project.topNav %}
37+
<a href="{{ item.url | url }}" class="nav-link{% if item | navLinkIsActive: page.url %} active{% endif %}{% if item.className %} {{ item.className }}{% endif %}">
38+
{% if item.icon -%}
39+
{% assign iconPath = 'icons/' | append: item.icon | append: '.svg' %}
40+
{%- include iconPath %}
41+
{% endif %}{{ item.title }}
42+
</a>
43+
{%- endfor %}
44+
</nav>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
50+
<div class="page-heading text-center">
51+
<h1>{{ title | upcase }}</h1>
52+
</div>
53+
54+
<div class="container-xl">
55+
{{ content }}
56+
</div>
57+
</div>
58+
59+
<div class="flex-grow-0 flex-shrink-1" style="margin-top: 200px;">
60+
<div class="footer">
61+
<div class="container-xl">
62+
<div class="row">
63+
<div class="col-4">
64+
<img src="{{ '/static/img/logo.svg' | url }}" alt="{{ project.title }}" class="logo">
65+
</div>
66+
<div class="col-8 text-right pt-3 footer-nav">
67+
{% for item in project.footerNav %}
68+
<a href="{{ item.url | url }}">
69+
{% if item.icon -%}
70+
{% assign iconPath = 'icons/' | append: item.icon | append: '.svg' %}
71+
{%- include iconPath %}
72+
{% endif %}{{ item.title }}
73+
</a>
74+
{% endfor %}
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
81+
<script type="text/javascript">
82+
var topNavToggler = document.getElementById('topNavToggler');
83+
var topNavMenu = document.getElementById('topNavMenu');
84+
topNavToggler.addEventListener('click', function(e) {
85+
if (this.classList.contains('active')) {
86+
this.classList.remove('active');
87+
topNavMenu.classList.add('d-none');
88+
} else {
89+
this.classList.add('active');
90+
topNavMenu.classList.remove('d-none');
91+
}
92+
93+
});
94+
</script>
95+
96+
{% for link in scripts -%}
97+
<script type="text/javascript" src="{{ link | url }}"></script>
98+
{% endfor -%}
99+
100+
</body>
101+
</html>

‎docs/_includes/icons/github.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎docs/_includes/page.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
layout: base.html
3+
---
4+
5+
<div class="row mt-4">
6+
<div class="sidebar-container col-12 col-sm-3 d-none d-sm-block">
7+
<div class="sidebar sticky-top">
8+
<div class="toc">
9+
<ul class="nav nav-pills flex-column pt-2">
10+
{% for item in docToc.items %}
11+
<li class="nav-item">
12+
<a href="{{ item.url | url }}" class="nav-link{% if item.url == page.url %} active{% endif %}">{{ item.title }}</a>
13+
</li>
14+
{% endfor %}
15+
</ul>
16+
</div>
17+
</div>
18+
</div>
19+
<div class="content col-12 col-sm-9 col-lg-7">
20+
{{ content }}
21+
</div>
22+
</div>

‎docs/docs/developing.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
layout: page.html
3+
title: Developing
4+
---
5+
6+
This document is about the development of the **react-json-form** library.
7+
8+
Currently, the library has no tests and the code is also a bit of a mess lacking
9+
comments in crucial places.
10+
11+
Please open an [issue on Github]({{ project.github }}) about your desired feature
12+
or bugfix before writing code.
13+
14+
15+
## Contributing code
16+
17+
To be updated.
18+
19+
## Contributing docs
20+
21+
To be updated.

‎docs/docs/index.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
layout: page.html
3+
title: Documentation
4+
---
5+
6+
**React JSON Form** documentation and usage guide.
7+
8+
9+
### Table of contents
10+
11+
{% for item in docToc.items -%}
12+
- [{{ item.title }}]({{ item.url | url }})
13+
{% endfor %}
14+

‎docs/docs/install.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
layout: page.html
3+
title: Install
4+
---
5+
6+
**React JSON Form** can be used either in your Node project or directly in the browser.
7+
8+
## Node
9+
10+
Install it using this command:
11+
12+
```shell
13+
$ npm install @bhch/react-json-form --save
14+
```
15+
16+
## Browser
17+
18+
Before loading the library, you're also required to include the dependencies.
19+
20+
### Loading via CDN
21+
22+
This library is available via Unpkg CDN.
23+
24+
```html
25+
<!-- dependencies -->
26+
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
27+
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
28+
<script src="https://unpkg.com/react-modal@3.15.1/dist/react-modal.min.js"></script>
29+
30+
<!-- library -->
31+
<script src="https://unpkg.com/@bhch/react-json-form@2.0.0/dist/react-json-form.js"></script>
32+
```
33+
34+
### Self hosting
35+
36+
We also provide compiled dist files for every release. This allows you to self host and serve
37+
this library.
38+
39+
[Download the latest release][1] from Github.
40+
41+
Next, extract `react-json-form.js` file from the package. This is the browser suitable build.
42+
It's already minified.
43+
44+
[1]: https://github.com/bhch/react-json-form/releases/download/v{{ project.version }}/react-json-form-{{ project.version }}-dist.zip

‎docs/docs/schema.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
layout: page.html
3+
title: Schema
4+
---
5+
6+
This document will be completed in future.
7+
8+
Meanwhile, all the following things have been documented React JSON Form's sister
9+
project: [django-jsonform](https://django-jsonform.readthedocs.io/en/latest/).
10+
11+
## Schema guide
12+
13+
Documented here: <https://django-jsonform.readthedocs.io/en/latest/schema.html>
14+
15+
16+
## Input types
17+
18+
Documented here: <https://django-jsonform.readthedocs.io/en/latest/guide/inputs.html>
19+
20+
Also, checkout the [playground]({{ '/playground' | url }}).
21+
22+
## Uploading files
23+
24+
Documented here: <https://django-jsonform.readthedocs.io/en/latest/guide/upload.html>
25+
26+
Although the code examples in the document is for Django (Python) backend, but
27+
the concept can be adapted to any language.

0 commit comments

Comments
 (0)